@mpxjs/webpack-plugin 2.10.15-1 → 2.10.15-2

package/lib/index.js

@@ -199,6 +199,7 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.rnConfig = options.rnConfig || {}
+    options.rnConfig.supportSubpackage = options.rnConfig.supportSubpackage !== undefined ? options.rnConfig.supportSubpackage : true
     options.partialCompileRules = options.partialCompileRules || null
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
@@ -1447,7 +1448,10 @@ class MpxWebpackPlugin {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.supportRequireAsync) {
+              const supportRequireAsync = isReact(mpx.mode)
+              ? (mpx.supportRequireAsync && this.options.rnConfig.supportSubpackage)
+              : mpx.supportRequireAsync
+              if (supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
                   request = addQuery(request, {
@@ -1726,6 +1730,23 @@ class MpxWebpackPlugin {
               source.add('// inject pageconfigmap for screen\n' +
                 'var context = (function() { return this })() || Function("return this")();\n')
               source.add(`context.__mpxPageConfigsMap = ${JSON.stringify(mpx.pageConfigsMap)};\n`)
+
+              if (process.env.NODE_ENV !== 'production') {
+                source.add(`
+${globalObject}.__mpxClearAsyncChunkCache = ${globalObject}.__mpxClearAsyncChunkCache || function (ids) {
+  ids = JSON.stringify(ids)
+  var arr = ${globalObject}['${chunkLoadingGlobal}'] || []
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (JSON.stringify(arr[i][0]) === ids) {
+      arr.splice(i, 1)
+    }
+  }
+};\n`)
+              }
+            } else {
+              if (process.env.NODE_ENV !== 'production') {
+                source.add(`${globalObject}.__mpxClearAsyncChunkCache && ${globalObject}.__mpxClearAsyncChunkCache(${JSON.stringify(chunk.ids)});\n`)
+              }
             }
             source.add(originalSource)
             compilation.assets[chunkFile] = source
@@ -1825,6 +1846,7 @@ try {
 
         compilation.chunkGroups.forEach((chunkGroup) => {
           if (!chunkGroup.isInitial()) {
+            isReact(mpx.mode) && chunkGroup.chunks.forEach((chunk) => processChunk(chunk, false, []))
             return
           }
 

package/lib/platform/style/wx/index.js

@@ -547,6 +547,17 @@ module.exports = function getSpec ({ warn, error }) {
   //   })
   //   return cssMap
   // }
+  const formatBorder = ({ prop, value, selector }, { mode }) => {
+    value = value.trim()
+    if (value === 'none') {
+      return {
+        prop: 'borderWidth',
+        value: 0
+      }
+    } else {
+      return formatAbbreviation({ prop, value, selector }, { mode })
+    }
+  }
 
   return {
     supportedModes: ['ios', 'android', 'harmony'],
@@ -593,6 +604,12 @@ module.exports = function getSpec ({ warn, error }) {
       //   android: formatBoxShadow,
       //   harmony: formatBoxShadow
       // },
+      {
+        test: 'border',
+        ios: formatBorder,
+        android: formatBorder,
+        harmony: formatBorder
+      },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),

package/lib/react/processScript.js

@@ -46,7 +46,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     const componentsMap = buildComponentsMap({
       localComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp })
     output += getRequireScript({ ctorType, script, loaderContext })
@@ -58,7 +59,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
       localComponentsMap,
       builtInComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })

package/lib/react/script-helper.js

@@ -59,7 +59,7 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    if (pageCfg.async) {
+    if (pageCfg.async && rnConfig.supportSubpackage) {
       const moduleId = mpx.getModuleId(pageCfg.resource)
       const getFallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.fallback, { isComponent: true })), 'PageFallback'))
       const getLoading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.loading, { isComponent: true })), 'PageLoading'))
@@ -81,14 +81,14 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   }
 }
 
-function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig, rnConfig }) {
   const componentsMap = {}
   const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      if (componentCfg.async) {
+      if (componentCfg.async && rnConfig.supportSubpackage) {
         const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
         let getFallback

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

@@ -100,8 +100,8 @@ const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getF
                             });
                         });
                     }
