@mpxjs/webpack-plugin 2.10.12 → 2.10.13-beta.1

package/lib/dependencies/DynamicEntryDependency.js

@@ -6,6 +6,7 @@ const toPosix = require('../utils/to-posix')
 const async = require('async')
 const parseRequest = require('../utils/parse-request')
 const hasOwn = require('../utils/has-own')
+const { RetryRuntimeGlobal } = require('../retry-runtime-module')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {
@@ -201,9 +202,11 @@ class DynamicEntryDependency extends NullDependency {
 DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
   apply (dep, source, {
     module,
-    chunkGraph
+    chunkGraph,
+    runtimeRequirements
   }) {
-    const { resultPath, range, key, publicPath, extraOptions } = dep
+    const { resultPath, key, publicPath, extraOptions } = dep
+    let range = dep.range
 
     let replaceContent = ''
 
@@ -214,10 +217,10 @@ DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
         let relativePath = toPosix(path.relative(publicPath + path.dirname(chunkGraph.getModuleChunks(module)[0].name), resultPath))
         if (!relativePath.startsWith('.')) relativePath = './' + relativePath
         replaceContent = JSON.stringify(relativePath)
-        if (extraOptions.retryRequireAsync) {
-          replaceContent += `).catch(function (e) {
-  return require.async(${JSON.stringify(relativePath)});
-}`
+        if (extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+          range = extraOptions.requireAsyncRange
+          runtimeRequirements.add(RetryRuntimeGlobal)
+          replaceContent = `${RetryRuntimeGlobal}(function() { return require.async(${JSON.stringify(relativePath)}) }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
         }
       } else {
         replaceContent = JSON.stringify(resultPath)

package/lib/dependencies/ImportDependencyTemplate.js

@@ -1,4 +1,6 @@
 const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('../retry-runtime-module')
+const parseRequest = require('../utils/parse-request')
 
 class ImportDependencyTemplate extends (
   ModuleDependency.Template
@@ -31,6 +33,16 @@ class ImportDependencyTemplate extends (
     content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
       return p1 + '9' + p3
     })
+
+    const { queryObj } = parseRequest(dep.request)
+    const retryRequireAsync = queryObj.retryRequireAsync && JSON.parse(queryObj.retryRequireAsync)
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    if (queryObj.isRequireAsync && retryRequireAsync && retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${retryRequireAsync.times}, ${retryRequireAsync.interval})`
+    }
+
     source.replace(dep.range[0], dep.range[1] - 1, content)
   }
 }

package/lib/index.js

@@ -77,6 +77,7 @@ const VirtualModulesPlugin = require('webpack-virtual-modules')
 const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
 const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
+const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./retry-runtime-module')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -202,6 +203,12 @@ class MpxWebpackPlugin {
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
     options.retryRequireAsync = options.retryRequireAsync || false
+    if (options.retryRequireAsync === true) {
+      options.retryRequireAsync = {
+        times: 1,
+        interval: 0
+      }
+    }
     options.optimizeSize = options.optimizeSize || false
     options.dynamicComponentRules = options.dynamicComponentRules || {}// 运行时组件配置
     this.options = options
@@ -615,6 +622,13 @@ class MpxWebpackPlugin {
         }
       })
 
+      compilation.hooks.runtimeRequirementInTree
+        .for(RetryRuntimeGlobal)
+        .tap('MpxWebpackPlugin', (chunk) => {
+          compilation.addRuntimeModule(chunk, new RetryRuntimeModule())
+          return true
+        })
+
       if (isReact(this.options.mode)) {
         compilation.hooks.runtimeRequirementInTree
           .for(RuntimeGlobals.loadScript)
@@ -1436,6 +1450,10 @@ class MpxWebpackPlugin {
               if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+                  request = addQuery(request, {
+                    isRequireAsync: true,
+                    retryRequireAsync: JSON.stringify(this.options.retryRequireAsync)
+                  })
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1451,7 +1469,8 @@ class MpxWebpackPlugin {
                   const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
                     isAsync: true,
                     isRequireAsync: true,
-                    retryRequireAsync: !!this.options.retryRequireAsync
+                    retryRequireAsync: this.options.retryRequireAsync,
+                    requireAsyncRange: expr.range
                   })
 
                   parser.state.current.addPresentationalDependency(dep)
@@ -1606,7 +1625,7 @@ class MpxWebpackPlugin {
               target = expr.object
             }
 
-            if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('node_modules/@mpxjs') !== -1 || !target || mode === srcMode) return
+            if (!matchCondition(resourcePath, this.options.transMpxRules) || toPosix(resourcePath).indexOf('node_modules/@mpxjs') !== -1 || !target || mode === srcMode) return
 
             const type = target.name
             const name = type === 'wx' ? 'mpx' : 'createFactory'
