@mpxjs/webpack-plugin 2.10.18 → 2.10.20

package/lib/template-compiler/gen-node-react.js

@@ -31,7 +31,24 @@ function mapAttrName (name) {
   return name
 }
 
+function genTemplate (node) {
+  if (!node.children || !node.children.length) return 'function(){}'
+  const children = node.children.map(child => genNode(child)).filter(c => c)
+  if (!children.length) return 'function(){}'
+
+  let content
+  if (children.length === 1) {
+    content = children[0]
+  } else {
+    // 模版存在多个根节点时，使用 block 包裹
+    content = `createElement(getComponent("block"), null, ${children.join(', ')})`
+  }
+  // data 作为 this 传入，createElement, getComponent 作为参数传入
+  return `function(createElement, getComponent){return ${content}}`
+}
+
 function genNode (node, isRoot = false) {
+  if (node.isDeleted) return ''
   let exp = ''
   if (node) {
     if (node.type === 3) {
@@ -46,11 +63,20 @@ function genNode (node, isRoot = false) {
     if (node.type === 1) {
       if (node.tag !== 'temp-node') {
         if (node.for && !node.forProcessed) {
-          exp += genFor(node)
-        } else if (node.if && !node.ifProcessed) {
-          exp += genIf(node)
-        } else {
-          const attrExpMap = (node.exps || []).reduce((map, { exp, attrName }) => {
+          return genFor(node)
+        }
+        if (node.if && !node.ifProcessed) {
+          return genIf(node)
+        }
+      }
+      if (node.tag === 'template') {
+        if (node.templateInfo) {
+          const data = node.templateInfo.data || '{}'
+          // 模版中需要支持宿主组件的事件响应，同时天然支持__iter/__getSlot等帮助函数，故使用Object.create(this)创建作用域
+          exp += `(typeof getTemplate === "function" && getTemplate(${node.templateInfo.is}) || function(){}).call(Object.assign(Object.create(this), ${data}), createElement, getComponent)`
+        }
+      } else if (node.tag !== 'temp-node') {
+        const attrExpMap = (node.exps || []).reduce((map, { exp, attrName }) => {
             if (attrName) {
               map[attrName] = exp
             }
@@ -85,7 +111,6 @@ function genNode (node, isRoot = false) {
             }
             exp += ')'
           }
-        }
       } else {
         const nodes = node.children.map((child) => {
           return genNode(child)
@@ -102,4 +127,7 @@ function genNode (node, isRoot = false) {
   return exp
 }
 
-module.exports = genNode
+module.exports = {
+  genNode,
+  genTemplate
+}

package/lib/template-compiler/index.js

@@ -33,6 +33,7 @@ module.exports = function (raw) {
   const hasScoped = queryObj.hasScoped
   const runtimeCompile = queryObj.isDynamic
   const moduleId = queryObj.moduleId || mpx.getModuleId(resourcePath, false, queryObj.moduleId ? null : this)
+  const isStatic = queryObj.isStatic
 
   let optimizeRenderLevel = 0
   for (const rule of optimizeRenderRules) {
@@ -42,15 +43,15 @@ module.exports = function (raw) {
     }
   }
 
-  const warn = (msg) => {
+  const warn = (msg, loc) => {
     this.emitWarning(
-      new Error('[Mpx template warning][' + this.resource + ']: ' + msg)
+      new Error('[Mpx template warning][' + (loc || this.resourcePath) + ']: ' + msg)
     )
   }
 
-  const error = (msg) => {
+  const error = (msg, loc) => {
     this.emitError(
-      new Error('[Mpx template error][' + this.resource + ']: ' + msg)
+      new Error('[Mpx template error][' + (loc || this.resourcePath) + ']: ' + msg)
     )
   }
 
@@ -75,10 +76,10 @@ module.exports = function (raw) {
     // 这里需传递rawResourcePath和wxsContentMap保持一致
     filePath: rawResourcePath,
     i18n,
-    checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
-    globalComponents: Object.keys(mpx.globalComponents),
+    globalComponents: Object.keys(mpx.globalComponents || {}),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile,
     hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     dynamicTemplateRuleRunner: mpx.dynamicTemplateRuleRunner
   })
 
@@ -89,7 +90,8 @@ module.exports = function (raw) {
   }
 
   let result = runtimeCompile ? '' : compiler.serialize(root)
-  if (isNative) {
+  if (isNative || isStatic) {
+    // 对于原生小程序组件和静态模版无需注入运行时信息，直接返回模版编译结果
     return result
   }
 

package/lib/utils/const.js

@@ -7,5 +7,8 @@ module.exports = {
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
   PARENT_MODULE_ID: '__pid',
-  MPX_TAG_PAGE_SELECTOR: 'mpx-page'
+  MPX_TAG_PAGE_SELECTOR: 'mpx-page',
+  // web / template is：具名 wx 模版子组件标签前缀（与 compiler 中 AST 替换一致）
+  MPX_TEMPLATE_COMPONENT_PREFIX: 'mpx-tpl-',
+  STYLE_PAD_PLACEHOLDER: 'mpx-style-pad-placeholder'
 }

package/lib/utils/dom-tag-config.js

@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-input,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-camera'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/lib/utils/partial-compile-rules.js

@@ -0,0 +1,27 @@
+const { matchCondition } = require('./match-condition')
+
+const hasTypedRules = rules => !!(rules && (rules.pages || rules.page || rules.components || rules.component))
+
+const getPartialCompileRules = (rules, type) => {
+  if (!rules) return null
+
+  if (type === 'page') {
+    return rules.pages || rules.page || (hasTypedRules(rules) ? null : rules)
+  }
+
+  if (type === 'component') {
+    return rules.components || rules.component || null
+  }
+
+  return null
+}
+
+const isPartialCompileExcluded = (resourcePath, rules, type) => {
+  const targetRules = getPartialCompileRules(rules, type)
+  return !!(targetRules && !matchCondition(resourcePath, targetRules))
+}
+
+module.exports = {
+  getPartialCompileRules,
+  isPartialCompileExcluded
+}

package/lib/utils/pre-process-json.js

@@ -58,6 +58,9 @@ module.exports = function ({
           waterfall: true,
           warn: emitWarning,
           error: emitError,
+          diagnostic: {
+            file: resourcePath
+          },
           meta: rulesMeta
         }
         if (ctorType !== 'app') {

package/lib/utils/source-location.js

@@ -0,0 +1,96 @@
+const path = require('path')
+const { codeFrameColumns } = require('@babel/code-frame')
+const { SourceMapConsumer } = require('source-map')
+
+function offsetToPosition (source, offset) {
+  const before = source.slice(0, offset)
+  const lines = before.split(/\r\n|\r|\n/)
+  return {
+    line: lines.length,
+    column: lines[lines.length - 1].length + 1
+  }
+}
+
+function offsetToLoc (source, start, end) {
+  const loc = {
+    start: offsetToPosition(source, start)
+  }
+  if (end != null) {
+    loc.end = offsetToPosition(source, end)
+  }
+  return loc
+}
+
+function normalizeLoc (loc) {
+  if (!loc) return
+  if (loc.start) return loc
+  if (loc.line) {
+    return {
+      start: {
+        line: loc.line,
+        column: loc.column || 1
+      }
+    }
+  }
+}
+
+function createCodeFrame (source, loc) {
+  loc = normalizeLoc(loc)
+  if (!source || !loc || !loc.start) return ''
+  return codeFrameColumns(source, loc, {
+    highlightCode: false
+  })
+}
+
+function originalPositionFor (map, loc) {
+  loc = normalizeLoc(loc)
+  if (!map || !loc || !loc.start) return
+  if (typeof map === 'string') {
+    try {
+      map = JSON.parse(map)
+    } catch (e) {
+      return
+    }
+  }
+  let consumer
+  try {
+    consumer = new SourceMapConsumer(map)
+  } catch (e) {
+    return
+  }
+  const original = consumer.originalPositionFor({
+    line: loc.start.line,
+    column: Math.max((loc.start.column || 1) - 1, 0)
+  })
+  if (!original || !original.source || !original.line) return
+  const sourceIndex = map.sources && map.sources.indexOf(original.source)
+  return {
+    file: original.source,
+    loc: {
+      start: {
+        line: original.line,
+        column: (original.column || 0) + 1
+      }
+    },
+    source: sourceIndex > -1 && map.sourcesContent && map.sourcesContent[sourceIndex],
+    generatedLoc: loc
+  }
+}
+
+function readSource (file, inputFileSystem) {
+  if (!file || !inputFileSystem) return ''
+  try {
+    return inputFileSystem.readFileSync(path.resolve(file), 'utf-8')
+  } catch (e) {
+    return ''
+  }
+}
+
+module.exports = {
+  offsetToPosition,
+  offsetToLoc,
+  normalizeLoc,
+  createCodeFrame,
+  originalPositionFor,
+  readSource
+}

package/lib/web/compile-wx-template-fragment.js

@@ -0,0 +1,68 @@
+/**
+ * 将 serialize 得到的 **wxml template** 定义片段（单根 HTML）在构建期编译为 Vue 2.7 render / staticRenderFns。
+ * 与业务依赖的 `vue` 包对齐：使用 `vue/compiler-sfc` 的 `compileTemplate`（同 vue-loader / @vue/compiler-sfc 与 runtime 配对），运行期仅需 `vue.runtime`。
+ */
+
+const path = require('path')
+
+function tryRequireVueCompilerSfc () {
+  try {
+    return require('vue/compiler-sfc')
+  } catch (e) {
+    try {
+      const vueRoot = path.dirname(require.resolve('vue/package.json'))
+      return require(path.join(vueRoot, 'compiler-sfc'))
+    } catch (e2) {
+      throw new Error(
+        '[Mpx] Failed to load vue/compiler-sfc. Install vue@^2.7 (same version as your app, e.g. 2.7.16) for Web wxml template compilation.'
+      )
+    }
+  }
+}
+
+function normalizeCompileErrors (errors) {
+  if (!errors || !errors.length) return ''
+  return errors.map((e) => (typeof e === 'string' ? e : (e && e.msg) || String(e))).join('\n')
+}
+
+/**
+ * @param {string} source 单根片段（与 serializeWxTemplateDefinition 输出一致，对应 wxml 侧 `<template name="…">` 体）
+ * @param {{ emitError?: (msg: string) => void, definitionName?: string, resourcePath?: string, isProduction?: boolean }} ctx
+ * @returns {{ block: string }} `block` 为含 `var render` / `var staticRenderFns` 的脚本片段（与 compileTemplate 的 `code` 一致）
+ */
+function compileTemplateFragment (source, ctx) {
+  const { compileTemplate } = tryRequireVueCompilerSfc()
+  const filename = ctx.resourcePath || `wxml-template-${ctx.definitionName || 'anon'}.html`
+  const result = compileTemplate({
+    source,
+    filename,
+    isProduction: ctx.isProduction
+  })
+  const where = ctx.definitionName
+    ? `wxml template "${ctx.definitionName}"`
+    : (ctx.resourcePath || 'wxml template fragment')
+  if (result.errors && result.errors.length) {
+    const msg = normalizeCompileErrors(result.errors)
+    const full = `Web ${where} compile error: ${msg}`
+    if (ctx.emitError) ctx.emitError(full)
+    throw new Error(full)
+  }
+  return {
+    block: result.code
+  }
+}
+
+/**
+ * 用 compileTemplate 产出的 `block` 包一层 IIFE，再调用 createTemplateComponent（block 内已声明 `render` / `staticRenderFns`）。
+ * 用于将 wxml template 的 Web 侧子组件选项与宿主 `createTemplateComponent` 对接。
+ * @param {string} block compileTemplate 返回的 `code`
+ * @param {string} innerOptionProps createTemplateComponent 除 render/staticRenderFns 外的选项片段，例如 `name: "x", components: ...`
+ */
+function wrapCreateTemplateComponentWithBlock (block, innerOptionProps) {
+  return `(function () {\n${block}\n  return createTemplateComponent({ render, staticRenderFns, ${innerOptionProps} })\n})()`
+}
+
+module.exports = {
+  compileTemplateFragment,
+  wrapCreateTemplateComponentWithBlock
+}

package/lib/web/index.js

@@ -103,6 +103,7 @@ module.exports = function ({
         ctorType,
         srcMode,
         moduleId,
+        hasScoped,
         isProduction,
         componentGenerics,
         jsonConfig: jsonRes.jsonObj,
@@ -110,6 +111,7 @@ module.exports = function ({
         builtInComponentsMap: templateRes.builtInComponentsMap,
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
+        wxTemplateComponentsInfo: templateRes.wxTemplateComponentsInfo,
         localComponentsMap: jsonRes.localComponentsMap
       }, callback)
     }

package/lib/web/processJSON.js

@@ -35,15 +35,15 @@ module.exports = function (jsonContent, {
 
   const context = loaderContext.context
 
-  const emitWarning = (msg) => {
+  const emitWarning = (msg, loc) => {
     loaderContext.emitWarning(
-      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
-  const emitError = (msg) => {
+  const emitError = (msg, loc) => {
     loaderContext.emitError(
-      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
@@ -107,6 +107,9 @@ module.exports = function (jsonContent, {
       waterfall: true,
       warn: emitWarning,
       error: emitError,
+      diagnostic: {
+        file: loaderContext.resourcePath
+      },
       data: {
         // polyfill global usingComponents
         globalComponents: mpx.globalComponents

package/lib/web/processScript.js

@@ -10,12 +10,14 @@ const {
   stringifyRequest,
   buildI18n
 } = require('./script-helper')
+const { compileTemplateFragment, wrapCreateTemplateComponentWithBlock } = require('./compile-wx-template-fragment')
 
 module.exports = function (script, {
   loaderContext,
   ctorType,
   srcMode,
   moduleId,
+  hasScoped,
   isProduction,
   componentGenerics,
   jsonConfig,
@@ -23,6 +25,7 @@ module.exports = function (script, {
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
+  wxTemplateComponentsInfo,
   localComponentsMap
 }, callback) {
   const { projectRoot, appInfo, webConfig, i18n } = loaderContext.getMpx()
@@ -46,8 +49,14 @@ module.exports = function (script, {
       delete attrs.setup
       return attrs
     },
-    content (script) {
-      let content = `\n  import { processComponentOption, getComponent, getWxsMixin } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+      content (script) {
+      const isProduction = loaderContext.mode === 'production'
+      const hasWxTemplate = !!(wxTemplateComponentsInfo &&
+        ((wxTemplateComponentsInfo.imports && wxTemplateComponentsInfo.imports.length) ||
+          (wxTemplateComponentsInfo.locals && wxTemplateComponentsInfo.locals.length)))
+      const optionProcessorImports = ['processComponentOption', 'getComponent', 'getWxsMixin']
+      if (hasWxTemplate) optionProcessorImports.push('createTemplateComponent')
+      let content = `\n  import { ${optionProcessorImports.join(', ')} } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
       let hasApp = true
       if (!appInfo.name) {
         hasApp = false
@@ -65,6 +74,30 @@ module.exports = function (script, {
       // 获取组件集合
       const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
 
+      // 注入 wx template 子组件（<template name> / <import src>）
+      let wxTemplateComponentsExpr = ''
+      if (hasWxTemplate) {
+        const parts = (wxTemplateComponentsInfo.imports || []).slice()
+        const localsExprs = (wxTemplateComponentsInfo.locals || []).map((local) => {
+          const emitError = (msg) => {
+            loaderContext.emitError(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg))
+          }
+          const compiled = compileTemplateFragment(local.template, {
+            emitError,
+            definitionName: local.name,
+            resourcePath: loaderContext.resourcePath,
+            isProduction
+          })
+          const inner = `name: ${JSON.stringify(local.name)}`
+          return `${JSON.stringify(local.name)}: ${wrapCreateTemplateComponentWithBlock(compiled.block, inner)}`
+        })
+        if (localsExprs.length) {
+          parts.push(`{${localsExprs.join(',')}}`)
+        }
+        wxTemplateComponentsExpr = `Object.assign({}, ${parts.join(', ')})`
+        content += `  var wxTemplateComponentsMap = ${wxTemplateComponentsExpr}\n`
+      }
+
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
@@ -77,14 +110,19 @@ module.exports = function (script, {
         content += buildI18n({ i18n, loaderContext })
       }
       content += getRequireScript({ ctorType, script, loaderContext })
+      const componentsMapExpr = hasWxTemplate
+        ? `Object.assign({}, ${shallowStringify(componentsMap)}, wxTemplateComponentsMap)`
+        : shallowStringify(componentsMap)
       content += `
   // @ts-ignore
   export default processComponentOption({
     option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
     ctorType: ${JSON.stringify(ctorType)},
+    moduleId: ${JSON.stringify(moduleId)},
+    hasScoped: ${JSON.stringify(!!hasScoped)},
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
-    componentsMap: ${shallowStringify(componentsMap)},
+    componentsMap: ${componentsMapExpr},
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),

package/lib/web/processTemplate.js

@@ -3,6 +3,7 @@ const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
 const { matchCondition } = require('../utils/match-condition')
+const { getWxTemplateComponentName, serializeWxTemplateDefinition, buildWebTemplateImportMergeExpr } = require('./template-shared')
 
 module.exports = function (template, {
   loaderContext,
@@ -18,21 +19,24 @@ module.exports = function (template, {
 }, callback) {
   const mpx = loaderContext.getMpx()
   const {
+    projectRoot,
     mode,
     env,
     defs,
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents,
     webConfig,
     autoVirtualHostRules,
-    forceProxyEventRules
+    forceProxyEventRules,
+    checkUsingComponentsRules,
+    globalComponents
   } = mpx
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
 
   let wxsModuleMap, genericsInfo
+  let wxTemplateComponentsInfo
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
@@ -64,16 +68,17 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
-        const warn = (msg) => {
+        const warn = (msg, loc) => {
           loaderContext.emitWarning(
-            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
           )
         }
-        const error = (msg) => {
+        const error = (msg, loc) => {
           loaderContext.emitError(
-            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
           )
         }
+        const hasVirtualHost = matchCondition(resourcePath, autoVirtualHostRules)
         const { root, meta } = templateCompiler.parse(template.content, {
           warn,
           error,
@@ -92,13 +97,14 @@ module.exports = function (template, {
           moduleId,
           filePath: rawResourcePath,
           i18n: null,
-          checkUsingComponents,
-          // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
-          globalComponents: [],
+          // 与 template-compiler/index 一致：usingComponentsInfo 已合并 globalComponentsInfo，此处白名单避免对仅 app 注册的组件误报「未使用」
+          globalComponents: Object.keys(globalComponents || {}),
           // web模式下实现抽象组件
           componentGenerics,
-          hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
-          forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules)
+          hasVirtualHost,
+          forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
+          checkUsingComponents: matchCondition(resourcePath, checkUsingComponentsRules),
+          customBuiltInComponents: webConfig && webConfig.customBuiltInComponents
         })
         if (meta.wxsModuleMap) {
           wxsModuleMap = meta.wxsModuleMap
@@ -108,16 +114,51 @@ module.exports = function (template, {
             wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
-        if (meta.builtInComponentsMap) {
-          Object.keys(meta.builtInComponentsMap).forEach((name) => {
-            builtInComponentsMap[name] = {
-              resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
-            }
-          })
-        }
+        const builtInPaths = meta.builtInComponentsMap || {}
+        Object.keys(builtInPaths).forEach((name) => {
+          builtInComponentsMap[name] = {
+            resource: addQuery(builtInPaths[name], { isComponent: true })
+          }
+        })
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
+
+        // virtualHost 下多根节点需要编译期报错（子组件必须单根）
+        if (hasVirtualHost && ctorType === 'component') {
+          const realRootChildren = root.children.filter(c => c.type === 1 && c.tag !== 'temp-node')
+          if (realRootChildren.length > 1) {
+            error('Web: when virtualHost is enabled, the component template must have a single root element; please wrap with one root element.')
+          }
+        }
+
+        // 收集 imports / 本地 templates，供 processScript 生成 wxTemplateComponentsMap
+        const hasImports = !!(meta.imports && meta.imports.length)
+        const hasLocals = !!(meta.templates && Object.keys(meta.templates).length)
+        if (hasImports || hasLocals) {
+          const locals = []
+          if (meta.templates) {
+            Object.keys(meta.templates).forEach((name) => {
+              const tplNode = meta.templates[name]
+              const tpl = serializeWxTemplateDefinition(tplNode, error, name)
+              locals.push({
+                name: getWxTemplateComponentName(name),
+                template: tpl
+              })
+            })
+          }
+          const importMergeExprs = []
+          if (meta.imports) {
+            meta.imports.forEach((importSrc) => {
+              importMergeExprs.push(buildWebTemplateImportMergeExpr(loaderContext, importSrc, projectRoot))
+            })
+          }
+          wxTemplateComponentsInfo = {
+            imports: importMergeExprs,
+            locals
+          }
+        }
+
         return templateCompiler.serialize(root)
       }
     })
@@ -128,6 +169,7 @@ module.exports = function (template, {
     output,
     builtInComponentsMap,
     genericsInfo,
-    wxsModuleMap
+    wxsModuleMap,
+    wxTemplateComponentsInfo
   })
 }