@mpxjs/webpack-plugin 2.10.6-beta.7 → 2.10.7-beta.1

package/lib/file-loader.js

@@ -35,9 +35,8 @@ module.exports = function loader (content, prevOptions) {
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
 
-  if (isRN) {
-    publicPath = `__non_webpack_require__(__mpx_rn_resolve_url_path_(${JSON.stringify(url)}))`
-  }
+  // todo 未来添加分包处理后相对地址不一定是./开头的，需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
+  if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`_mpx_rn_img_relative_path_/${url}`)})`
 
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {

package/lib/index.js

@@ -44,11 +44,9 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
-const RecordFileUrlDependency = require('./dependencies/RecordFileUrlDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
-const { transAsyncSubNameRules, transAsyncSubRules } = require('./utils/trans-async-sub-rules')
 const { matchCondition } = require('./utils/match-condition')
 const processDefs = require('./utils/process-defs')
 const config = require('./config')
@@ -674,9 +672,6 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
-      compilation.dependencyFactories.set(RecordFileUrlDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordFileUrlDependency, new RecordFileUrlDependency.Template())
-
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -779,7 +774,6 @@ class MpxWebpackPlugin {
             })
           },
           asyncSubpackageRules: this.options.asyncSubpackageRules,
-          asyncSubpackageNameMap: this.options.asyncSubpackageNameMap,
           optimizeRenderRules: this.options.optimizeRenderRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
@@ -1228,7 +1222,7 @@ class MpxWebpackPlugin {
             if (isWeb(mpx.mode) && !hasOwn(splitChunksOptions.cacheGroups, 'main')) {
               splitChunksOptions.cacheGroups.main = {
                 chunks: 'initial',
-                name: 'lib/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
+                name: 'bundle/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
                 test: /[\\/]node_modules[\\/]/
               }
               needInit = true
@@ -1236,7 +1230,7 @@ class MpxWebpackPlugin {
             if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
               splitChunksOptions.cacheGroups.async = {
                 chunks: 'async',
-                name: 'async-common/index',
+                name: 'async/index',
                 minChunks: 2
               }
               needInit = true
@@ -1339,6 +1333,15 @@ class MpxWebpackPlugin {
       compilation.hooks.processAssets.tap({
         name: 'MpxWebpackPlugin'
       }, (assets) => {
+        if (isReact(mpx.mode)) {
+          Object.keys(assets).forEach((chunkName) => {
+            if (/\.js$/.test(chunkName)) {
+              let val = assets[chunkName].source()
+              val = val.replace(/_mpx_rn_img_relative_path_/g, chunkName === 'app.js' ? '.' : '..')
+              compilation.assets[chunkName] = new RawSource(val)
+            }
+          })
+        }
         try {
           const dynamicAssets = {}
           for (const packageName in mpx.runtimeInfo) {
@@ -1384,15 +1387,6 @@ class MpxWebpackPlugin {
           }
         })
 
-        parser.hooks.call.for('__mpx_rn_resolve_url_path_').tap('MpxWebpackPlugin', (expr) => {
-          const args = expr.arguments.map((i) => i.value)
-          args.unshift(expr.range)
-
-          const dep = new RecordFileUrlDependency(...args)
-          parser.state.current.addPresentationalDependency(dep)
-          return true
-        })
-
         parser.hooks.call.for('__mpx_dynamic_entry__').tap('MpxWebpackPlugin', (expr) => {
           const args = expr.arguments.map((i) => i.value)
           args.unshift(expr.range)
@@ -1408,16 +1402,20 @@ class MpxWebpackPlugin {
             const range = expr.arguments[0].range
             const context = parser.state.module.context
             const { queryObj, resourcePath } = parseRequest(request)
-            let tarRoot = transAsyncSubRules(resourcePath, mpx.asyncSubpackageRules, queryObj.root)
+            let tarRoot = queryObj.root
+            if (!tarRoot && mpx.asyncSubpackageRules) {
+              for (const item of mpx.asyncSubpackageRules) {
+                if (matchCondition(resourcePath, item)) {
+                  tarRoot = item.root
+                  break
+                }
+              }
+            }
             if (tarRoot) {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (isWeb(mpx.mode) || isReact(mpx.mode)) {
-                // web 和 react 平台支持分包名转换，如果转换tarRoot为空，则降级到主包
-                tarRoot = transAsyncSubNameRules(mpx.asyncSubpackageNameMap, tarRoot)
-              }
-              if (mpx.supportRequireAsync && tarRoot) {
+              if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   const depBlock = new AsyncDependenciesBlock(
                     {

package/lib/react/processJSON.js

@@ -8,7 +8,6 @@ const addQuery = require('../utils/add-query')
 const parseComponent = require('../parser')
 const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
-const { transAsyncSubNameRules } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
@@ -286,8 +285,6 @@ module.exports = function (jsonContent, {
 
           pagesMap[resourcePath] = outputPath
           loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
-          // 通过asyncSubPackagesNameRules对tarRoot进行修改，仅修改tarRoot，不修改outputPath页面路径
-          tarRoot = transAsyncSubNameRules(mpx.asyncSubpackageNameMap, tarRoot)
           localPagesMap[outputPath] = {
             resource: addQuery(resource, { isPage: true }),
             async: queryObj.async || tarRoot,
@@ -335,7 +332,6 @@ module.exports = function (jsonContent, {
           const fillComponentsMap = (name, entry, tarRoot) => {
             const { resource, outputPath } = entry
             const { resourcePath, queryObj } = parseRequest(resource)
-            tarRoot = transAsyncSubNameRules(mpx.asyncSubpackageNameMap, tarRoot)
             componentsMap[resourcePath] = outputPath
             loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
             localComponentsMap[name] = {

package/lib/react/processScript.js

@@ -36,7 +36,7 @@ module.exports = function (script, {
   output += "import { lazy, createElement, memo, forwardRef } from 'react'\n"
   if (ctorType === 'app') {
     output += `