-                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
-                        mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.onLazyLoadPageError === 'function') {
+                        mpxGlobal.__mpx.config.rnConfig.onLazyLoadPageError({
                             subpackage: chunkName,
                             errType: e.type
                         });

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.jsx

@@ -157,8 +157,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
     const onScroll = useCallback((e) => {
         // 全局注册的振动触感 hook
-        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
-        if (typeof pickerVibrate !== 'function') {
+        const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate;
+        if (typeof onPickerVibrate !== 'function') {
             return;
         }
         const { y } = e.nativeEvent.contentOffset;
@@ -172,7 +172,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                         y: currentId * itemRawH
                     };
                     // vibrateShort({ type: 'selection' })
-                    pickerVibrate();
+                    onPickerVibrate();
                 }
             }
         }

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -292,20 +292,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             snapScrollTop.current = y;
         }
     }
-    function onScrollTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        if (enhanced) {
-            binddragstart &&
-                binddragstart(getCustomEvent('dragstart', e, {
-                    detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft,
-                        scrollTop: scrollOptions.current.scrollTop
-                    },
-                    layoutRef
-                }, props));
-        }
-    }
     function onScrollTouchMove(e) {
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
@@ -319,19 +305,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollTouchEnd(e) {
-        bindtouchend && bindtouchend(e);
-        if (enhanced) {
-            binddragend &&
-                binddragend(getCustomEvent('dragend', e, {
-                    detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0
-                    },
-                    layoutRef
-                }, props));
-        }
-    }
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
@@ -347,6 +320,30 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
         onScrollDrag(e);
+        if (enhanced) {
+            binddragstart &&
+                binddragstart(getCustomEvent('dragstart', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft,
+                        scrollTop: scrollOptions.current.scrollTop
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollDragEnd(e) {
+        onScrollDrag(e);
+        if (enhanced) {
+            // 安卓上如果触发了默认的下拉刷新，binddragend可能不触发，只会触发 binddragstart
+            binddragend &&
+                binddragend(getCustomEvent('dragend', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
+                    },
+                    layoutRef
+                }, props));
+        }
     }
     // 处理刷新
     function onRefresh() {
@@ -505,11 +502,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
-        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
         onScrollBeginDrag: onScrollDragStart,
-        onScrollEndDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDragEnd,
         onMomentumScrollEnd: onScrollEnd
     }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -146,8 +146,8 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
                 })
               })
             }
-            if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
-              mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+            if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.onLazyLoadPageError === 'function') {
+              mpxGlobal.__mpx.config.rnConfig.onLazyLoadPageError({
                 subpackage: chunkName,
                 errType: e.type
               })

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -223,8 +223,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
     // 全局注册的振动触感 hook
-    const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate
-    if (typeof pickerVibrate !== 'function') {
+    const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate
+    if (typeof onPickerVibrate !== 'function') {
       return
     }
     const { y } = e.nativeEvent.contentOffset
@@ -238,7 +238,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
             y: currentId * itemRawH
           }
           // vibrateShort({ type: 'selection' })
-          pickerVibrate()
+          onPickerVibrate()
         }
       }
     }

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -455,22 +455,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onScrollTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchstart } = props
-    bindtouchstart && bindtouchstart(e)
-    if (enhanced) {
-      binddragstart &&
-        binddragstart(
-          getCustomEvent('dragstart', e, {
-            detail: {
-              scrollLeft: scrollOptions.current.scrollLeft,
-              scrollTop: scrollOptions.current.scrollTop
-            },
-            layoutRef
-          }, props)
-        )
-    }
-  }
   function onScrollTouchMove (e: NativeSyntheticEvent<TouchEvent>) {
     bindtouchmove && bindtouchmove(e)
     if (enhanced) {
@@ -487,22 +471,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onScrollTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
-    bindtouchend && bindtouchend(e)
-    if (enhanced) {
-      binddragend &&
-        binddragend(
-          getCustomEvent('dragend', e, {
-            detail: {
-              scrollLeft: scrollOptions.current.scrollLeft || 0,
-              scrollTop: scrollOptions.current.scrollTop || 0
-            },
-            layoutRef
-          }, props)
-        )
-    }
-  }
-
   function onScrollDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     updateScrollOptions(e, { scrollLeft, scrollTop })
@@ -523,6 +491,35 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     hasCallScrollToLower.current = false
     hasCallScrollToUpper.current = false
     onScrollDrag(e)
+    if (enhanced) {
+      binddragstart &&
+        binddragstart(
+          getCustomEvent('dragstart', e, {
+            detail: {
+              scrollLeft: scrollOptions.current.scrollLeft,
+              scrollTop: scrollOptions.current.scrollTop
+            },
+            layoutRef
+          }, props)
+        )
+    }
+  }
+
+  function onScrollDragEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    onScrollDrag(e)
+    if (enhanced) {
+      // 安卓上如果触发了默认的下拉刷新，binddragend可能不触发，只会触发 binddragstart
+      binddragend &&
+        binddragend(
+          getCustomEvent('dragend', e, {
+            detail: {
+              scrollLeft: scrollOptions.current.scrollLeft || 0,
+              scrollTop: scrollOptions.current.scrollTop || 0
+            },
+            layoutRef
+          }, props)
+        )
+    }
   }
 
   // 处理刷新
