@mpxjs/webpack-plugin 2.10.20 → 2.10.21

package/lib/template-compiler/compiler.js

@@ -108,6 +108,8 @@ let isCustomText
 let runtimeCompile
 let rulesRunner
 let customBuiltInComponentsOpt
+let isUrlRequest
+let templateAssetId
 let currentEl
 let injectNodes = []
 let forScopes = []
@@ -602,15 +604,11 @@ function parseComponent (content, options) {
   }
 
   function padContent (block, pad) {
-    if (block.tag === 'style' && pad === 'line') {
-      const offset = content.slice(0, block.start).split(splitRE).length
-      return Array(offset).join(`/* ${STYLE_PAD_PLACEHOLDER} */\n`)
-    }
     if (pad === 'space') {
       return content.slice(0, block.start).replace(replaceRE, ' ')
     } else {
       const offset = content.slice(0, block.start).split(splitRE).length
-      const padChar = '\n'
+      const padChar = block.tag === 'style' ? `/* ${STYLE_PAD_PLACEHOLDER} */\n` : '\n'
       return Array(offset).join(padChar)
     }
   }
@@ -654,6 +652,8 @@ function parse (template, options) {
   usingComponentsInfo = options.usingComponentsInfo || {}
   usingComponents = Object.keys(usingComponentsInfo)
   customBuiltInComponentsOpt = options.customBuiltInComponents || null
+  isUrlRequest = options.isUrlRequest
+  templateAssetId = 0
 
   // 初始化跨平台语法检测配置（每次解析时只初始化一次）
   crossPlatformConfig = initCrossPlatformConfig()
@@ -2025,17 +2025,23 @@ const spreadREG = /\{\s*\.\.\.\s*([^,{]+?)\s*\}/g
 
 function processAttrs (el, options) {
   el.attrsList.forEach((attr) => {
-    const isTemplateData = el.tag === 'template' && attr.name === 'data'
+    const isTemplateData = el.tag === 'template' && attr.name === 'data' && attr.value
     const needWrap = isTemplateData && mode !== 'swan'
     let value = needWrap ? `{${attr.value}}` : attr.value
 
-    // 修复React Native环境下属性值中插值表达式带空格的问题
-    if (isReact(mode) && typeof value === 'string') {
-      // 检查是否为带空格的插值表达式
-      const trimmedValue = value.trim()
-      if (trimmedValue.startsWith('{{') && trimmedValue.endsWith('}}')) {
-        // 如果是纯插值表达式但带有前后空格，则使用去除空格后的值进行解析
-        value = trimmedValue
+    if (isReact(mode)) {
+      // 修复React Native环境下属性值中插值表达式带空格的问题
+      if (typeof value === 'string') {
+        // 检查是否为带空格的插值表达式
+        const trimmedValue = value.trim()
+        if (trimmedValue.startsWith('{{') && trimmedValue.endsWith('}}')) {
+          // 如果是纯插值表达式但带有前后空格，则使用去除空格后的值进行解析
+          value = trimmedValue
+        }
+      }
+      if (value === undefined) {
+        value = '{{true}}'
+        modifyAttr(el, attr.name, value)
       }
     }
 
@@ -2605,6 +2611,21 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
+const reactTemplateAssetTags = makeMap('mpx-image,mpx-video,mpx-audio', true)
+
+function processTemplateAssetReact (el, meta) {
+  if (!reactTemplateAssetTags(el.tag)) return
+  const src = el.attrsMap.src
+  if (!isUrlRequest(src)) return
+
+  const name = `__mpx_template_asset_${templateAssetId++}__`
+  if (!meta.templateAssets) {
+    meta.templateAssets = {}
+  }
+  meta.templateAssets[name] = src
+  addExp(el, name, false, 'src')
+}
+
 /** Web / RN 共用：<import src> 收集并移除 */
 function processTemplateImport (el, meta) {
   if (el.tag !== 'import') return false
@@ -2629,7 +2650,7 @@ function processTemplateImport (el, meta) {
 function processTemplateTranspile (el, meta) {
   if (processTemplateImport(el, meta)) return
 
-  if (el.tag !== 'template') return
+  if (el.tag !== 'template' || el.isBlock) return
 
   const is = getAndRemoveAttr(el, 'is').val
   if (is) {
@@ -3133,6 +3154,8 @@ function processElement (el, root, options, meta) {
     const isReactComponent$1 = isReactComponent(el, options)
     // 收集内建组件
     processBuiltInComponents(el, meta)
+    // 处理模版内资源引用
+    processTemplateAssetReact(el, meta)
     // 预处理代码维度条件编译
     processIf(el)
     processFor(el)

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/web/index.js

@@ -77,6 +77,7 @@ module.exports = function ({
         },
         (callback) => {
           processStyles(parts.styles, {
+            loaderContext,
             ctorType,
             autoScope,
             moduleId

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

@@ -56,11 +56,8 @@ module.exports = function (script, {
           (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
-      }
+      let content = `  import { ${optionProcessorImports.join(', ')} } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+      const hasApp = !!appInfo.name
       // 注入wxs模块
       content += '  var wxsModules = {}\n'
       if (wxsModuleMap) {
@@ -128,7 +125,7 @@ module.exports = function (script, {
     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, {

package/lib/wxml/loader.js

@@ -39,7 +39,7 @@ module.exports = function (content) {
 
   const { getRequestString } = createHelpers(this)
 
-  const attributes = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src', `${config[mode].wxs.tag}:${config[mode].wxs.src}`].concat(customAttributes)
+  const attributes = ['image:src', 'video:src', 'cover-image:src', 'import:src', 'include:src', `${config[mode].wxs.tag}:${config[mode].wxs.src}`].concat(customAttributes)
 
   const links = attrParse(content, function (tag, attr) {
     const res = attributes.find(function (a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.20",
+  "version": "2.10.21",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,8 +28,9 @@
     "@better-scroll/slide": "^2.5.1",
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
+    "@mpxjs/perf": "^2.10.21",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.20",
+    "@mpxjs/utils": "^2.10.21",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -90,7 +91,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.20",
+    "@mpxjs/api-proxy": "^2.10.21",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/glob": "^8.1.0",
@@ -112,5 +113,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "929d7a7954124c436aa24e0a66f71512a0ea1c8e"
+  "gitHead": "a2cbdad9f8dcc376f2098d217485525953b64cd9"
 }