@mpxjs/webpack-plugin 2.9.38 → 2.9.40

package/lib/template-compiler/dynamic.js

@@ -0,0 +1,13 @@
+const uselessAttrs = ['parent', 'exps', 'unary', 'attrsMap']
+const uselessArrAttrs = ['children', 'attrsList']
+
+function stringify (ast) {
+  return JSON.stringify(ast, (k, v) => {
+    if (uselessAttrs.includes(k)) return undefined
+    if (uselessArrAttrs.includes(k) && v && !v.length) return undefined
+    if (k === 'tag' && v === 'temp-node') return 'block'
+    return v
+  })
+}
+
+module.exports.stringify = stringify

package/lib/template-compiler/index.js

@@ -3,6 +3,10 @@ const bindThis = require('./bind-this')
 const parseRequest = require('../utils/parse-request')
 const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
+const { MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
+const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
+const { createTemplateEngine, createSetupTemplate } = require('@mpxjs/template-engine')
+const { stringify } = require('./dynamic')
 
 module.exports = function (raw) {
   this.cacheable()
@@ -18,15 +22,15 @@ module.exports = function (raw) {
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
-  const componentsMap = mpx.componentsMap[packageName]
-  const pagesMap = mpx.pagesMap
   const wxsContentMap = mpx.wxsContentMap
   const optimizeRenderRules = mpx.optimizeRenderRules
   const usingComponents = queryObj.usingComponents || []
   const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
   const isNative = queryObj.isNative
+  const ctorType = queryObj.ctorType
   const hasScoped = queryObj.hasScoped
+  const runtimeCompile = queryObj.isDynamic
   const moduleId = queryObj.moduleId || '_' + mpx.pathHash(resourcePath)
 
   let optimizeRenderLevel = 0
@@ -51,12 +55,12 @@ module.exports = function (raw) {
   const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
+    runtimeCompile,
     usingComponents,
     componentPlaceholder,
     hasComment,
     isNative,
-    isComponent: !!componentsMap[resourcePath],
-    isPage: !!pagesMap[resourcePath],
+    ctorType,
     mode,
     env,
     srcMode: localSrcMode || globalSrcMode,
@@ -70,7 +74,7 @@ module.exports = function (raw) {
     i18n,
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
-    forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
+    forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile,
     hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
@@ -80,7 +84,7 @@ module.exports = function (raw) {
     }
   }
 
-  const result = compiler.serialize(ast)
+  let result = runtimeCompile ? '' : compiler.serialize(ast)
 
   if (isNative) {
     return result
@@ -98,7 +102,11 @@ global.currentInject = {
   moduleId: ${JSON.stringify(moduleId)}
 };\n`
 
-  const rawCode = compiler.genNode(ast)
+  if (runtimeCompile || queryObj.dynamicRuntime) {
+    resultSource += 'global.currentInject.dynamic = true;\n'
+  }
+
+  const rawCode = runtimeCompile ? '' : compiler.genNode(ast)
   if (rawCode) {
     try {
       const ignoreMap = Object.assign({
@@ -160,5 +168,26 @@ global.currentInject.getRefsData = function () {
     extractedResultSource: resultSource
   })
 
+  if (queryObj.mpxCustomElement) {
+    this.cacheable(false)
+    const templateEngine = createTemplateEngine(mpx.mode)
+    result += `${createSetupTemplate()}\n` + templateEngine.buildTemplate(mpx.getPackageInjectedTemplateConfig(packageName))
+  }
+
+  // 运行时编译的组件直接返回基础模板的内容，并产出动态文本内容
+  if (runtimeCompile) {
+    // 包含了运行时组件的template模块必须每次都创建（但并不是每次都需要build），用于收集组件节点信息，传递信息以禁用父级extractor的缓存
+    this.emitFile(MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
+
+    const templateInfo = {
+      templateAst: stringify(ast),
+      ...meta.runtimeInfo
+    }
+
+    // 以 package 为维度存储，meta 上的数据也只是存储了这个组件的 template 上获取的信息，需要在 dependency 里面再次进行合并操作
+    this._module.addPresentationalDependency(new RecordRuntimeInfoDependency(packageName, resourcePath, { type: 'template', info: templateInfo }))
+    // 运行时组件的模版直接返回空，在生成模版静态文件的时候(beforeModuleAssets)再动态注入
+  }
+
   return result
 }

package/lib/template-compiler/parse-exps.js

@@ -0,0 +1,148 @@
+// todo 待讨论 parser + interpreter 的部分是否需要单独抽个 package 出去
+const acorn = require('acorn')
+const walk = require('acorn-walk')
+
+/**
+ * 基于目前小程序所支持的模版语法实现，对于不支持的语法在编译阶段直接报错
+ */
+
+const NODE_TYPE = {
+  Program: 1,
+  Identifier: 2,
+  Literal: 3,
+  ArrayExpression: 28,
+  ObjectExpression: 29,
+  Property: 31,
+  UnaryExpression: 33,
+  // UpdateExpression: 34,
+  BinaryExpression: 35,
+  LogicalExpression: 37,
+  MemberExpression: 38,
+  ConditionalExpression: 39,
+  ExpressionStatement: 40
+}
+
+const error = function (msg) {
+  throw new Error(`[Mpx dynamic expression parser error]: ${msg}`)
+}
+
+walk.full = function full (node, baseVisitor, state, override) {
+  const stack = []
+    ; (function c (node, st, override, s) {
+    const type = override || node.type
+    if (!baseVisitor[type]) {
+      error(`${type} grammar is not supported in the template`)
+    }
+    baseVisitor[type](node, st, c, s)
+  })(node, state, override, stack)
+
+  // 限定 bodyStack 长度，仅支持单表达式的写法
+  const bodyStackIndex = 1
+  if (stack[bodyStackIndex].length > 1) {
+    error('only support one expression in the template')
+  }
+  return stack
+}
+
+const baseVisitor = {}
+
+baseVisitor.UnaryExpression = function (node, st, c, s) {
+  // const nodeType = node.type === 'UnaryExpression' ? NODE_TYPE.UnaryExpression : NODE_TYPE.UpdateExpression
+  const nodeType = NODE_TYPE.UnaryExpression
+  const argumentNodeStack = []
+  s.push(nodeType, node.operator, argumentNodeStack, node.prefix)
+  c(node.argument, st, 'Expression', argumentNodeStack)
+}
+
+baseVisitor.BinaryExpression = baseVisitor.LogicalExpression = function (node, st, c, s) {
+  const nodeType = node.type === 'BinaryExpression' ? NODE_TYPE.BinaryExpression : NODE_TYPE.LogicalExpression
+  const leftNodeStack = []
+  const rightNodeStack = []
+  // todo operator 可以严格按照小程序模版能力进行限制
+  s.push(nodeType, node.operator, leftNodeStack, rightNodeStack)
+  c(node.left, st, 'Expression', leftNodeStack)
+  c(node.right, st, 'Expression', rightNodeStack)
+}
+
+baseVisitor.ConditionalExpression = (node, st, c, s) => {
+  const testNodeStack = []
+  const consequentNodeStack = []
+  const alternateNodeStack = []
+  s.push(NODE_TYPE.ConditionalExpression, testNodeStack, consequentNodeStack, alternateNodeStack)
+  c(node.test, st, 'Expression', testNodeStack)
+  c(node.consequent, st, 'Expression', consequentNodeStack)
+  c(node.alternate, st, 'Expression', alternateNodeStack)
+}
+
+const visitor = walk.make({
+  Program (node, st, c, s) {
+    const bodyStack = []
+    s.push(NODE_TYPE.Program, bodyStack)
+    for (let i = 0, list = node.body; i < list.length; i += 1) {
+      const stmt = list[i]
+      bodyStack[i] = []
+      c(stmt, st, 'Statement', bodyStack[i])
+    }
+  },
+  ExpressionStatement (node, st, c, s) {
+    const expressionStack = []
+    s.push(NODE_TYPE.ExpressionStatement, expressionStack)
+    c(node.expression, st, null, expressionStack)
+  },
+  MemberExpression (node, st, c, s) {
+    const objectNodeStack = []
+    const propertyNodeStack = []
+    s.push(NODE_TYPE.MemberExpression, objectNodeStack, propertyNodeStack, node.computed)
+    c(node.object, st, 'Expression', objectNodeStack)
+    c(node.property, st, 'Expression', propertyNodeStack)
+  },
+  ArrayExpression (node, st, c, s) {
+    const elementsStack = []
+    s.push(NODE_TYPE.ArrayExpression, elementsStack)
+    node.elements.forEach((elt, index) => {
+      if (elt) {
+        elementsStack[index] = []
+        c(elt, st, 'Expression', elementsStack[index])
+      }
+    })
+  },
+  ObjectExpression (node, st, c, s) {
+    const propertiesStack = []
+    s.push(NODE_TYPE.ObjectExpression, propertiesStack)
+    node.properties.forEach((prop, index) => {
+      propertiesStack[index] = []
+      c(prop, st, null, propertiesStack[index])
+    })
+  },
+  Property (node, st, c, s) {
+    const keyNodeStack = []
+    const valueNodeStack = []
+    s.push(NODE_TYPE.Property, keyNodeStack, valueNodeStack, node.kind)
+    c(node.key, st, 'Expression', keyNodeStack)
+    c(node.value, st, 'Expression', valueNodeStack)
+  },
+  Literal (node, st, c, s) {
+    // todo node.raw/-1 目前应该都用不到，后续可以优化
+    s.push(NODE_TYPE.Literal, node.value, node.raw, -1) // -1?
+  },
+  Identifier (node, st, c, s) {
+    s.push(NODE_TYPE.Identifier, node.name)
+  },
+  Expression (node, st, c, s) {
+    c(node, st, null, s)
+  },
+  Statement (node, st, c, s) {
+    c(node, st, null, s)
+  }
+}, baseVisitor)
+
+module.exports = {
+  parseExp (str) {
+    // 确保 str 都是为 expressionStatement
+    if (!/^\(*\)$/.test(str)) {
+      str = `(${str})`
+    }
+    return walk.full(acorn.parse(str, { ecmaVersion: 5 }), visitor)
+  },
+  NODE_TYPE
+}

package/lib/utils/resolve-mpx-custom-element-path.js

@@ -0,0 +1,7 @@
+module.exports = function (packageName) {
+  let subPath = ''
+  if (packageName !== 'main') {
+    subPath = '/' + packageName
+  }
+  return subPath + `/mpx-custom-element-${packageName}`
+}

package/lib/utils/shallow-stringify.js

@@ -0,0 +1,17 @@
+const hasOwn = require('./has-own')
+
+module.exports = function shallowStringify (obj, isTemplateExp) {
+    const arr = []
+    for (const key in obj) {
+        if (hasOwn(obj, key)) {
+            let value = obj[key]
+            if (Array.isArray(value)) {
+                value = `[${value.join(',')}]`
+            } else if (typeof value === 'object') {
+                value = shallowStringify(value, isTemplateExp)
+            }
+            arr.push(isTemplateExp ? `${key}:${value}` : `'${key}':${value}`)
+        }
+    }
+    return isTemplateExp ? `({${arr.join(',')}})` : `{${arr.join(',')}}`
+}

package/lib/web/processTemplate.js

@@ -75,8 +75,7 @@ module.exports = function (template, {
           usingComponents,
           hasComment,
           isNative,
-          isComponent: ctorType === 'component',
-          isPage: ctorType === 'page',
+          ctorType,
           mode,
           env,
           srcMode: templateSrcMode,

package/lib/wxml/loader.js

@@ -5,6 +5,7 @@ const config = require('../config')
 const createHelpers = require('../helpers')
 const isUrlRequest = require('../utils/is-url-request')
 const parseRequest = require('../utils/parse-request')
+const genDynamicTemplate = require('../runtime-render/gen-dynamic-template')
 
 let count = 0
 
@@ -26,6 +27,14 @@ module.exports = function (content) {
   const mode = mpx.mode
   const localSrcMode = queryObj.mode
   const customAttributes = options.attributes || mpx.attributes || []
+  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+  const isDynamic = queryObj.isDynamic
+
+  const exportsString = 'module.exports = '
+
+  if (isDynamic) {
+    return exportsString + JSON.stringify(genDynamicTemplate(packageName)) + ';'
+  }
 
   const { getRequestString } = createHelpers(this)
 
@@ -71,8 +80,6 @@ module.exports = function (content) {
   content = content.join('')
   content = JSON.stringify(content)
 
-  const exportsString = 'module.exports = '
-
   return exportsString + content.replace(/__HTMLLINK__\d+__/g, (match) => {
     if (!data[match]) return match
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.38",
+  "version": "2.9.40",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -27,6 +27,8 @@
     "@better-scroll/slide": "^2.5.1",
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
+    "@mpxjs/template-engine": "^2.8.7",
+    "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
     "css": "^2.2.1",
@@ -82,5 +84,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "5e2740e2091edda91eda9ffe775989c7fd9838df"
+  "gitHead": "af534454668449ab020db3566cc5af98049286fb"
 }