@mpxjs/webpack-plugin 2.10.15 → 2.10.16

package/lib/dependencies/DynamicEntryDependency.js

@@ -6,7 +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')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {

package/lib/dependencies/ImportDependency.js

@@ -0,0 +1,102 @@
+const Dependency = require('webpack/lib/Dependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
+
+class ImportDependency extends ModuleDependency {
+  /**
+   * @param {string} request the request
+   * @param {[number, number]} range expression range
+   * @param {string[][]=} referencedExports list of referenced exports
+   */
+  constructor (request, range, referencedExports, extraOptions) {
+    super(request)
+    this.range = range
+    this.referencedExports = referencedExports
+    this.extraOptions = extraOptions
+  }
+
+  get type () {
+    return 'import()'
+  }
+
+  get category () {
+    return 'esm'
+  }
+
+  /**
+   * Returns list of exports referenced by this dependency
+   * @param {ModuleGraph} moduleGraph module graph
+   * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+   * @returns {(string[] | ReferencedExport)[]} referenced exports
+   */
+  getReferencedExports (moduleGraph, runtime) {
+    return this.referencedExports
+      ? this.referencedExports.map((e) => ({
+          name: e,
+          canMangle: false
+        }))
+      : Dependency.EXPORTS_OBJECT_REFERENCED
+  }
+
+  serialize (context) {
+    context.write(this.range)
+    context.write(this.referencedExports)
+    context.write(this.extraOptions)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    this.range = context.read()
+    this.referencedExports = context.read()
+    this.extraOptions = context.read()
+    super.deserialize(context)
+  }
+}
+
+makeSerializable(ImportDependency, '@mpxjs/webpack-plugin/lib/dependencies/ImportDependency')
+
+ImportDependency.Template = class ImportDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  /**
+   * @param {Dependency} dependency the dependency for which the template should be applied
+   * @param {ReplaceSource} source the current replace source which can be modified
+   * @param {DependencyTemplateContext} templateContext the context object
+   * @returns {void}
+   */
+  apply (
+    dependency,
+    source,
+    { runtimeTemplate, module, moduleGraph, chunkGraph, runtimeRequirements }
+  ) {
+    const dep = /** @type {ImportDependency} */ (dependency)
+    const block = /** @type {AsyncDependenciesBlock} */ (
+      moduleGraph.getParentBlock(dep)
+    )
+    let content = runtimeTemplate.moduleNamespacePromise({
+      chunkGraph,
+      block: block,
+      module: /** @type {Module} */ (moduleGraph.getModule(dep)),
+      request: dep.request,
+      strict: /** @type {BuildMeta} */ (module.buildMeta).strictHarmonyModule,
+      message: 'import()',
+      runtimeRequirements
+    })
+    // replace fakeType by 9 to fix require.async to commonjs2 module like 'module.exports = function(){...}'
+    content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
+      return p1 + '9' + p3
+    })
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    const extraOptions = dep.extraOptions || {}
+    if (extraOptions.isRequireAsync && extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
+    }
+
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+module.exports = ImportDependency

package/lib/{retry-runtime-module.js → dependencies/RetryRuntimeModule.js}

@@ -1,7 +1,7 @@
 const Template = require('webpack/lib/Template')
 const RuntimeModule = require('webpack/lib/RuntimeModule')
 
