@mpxjs/webpack-plugin 2.9.66 → 2.9.69

package/lib/template-compiler/compiler.js

@@ -116,6 +116,7 @@ let i18nInjectableComputed = []
 let hasOptionalChaining = false
 let processingTemplate = false
 const rulesResultMap = new Map()
+let usingComponents = []
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -633,6 +634,9 @@ function parse (template, options) {
   processingTemplate = false
   rulesResultMap.clear()
 
+  if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
+  usingComponents = Object.keys(options.usingComponentsInfo)
+
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
       warnArray: [],
@@ -654,7 +658,7 @@ function parse (template, options) {
     type: 'template',
     testKey: 'tag',
     data: {
-      usingComponents: options.usingComponents
+      usingComponents
     },
     warn: _warn,
     error: _error
@@ -804,7 +808,7 @@ function parse (template, options) {
 
   if (!tagNames.has('component') && options.checkUsingComponents) {
     const arr = []
-    options.usingComponents.forEach((item) => {
+    usingComponents.forEach((item) => {
       if (!tagNames.has(item) && !options.globalComponents.includes(item) && !options.componentPlaceholder.includes(item)) {
         arr.push(item)
       }
@@ -980,7 +984,7 @@ function processComponentIs (el, options) {
 
   const range = getAndRemoveAttr(el, 'range').val
   const isInRange = makeMap(range || '')
-  el.components = (options.usingComponents || []).filter(i => {
+  el.components = (usingComponents).filter(i => {
     if (!range) return true
     return isInRange(i)
   })
@@ -1370,7 +1374,8 @@ function processEvent (el, options) {
 function processSlotReact (el, meta) {
   if (el.tag === 'slot') {
     el.slot = {
-      name: getAndRemoveAttr(el, 'name').val
+      name: getAndRemoveAttr(el, 'name').val,
+      slot: getAndRemoveAttr(el, 'slot').val
     }
     meta.options = meta.options || {}
     meta.options.disableMemo = true
@@ -1763,6 +1768,15 @@ function processRefReact (el, meta) {
       value: `{{ this.__getRefVal('${type}', [${selectorsConf}]) }}`
     }])
   }
+
+  if (el.tag === 'mpx-scroll-view' && el.attrsMap['scroll-into-view']) {
+    addAttrs(el, [
+      {
+        name: '__selectRef',
+        value: '{{ this.__selectRef.bind(this) }}'
+      }
+    ])
+  }
 }
 
 function processRef (el, options, meta) {
@@ -2137,7 +2151,7 @@ function processStyle (el, meta) {
 }
 
 function isRealNode (el) {
-  const virtualNodeTagMap = ['block', 'template', 'import', config[mode].wxs.tag].reduce((map, item) => {
+  const virtualNodeTagMap = ['block', 'template', 'import', 'slot', config[mode].wxs.tag].reduce((map, item) => {
     map[item] = true
     return map
   }, {})
@@ -2145,7 +2159,11 @@ function isRealNode (el) {
 }
 
 function isComponentNode (el, options) {
-  return options.usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
+  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
+}
+
+function isReactComponent (el, options) {
+  return !isComponentNode(el, options) && isRealNode(el) && !el.isBuiltIn
 }
 
 function processExternalClasses (el, options) {
@@ -2263,8 +2281,10 @@ function postProcessAliComponentRootView (el, options, meta) {
     { condition: /^style$/, action: 'move' },
     { condition: /^slot$/, action: 'move' }
   ]
+  const tagName = el.tag
+  const mid = options.usingComponentsInfo[tagName]?.mid || moduleId
   const processAppendAttrsRules = [
-    { name: 'class', value: `${MPX_ROOT_VIEW} host-${moduleId}` }
+    { name: 'class', value: `${MPX_ROOT_VIEW} host-${mid}` }
   ]
   const newAttrs = []
   const allAttrs = cloneAttrsList(el.attrsList)
@@ -2594,16 +2614,19 @@ function processElement (el, root, options, meta) {
   }
 
   if (isReact(mode)) {
+    const pass = isReactComponent(el, options)
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el, options)
-    processEventReact(el)
-    processComponentIs(el, options)
-    processSlotReact(el, meta)
+    if (!pass) {
+      processStyleReact(el, options)
+      processEventReact(el)
+      processComponentIs(el, options)
+      processSlotReact(el, meta)
+    }
     processAttrs(el, options)
     return
   }
@@ -2656,11 +2679,19 @@ function closeElement (el, meta, options) {
   }
 
   const isTemplate = postProcessTemplate(el) || processingTemplate
-  if (!isNative && !isTemplate) {
-    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali') {
+  if (!isTemplate) {
+    if (!isNative) {
+      postProcessComponentIs(el, (child) => {
+        if (!hasVirtualHost && mode === 'ali') {
+          postProcessAliComponentRootView(child, options)
+        } else {
+          postProcessIf(child)
+        }
+      })
+    }
+    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
       postProcessAliComponentRootView(el, options, meta)
     }
-    postProcessComponentIs(el)
   }
 
   if (runtimeCompile) {
@@ -2707,7 +2738,7 @@ function cloneAttrsList (attrsList) {
   })
 }
 
-function postProcessComponentIs (el) {
+function postProcessComponentIs (el, postProcessChild) {
   if (el.is && el.components) {
     let tempNode
     if (el.for || el.if || el.elseif || el.else) {
@@ -2729,7 +2760,7 @@ function postProcessComponentIs (el) {
       })
       newChild.exps = el.exps
       addChild(tempNode, newChild)
-      postProcessIf(newChild)
+      postProcessChild(newChild)
     })
 
     if (!el.parent) {

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

@@ -56,8 +56,8 @@ function genNode (node) {
             return map
           }, {})
           if (node.slot) {
-            const name = node.slot.name
-            exp += `__getSlot(${name ? s(name) : ''})`
+            const { name, slot } = node.slot
+            exp += `__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.attrsList.length) {

package/lib/template-compiler/index.js

@@ -24,14 +24,14 @@ module.exports = function (raw) {
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const wxsContentMap = mpx.wxsContentMap
   const optimizeRenderRules = mpx.optimizeRenderRules
-  const usingComponents = queryObj.usingComponents || []
+  const usingComponentsInfo = queryObj.usingComponentsInfo || {}
   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)
+  const moduleId = queryObj.moduleId || mpx.getModuleId(resourcePath)
 
   let optimizeRenderLevel = 0
   for (const rule of optimizeRenderRules) {
@@ -57,7 +57,6 @@ module.exports = function (raw) {
     warn,
     error,
     runtimeCompile,
-    usingComponents,
     componentPlaceholder,
     hasComment,
     isNative,
@@ -70,11 +69,12 @@ module.exports = function (raw) {
     externalClasses,
     hasScoped,
     moduleId,
+    usingComponentsInfo,
     // 这里需传递resourcePath和wxsContentMap保持一致
     filePath: resourcePath,
     i18n,
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
-    globalComponents: Object.keys(mpx.usingComponents),
+    globalComponents: Object.keys(mpx.globalComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile,
     hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
     dynamicTemplateRuleRunner: mpx.dynamicTemplateRuleRunner

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

@@ -0,0 +1,113 @@
+const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
+const JSON5 = require('json5')
+const isUrlRequest = require('./is-url-request')
+const parseRequest = require('./parse-request')
+const addQuery = require('./add-query')
+const resolve = require('./resolve')
+const getJSONContent = require('./get-json-content')
+const getRulesRunner = require('../platform')
+const async = require('async')
+
+module.exports = function ({
+  json,
+  srcMode,
+  emitWarning,
+  emitError,
+  ctorType,
+  resourcePath,
+  loaderContext
+}, callback) {
+  const mpx = loaderContext.getMpx()
+  const context = loaderContext.context
+  const mode = mpx.mode
+  const pagesMap = mpx.pagesMap
+  async.waterfall([
+    (callback) => {
+      getJSONContent(json, null, loaderContext, callback)
+    },
+    (jsonContent, callback) => {
+      if (!jsonContent) return callback(null, {})
+      let componentPlaceholder = []
+      let componentGenerics = {}
+      const usingComponentsInfo = {}
+      const usingComponents = {}
+      const finalCallback = (err) => {
+        if (err) return callback(err)
+        if (ctorType === 'app') {
+          // 在 rulesRunner 运行后保存全局注册组件
+          // todo 其余地方在使用mpx.globalComponents时存在缓存问题，要规避该问题需要在所有使用mpx.globalComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
+          // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
+          loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(usingComponents, usingComponentsInfo, context))
+        }
+        callback(null, {
+          componentPlaceholder,
+          componentGenerics,
+          usingComponentsInfo: Object.assign({}, usingComponentsInfo, mpx.globalComponentsInfo),
+          jsonContent
+        })
+      }
+      try {
+        const ret = JSON5.parse(jsonContent)
+        const rulesMeta = {}
+        const rulesRunnerOptions = {
+          mode,
+          srcMode,
+          type: 'json',
+          waterfall: true,
+          warn: emitWarning,
+          error: emitError,
+          meta: rulesMeta
+        }
+        if (ctorType !== 'app') {
+          rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+        }
+        const rulesRunner = getRulesRunner(rulesRunnerOptions)
+        try {
+          if (rulesRunner) rulesRunner(ret)
+        } catch (e) {
+          return finalCallback(e)
+        }
+        // 不支持全局组件的平台，runRules 时会删除 app.json 中的 usingComponents, 同时 fillGlobalComponents 方法会对 rulesMeta 赋值 usingComponents，通过 rulesMeta 来重新获取 globalComponents
+        // page | component 时 直接获取 ret.usingComponents 内容
+        Object.assign(usingComponents, ret.usingComponents || rulesMeta.usingComponents)
+
+        if (ret.componentPlaceholder) {
+          componentPlaceholder = componentPlaceholder.concat(Object.values(ret.componentPlaceholder))
+        }
+        if (ret.componentGenerics) {
+          componentGenerics = Object.assign({}, ret.componentGenerics)
+        }
+        if (usingComponents) {
+          const setUsingComponentInfo = (name, moduleId) => {
+            usingComponentsInfo[name] = { mid: moduleId }
+          }
+          async.eachOf(usingComponents, (component, name, callback) => {
+            if (ctorType === 'app') {
+              usingComponents[name] = addQuery(component, {
+                context
+              })
+            }
+            if (!isUrlRequest(component)) {
+              const moduleId = mpx.getModuleId(component, ctorType === 'app')
+              setUsingComponentInfo(name, moduleId)
+              return callback()
+            }
+            resolve(context, component, loaderContext, (err, resource) => {
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(resource)
+              const moduleId = mpx.getModuleId(rawResourcePath, ctorType === 'app')
+              setUsingComponentInfo(name, moduleId)
+              callback()
+            })
+          }, (err) => {
+            finalCallback(err)
+          })
+        } else {
+          finalCallback()
+        }
+      } catch (err) {
+        finalCallback(err)
+      }
+    }
+  ], callback)
+}

package/lib/web/index.js

@@ -8,6 +8,7 @@ const RecordLoaderContentDependency = require('../dependencies/RecordLoaderConte
 
 module.exports = function ({
   parts,
+  jsonContent,
   loaderContext,
   pagesMap,
   componentsMap,
@@ -19,7 +20,7 @@ module.exports = function ({
   hasScoped,
   hasComment,
   isNative,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics,
   autoScope,
   callback
@@ -27,7 +28,7 @@ module.exports = function ({
   if (ctorType === 'app' && !queryObj.isApp) {
     return async.waterfall([
       (callback) => {
-        processJSON(parts.json, {
+        processJSON(jsonContent, {
           loaderContext,
           ctorType,
           pagesMap,
@@ -68,7 +69,7 @@ module.exports = function ({
             srcMode,
             moduleId,
             ctorType,
-            usingComponents,
+            usingComponentsInfo,
             componentGenerics
           }, callback)
         },
@@ -80,7 +81,7 @@ module.exports = function ({
           }, callback)
         },
         (callback) => {
-          processJSON(parts.json, {
+          processJSON(jsonContent, {
             loaderContext,
             ctorType,
             pagesMap,

package/lib/web/processJSON.js

@@ -12,9 +12,8 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
-const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
-module.exports = function (json, {
+module.exports = function (jsonContent, {
   loaderContext,
   ctorType,
   pagesMap,
@@ -82,12 +81,11 @@ module.exports = function (json, {
 
   const isApp = ctorType === 'app'
 
-  if (!json) {
+  if (!jsonContent) {
     return callback()
   }
-  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
-    jsonObj = JSON5.parse(json.content)
+    jsonObj = JSON5.parse(jsonContent)
     // 处理runner
     const rulesRunnerOptions = {
       mode,
@@ -97,8 +95,8 @@ module.exports = function (json, {
       warn: emitWarning,
       error: emitError,
       data: {
-        // polyfill global usingComponents & record globalComponents
-        globalComponents: mpx.usingComponents
+        // polyfill global usingComponents
+        globalComponents: mpx.globalComponents
       }
     }
 
@@ -111,12 +109,6 @@ module.exports = function (json, {
     if (rulesRunner) {
       rulesRunner(jsonObj)
     }
-    if (isApp) {
-      // 收集全局组件
-      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
-      // 在 rulesRunner 运行后保存全局注册组件
-      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
-    }
   } catch (e) {
     return callback(e)
   }

package/lib/web/processTemplate.js

@@ -12,7 +12,7 @@ module.exports = function (template, {
   srcMode,
   moduleId,
   ctorType,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -73,7 +73,7 @@ module.exports = function (template, {
         const { root, meta } = templateCompiler.parse(template.content, {
           warn,
           error,
-          usingComponents,
+          usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
           hasComment,
           isNative,
           ctorType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.66",
+  "version": "2.9.69",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.9.65",
+    "@mpxjs/utils": "^2.9.69",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -82,7 +82,8 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
-    "@mpxjs/api-proxy": "^2.9.66",
+    "@d11/react-native-fast-image": "^8.6.12",
+    "@mpxjs/api-proxy": "^2.9.69",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -97,5 +98,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "ff9eb06a3be28538870823cebf813ed56f39bbd7"
+  "gitHead": "e23c51acc4c2ffdd31fcc6c27aae1aed42d1ade2"
 }