-import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 \n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
@@ -53,7 +53,7 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {
-    output += `import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+    output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
     // 获取组件集合
     const componentsMap = buildComponentsMap({
       localComponentsMap,

package/lib/react/script-helper.js

@@ -4,6 +4,7 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const addQuery = require('../utils/add-query')
+const path = require('path')
 const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
@@ -14,6 +15,8 @@ function getMpxComponentRequest (component) {
   return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
 }
 
+const mpxAsyncSuspense = getMpxComponentRequest('AsyncSuspense')
+
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
     return `/* webpackChunkName: "${chunkName}/index" */`
@@ -21,33 +24,49 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function getAsyncSuspense (type, moduleId, componentRequest, chunkName, fallback, loading) {
-  fallback = fallback && `getComponent(require(${fallback}))`
-  loading = loading && `getComponent(require(${loading}))`
-  return `
-    getAsyncSuspense({
-      type: ${JSON.stringify(type)},
-      moduleId: ${JSON.stringify(moduleId)},
-      chunkName: ${JSON.stringify(chunkName)},
-      loading: ${loading},
-      fallback: ${fallback},
-      getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
-    })
-  `
+function getAsyncComponent (componentName, componentRequest, chunkName, fallback) {
+  return `getComponent(memo(forwardRef(function(props, ref) {
+    return createElement(
+      getComponent(require(${mpxAsyncSuspense})),
+      {
+        type: 'component',
+        props: Object.assign({}, props, { ref }),
+        chunkName: ${JSON.stringify(chunkName)},
+        request: ${JSON.stringify(componentRequest)},
+        loading: getComponent(require(${fallback})),
+        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
+      }
+    )
+  })))`
+}
+
+function getAsyncPage (componentName, componentRequest, chunkName, fallback, loading) {
+  fallback = fallback && `getComponent(require('${fallback}?isComponent=true'))`
+  loading = loading && `getComponent(require('${loading}?isComponent=true'))`
+  return `getComponent(function(props) {
+    return createElement(
+      getComponent(require(${mpxAsyncSuspense})),
+      {
+        type: 'page',
+        props: props,
+        chunkName: ${JSON.stringify(chunkName)},
+        request: ${JSON.stringify(componentRequest)},
+        fallback: ${fallback},
+        loading: ${loading},
+        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
+      }
+    )
+  })`
 }
 
 function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig }) {
   let firstPage = ''
   const pagesMap = {}
-  const mpx = loaderContext.getMpx()
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
     if (pageCfg.async) {
-      const moduleId = mpx.getModuleId(pageCfg.resource)
-      const fallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && JSON.stringify(addQuery(rnConfig.asyncChunk.fallback, { isComponent: true }))
-      const loading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && JSON.stringify(addQuery(rnConfig.asyncChunk.loading, { isComponent: true }))
-      pagesMap[pagePath] = getAsyncSuspense('page', moduleId, pageRequest, pageCfg.async, fallback, loading)
+      pagesMap[pagePath] = getAsyncPage(pagePath, pageRequest, pageCfg.async, rnConfig.asyncChunk && rnConfig.asyncChunk.fallback, rnConfig.asyncChunk && rnConfig.asyncChunk.loading)
     } else {
     // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
       pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
@@ -73,7 +92,6 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
       if (componentCfg.async) {
-        const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
         if (placeholder) {
           if (localComponentsMap[placeholder]) {
@@ -84,7 +102,11 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
               )
             }
-            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, placeholderRequest)
+            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
+          } else if (mpx.globalComponents[placeholder]) {
+            const { queryObj, rawResourcePath } = parseRequest(mpx.globalComponents[placeholder])
+            const placeholderRequest = JSON.stringify(path.resolve(queryObj.context, rawResourcePath))
+            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
           } else {
             const tag = `mpx-${placeholder}`
             if (!isBuildInReactTag(tag)) {
@@ -92,13 +114,13 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
               )
             }
-            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
+            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
           }
         } else {
           loaderContext.emitError(
             new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
           )
-          componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async)
+          componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
         }
       } else {
         componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`

package/lib/runtime/components/react/AsyncContainer.tsx

@@ -0,0 +1,217 @@
+import { ComponentType, ReactNode, Component, Suspense } from 'react'
+import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
+import FastImage from '@d11/react-native-fast-image'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+
+type PageWrapper = {
+  children: ReactNode
+}
+
+export const PageWrapper = ({ children }: PageWrapper) => {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -0 }],
+    flexBasis: 'auto',
+    flex: 1
+  }))
+
+  return (
+    <Animated.View
+      style={[
+        animatedStyle
+      ]}
+    >
+      {children}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff'
+  },
+  loadingImage: {
+    width: 100,
+    height: 100,
+    marginTop: 220,
+    alignSelf: 'center'
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  errorImage: {
+    marginTop: 80,
+    width: 220,
+    aspectRatio: 1,
+    alignSelf: 'center'
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    color: '#333',
+    marginBottom: 20
+  },
+  retryButton: {
+    position: 'absolute',
+    bottom: 54,
+    left: 20,
+    right: 20,
+    backgroundColor: '#fff',
+    paddingVertical: 15,
+    borderRadius: 30,
+    marginTop: 40,
+    borderWidth: 1,
+    borderColor: '#FF5F00'
+  },
+  retryButtonText: {
+    color: '#FF5F00',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center'
+  }
+})
+
+type AsyncType = 'page' | 'component'
+
+interface PropsType<T extends AsyncType> {
+  type: T
+  props: object
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  children: (props: any) => ReactNode | ReactNode
+}
+
+interface StateType {
+  hasError: boolean,
+  key: number
+}
+
+interface ComponentError extends Error {
+  request?: string
+  type: 'timeout' | 'fail'
+}
+
+export const DefaultLoading = () => {
+  return (
+    <View style={styles.container}>
+      <FastImage
+        style={styles.loadingImage}
+        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif' }}
+        resizeMode={FastImage.resizeMode.contain}></FastImage>
+    </View>
+  )
+}
+
+export interface DefaultFallbackProps {
+  onReload: () => void
+}
+
+export const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png' }}
+        style={styles.errorImage}
+        resizeMode="contain"
+      />
+      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
+      <TouchableOpacity
+        style={styles.retryButton}
+        onPress={onReload}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default class AsyncContainer extends Component<PropsType<AsyncType>, StateType> {
+  private suspenseFallback: ReactNode
+  private errorFallback: ReactNode
+
+  constructor (props: PropsType<AsyncType>) {
+    super(props)
+    this.state = {
+      hasError: false,
+      key: 0
+    }
+    this.suspenseFallback = this.getSuspenseFallback()
+    this.errorFallback = this.getErrorFallback()
+  }
+
+  // render 阶段收集到的错误
+  static getDerivedStateFromError (error: ComponentError): StateType | undefined {
+    if (error.name === 'ChunkLoadError') {
+      return {
+        hasError: true,
+        key: 0
+      }
+    } else {
+      // 被外层捕获
+      throw error
+    }
+  }
+
+  componentDidCatch (error: ComponentError): void {
+    if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
+      const request = error.request || ''
+      const subpackage = request.split('/').filter((i: string) => !!i)[0]
+      global.onLazyLoadError({
+        type: 'subpackage',
+        subpackage: [subpackage],
+        errMsg: `loadSubpackage: ${error.type}`
+      })
+    }
+  }
+
+  reloadPage () {
+    this.setState((prevState) => {
+      return {
+        hasError: false,
+        key: prevState.key + 1
+      }
+    })
+  }
+
+  getSuspenseFallback () {
+    if (this.props.type === 'page') {
+      const Fallback = this.props.loading || DefaultLoading
+      return <Fallback />
+    } else {
+      const Fallback = this.props.loading
+      return <Fallback {...this.props.props}></Fallback>
+    }
+  }
+
+  getErrorFallback () {
+    if (this.props.type === 'page') {
+      const Fallback = this.props.fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
+      return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>
+    } else {
+      const Fallback = this.props.loading
+      return <Fallback {...this.props.props}></Fallback>
+    }
+  }
+
+  render () {
+    if (this.state.hasError) {
+      if (this.props.type === 'component') {
+        return this.errorFallback
+      } else {
+        return (<PageWrapper>{this.errorFallback}</PageWrapper>)
+      }
+    } else {
+      return (
+        <Suspense fallback={this.suspenseFallback} key={this.state.key}>
+          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
+          {/* {this.props.children(this.props.props)} */}
+        </Suspense>
+      )
+    }
+  }
+}