@mpxjs/webpack-plugin 2.10.19 → 2.10.21

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/gen-component-tag.js

@@ -20,10 +20,6 @@ function genComponentTag (part, processor = {}) {
       content: processor
     }
   }
-  if (part.content) {
-    // unpad
-    part.content = '\n' + part.content.replace(/^\n*/m, '')
-  }
 
   const tag = processor.tag ? processor.tag(part) : part.tag
   const attrs = processor.attrs ? processor.attrs(part) : part.attrs
@@ -35,7 +31,7 @@ function genComponentTag (part, processor = {}) {
       result += stringifyAttrs(attrs)
     }
     if (content) {
-      result += `>${content}</${tag}>`
+      result += `>\n${content}\n</${tag}>`
     } else {
       result += '/>'
     }

package/lib/utils/normalize-perf-options.js

@@ -0,0 +1,47 @@
+'use strict'
+
+// 当前已知分组列表，未来新增分组扩这个数组 + 同步加 declare 即可。
+// @mpxjs/perf 包零感知分组——分组逻辑只存在于 webpack-plugin 这一侧。
+const PERF_GROUPS = ['framework', 'user']
+
+/**
+ * 把用户配置 { enable, probes } 归一化成「总开关 + 各分组开关」。
+ *
+ * 输出形如：
+ *   { enable: true, framework: true, user: false }
+ *
+ * - `enable: false` 或不传 perf → 全关。
+ * - `enable: true && probes: []` → 等价于 enable: false（没有分组要开就视为关闭）。
+ * - probes 中出现未知分组名 → 抛错（避免 typo 静默失效）。
+ */
+function normalizePerfOptions (raw) {
+  if (!raw || raw.enable !== true) {
+    const off = { enable: false }
+    for (let i = 0; i < PERF_GROUPS.length; i++) off[PERF_GROUPS[i]] = false
+    return off
+  }
+  const probes = Array.isArray(raw.probes) ? raw.probes : []
+  for (let i = 0; i < probes.length; i++) {
+    if (PERF_GROUPS.indexOf(probes[i]) === -1) {
+      throw new Error(
+        `[mpx perf] unknown probe "${probes[i]}"; known probes: ${PERF_GROUPS.join(', ')}`
+      )
+    }
+  }
+  const result = {}
+  let anyOn = false
+  for (let i = 0; i < PERF_GROUPS.length; i++) {
+    const k = PERF_GROUPS[i]
+    const on = probes.indexOf(k) !== -1
+    result[k] = on
+    if (on) anyOn = true
+  }
+  // 派生总开关：任一分组打开 → enable 才真正有效。
+  result.enable = anyOn
+  return result
+}
+
+module.exports = {
+  PERF_GROUPS,
+  normalizePerfOptions
+}

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

@@ -77,6 +77,7 @@ module.exports = function ({
         },
         (callback) => {
           processStyles(parts.styles, {
+            loaderContext,
             ctorType,
             autoScope,
             moduleId
@@ -103,6 +104,7 @@ module.exports = function ({
         ctorType,
         srcMode,
         moduleId,
+        hasScoped,
         isProduction,
         componentGenerics,
         jsonConfig: jsonRes.jsonObj,
@@ -110,6 +112,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/processMainScript.js

@@ -21,7 +21,7 @@ module.exports = function ({
   tabBarStr,
   localPagesMap
 }, callback) {
-  const { i18n, webConfig, hasUnoCSS } = loaderContext.getMpx()
+  const { i18n, webConfig } = loaderContext.getMpx()
   const { pagesMap, firstPage, globalTabBar } = buildPagesMap({
     localPagesMap,
     loaderContext,
@@ -37,12 +37,8 @@ module.exports = function ({
     jsonConfig
   })
 
-  let output = 'import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
-  // hasUnoCSS由@mpxjs/unocss-plugin注入
-  if (hasUnoCSS) {
-    output += 'import \'uno.css\'\n'
-  }
-  output += `import Vue from 'vue'
+  let output = `import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
+import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Mpx from '@mpxjs/core'
 import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}

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,12 +49,15 @@ module.exports = function (script, {
       delete attrs.setup
       return attrs
     },
-    content (script) {
-      let content = `\n  import { processComponentOption, getComponent, getWxsMixin } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
-      let hasApp = true
-      if (!appInfo.name) {
-        hasApp = false
-      }
+      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 = `  import { ${optionProcessorImports.join(', ')} } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+      const hasApp = !!appInfo.name
       // 注入wxs模块
       content += '  var wxsModules = {}\n'
       if (wxsModuleMap) {
@@ -65,6 +71,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,20 +107,25 @@ 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),
     hasApp: ${hasApp},
     disablePageTransition: ${JSON.stringify(disablePageTransition)},
-  })\n`
+  })`
       return content
     }
   })

package/lib/web/processStyles.js

@@ -1,17 +1,19 @@
 const genComponentTag = require('../utils/gen-component-tag')
 
-module.exports = function (styles, options, callback) {
+module.exports = function (styles, { loaderContext, ctorType, autoScope, moduleId }, callback) {
   let output = '/* styles */\n'
+  const { hasUnoCSS, appInfo } = loaderContext.getMpx()
+  const hasApp = !!appInfo.name
   if (styles.length) {
     styles.forEach((style) => {
       output += genComponentTag(style, {
         attrs (style) {
           const attrs = Object.assign({}, style.attrs)
-          if (options.autoScope) attrs.scoped = true
+          if (autoScope) attrs.scoped = true
           attrs.mpxStyleOptions = JSON.stringify({
             scoped: attrs.scoped,
             // query中包含module字符串会被新版vue-cli中的默认rules当做css-module处理
-            mid: options.moduleId
+            mid: moduleId
           })
           delete attrs.scoped
           return attrs
@@ -19,6 +21,13 @@ module.exports = function (styles, options, callback) {
       })
       output += '\n'
     })
+  }
+  if (hasUnoCSS && (ctorType === 'app' || !hasApp)) {
+    // 将unocss的引入放到App style之后，拉齐小程序中unocss覆盖全局样式的行为
+    output += genComponentTag({
+      tag: 'style',
+      content: '@import \'uno.css\';'
+    })
     output += '\n'
   }
   callback(null, {