[feat]feat-dynamic

packages/core/src/core/proxy.js

@@ -44,6 +44,7 @@ import {
   ONHIDE,
   ONRESIZE
 } from './innerLifecycle'
+import contextMap from '../vnode/context'
 
 let uid = 0
 
@@ -129,6 +130,8 @@ export default class MpxProxy {
   }
 
   created () {
+    // 缓存上下文，在 destoryed 阶段删除
+    contextMap.set(this.uid, this.target)
     if (__mpx_mode__ !== 'web') {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
@@ -188,6 +191,8 @@ export default class MpxProxy {
   }
 
   unmounted () {
+    // 页面/组件销毁清除上下文的缓存
+    contextMap.remove(this.uid)
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
@@ -377,7 +382,10 @@ export default class MpxProxy {
     this.doRender(this.processRenderDataWithStrictDiff(renderData))
   }
 
-  renderWithData (skipPre) {
+  renderWithData (skipPre, vnode) {
+    if (vnode) {
+      return this.doRenderWithVNode(vnode)
+    }
     const renderData = skipPre ? this.renderData : preProcessRenderData(this.renderData)
     this.doRender(this.processRenderDataWithStrictDiff(renderData))
     // 重置renderData准备下次收集
@@ -476,6 +484,25 @@ export default class MpxProxy {
     return result
   }
 
+  doRenderWithVNode (vnode) {
+    if (!this._vnode) {
+      this.target.__render({ r: vnode })
+    } else {
+      let diffPath = diffAndCloneA(vnode, this._vnode).diffData
+      if (!isEmptyObject(diffPath)) {
+        // 构造 diffPath 数据
+        diffPath = Object.keys(diffPath).reduce((preVal, curVal) => {
+          const key = 'r' + curVal
+          preVal[key] = diffPath[curVal]
+          return preVal
+        }, {})
+        this.target.__render(diffPath)
+      }
+    }
+    // 缓存本地的 vnode 用以下一次 diff
+    this._vnode = diffAndCloneA(vnode).clone
+  }
+
   doRender (data, cb) {
     if (typeof this.target.__render !== 'function') {
       error('Please specify a [__render] function to render view.', this.options.mpxFileResource)
@@ -543,15 +570,22 @@ export default class MpxProxy {
     const _c = this.target._c.bind(this.target)
     const _r = this.target._r.bind(this.target)
     const _sc = this.target._sc.bind(this.target)
+    const _g = this.target._g.bind(this.target)
     const effect = this.effect = new ReactiveEffect(() => {
       // pre render for props update
       if (this.propsUpdatedFlag) {
         this.updatePreRender()
       }
 
+      // const ast = this.target.dynamicRender?.() || this.getTplAst(this.moduleId)
+
+      // if (ast) {
+      //   return _r(_g(ast))
+      // }
+
       if (this.target.__injectedRender) {
         try {
-          return this.target.__injectedRender(_i, _c, _r, _sc)
+          return this.target.__injectedRender(_i, _c, _r, _sc, _g)
         } catch (e) {
           warn('Failed to execute render function, degrade to full-set-data mode.', this.options.mpxFileResource, e)
           this.render()

packages/core/src/platform/builtInMixins/index.js

@@ -10,6 +10,7 @@ import pageScrollMixin from './pageScrollMixin'
 import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
+import runtimeModulesMixin from './runtimeModulesMixin'
 
 export default function getBuiltInMixins (options, type) {
   let bulitInMixins = []
@@ -39,7 +40,8 @@ export default function getBuiltInMixins (options, type) {
       bulitInMixins = bulitInMixins.concat([
         renderHelperMixin(),
         showMixin(type),
-        i18nMixin()
+        i18nMixin(),
+        runtimeModulesMixin()
       ])
     }
   }

packages/core/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,5 +1,6 @@
 import { setByPath, error, hasOwn, dash2hump } from '@mpxjs/utils'
 import Mpx from '../../index'
+import contextMap from '../../vnode/context'
 
 const datasetReg = /^data-(.+)$/
 
@@ -16,6 +17,11 @@ function collectDataset (props) {
   return dataset
 }
 
+function logCallbackNotFound (context, callbackName) {
+  const location = context.__mpxProxy && context.__mpxProxy.options.mpxFileResource
+  error(`Instance property [${callbackName}] is not function, please check.`, location)
+}
+
 export default function proxyEventMixin () {
   const methods = {
     __invoke ($event) {
@@ -48,6 +54,9 @@ export default function proxyEventMixin () {
       }
       const eventConfigs = target.dataset.eventconfigs || {}
       const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || []
+      // 如果有 mpxuid 说明是运行时组件，那么需要设置对应的上下文
+      const rootRuntimeContext = contextMap.get(target.dataset.mpxuid)
+      const context = rootRuntimeContext || this
       let returnedValue
       curEventConfig.forEach((item) => {
         const callbackName = item[0]
@@ -71,10 +80,10 @@ export default function proxyEventMixin () {
               }
             })
             : [$event]
-          if (typeof this[callbackName] === 'function') {
-            returnedValue = this[callbackName].apply(this, params)
+          if (typeof context[callbackName] === 'function') {
+            returnedValue = context[callbackName].apply(context, params)
           } else {
-            error(`Instance property [${callbackName}] is not function, please check.`, location)
+            logCallbackNotFound(context, callbackName)
           }
         }
       })

packages/core/src/platform/builtInMixins/refsMixin.js

@@ -1,5 +1,6 @@
 import { CREATED, BEFORECREATE, BEFOREUPDATE, UNMOUNTED } from '../../core/innerLifecycle'
 import { noop, error, getEnvObj } from '@mpxjs/utils'
+import contextMap from '../../vnode/context'
 
 const envObj = getEnvObj()
 
@@ -44,6 +45,13 @@ export default function getRefsMixin () {
       this.__refCacheMap.clear()
       this.__asyncRefCacheMap.clear()
     },
+    [CREATED] () {
+      // todo 需要确认下这部分的逻辑，如果是在 beforeCreate 钩子里面执行，部分数据取不到
+      // 如果是在运行时组件的上下文渲染
+      if (this.mpxCustomElement) {
+        this.__getRuntimeRefs()
+      }
+    },
     methods: {
       __getRefs () {
         if (this.__getRefsData) {
@@ -72,6 +80,29 @@ export default function getRefsMixin () {
             return ref.all ? this.selectAllComponents(selector) : this.selectComponent(selector)
           }
         }
+      },
+      __getRuntimeRefs () {
+        const vnodeContext = contextMap.get(this.uid)
+        if (vnodeContext) {
+          const refsArr = vnodeContext.__getRefsData && vnodeContext.__getRefsData()
+          if (Array.isArray(refsArr)) {
+            refsArr.forEach((ref) => {
+              const all = ref.all
+              if (!vnodeContext.$refs[ref.key] || (all && !vnodeContext.$refs[ref.key].length)) {
+                const refNode = this.__getRefNode(ref)
+                if ((all && refNode.length) || refNode) {
+                  Object.defineProperty(vnodeContext.$refs, ref.key, {
+                    enumerable: true,
+                    configurable: true,
+                    get: () => {
+                      return refNode
+                    }
+                  })
+                }
+              }
+            })
+          }
+        }
       }
     }
   }

packages/core/src/platform/builtInMixins/renderHelperMixin.js

@@ -1,4 +1,6 @@
 import { getByPath, hasOwn, isObject } from '@mpxjs/utils'
+import genVnodeTree from '../../vnode/render'
+import dynamicComponentsMap from '../../vnode/staticMap'
 
 export default function renderHelperMixin () {
   return {
@@ -36,8 +38,13 @@ export default function renderHelperMixin () {
       _sc (key) {
         return (this.__mpxProxy.renderData[key] = this[key])
       },
-      _r (skipPre) {
-        this.__mpxProxy.renderWithData(skipPre)
+      _r (skipPre, vnode) {
+        this.__mpxProxy.renderWithData(skipPre, vnode)
+      },
+      _g (moduleId) {
+        const { template = {}, styles = [] } = dynamicComponentsMap[moduleId]
+        const vnodeTree = genVnodeTree(template, [this], styles, moduleId)
+        return vnodeTree
       }
     }
   }

packages/core/src/platform/builtInMixins/runtimeModulesMixin.js

@@ -0,0 +1,33 @@
+import { CREATED } from '../../core/innerLifecycle'
+import staticMap from '../../vnode/staticMap'
+
+// todo 后续这部分的逻辑应该收敛至业务侧
+export default function getRuntimeModulesMixin () {
+  return {
+    data: {
+      __mpxDynamicLoaded: false
+    },
+    [CREATED] () {
+      const runtimeModules = this.__getRuntimeModules && this.__getRuntimeModules()
+      if (runtimeModules) {
+        // 判断是否有还未获取的组件内容
+        const moduleIds = []
+        for (const component in runtimeModules) {
+          const moduleId = runtimeModules[component]
+          if (!staticMap[moduleId]) {
+            moduleIds.push(moduleId)
+          }
+        }
+        if (typeof this.mpxLoadDynamic === 'function' && moduleIds.length) {
+          // todo: 依赖业务侧的约定，在业务侧的具体实现一个资源位对应一个 id，请求数据后在内存当中挂载
+          this.mpxLoadDynamic().then(data => {
+            this.__mpxDynamicLoaded = true
+            Object.assign(staticMap, data)
+          }).catch(e => {
+            // do something
+          })
+        }
+      }
+    }
+  }
+}

packages/core/src/platform/patch/ali/getDefaultOptions.js

@@ -63,6 +63,16 @@ function transformApiForProxy (context, currentInject) {
         }
       })
     }
+    if (currentInject.getRuntimeModules) {
+      Object.defineProperties(context, {
+        __getRuntimeModules: {
+          get () {
+            return currentInject.getRuntimeModules
+          },
+          configurable: false
+        }
+      })
+    }
   }
 }
 

packages/core/src/platform/patch/wx/getDefaultOptions.js

@@ -101,6 +101,16 @@ function transformApiForProxy (context, currentInject) {
         }
       })
     }
+    if (currentInject.getRuntimeModules) {
+      Object.defineProperties(context, {
+        __getRuntimeModules: {
+          get () {
+            return currentInject.getRuntimeModules
+          },
+          configurable: false
+        }
+      })
+    }
   }
 }
 

packages/core/src/vnode/context.js

@@ -0,0 +1,17 @@
+const cache = {}
+
+const contextMap = {
+  set (id, context) {
+    cache[id] = context
+  },
+  get (id) {
+    return cache[id]
+  },
+  remove (id) {
+    if (cache[id]) {
+      delete cache[id]
+    }
+  }
+}
+
+export default contextMap