-const RetryRuntimeGlobal = '__webpack_require__.__retry'
+const RetryRuntimeGlobal = '__webpack_require__.mpxR'
 
 class RetryRuntimeModule extends RuntimeModule {
   constructor () {

package/lib/index.js

@@ -14,8 +14,7 @@ const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
 const FileSystemInfo = require('webpack/lib/FileSystemInfo')
-const ImportDependency = require('webpack/lib/dependencies/ImportDependency')
-const ImportDependencyTemplate = require('./dependencies/ImportDependencyTemplate')
+const ImportDependency = require('./dependencies/ImportDependency')
 const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const normalize = require('./utils/normalize')
@@ -77,8 +76,10 @@ 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 { RetryRuntimeModule, RetryRuntimeGlobal } = require('./dependencies/RetryRuntimeModule')
+const checkVersionCompatibility = require('./utils/check-core-version-match')
+
+checkVersionCompatibility()
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
@@ -696,7 +697,8 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RequireExternalDependency, new NullFactory())
       compilation.dependencyTemplates.set(RequireExternalDependency, new RequireExternalDependency.Template())
 
-      compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
+      compilation.dependencyFactories.set(ImportDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(ImportDependency, new ImportDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -1451,10 +1453,6 @@ 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'
@@ -1462,7 +1460,10 @@ class MpxWebpackPlugin {
                     expr.loc,
                     request
                   )
-                  const dep = new ImportDependency(request, expr.range)
+                  const dep = new ImportDependency(request, expr.range, undefined, {
+                    isRequireAsync: true,
+                    retryRequireAsync: this.options.retryRequireAsync
+                  })
                   dep.loc = expr.loc
                   depBlock.addDependency(dep)
                   parser.state.current.addBlock(depBlock)

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

@@ -8,6 +8,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-slider'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
     props: [
       {
         test: /^color$/,

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

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/resolver/AddEnvPlugin.js

@@ -16,6 +16,8 @@ module.exports = class AddEnvPlugin {
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
     const env = this.env
+    const envPattern = new RegExp(`\\.${env}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddEnvPlugin', (request, resolveContext, callback) => {
       if (request.env) {
         return callback()
@@ -32,11 +34,22 @@ module.exports = class AddEnvPlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
+
+      const resourceBasename = path.basename(resourcePath)
+      // 如果 infix 与 resourcePath 无法匹配，则认为未命中env
+      if (envPattern.test(resourceBasename) && resourceBasename.includes(queryObj.infix)) {
+        request.query = stringifyQuery(queryObj)
+        request.env = obj.env
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add env: ' + env, resolveContext, callback)
     })
   }

package/lib/resolver/AddModePlugin.js

@@ -17,6 +17,9 @@ module.exports = class AddModePlugin {
     const target = resolver.ensureHook(this.target)
     const { options = {}, mode } = this
     const { defaultMode, fileConditionRules, implicitMode } = options
+    const modePattern = new RegExp(`\\.${mode}(\\.|$)`)
+    const defaultModePattern = new RegExp(`\\.${defaultMode}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -33,13 +36,28 @@ module.exports = class AddModePlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
       if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
+
+      // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
+      if (modePattern.test(path.basename(resourcePath))) {
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
+        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`

package/lib/runtime/components/react/dist/mpx-progress.jsx

@@ -17,12 +17,12 @@ import { View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, extendObject } from './utils';
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
 import Portal from './mpx-portal';
 const Progress = forwardRef((props, ref) => {
-    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, bindactiveend, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
-    const propsRef = useRef({});
+    const propsRef = useRef(props);
     propsRef.current = props;
     // 进度值状态
     const [lastPercent, setLastPercent] = useState(0);
@@ -44,6 +44,21 @@ const Progress = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
+    // 使用 useRunOnJSCallback 处理动画回调
+    const runOnJSCallbackRef = useRef({
+        triggerActiveEnd: (percent) => {
+            const currentProps = propsRef.current;
+            if (currentProps.bindactiveend) {
+                currentProps.bindactiveend({
+                    type: 'activeend',
+                    detail: {
+                        percent: percent
+                    }
+                });
+            }
+        }
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 进度条动画函数
     const startProgressAnimation = (targetPercent, startPercent, animationDuration, onFinished) => {
         // 根据 active-mode 设置起始位置
@@ -53,22 +68,11 @@ const Progress = forwardRef((props, ref) => {
             easing: Easing.linear
         }, (finished) => {
             if (finished && onFinished) {
-                // 在动画回调中，需要使用runOnJS回到主线程
-                runOnJS(onFinished)();
+                // 在动画回调中，执行传入的worklet函数
+                onFinished();
             }
         });
     };
-    // 创建在主线程执行的事件回调函数
-    const triggerActiveEnd = (percent) => {
-        if (bindactiveend) {
-            bindactiveend({
-                type: 'activeend',
-                detail: {
-                    percent: percent
-                }
-            });
-        }
-    };
     // 进度变化时的动画效果
     useEffect(() => {
         const targetPercent = Math.max(0, Math.min(100, percent));
@@ -85,18 +89,18 @@ const Progress = forwardRef((props, ref) => {
             // 计算动画持续时间
             const percentDiff = Math.abs(targetPercent - startPercent);
             const animationDuration = percentDiff * duration;
-            // 创建动画完成回调
-            const onAnimationFinished = () => {
-                triggerActiveEnd(targetPercent);
-            };
             // 执行动画
-            startProgressAnimation(targetPercent, startPercent, animationDuration, onAnimationFinished);
+            startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
+                'worklet';
+                // 在worklet函数内部执行runOnJS调用runOnJSCallback
+                runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent);
+            });
         }
         else {
             progressWidth.value = targetPercent;
         }
         setLastPercent(targetPercent);
-    }, [percent, active, activeMode, duration, bindactiveend]);
+    }, [percent, active, activeMode, duration]);
     // 初始化时设置进度值
     useEffect(() => {
         if (!active) {