[weex] use factory pattern to create fresh Vue copies for each Weex instance

yyx990803 · yyx990803 · commit 53d059222f56 · 2017-01-20T16:10:11.000-05:00
diff --git a/build/config.js b/build/config.js
@@ -13,6 +13,15 @@ const banner =
   ' * Released under the MIT License.\n' +
   ' */'
 
+const weexFactoryPlugin = {
+  intro () {
+    return 'module.exports = function weexFactory (exports, renderer) {'
+  },
+  outro () {
+    return '}'
+  }
+}
+
 const builds = {
   // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
   'web-runtime-cjs': {
@@ -77,6 +86,14 @@ const builds = {
     format: 'cjs',
     external: ['stream', 'module', 'vm', 'he', 'de-indent']
   },
+  // Weex runtime factory
+  'weex-factory': {
+    weex: true,
+    entry: path.resolve(__dirname, '../src/entries/weex-factory.js'),
+    dest: path.resolve(__dirname, '../packages/weex-vue-framework/factory.js'),
+    format: 'cjs',
+    plugins: [weexFactoryPlugin]
+  },
   // Weex runtime framework (CommonJS).
   'weex-framework': {
     weex: true,
@@ -111,7 +128,7 @@ function genConfig (opts) {
       flow(),
       buble(),
       alias(Object.assign({}, require('./alias'), opts.alias))
-    ]
+    ].concat(opts.plugins || [])
   }
 
   if (opts.env) {
diff --git a/src/entries/weex-factory.js b/src/entries/weex-factory.js
@@ -0,0 +1,6 @@
+// this entry is built and wrapped with a factory function
+// used to generate a fresh copy of Vue for every Weex instance.
+
+import Vue from 'weex/runtime/index'
+
+exports.Vue = Vue
diff --git a/src/platforms/weex/framework.js b/src/platforms/weex/framework.js
@@ -1,17 +1,18 @@
-import Vue from 'weex/runtime/index'
-import renderer from 'weex/runtime/config'
+import TextNode from 'weex/runtime/text-node'
 
-Vue.weexVersion = '__WEEX_VERSION__'
-export { Vue }
+// this will be preserved during build
+const VueFactory = require('./factory')
 
-const {
+const instances = {}
+const modules = {}
+const components = {}
+
+const renderer = {
+  TextNode,
   instances,
   modules,
   components
-} = renderer
-
-let activeId
-const oriIsReservedTag = (Vue && Vue.config && typeof Vue.config.isReservedTag === 'function') ? Vue.config.isReservedTag : function () {}
+}
 
 /**
  * Prepare framework config, basically about the virtual-DOM and JS bridge.
@@ -35,7 +36,6 @@ export function reset () {
   delete renderer.Element
   delete renderer.Comment
   delete renderer.sendTasks
-  Vue.config.isReservedTag = oriIsReservedTag
 }
 
 /**
@@ -63,9 +63,6 @@ export function createInstance (
   data,
   env = {}
 ) {
-  // Set active instance id and put some information into `instances` map.
-  activeId = instanceId
-
   // Virtual-DOM object.
   const document = new renderer.Document(instanceId, config.bundleUrl)
 
@@ -78,7 +75,7 @@ export function createInstance (
   // The latest callback id, incremental.
   const callbackId = 1
 
-  instances[instanceId] = {
+  const instance = instances[instanceId] = {
     instanceId, config, data,
     document, callbacks, callbackId
   }
@@ -95,26 +92,13 @@ export function createInstance (
   }
   Object.freeze(weexInstanceVar)
 
-  // Each instance has a independent `Vue` variable and it should have
-  // all top-level public APIs.
-  const subVue = Vue.extend({})
-
-  // ensure plain-object components are extended from the subVue
-  subVue.options._base = subVue
-
-  // expose global utility
-  ;['util', 'set', 'delete', 'nextTick', 'version', 'weexVersion', 'config'].forEach(name => {
-    subVue[name] = Vue[name]
-  })
-
-  // expose weex native module getter on subVue prototype so that
-  // vdom runtime modules can access native modules via vnode.context
-  subVue.prototype._requireWeexModule = moduleGetter
+  // Each instance has a independent `Vue` mdoule instance
+  const Vue = instance.Vue = createVueModuleInstance(instanceId, moduleGetter)
 
   // The function which create a closure the JS Bundle will run in.
   // It will declare some instance variables like `Vue`, HTML5 Timer APIs etc.
   const instanceVars = Object.assign({
-    Vue: subVue,
+    Vue,
     weex: weexInstanceVar,
     __weex_require_module__: weexInstanceVar.requireModule // deprecated
   }, timerAPIs)
@@ -131,7 +115,7 @@ export function createInstance (
  */
 export function destroyInstance (instanceId) {
   const instance = instances[instanceId] || {}
-  if (instance.app instanceof Vue) {
+  if (instance.app instanceof instance.Vue) {
     instance.app.$destroy()
   }
   delete instances[instanceId]
@@ -146,11 +130,11 @@ export function destroyInstance (instanceId) {
  */
 export function refreshInstance (instanceId, data) {
   const instance = instances[instanceId] || {}
-  if (!(instance.app instanceof Vue)) {
+  if (!(instance.app instanceof instance.Vue)) {
     return new Error(`refreshInstance: instance ${instanceId} not found!`)
   }
   for (const key in data) {
-    Vue.set(instance.app, key, data[key])
+    instance.Vue.set(instance.app, key, data[key])
   }
   // Finally `refreshFinish` signal needed.
   renderer.sendTasks(instanceId + '', [{ module: 'dom', method: 'refreshFinish', args: [] }], -1)
@@ -162,7 +146,7 @@ export function refreshInstance (instanceId, data) {
  */
 export function getRoot (instanceId) {
   const instance = instances[instanceId] || {}
-  if (!(instance.app instanceof Vue)) {
+  if (!(instance.app instanceof instance.Vue)) {
     return new Error(`getRoot: instance ${instanceId} not found!`)
   }
   return instance.app.$el.toJSON()
@@ -177,7 +161,7 @@ export function getRoot (instanceId) {
  */
 export function receiveTasks (instanceId, tasks) {
   const instance = instances[instanceId] || {}
-  if (!(instance.app instanceof Vue)) {
+  if (!(instance.app instanceof instance.Vue)) {
     return new Error(`receiveTasks: instance ${instanceId} not found!`)
   }
   const { callbacks, document } = instance
@@ -229,68 +213,75 @@ export function registerModules (newModules) {
  * @param {array} newComponents
  */
 export function registerComponents (newComponents) {
-  const config = Vue.config
-  const newConfig = {}
   if (Array.isArray(newComponents)) {
     newComponents.forEach(component => {
       if (!component) {
         return
       }
       if (typeof component === 'string') {
         components[component] = true
-        newConfig[component] = true
       } else if (typeof component === 'object' && typeof component.type === 'string') {
         components[component.type] = component
-        newConfig[component.type] = true
       }
     })
-    const oldIsReservedTag = config.isReservedTag
-    config.isReservedTag = name => {
-      return newConfig[name] || oldIsReservedTag(name)
-    }
   }
 }
 
-// Hack `Vue` behavior to handle instance information and data
-// before root component created.
-Vue.mixin({
-  beforeCreate () {
-    const options = this.$options
-    const parentOptions = (options.parent && options.parent.$options) || {}
-
-    // root component (vm)
-    if (options.el) {
-      // record instance info
-      const instance = instances[activeId] || {}
-      this.$instanceId = activeId
-      options.instanceId = activeId
-      this.$document = instance.document
-
-      // set external data of instance
-      const dataOption = options.data
-      const internalData = (typeof dataOption === 'function' ? dataOption() : dataOption) || {}
-      options.data = Object.assign(internalData, instance.data)
-
-      // record instance by id
-      instance.app = this
-
-      activeId = undefined
-    } else {
-      this.$instanceId = options.instanceId = parentOptions.instanceId
-    }
-  }
-})
-
 /**
- * @deprecated Just instance variable `weex.config`
- * Get instance config.
- * @return {object}
+ * Create a fresh instance of Vue for each Weex instance.
  */
-Vue.prototype.$getConfig = function () {
-  const instance = instances[this.$instanceId] || {}
-  if (instance.app instanceof Vue) {
-    return instance.config
+function createVueModuleInstance (instanceId, moduleGetter) {
+  const exports = {}
+  VueFactory(exports, renderer)
+  const Vue = exports.Vue
+
+  const instance = instances[instanceId]
+
+  // patch reserved tag detection to account for dynamically registered
+  // components
+  const isReservedTag = Vue.config.isReservedTag || (() => false)
+  Vue.config.isReservedTag = name => {
+    return components[name] || isReservedTag(name)
+  }
+
+  // expose weex-specific info
+  Vue.prototype.$instanceId = instanceId
+  Vue.prototype.$document = instance.document
+
+  // expose weex native module getter on subVue prototype so that
+  // vdom runtime modules can access native modules via vnode.context
+  Vue.prototype.$requireWeexModule = moduleGetter
+
+  // Hack `Vue` behavior to handle instance information and data
+  // before root component created.
+  Vue.mixin({
+    beforeCreate () {
+      const options = this.$options
+      // root component (vm)
+      if (options.el) {
+        // set external data of instance
+        const dataOption = options.data
+        const internalData = (typeof dataOption === 'function' ? dataOption() : dataOption) || {}
+        options.data = Object.assign(internalData, instance.data)
+        // record instance by id
+        instance.app = this
+      }
+    }
+  })
+
+  /**
+   * @deprecated Just instance variable `weex.config`
+   * Get instance config.
+   * @return {object}
+   */
+  Vue.prototype.$getConfig = function () {
+    const instance = instances[this.$instanceId] || {}
+    if (instance.app instanceof Vue) {
+      return instance.config
+    }
   }
+
+  return Vue
 }
 
 /**
diff --git a/src/platforms/weex/runtime/modules/transition.js b/src/platforms/weex/runtime/modules/transition.js
@@ -102,7 +102,7 @@ function enter (_, vnode) {
     enterHook && enterHook(el, cb)
 
     if (needAnimation) {
-      const animation = vnode.context._requireWeexModule('animation')
+      const animation = vnode.context.$requireWeexModule('animation')
       animation.transition(el.ref, {
         styles: endState,
         duration: transitionProperties.duration || 0,
@@ -188,7 +188,7 @@ function leave (vnode, rm) {
   }
 
   function performLeave () {
-    const animation = vnode.context._requireWeexModule('animation')
+    const animation = vnode.context.$requireWeexModule('animation')
     // the delayed leave may have already been cancelled
     if (cb.cancelled) {
       return
diff --git a/src/platforms/weex/runtime/node-ops.js b/src/platforms/weex/runtime/node-ops.js
@@ -1,4 +1,5 @@
-import renderer from './config'
+/* globals renderer */
+// renderer is injected by weex factory wrapper
 
 export const namespaceMap = {}
 
diff --git a/src/platforms/weex/runtime/text-node.js b/src/platforms/weex/runtime/text-node.js
@@ -1,16 +1,9 @@
 let latestNodeId = 1
 
-function TextNode (text) {
+export default function TextNode (text) {
   this.instanceId = ''
   this.nodeId = latestNodeId++
   this.parentNode = null
   this.nodeType = 3
   this.text = text
 }
-
-export default {
-  TextNode,
-  instances: {},
-  modules: {},
-  components: {}
-}
diff --git a/src/platforms/weex/util/index.js b/src/platforms/weex/util/index.js
@@ -1,14 +1,18 @@
+/* globals renderer */
+
 import { makeMap } from 'shared/util'
-import renderer from '../runtime/config'
 
 export const isReservedTag = makeMap(
   'div,img,image,input,switch,indicator,list,scroller,cell,template,text,slider,image'
 )
+
 export function isUnaryTag () { /* console.log('isUnaryTag') */ }
 export function mustUseProp () { /* console.log('mustUseProp') */ }
 export function getTagNamespace () { /* console.log('getTagNamespace') */ }
 export function isUnknownElement () { /* console.log('isUnknownElement') */ }
+
 export function query (el, document) {
+  // renderer is injected by weex factory wrapper
   const placeholder = new renderer.Comment('root')
   placeholder.hasAttribute = placeholder.removeAttribute = function () {} // hack for patch
   document.documentElement.appendChild(placeholder)
