create-api support $props $events

src/common/helpers/create-api-component.js

@@ -61,19 +61,76 @@ export default function createAPIComponent(Vue, Component, events = [], single =
     },
     create(config, renderFn, single) {
       const ownerInstance = this
-      const component = api.open(parseRenderData(config, events), renderFn, single)
+      const renderData = parseRenderData(config, events)
+
+      cancelWatchProps()
+      processPropsAndEvents()
+
+      const component = api.open(renderData, renderFn, single)
       if (component.__cube__parent !== ownerInstance) {
         component.__cube__parent = ownerInstance
         const beforeDestroy = function () {
+          cancelWatchProps()
           if (component.__cube__parent === ownerInstance) {
             component.remove()
           }
           ownerInstance.$off('hook:beforeDestroy', beforeDestroy)
           component.__cube__parent = null
         }
-        ownerInstance.$on('hook:beforeDestroy', beforeDestroy)
+        ownerInstance.$on && ownerInstance.$on('hook:beforeDestroy', beforeDestroy)
       }
       return component
+
+      function processPropsAndEvents() {
+        const $props = renderData.props.$props
+        const $events = renderData.props.$events
+        if ($props) {
+          delete renderData.props.$props
+
+          const watchKeys = []
+          const watchPropKeys = []
+          Object.keys($props).forEach((key) => {
+            const propKey = $props[key]
+            if (typeof propKey === 'string' && propKey in ownerInstance) {
+              // get instance value
+              renderData.props[key] = ownerInstance[propKey]
+              watchKeys.push(key)
+              watchPropKeys.push(propKey)
+            } else {
+              renderData.props[key] = propKey
+            }
+          })
+          if (ownerInstance.$watch) {
+            ownerInstance.__createAPI_watcher = ownerInstance.$watch(function () {
+              const props = {}
+              watchKeys.forEach((key, i) => {
+                props[key] = ownerInstance[watchPropKeys[i]]
+              })
+              return props
+            }, function (newProps) {
+              component && component.$updateProps(newProps)
+            })
+          }
+        }
+        if ($events) {
+          delete renderData.props.$events
+
+          Object.keys($events).forEach((event) => {
+            let eventHandler = $events[event]
+            if (typeof eventHandler === 'string' && eventHandler in ownerInstance) {
+              eventHandler = ownerInstance[eventHandler]
+            }
+            renderData.on[event] = eventHandler
+          })
+        }
+      }
+
+      function cancelWatchProps() {
+        if (ownerInstance.__createAPI_watcher) {
+          ownerInstance.__createAPI_watcher()
+          ownerInstance.__createAPI_watcher = null
+        }
+      }
     }
   }
   return api