@mpxjs/webpack-plugin 2.10.18 → 2.10.20

package/lib/web/template-loader.js

@@ -0,0 +1,123 @@
+const loaderUtils = require('loader-utils')
+const addQuery = require('../utils/add-query')
+const parseRequest = require('../utils/parse-request')
+const { matchCondition } = require('../utils/match-condition')
+const templateCompiler = require('../template-compiler/compiler')
+const { getWxTemplateComponentName, serializeWxTemplateDefinition, buildWebTemplateImportMergeExpr } = require('./template-shared')
+const { compileTemplateFragment, wrapCreateTemplateComponentWithBlock } = require('./compile-wx-template-fragment')
+const normalize = require('../utils/normalize')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+
+module.exports = function (content) {
+  const loaderContext = this
+  const isProduction = loaderContext.mode === 'production'
+  const mpx = loaderContext.getMpx()
+
+  const {
+    projectRoot,
+    mode,
+    srcMode,
+    env,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    autoVirtualHostRules,
+    forceProxyEventRules,
+    checkUsingComponentsRules,
+    globalComponents,
+    webConfig
+  } = mpx
+
+  const { resourcePath, rawResourcePath, queryObj } = parseRequest(loaderContext.resource)
+
+  const warn = (msg, loc) => {
+    loaderContext.emitWarning(
+      new Error('[Mpx template warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+  const error = (msg, loc) => {
+    loaderContext.emitError(
+      new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+
+  const { meta } = templateCompiler.parse(content, {
+    warn,
+    error,
+    mode,
+    srcMode: queryObj.srcMode || srcMode,
+    env,
+    defs,
+    decodeHTMLText,
+    externalClasses,
+    filePath: rawResourcePath,
+    i18n: null,
+    globalComponents: Object.keys(globalComponents || {}),
+    hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
+    forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
+    checkUsingComponents: matchCondition(resourcePath, checkUsingComponentsRules),
+    customBuiltInComponents: webConfig && webConfig.customBuiltInComponents
+  })
+
+  if (meta.wxsContentMap && wxsContentMap) {
+    for (const module in meta.wxsContentMap) {
+      wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
+    }
+  }
+
+  const builtInPaths = meta.builtInComponentsMap || {}
+  const builtInEntries = []
+  Object.keys(builtInPaths).forEach((name) => {
+    const request = addQuery(builtInPaths[name], { isComponent: true })
+    const req = loaderUtils.stringifyRequest(loaderContext, request)
+    builtInEntries.push(`${JSON.stringify(name)}: getComponent(require(${req}), {__mpxBuiltIn: true})`)
+  })
+  const builtInComponentsExpr = `{${builtInEntries.join(',')}}`
+
+  // 处理 imports：与 web/processTemplate、react/processTemplate 一致（urlToRequest + !!template-loader）
+  const importExprs = []
+  if (meta.imports) {
+    meta.imports.forEach((importSrc) => {
+      importExprs.push(buildWebTemplateImportMergeExpr(loaderContext, importSrc, projectRoot))
+    })
+  }
+
+  // 收集本 wxml 内声明的 wxs 模块，供其定义的模版组件使用
+  const wxsInitLines = []
+  if (meta.wxsModuleMap) {
+    Object.keys(meta.wxsModuleMap).forEach((module) => {
+      const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
+      wxsInitLines.push(`  __wxsModules[${JSON.stringify(module)}] = require(${loaderUtils.stringifyRequest(loaderContext, src)});`)
+    })
+  }
+
+  // 处理本地 template 定义
+  const localEntries = []
+  if (meta.templates) {
+    Object.keys(meta.templates).forEach((name) => {
+      const tplNode = meta.templates[name]
+      const tpl = serializeWxTemplateDefinition(tplNode, error, name)
+      const compiled = compileTemplateFragment(tpl, {
+        emitError: error,
+        definitionName: name,
+        resourcePath: rawResourcePath,
+        isProduction
+      })
+      const compName = getWxTemplateComponentName(name)
+      const inner = `name: ${JSON.stringify(compName)}, components: Object.assign({}, ${builtInComponentsExpr}), wxsModules: __wxsModules`
+      localEntries.push(`${JSON.stringify(compName)}: ${wrapCreateTemplateComponentWithBlock(compiled.block, inner)}`)
+    })
+  }
+  const localMapExpr = `{${localEntries.join(',')}}`
+
+  const output = `
+    var __optionProcessor = require(${loaderUtils.stringifyRequest(loaderContext, optionProcessorPath)});
+    var getComponent = __optionProcessor.getComponent;
+    var createTemplateComponent = __optionProcessor.createTemplateComponent;
+    var __wxsModules = {};
+${wxsInitLines.join('\n')}
+    module.exports = Object.assign({}, ${[...importExprs, localMapExpr].join(', ')});
+  `
+  return output
+}

package/lib/web/template-shared.js

@@ -0,0 +1,48 @@
+const loaderUtils = require('loader-utils')
+const templateCompiler = require('../template-compiler/compiler')
+const normalize = require('../utils/normalize')
+const { MPX_TEMPLATE_COMPONENT_PREFIX } = require('../utils/const')
+
+function getWxTemplateComponentName (definitionName) {
+  return MPX_TEMPLATE_COMPONENT_PREFIX + definitionName
+}
+
+/**
+ * 与 react/processTemplate 中 `<import src>` 一致：`urlToRequest` 解析相对路径后，经 `!!web/template-loader!` 拼出 require 表达式；该模块 `module.exports` 即为具名子组件映射，供 Object.assign 合并。
+ */
+function buildWebTemplateImportMergeExpr (loaderContext, importSrc, projectRoot) {
+  const webTemplateLoaderPath = normalize.lib('web/template-loader')
+  const request = loaderUtils.urlToRequest(importSrc, projectRoot)
+  const req = loaderUtils.stringifyRequest(loaderContext, `!!${webTemplateLoaderPath}!${request}`)
+  return `(require(${req}) || {})`
+}
+
+/**
+ * 将 `<template name="...">` 定义节点的子树序列化为 wx 风格 web 模版组件可用的 HTML 字符串。
+ * 供 `template-loader`（独立 wxml 链）与 `processTemplate`（.mpx 主模版）共用，规则须保持一致。
+ *
+ * @param {*} tplNode template 定义 AST 节点
+ * @param {(msg: string) => void} emitError 已由调用方带上 [Mpx template error][resource] 等前缀
+ * @param {string} [definitionName] name shown in multi-root error; defaults to `tplNode.attrsMap.name`
+ * @returns {string}
+ */
+function serializeWxTemplateDefinition (tplNode, emitError, definitionName) {
+  const realChildren = tplNode.children.filter(c => c.type === 1 && c.tag !== 'temp-node')
+  if (realChildren.length > 1) {
+    const name = definitionName != null ? definitionName : (tplNode.attrsMap && tplNode.attrsMap.name) || ''
+    emitError(
+      `Web mode does not support multi-root template definition${name ? ` "${name}"` : ''}; please wrap with a single root element.`
+    )
+  }
+  let content = ''
+  tplNode.children.forEach((child) => {
+    content += templateCompiler.serialize(child)
+  })
+  return content
+}
+
+module.exports = {
+  getWxTemplateComponentName,
+  serializeWxTemplateDefinition,
+  buildWebTemplateImportMergeExpr
+}

package/lib/wxml/loader.js

@@ -23,6 +23,7 @@ module.exports = function (content) {
   const hasScoped = false
   const hasComment = false
   const isNative = false
+  const isStatic = true
 
   const mode = mpx.mode
   const localSrcMode = queryObj.mode
@@ -96,7 +97,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          isStatic: true
+          isStatic
         }
         requestString = getRequestString('template', { src, mode: localSrcMode }, extraOptions)
         break
@@ -104,7 +105,7 @@ module.exports = function (content) {
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
         extraOptions = {
           issuerResource: this.resource,
-          isStatic: true
+          isStatic
         }
         requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)
         break

package/lib/wxss/loader.js

@@ -40,7 +40,7 @@ module.exports = async function loader (content, map, meta) {
   const mpx = this.getMpx()
   const externals = mpx.externals
   const root = mpx.projectRoot
-  const sourceMap = mpx.cssSourceMap || false
+  const sourceMap = this.sourceMap
   const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
 
   let options

package/lib/wxss/utils.js

@@ -972,11 +972,13 @@ function normalizeSourceMapForRuntime (map, loaderContext) {
 
       const resourceDirname = path.dirname(loaderContext.resourcePath)
       const absoluteSource = path.resolve(resourceDirname, source)
-      const contextifyPath = normalizePath(
-        path.relative(loaderContext.rootContext, absoluteSource)
-      )
+      // 为方便编译报错信息显示，直接返回绝对路径，后续如果有需要再改成 webpack://./xxx 的形式
+      return normalizePath(absoluteSource)
+      // const contextifyPath = normalizePath(
+      //   path.relative(loaderContext.rootContext, absoluteSource)
+      // )
 
-      return `webpack://./${contextifyPath}`
+      // return `webpack://./${contextifyPath}`
     })
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18",
+  "version": "2.10.20",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.18",
+    "@mpxjs/utils": "^2.10.20",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -63,8 +63,14 @@
     "webpack-virtual-modules": "^0.6.0"
   },
   "peerDependencies": {
+    "vue": "^2.7.10",
     "webpack": "^5.75.0"
   },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -84,7 +90,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.18",
+    "@mpxjs/api-proxy": "^2.10.20",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/glob": "^8.1.0",
@@ -97,12 +103,14 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1",
+    "vue": "^2.7.16",
     "webpack": "^5.75.0"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "8ce11a81959cb4b807d683b14c2d0b72c3991da3"
+  "gitHead": "929d7a7954124c436aa24e0a66f71512a0ea1c8e"
 }

package/lib/platform/template/wx/component-config/component.js

@@ -1,41 +0,0 @@
-const TAG_NAME = 'component'
-
-/** is 属性格式化为中划线(-)连接 （弃用，新方案：https://github.com/didi/mpx/pull/2228） */
-// const formatPropIs = (obj, data) => {
-//   const parsed = parseMustache(obj.value)
-//   let value = parsed.result
-//   if (parsed.hasBinding) value = value.slice(1, -1)
-//   const el = data.el
-//   if (el) {
-//     const injectWxsProp = {
-//       injectWxsPath: '~' + normalize.lib('runtime/utils.wxs'),
-//       injectWxsModuleName: '__wxsUtils__'
-//     }
-//     if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
-//       el.injectWxsProps.push(injectWxsProp)
-//     } else {
-//       el.injectWxsProps = [injectWxsProp]
-//     }
-//   }
-//   return {
-//     name: 'is',
-//     value: `{{__wxsUtils__.humpToLine(${value})}}`
-//   }
-// }
-
-module.exports = function () {
-  return {
-    test: TAG_NAME,
-    props: [
-      // {
-      //   test: 'is',
-      //   ali (obj, data) {
-      //     return formatPropIs(obj, data)
-      //   },
-      //   swan (obj, data) {
-      //     return formatPropIs(obj, data)
-      //   }
-      // }
-    ]
-  }
-}