@@ -695,11 +692,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       ref: scrollViewRef,
       onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,
-      bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
-      bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
       onScrollBeginDrag: onScrollDragStart,
-      onScrollEndDrag: onScrollDrag,
+      onScrollEndDrag: onScrollDragEnd,
       onMomentumScrollEnd: onScrollEnd
     },
     (simultaneousHandlers ? { simultaneousHandlers } : {}),

package/lib/runtime/optionProcessor.js

@@ -352,7 +352,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   return extend({ app }, option)
 }
 
-export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
+export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el, useSSR }) {
   if (!isBrowser) {
     return context => {
       const { app, router, pinia = {} } = createApp({
@@ -379,7 +379,7 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
       }
     }
   } else {
-    const { app, pinia } = createApp({
+    const { app, pinia, router } = createApp({
       App,
       componentsMap,
       Vue,
@@ -391,6 +391,14 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
     if (window.__INITIAL_STATE__ && pinia) {
       pinia.state.value = window.__INITIAL_STATE__
     }
-    app.$mount(el)
+    if (useSSR) {
+      // https://v3.router.vuejs.org/api/#router-onready
+      // ssr 场景如果使用了异步组件，需要在 onReady 回调中挂载，否则 hydrate 可能会报错
+      router.onReady(() => {
+        app.$mount(el)
+      })
+    } else {
+      app.$mount(el)
+    }
   }
 }

package/lib/runtime/optionProcessorReact.js

@@ -14,7 +14,7 @@ export function getAsyncSuspense (commonProps) {
   if (commonProps.type === 'component') {
     result = memo(forwardRef(function (props, ref) {
       return createElement(AsyncSuspense,
-        extend(commonProps, {
+        extend({}, commonProps, {
           innerProps: Object.assign({}, props, { ref })
         })
       )
@@ -22,7 +22,7 @@ export function getAsyncSuspense (commonProps) {
   } else {
     result = memo(function (props) {
       return createElement(AsyncSuspense,
-        extend(commonProps, {
+        extend({}, commonProps, {
           innerProps: props
         })
       )

package/lib/web/processMainScript.js

@@ -71,7 +71,8 @@ export default processAppOption({
   componentsMap: ${shallowStringify(componentsMap)},
   Vue: Vue,
   VueRouter: VueRouter,
-  el: ${JSON.stringify(webConfig.el || '#app')}
+  el: ${JSON.stringify(webConfig.el || '#app')},
+  useSSR: ${JSON.stringify(!!webConfig.useSSR)}
 })\n`
 
   callback(null, {

package/package.json

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