@mpxjs/core 2.9.38 → 2.9.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.38",
+  "version": "2.9.39",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.38",
+    "@mpxjs/utils": "^2.9.39",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -47,5 +47,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "5e2740e2091edda91eda9ffe775989c7fd9838df"
+  "gitHead": "87957d360b18806f16d169612d924d383ac043c4"
 }

package/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)

package/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)
+  }
+}

package/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
+}

package/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

package/src/dynamic/vnode/css-select/cssauron.js

@@ -0,0 +1,445 @@
+import tokenizer from './tokenizer'
+
+export default function language (lookups, matchComparison) {
+  return function (selector, moduleId) {
+    return parse(
+      selector,
+      remap(lookups),
+      moduleId,
+      matchComparison || caseSensitiveComparison
+    )
+  }
+}
+
+function remap (opts) {
+  // 对于字符串类型的 value 转化为函数
+  for (const key in opts) {
+    if (opt_okay(opts, key)) {
+      /* eslint-disable-next-line */
+      opts[key] = Function(
+        'return function(node, attr) { return node.' + opts[key] + ' }'
+      )
+      opts[key] = opts[key]()
+    }
+  }
+
+  return opts
+}
+
+function opt_okay (opts, key) {
+  return Object.prototype.hasOwnProperty.call(opts, key) && typeof opts[key] === 'string'
+}
+
+function parse (selector, options, moduleId, matchComparison) {
+  const stream = tokenizer()
+  // const default_subj = true
+  const selectors = [[]]
+  let bits = selectors[0]
+
+  // 逆向关系
+  const traversal = {
+    '': any_parents,
+    '>': direct_parent,
+    '+': direct_sibling,
+    '~': any_sibling
+  }
+
+  stream.on('data', group)
+  stream.end(selector)
+
+  function group (token) {
+    if (token.type === 'comma') {
+      selectors.unshift((bits = []))
+
+      return
+    }
+
+    // 获取节点之间的关系路径，匹配的规则从右往左依次进行，因此在后面的匹配规则需要存储在栈结构的前面
+    if (token.type === 'op' || token.type === 'any-child') {
+      bits.unshift(traversal[token.data]) // 获取节点之间关系的操作数
+      bits.unshift(check()) // 添加空的匹配操作数
+
+      return
+    }
+
+    bits[0] = bits[0] || check()
+    const crnt = bits[0]
+
+    if (token.type === '!') {
+      crnt.subject = selectors[0].subject = true
+
+      return
+    }
+
+    crnt.push(
+      token.type === 'class'
+        ? listContains(token.type, token.data)
+        : token.type === 'attr'
+          ? attr(token)
+          : token.type === ':' || token.type === '::'
+            ? pseudo(token)
+            : token.type === '*'
+              ? Boolean
+              : matches(token.type, token.data, matchComparison)
+    )
+  }
+
+  return selector_fn
+
+  // 单节点对比
+  function selector_fn (node, as_boolean) {
+    if (node.data?.moduleId !== moduleId) {
+      return
+    }
+    let current, length, subj
+
+    const orig = node
+    const set = []
+
+    for (let i = 0, len = selectors.length; i < len; ++i) {
+      bits = selectors[i]
+      current = entry // 当前 bits 检测规则
+      length = bits.length
+      node = orig // 引用赋值
+      subj = []
+
+      let j = 0
+      // 步长为2，因为2个节点之间的关系中间会有一个 OP 操作符
+      for (j = 0; j < length; j += 2) {
+        node = current(node, bits[j], subj)
+
+        if (!node) {
+          break
+        }
+
+        // todo 这里的规则和步长设计的很巧妙
+        current = bits[j + 1] // 改变当前的 bits 检测规则
+      }
+
+      if (j >= length) {
+        if (as_boolean) {
+          return true
+        }
+
+        add(!bits.subject ? [orig] : subj)
+      }
+    }
+
+    if (as_boolean) {
+      return false
+    }
+
+    return !set.length ? false : set.length === 1 ? set[0] : set
+
+    function add (items) {
+      let next
+
+      while (items.length) {
+        next = items.shift()
+
+        if (set.indexOf(next) === -1) {
+          set.push(next)
+        }
+      }
+    }
+  }
+
+  // 匹配操作数
+  function check () {
+    _check.bits = []
+    _check.subject = false
+    _check.push = function (token) {
+      _check.bits.push(token)
+    }
+
+    return _check
+
+    function _check (node, subj) {
+      for (let i = 0, len = _check.bits.length; i < len; ++i) {
+        if (!_check.bits[i](node)) {
+          return false
+        }
+      }
+
+      if (_check.subject) {
+        subj.push(node)
+      }
+
+      return true
+    }
+  }
+
+  function listContains (type, data) {
+    return function (node) {
+      let val = options[type](node)
+      val = Array.isArray(val) ? val : val ? val.toString().split(/\s+/) : []
+      return val.indexOf(data) >= 0
+    }
+  }
+
+  function attr (token) {
+    return token.data.lhs
+      ? valid_attr(options.attr, token.data.lhs, token.data.cmp, token.data.rhs)
+      : valid_attr(options.attr, token.data)
+  }
+
+  function matches (type, data, matchComparison) {
+    return function (node) {
+      return matchComparison(type, options[type](node), data)
+    }
+  }
+
+  function any_parents (node, next, subj) {
+    do {
+      node = options.parent(node)
+    } while (node && !next(node, subj))
+
+    return node
+  }
+
+  function direct_parent (node, next, subj) {
+    node = options.parent(node)
+
+    return node && next(node, subj) ? node : null
+  }
+
+  function direct_sibling (node, next, subj) {
+    const parent = options.parent(node)
+    let idx = 0
+
+    const children = options.children(parent)
+
+    for (let i = 0, len = children.length; i < len; ++i) {
+      if (children[i] === node) {
+        idx = i
+
+        break
+      }
+    }
+
+    return children[idx - 1] && next(children[idx - 1], subj)
+      ? children[idx - 1]
+      : null
+  }
+
+  function any_sibling (node, next, subj) {
+    const parent = options.parent(node)
+
+    const children = options.children(parent)
+
+    for (let i = 0, len = children.length; i < len; ++i) {
+      if (children[i] === node) {
+        return null
+      }
+
+      if (next(children[i], subj)) {
+        return children[i]
+      }
+    }
+
+    return null
+  }
+
+  function pseudo (token) {
+    return valid_pseudo(options, token.data, matchComparison)
+  }
+}
+
+function entry (node, next, subj) {
+  return next(node, subj) ? node : null
+}
+
+function valid_pseudo (options, match, matchComparison) {
+  switch (match) {
+    case 'empty':
+      return valid_empty(options)
+    case 'first-child':
+      return valid_first_child(options)
+    case 'last-child':
+      return valid_last_child(options)
+    case 'root':
+      return valid_root(options)
+  }
+
+  if (match.indexOf('contains') === 0) {
+    return valid_contains(options, match.slice(9, -1))
+  }
+
+  if (match.indexOf('any') === 0) {
+    return valid_any_match(options, match.slice(4, -1), matchComparison)
+  }
+
+  if (match.indexOf('not') === 0) {
+    return valid_not_match(options, match.slice(4, -1), matchComparison)
+  }
+
+  if (match.indexOf('nth-child') === 0) {
+    return valid_nth_child(options, match.slice(10, -1))
+  }
+
+  return function () {
+    return false
+  }
+}
+
+function valid_not_match (options, selector, matchComparison) {
+  const fn = parse(selector, options, matchComparison)
+
+  return not_function
+
+  function not_function (node) {
+    return !fn(node, true)
+  }
+}
+
+function valid_any_match (options, selector, matchComparison) {
+  const fn = parse(selector, options, matchComparison)
+
+  return fn
+}
+
+function valid_attr (fn, lhs, cmp, rhs) {
+  return function (node) {
+    const attr = fn(node, lhs)
+
+    if (!cmp) {
+      return !!attr
+    }
+
+    if (cmp.length === 1) {
+      return attr === rhs
+    }
+
+    if (attr === undefined || attr === null) {
+      return false
+    }
+
+    return checkattr[cmp.charAt(0)](attr, rhs)
+  }
+}
+
+function valid_first_child (options) {
+  return function (node) {
+    return options.children(options.parent(node))[0] === node
+  }
+}
+
+function valid_last_child (options) {
+  return function (node) {
+    const children = options.children(options.parent(node))
+
+    return children[children.length - 1] === node
+  }
+}
+
+function valid_empty (options) {
+  return function (node) {
+    return options.children(node).length === 0
+  }
+}
+
+function valid_root (options) {
+  return function (node) {
+    return !options.parent(node)
+  }
+}
+
+function valid_contains (options, contents) {
+  return function (node) {
+    return options.contents(node).indexOf(contents) !== -1
+  }
+}
+
+function valid_nth_child (options, nth) {
+  let test = function () {
+    return false
+  }
+  if (nth === 'odd') {
+    nth = '2n+1'
+  } else if (nth === 'even') {
+    nth = '2n'
+  }
+  const regexp = /( ?([-|+])?(\d*)n)? ?((\+|-)? ?(\d+))? ?/
+  const matches = nth.match(regexp)
+  if (matches) {
+    let growth = 0
+    if (matches[1]) {
+      const positiveGrowth = matches[2] !== '-'
+      growth = parseInt(matches[3] === '' ? 1 : matches[3])
+      growth = growth * (positiveGrowth ? 1 : -1)
+    }
+    let offset = 0
+    if (matches[4]) {
+      offset = parseInt(matches[6])
+      const positiveOffset = matches[5] !== '-'
+      offset = offset * (positiveOffset ? 1 : -1)
+    }
+    if (growth === 0) {
+      if (offset !== 0) {
+        test = function (children, node) {
+          return children[offset - 1] === node
+        }
+      }
+    } else {
+      test = function (children, node) {
+        const validPositions = []
+        const len = children.length
+        for (let position = 1; position <= len; position++) {
+          const divisible = (position - offset) % growth === 0
+          if (divisible) {
+            if (growth > 0) {
+              validPositions.push(position)
+            } else {
+              if ((position - offset) / growth >= 0) {
+                validPositions.push(position)
+              }
+            }
+          }
+        }
+        for (let i = 0; i < validPositions.length; i++) {
+          if (children[validPositions[i] - 1] === node) {
+            return true
+          }
+        }
+        return false
+      }
+    }
+  }
+  return function (node) {
+    const children = options.children(options.parent(node))
+
+    return test(children, node)
+  }
+}
+
+const checkattr = {
+  $: check_end,
+  '^': check_beg,
+  '*': check_any,
+  '~': check_spc,
+  '|': check_dsh
+}
+
+function check_end (l, r) {
+  return l.slice(l.length - r.length) === r
+}
+
+function check_beg (l, r) {
+  return l.slice(0, r.length) === r
+}
+
+function check_any (l, r) {
+  return l.indexOf(r) > -1
+}
+
+function check_spc (l, r) {
+  return l.split(/\s+/).indexOf(r) > -1
+}
+
+function check_dsh (l, r) {
+  return l.split('-').indexOf(r) > -1
+}
+
+function caseSensitiveComparison (type, pattern, data) {
+  return pattern === data
+}