@mpxjs/webpack-plugin 2.10.14-beta.2 → 2.10.14-beta.4

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('../retry-runtime-module')
+
+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/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')
@@ -696,7 +695,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 +1451,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 +1458,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/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
@@ -9,14 +9,25 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+    const isShow = useRef(false);
+    const timerRef = useRef(null);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
+        timerRef.current && clearTimeout(timerRef.current);
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -30,16 +41,20 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         if (isIOS) {
             subscriptions = [
                 Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
+                    timerRef.current && clearTimeout(timerRef.current);
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
+                    timerRef.current = setTimeout(() => {
                         ref?.current?.measure((x, y, width, height, pageX, pageY) => {
                             const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            cancelAnimation(offset);
                             offset.value = withTiming(value, { duration, easing }, (finished) => {
                                 if (finished) {
                                     // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -55,8 +70,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         else {
             subscriptions = [
                 Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     ref?.current?.measure((x, y, width, height, pageX, pageY) => {
@@ -65,6 +82,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                         const belowValue = Math.min(belowOffset, cursorSpacing);
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        cancelAnimation(offset);
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -78,6 +96,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
+            timerRef.current && clearTimeout(timerRef.current);
         };
     }, [keyboardAvoid]);
     return (<View style={style} onTouchEnd={onTouchEnd}>

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+import React, { ReactNode, useContext, useEffect, useRef } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 import { isIOS } from './utils'
 
@@ -18,15 +18,30 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
+  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+  // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+  const isShow = useRef<boolean>(false)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+
+    isShow.current = false
+    timerRef.current && clearTimeout(timerRef.current)
+
     if (keyboardAvoid?.current) {
       keyboardAvoid.current = null
     }
+
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -43,15 +58,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     if (isIOS) {
       subscriptions = [
         Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+
+          isShow.current = true
+          timerRef.current && clearTimeout(timerRef.current)
+
           const { endCoordinates } = evt
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          setTimeout(() => {
+
+          timerRef.current = setTimeout(() => {
             ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
               const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
+              cancelAnimation(offset)
               offset.value = withTiming(value, { duration, easing }, (finished) => {
                 if (finished) {
                   // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -66,15 +89,22 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     } else {
       subscriptions = [
         Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+
+          isShow.current = true
+
           const { endCoordinates } = evt
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+
           ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
             const aboveOffset = pageY + height - endCoordinates.screenY
             const belowOffset = endCoordinates.height - aboveOffset
             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
             const belowValue = Math.min(belowOffset, cursorSpacing)
             const value = aboveOffset > 0 ? belowValue : aboveValue
+            cancelAnimation(offset)
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -89,6 +119,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
     return () => {
       subscriptions.forEach(subscription => subscription.remove())
+      timerRef.current && clearTimeout(timerRef.current)
     }
   }, [keyboardAvoid])
 

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -891,4 +891,4 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 })
 SwiperWrapper.displayName = 'MpxSwiperWrapper'
 
-export default SwiperWrapper
+export default SwiperWrapper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.14-beta.2",
+  "version": "2.10.14-beta.4",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

package/lib/dependencies/ImportDependencyTemplate.js

@@ -1,50 +0,0 @@
-const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
-const { RetryRuntimeGlobal } = require('../retry-runtime-module')
-const parseRequest = require('../utils/parse-request')
-
-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
-    })
-
-    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)
-  }
-}
-
-module.exports = ImportDependencyTemplate