Feat dynamic v2

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     App: 'readonly',
     __mpx_mode__: 'readonly',
     __mpx_env__: 'readonly',
+    __mpx_dynamic_runtime__: 'readonly',
     getRegExp: 'readonly',
     getCurrentPages: 'readonly'
   },
@@ -33,6 +34,6 @@ module.exports = {
   },
   env: {
     'jest/globals': true,
-    'browser': true
+    browser: true
   }
 }

docs-vuepress/articles/mpx2.md

@@ -776,7 +776,7 @@ class MPXProxy {
       this.miniRenderData = {}
       for (let key in renderData) { // 遍历数据访问路径
         if (renderData.hasOwnProperty(key)) {
-          let item = renderData[key] 
+          let item = renderData[key]
           let data = item[0]
           let firstKey = item[1] // 某个字段 path 的第一个 key 值
           if (this.localKeys.indexOf(firstKey) > -1) {
@@ -817,7 +817,7 @@ class MPXProxy {
  * @param {Object} renderData
  * @return {Object} processedRenderData
  */
-export function preprocessRenderData (renderData) { 
+export function preprocessRenderData (renderData) {
   // method for get key path array
   const processKeyPathMap = (keyPathMap) => {
     let keyPath = Object.keys(keyPathMap)

packages/core/src/core/proxy.js

@@ -44,6 +44,8 @@ import {
   ONHIDE,
   ONRESIZE
 } from './innerLifecycle'
+import contextMap from '../dynamic/vnode/context'
+import { getAst } from '../dynamic/astCache'
 
 let uid = 0
 
@@ -131,6 +133,8 @@ export default class MpxProxy {
   }
 
   created () {
+    // 缓存上下文，在 destoryed 阶段删除
+    contextMap.set(this.uid, this.target)
     if (__mpx_mode__ !== 'web') {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
@@ -190,6 +194,8 @@ export default class MpxProxy {
   }
 
   unmounted () {
+    // 页面/组件销毁清除上下文的缓存
+    contextMap.remove(this.uid)
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
@@ -379,7 +385,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准备下次收集
@@ -478,6 +487,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)
@@ -545,12 +573,30 @@ 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 __getAst = this.target.__getAst?.bind(this.target)
+    const moduleId = this.target.__moduleId
+    const dynamicTarget = this.target.__dynamic
+
     const effect = this.effect = new ReactiveEffect(() => {
       // pre render for props update
       if (this.propsUpdatedFlag) {
         this.updatePreRender()
       }
-
+      if (dynamicTarget || __getAst) {
+        try {
+          const ast = getAst(__getAst, moduleId)
+          return _r(false, _g(ast, moduleId))
+        } catch (e) {
+          e.errType = 'mpx-dynamic-render'
+          e.errmsg = e.message
+          if (!__mpx_dynamic_runtime__) {
+            return error('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.', this.options.mpxFileResource, e)
+          } else {
+            return error('Dynamic rendering error', this.options.mpxFileResource, e)
+          }
+        }
+      }
       if (this.target.__injectedRender) {
         try {
           return this.target.__injectedRender(_i, _c, _r, _sc)

packages/core/src/dynamic/astCache.js

@@ -0,0 +1,25 @@
+import { isFunction, isObject, error } from '@mpxjs/utils'
+
+class DynamicAstCache {
+  #astCache = {}
+
+  getAst (id) {
+    return this.#astCache[id]
+  }
+
+  setAst (id, ast) {
+    this.#astCache[id] = ast
+  }
+}
+
+export const dynamic = new DynamicAstCache()
+
+export const getAst = (__getAst, moduleId) => {
+  if ((__getAst && isFunction(__getAst))) {
+    const ast = __getAst()
+    if (!isObject(ast)) return error('__getAst returned data is not of type object')
+    return Object.values(ast)[0]
+  } else {
+    return dynamic.getAst(moduleId)
+  }
+}

packages/core/src/dynamic/dynamicRenderMixin.js

@@ -0,0 +1,77 @@
+import { hasOwn, isObject, error } from '@mpxjs/utils'
+import genVnodeTree from './vnode/render'
+import contextMap from './vnode/context'
+import { CREATED } from '../core/innerLifecycle'
+
+function dynamicRefsMixin () {
+  return {
+    [CREATED] () {
+      // 处理ref场景，如果是在容器组件的上下文渲染
+      if (this.mpxCustomElement) {
+        this._getRuntimeRefs()
+      }
+    },
+    methods: {
+      _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
+                    }
+                  })
+                }
+              }
+            })
+          }
+        }
+      }
+    }
+  }
+}
+
+function dynamicSlotMixin () {
+  if (__mpx_mode__ === 'ali') {
+    return {
+      props: { slots: {} }
+    }
+  } else {
+    return {
+      properties: { slots: { type: Object } }
+    }
+  }
+}
+
+function dynamicRenderHelperMixin () {
+  return {
+    methods: {
+      _g (astData, moduleId) {
+        const location = this.__mpxProxy && this.__mpxProxy.options.mpxFileResource
+        if (astData && isObject(astData) && hasOwn(astData, 'template')) {
+          const vnodeTree = genVnodeTree(astData, [this], { moduleId, location })
+          return vnodeTree
+        } else {
+          error('Dynamic component get the wrong json ast data, please check.', location, {
+            errType: 'mpx-dynamic-render',
+            errmsg: 'invalid json ast data'
+          })
+        }
+      }
+    }
+  }
+}
+
+export {
+  dynamicRefsMixin,
+  dynamicSlotMixin,
+  dynamicRenderHelperMixin
+}

packages/core/src/dynamic/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