@@ -1861,72 +1880,92 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
-        if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
-          const type = queryObj.type
+        const type = queryObj.type
+        const mpxProcessFlag = queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG
+        const vueProcessFlag = queryObj.vue && queryObj.mpx !== MPX_PROCESSED_FLAG
+        if (mpxProcessFlag || vueProcessFlag) {
           const extract = queryObj.extract
-
-          if (type === 'styles') {
-            let insertBeforeIndex = -1
-            // 单次遍历收集所有索引
+          if (type === 'styles' || type === 'style') {
+            const loaderTypes = {
+              'node_modules/stylus-loader': -1,
+              'node_modules/sass-loader': -1,
+              'node_modules/less-loader': -1,
+              'node_modules/css-loader': -1
+            }
             loaders.forEach((loader, index) => {
               const currentLoader = toPosix(loader.loader)
-              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
-                insertBeforeIndex = index
+              for (const key in loaderTypes) {
+                if (currentLoader.includes(key)) {
+                  loaderTypes[key] = index
+                  break
+                }
               }
             })
+            const insertStripLoaders = (index) => {
+              if (index !== -1) {
+                loaders.splice(index, 0, { loader: styleStripConditionalPath, options: {id: 0} })
+                loaders.splice(index + 2, 0, { loader: styleStripConditionalPath, options: {id: 1} })
+                return true
+              }
+              return false
+            }
 
-            if (insertBeforeIndex !== -1) {
-              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
+            const priorities = ['node_modules/stylus-loader', 'node_modules/less-loader', 'node_modules/sass-loader', 'node_modules/css-loader']
+            for (const loaderKey of priorities) {
+              if (insertStripLoaders(loaderTypes[loaderKey])) {
+                break
+              }
             }
-            loaders.push({ loader: styleStripConditionalPath })
           }
 
-          switch (type) {
-            case 'styles':
-            case 'template': {
-              let insertBeforeIndex = -1
-              const info = typeLoaderProcessInfo[type]
-              loaders.forEach((loader, index) => {
-                const currentLoader = toPosix(loader.loader)
-                if (currentLoader.includes(info[0])) {
-                  loader.loader = info[1]
-                  insertBeforeIndex = index
-                } else if (currentLoader.includes(info[1])) {
-                  insertBeforeIndex = index
-                }
-              })
-              if (insertBeforeIndex > -1) {
-                loaders.splice(insertBeforeIndex + 1, 0, {
-                  loader: info[2]
+          if (mpxProcessFlag) {
+            switch (type) {
+              case 'styles':
+              case 'template': {
+                let insertBeforeIndex = -1
+                const info = typeLoaderProcessInfo[type]
+                loaders.forEach((loader, index) => {
+                  const currentLoader = toPosix(loader.loader)
+                  if (currentLoader.includes(info[0])) {
+                    loader.loader = info[1]
+                    insertBeforeIndex = index
+                  } else if (currentLoader.includes(info[1])) {
+                    insertBeforeIndex = index
+                  }
                 })
+                if (insertBeforeIndex > -1) {
+                  loaders.splice(insertBeforeIndex + 1, 0, {
+                    loader: info[2]
+                  })
+                }
+                break
               }
-              break
-            }
-            case 'json':
-              if (queryObj.isTheme) {
-                loaders.unshift({
-                  loader: jsonThemeCompilerPath
-                })
-              } else if (queryObj.isPlugin) {
-                loaders.unshift({
-                  loader: jsonPluginCompilerPath
-                })
-              } else {
+              case 'json':
+                if (queryObj.isTheme) {
+                  loaders.unshift({
+                    loader: jsonThemeCompilerPath
+                  })
+                } else if (queryObj.isPlugin) {
+                  loaders.unshift({
+                    loader: jsonPluginCompilerPath
+                  })
+                } else {
+                  loaders.unshift({
+                    loader: jsonCompilerPath
+                  })
+                }
+                break
+              case 'wxs':
                 loaders.unshift({
-                  loader: jsonCompilerPath
+                  loader: wxsLoaderPath
                 })
-              }
-              break
-            case 'wxs':
+                break
+            }
+            if (extract) {
               loaders.unshift({
-                loader: wxsLoaderPath
+                loader: extractorPath
               })
-              break
-          }
-          if (extract) {
-            loaders.unshift({
-              loader: extractorPath
-            })
+            }
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }

package/lib/react/LoadAsyncChunkModule.js

@@ -5,7 +5,7 @@ const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
 class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
   constructor (timeout) {
     super('load async chunk')
-    this.timeout = timeout || 5000
+    this.timeout = timeout || 10000
   }
 
   generate () {

package/lib/react/processScript.js

@@ -1,6 +1,6 @@
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessorReact')
-const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest } = require('./script-helper')
+const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest, buildI18n } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -17,7 +17,7 @@ module.exports = function (script, {
   componentGenerics,
   genericsInfo
 }, callback) {
-  const { appInfo } = loaderContext.getMpx()
+  const { appInfo, i18n } = loaderContext.getMpx()
 
   let scriptSrcMode = srcMode
   if (script) {
@@ -62,6 +62,9 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })
+    if (!hasApp && i18n) {
+      output += buildI18n({ loaderContext })
+    }
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/retry-runtime-module.js

@@ -0,0 +1,56 @@
+const Template = require('webpack/lib/Template')
+const RuntimeModule = require('webpack/lib/RuntimeModule')
+
+const RetryRuntimeGlobal = '__webpack_require__.__retry'
+
+class RetryRuntimeModule extends RuntimeModule {
+  constructor () {
+    super('mpx retry module')
+  }
+
+  generate () {
+    const { compilation } = this
+    const { runtimeTemplate } = compilation
+    return Template.asString([
+      `${RetryRuntimeGlobal} = ${runtimeTemplate.basicFunction(
+        'fn, times, interval',
+        [
+          'times = times || 1;',
+          'interval = interval || 0;',
+          `return new Promise(${runtimeTemplate.basicFunction(
+            'resolve, reject',
+            [
+              Template.indent([
+                'var _t = 0;',
+                `var _retry = ${runtimeTemplate.basicFunction('', [
+                  Template.indent([
+                    `fn().then(resolve).catch(${runtimeTemplate.basicFunction('err', [
+                      Template.indent([
+                        'if (_t < times) {',
+                        Template.indent([
+                            '++_t;',
+                            'interval > 0 ? setTimeout(_retry, interval) : _retry()'
+                          ]),
+                        '} else {',
+                          Template.indent([
+                            'reject(err);'
+                          ]),
+                        '}'
+                      ])
+                    ])})`
+                  ])
+                ])};`,
+                '_retry();'
+              ])
+            ]
+          )})`
+        ]
+      )}`
+    ])
+  }
+}
+
+module.exports = {
+  RetryRuntimeModule,
+  RetryRuntimeGlobal
+}

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -91,10 +91,19 @@ const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getF
                     if (cancelled)
                         return;
                     if (type === 'component') {
-                        global.onLazyLoadError({
-                            type: 'subpackage',
-                            subpackage: [chunkName],
-                            errMsg: `loadSubpackage: ${e.type}`
+                        global.__mpxAppCbs.lazyLoad.forEach((cb) => {
+                            // eslint-disable-next-line node/no-callback-literal
+                            cb({
+                                type: 'subpackage',
+                                subpackage: [chunkName],
+                                errMsg: `loadSubpackage: ${e.type}`
+                            });
+                        });
+                    }
+                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
+                        mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+                            subpackage: chunkName,
+                            errType: e.type
                         });
                     }
                     loadChunkPromise.current = null;