@mpxjs/webpack-plugin 2.9.41-react.0 → 2.9.42

package/lib/dependencies/DynamicEntryDependency.js

@@ -35,7 +35,7 @@ class DynamicEntryDependency extends NullDependency {
 
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
-    let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
+    let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver, extraOptions } = this
 
     async.waterfall([
       (callback) => {
@@ -89,6 +89,14 @@ class DynamicEntryDependency extends NullDependency {
               originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
             })
           }
+          if (mpx.dynamicEntryInfo[packageName] && extraOptions.isAsync) {
+            mpx.dynamicEntryInfo[packageName].entries.forEach(entry => {
+              if (entry.resource === resource && entry.filename === filename && entry.entryType === entryType) {
+                entry.hasAsync = true
+              }
+              return entry
+            })
+          }
           // alreadyOutputted时直接返回，避免存在模块循环引用时死循环
           return callback(null, { resultPath })
         } else {
@@ -113,7 +121,8 @@ class DynamicEntryDependency extends NullDependency {
             resource,
             packageName,
             filename,
-            entryType
+            entryType,
+            hasAsync: extraOptions.isAsync || false
           })
         }
       }
@@ -145,9 +154,9 @@ class DynamicEntryDependency extends NullDependency {
       mpx.subpackagesEntriesMap[packageRoot].push(this)
       callback()
     } else {
-      this.addEntry(compilation, (err, { resultPath }) => {
+      this.addEntry(compilation, (err, result) => {
         if (err) return callback(err)
-        this.resultPath = resultPath
+        this.resultPath = result.resultPath
         callback()
       })
     }

package/lib/index.js

@@ -180,6 +180,7 @@ class MpxWebpackPlugin {
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
+    options.rnConfig = options.rnConfig || {}
     options.partialCompileRules = options.partialCompileRules || null
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
@@ -669,6 +670,8 @@ class MpxWebpackPlugin {
           nativeConfig: this.options.nativeConfig,
           // 输出web专用配置
           webConfig: this.options.webConfig,
+          // 输出rn专用配置
+          rnConfig: this.options.rnConfig,
           loaderContentCache: new Map(),
           tabBarMap: {},
           defs: processDefs(this.options.defs),
@@ -683,7 +686,7 @@ class MpxWebpackPlugin {
           forceProxyEventRules: this.options.forceProxyEventRules,
           supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || isWeb(this.options.mode),
           partialCompileRules: this.options.partialCompileRules,
-          collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
+          collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
               hasPage: false,
               entries: []
@@ -692,7 +695,8 @@ class MpxWebpackPlugin {
             curInfo.entries.push({
               entryType,
               resource,
-              filename
+              filename,
+              hasAsync
             })
           },
           asyncSubpackageRules: this.options.asyncSubpackageRules,
@@ -1244,31 +1248,35 @@ class MpxWebpackPlugin {
       compilation.hooks.processAssets.tap({
         name: 'MpxWebpackPlugin'
       }, (assets) => {
-        const dynamicAssets = {}
-        for (const packageName in mpx.runtimeInfo) {
-          for (const resourcePath in mpx.runtimeInfo[packageName]) {
-            const { moduleId, template, style, json } = mpx.runtimeInfo[packageName][resourcePath]
-            const templateAst = mpx.changeHashNameForAstNode(template.templateAst, json)
-            dynamicAssets[moduleId] = {
-              template: JSON.parse(templateAst),
-              styles: style.reduce((preV, curV) => {
-                preV.push(...curV)
-                return preV
-              }, [])
-            }
+        try {
+          const dynamicAssets = {}
+          for (const packageName in mpx.runtimeInfo) {
+            for (const resourcePath in mpx.runtimeInfo[packageName]) {
+              const { moduleId, template, style, json } = mpx.runtimeInfo[packageName][resourcePath]
+              const templateAst = mpx.changeHashNameForAstNode(template.templateAst, json)
+              dynamicAssets[moduleId] = {
+                template: JSON.parse(templateAst),
+                styles: style.reduce((preV, curV) => {
+                  preV.push(...curV)
+                  return preV
+                }, [])
+              }
 
-            // 注入 dynamic slot dependency
-            const outputPath = mpx.componentsMap[packageName][resourcePath]
-            if (outputPath) {
-              const jsonAsset = outputPath + '.json'
-              const jsonContent = compilation.assets[jsonAsset].source()
-              compilation.assets[jsonAsset] = new RawSource(mpx.injectDynamicSlotDependencies(jsonContent, resourcePath))
+              // 注入 dynamic slot dependency
+              const outputPath = mpx.componentsMap[packageName][resourcePath]
+              if (outputPath) {
+                const jsonAsset = outputPath + '.json'
+                const jsonContent = compilation.assets[jsonAsset].source()
+                compilation.assets[jsonAsset] = new RawSource(mpx.injectDynamicSlotDependencies(jsonContent, resourcePath))
+              }
             }
           }
-        }
-        if (!isEmptyObject(dynamicAssets)) {
-          // 产出 jsonAst 静态产物
-          compilation.assets['dynamic.json'] = new RawSource(JSON.stringify(dynamicAssets))
+          if (!isEmptyObject(dynamicAssets)) {
+            // 产出 jsonAst 静态产物
+            compilation.assets['dynamic.json'] = new RawSource(JSON.stringify(dynamicAssets))
+          }
+        } catch (error) {
+          compilation.errors.push(error)
         }
       })
 
@@ -1328,6 +1336,7 @@ class MpxWebpackPlugin {
                   parser.state.current.addBlock(depBlock)
                 } else {
                   const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
+                    isAsync: true,
                     isRequireAsync: true,
                     retryRequireAsync: !!this.options.retryRequireAsync
                   })

package/lib/json-compiler/helper.js

@@ -7,6 +7,7 @@ const addQuery = require('../utils/add-query')
 const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
 const { matchCondition } = require('../utils/match-condition')
+const { isWeb, isReact } = require('../utils/env')
 
 module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
   const mpx = loaderContext.getMpx()
@@ -58,11 +59,13 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
         // 目前只有微信支持分包异步化
         if (supportRequireAsync) {
           tarRoot = queryObj.root
+          extraOptions.isAsync = true
         }
       } else if (!queryObj.root && asyncSubpackageRules && supportRequireAsync) {
         for (const item of asyncSubpackageRules) {
           if (matchCondition(resourcePath, item)) {
             tarRoot = item.root
+            extraOptions.isAsync = true
             placeholder = item.placeholder
             break
           }
@@ -74,7 +77,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const resourceName = path.join(parsed.dir, parsed.name)
 
       if (!outputPath) {
-        if (isScript(ext) && resourceName.includes('node_modules') && mode !== 'web') {
+        if (isScript(ext) && resourceName.includes('node_modules') && !isWeb(mode) && !isReact(mode)) {
           let root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
@@ -92,7 +95,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (isScript(ext) && mode !== 'web') {
+      if (isScript(ext) && !isWeb(mode) && !isReact(mode)) {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
 
@@ -137,7 +140,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
         }
       }
-      if (isScript(ext) && mode !== 'web') {
+      if (isScript(ext) && !isWeb(mode) && !isReact(mode)) {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)

package/lib/json-compiler/index.js

@@ -73,11 +73,11 @@ module.exports = function (content) {
   const normalizePlaceholder = (placeholder) => {
     if (typeof placeholder === 'string') {
       const placeholderMap = mode === 'ali'
-      ? {
-        view: { name: 'mpx-view', resource: mpxViewPath },
-        text: { name: 'mpx-text', resource: mpxTextPath }
-      }
-      : {}
+        ? {
+          view: { name: 'mpx-view', resource: mpxViewPath },
+          text: { name: 'mpx-text', resource: mpxTextPath }
+        }
+        : {}
       placeholder = placeholderMap[placeholder] || { name: placeholder }
     }
     if (!placeholder.name) {
@@ -275,7 +275,8 @@ module.exports = function (content) {
             callback()
           }
         })
-      }, () => {
+      }, (err) => {
+        if (err) return callback(err)
         const mpxCustomElementPath = resolveMpxCustomElementPath(packageName)
         if (runtimeCompile) {
           components.element = mpxCustomElementPath
@@ -325,7 +326,8 @@ module.exports = function (content) {
             }
             callback()
           })
-        }, () => {
+        }, (err) => {
+          if (err) return callback(err)
           if (tarRoot && subPackagesCfg) {
             if (!subPackagesCfg[tarRoot].pages.length && pagesCache[0]) {
               subPackagesCfg[tarRoot].pages.push(pagesCache[0])
@@ -576,12 +578,12 @@ module.exports = function (content) {
         const srcCustomKey = config[srcMode].tabBar.customKey
         const srcPath = resolveTabBarPath(srcCustomKey)
         const outputPath = resolveTabBarPath(outputCustomKey)
-        const dynamicEntryExtraOptions = {
-          // replace with true for custom-tab-bar
-          replaceContent: 'true'
-        }
-
-        processComponent(`./${srcPath}`, context, { outputPath, extraOptions: dynamicEntryExtraOptions }, (err, entry) => {
+        processComponent(`./${srcPath}`, context, {
+          outputPath,
+          extraOptions: {
+            replaceContent: 'true'
+          }
+        }, (err, entry) => {
           if (err === RESOLVE_IGNORED_ERR) {
             delete tabBar[srcCustomKey]
             return callback()
@@ -595,6 +597,26 @@ module.exports = function (content) {
       }
     }
 
+    const processAppBar = (appBar, context, callback) => {
+      if (appBar) {
+        processComponent('./app-bar/index', context, {
+          outputPath: 'app-bar/index',
+          extraOptions: {
+            replaceContent: 'true'
+          }
+        }, (err, entry) => {
+          if (err === RESOLVE_IGNORED_ERR) {
+            return callback()
+          }
+          if (err) return callback(err)
+          appBar.custom = entry // hack for javascript parser call hook.
+          callback()
+        })
+      } else {
+        callback()
+      }
+    }
+
     const processPluginGenericsImplementation = (plugin, context, tarRoot, callback) => {
       if (!plugin.genericsImplementation) return callback()
       const relativePath = useRelativePath ? publicPath + tarRoot : ''
@@ -671,6 +693,9 @@ module.exports = function (content) {
       },
       (callback) => {
         processSubPackages(json.subPackages || json.subpackages, this.context, callback)
+      },
+      (callback) => {
+        processAppBar(json.appBar, this.context, callback)
       }
     ], (err) => {
       if (err) return callback(err)

package/lib/react/processScript.js

@@ -26,13 +26,13 @@ module.exports = function (script, {
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import { RootSiblingParent } from 'react-native-root-siblings'
+import { Provider } from '@ant-design/react-native'
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
   createNavigationContainerRef: createNavigationContainerRef,
   createNativeStackNavigator: createNativeStackNavigator,
   StackActions: StackActions,
-  RootSiblingParent: RootSiblingParent
+  Provider: Provider
 }\n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
@@ -59,7 +59,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, componentsMap })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/react/processTemplate.js

@@ -112,14 +112,13 @@ module.exports = function (template, {
         try {
           const ignoreMap = Object.assign({
             createElement: true,
-            components: true,
-            getNativeComponent: true,
+            getComponent: true,
             rootProps: true
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
           })
-          output += `global.currentInject.render = function (createElement, components, getNativeComponent, rootProps) {
+          output += `global.currentInject.render = function (createElement, getComponent, rootProps) {
   return ${bindResult.code}
 };\n`
         } catch (e) {

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -110,7 +110,7 @@
       this.debounceRefresh = debounce(function () {
         this.refresh()
       }, 200, {
-        leading: false,
+        leading: true,
         trailing: true
       })
       this.dispatchScrollTo = throttle(function (direction) {

package/lib/runtime/stringify.wxs

@@ -8,38 +8,25 @@ function objectKeys (obj) {
       '[': ']',
       '(': ')'
     }
-    var shiftMap = {
-      'n': '\n',
-      'b': '\b',
-      'f': '\f',
-      'r': '\r',
-      't': '\t'
-    }
     if (typeof obj === 'object') {
       var objStr = JSON.stringify(obj)
       if (objStr[0] === '{' && objStr[objStr.length - 1] === '}') {
-        var key = ''
         var inKey = true
         var stack = []
-        var shift = false
+        var keyStart = 0
+        var keyEnd = 0
         for (var i = 1; i < objStr.length - 1; i++) {
           var item = objStr[i]
           var lastItem = objStr[i - 1]
           if (inKey) {
-            if (item === ':' && lastItem === '"') {
-              keys.push(key.slice(1, -1))
-              key = ''
+            if (item === ':' && keyEnd === i - 1) {
+              keys.push(objStr.slice(keyStart + 1, keyEnd))
               inKey = false
             } else {
-              if (shift === false && item === '\\') {
-                shift = true
-                continue
-              }
-              if (shift) {
-                item = shiftMap[item] || item
-                shift = false
+              if (item === '"' && lastItem !== '\\') {
+                keyStart = keyEnd
+                keyEnd = i
               }
-              key += item
             }
           } else {
             if (stackMap[item]) {

package/lib/template-compiler/compiler.js

@@ -1654,9 +1654,10 @@ function processFor (el) {
   }
 }
 
-function processRefReact (el, options, meta) {
+function processRefReact (el, meta) {
   const val = getAndRemoveAttr(el, config[mode].directive.ref).val
-  const type = isComponentNode(el, options) ? 'component' : 'node'
+  // rn中只有内建组件能被作为node ref处理
+  const type = el.isBuiltIn ? 'node' : 'component'
   if (val) {
     if (!meta.refs) {
       meta.refs = []
@@ -2484,12 +2485,6 @@ function processMpxTagName (el) {
   }
 }
 
-function postProcessComponent (el, options) {
-  if (isComponentNode(el, options)) {
-    el.isComponent = true
-  }
-}
-
 function processElement (el, root, options, meta) {
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
@@ -2528,7 +2523,7 @@ function processElement (el, root, options, meta) {
     // 预处理代码维度条件编译
     processIf(el)
     processFor(el)
-    processRefReact(el, options, meta)
+    processRefReact(el, meta)
     processStyleReact(el)
     processEventReact(el, options, meta)
     processComponentIs(el, options)
@@ -2581,8 +2576,6 @@ function closeElement (el, meta, options) {
   if (isReact(mode)) {
     postProcessForReact(el)
     postProcessIfReact(el)
-    // flag component for react
-    postProcessComponent(el, options)
     return
   }
   const pass = isNative || postProcessTemplate(el) || processingTemplate
@@ -2961,7 +2954,7 @@ function postProcessForDynamic (vnode) {
 }
 
 function postProcessAttrsDynamic (vnode, config) {
-  const exps = vnode.exps?.filter(v => v.attrName) || []
+  const exps = (vnode.exps && vnode.exps.filter(v => v.attrName)) || []
   const expsMap = Object.fromEntries(exps.map(v => ([v.attrName, v])))
   const directives = Object.values(config.directive)
   if (vnode.attrsList && vnode.attrsList.length) {

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

@@ -59,7 +59,7 @@ function genNode (node) {
             const name = node.slot.name
             exp += `__getSlot(${name ? s(name) : ''})`
           } else {
-            exp += `createElement(${node.isComponent || node.isBuiltIn ? `components[${node.is || s(node.tag)}]` : `getNativeComponent(${s(node.tag)})`}`
+            exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.isRoot) {
               exp += `, Object.assign({}, rootProps, {style: [${attrExpMap.style}, rootProps.style]})`
             } else if (node.attrsList.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.41-react.0",
+  "version": "2.9.42",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -85,5 +85,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "1c9ae7527a257fad98f5536114e63415cea54271"
+  "gitHead": "45c7fd96af6723fa8c8ea2d659065417e66c77e2"
 }