@mpxjs/webpack-plugin 2.10.6-beta.3 → 2.10.6-beta.5

package/lib/dependencies/RecordFileUrlDependency.js

@@ -0,0 +1,58 @@
+const path = require('path')
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordFileUrlDependency extends NullDependency {
+  constructor (range, url) {
+    super()
+    this.range = range
+    this.url = url
+  }
+
+  get type () {
+    return 'mpx record file url'
+  }
+
+  mpxAction (module, compilation, callback) {
+    return callback()
+  }
+
+  updateHash (hash, context) {
+    hash.update('' + (+new Date()) + Math.random())
+    super.updateHash(hash, context)
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.url)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.url = read()
+    super.deserialize(context)
+  }
+}
+
+RecordFileUrlDependency.Template = class RecordFileUrlDependencyTemplate {
+  apply (dependency, source, { module, chunkGraph, runtimeTemplate }) {
+    const { range } = dependency
+    const compliation = runtimeTemplate.compilation
+    const publicPath = compliation.outputOptions.publicPath
+    const chunks = chunkGraph.getModuleChunks(module)
+    const chunk = chunks[0]
+    const chunkPath = path.dirname(publicPath + chunk.name)
+    const imgPath = publicPath + dependency.url
+    let relativePath = path.relative(chunkPath, imgPath)
+    if (!relativePath.startsWith('.')) {
+      relativePath = './' + relativePath
+    }
+
+    source.replace(range[0], range[1] - 1, JSON.stringify(relativePath))
+  }
+}
+
+makeSerializable(RecordFileUrlDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordFileUrlDependency')
+
+module.exports = RecordFileUrlDependency

package/lib/file-loader.js

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

package/lib/index.js

@@ -44,6 +44,7 @@ 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')
@@ -672,6 +673,9 @@ 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())
     })
 
@@ -1217,12 +1221,12 @@ class MpxWebpackPlugin {
         // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
-          if (isWeb(mpx.mode)) {
+          if (isWeb(mpx.mode) || isReact(mpx.mode)) {
             // web独立处理splitChunk
-            if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
+            if (isWeb(mpx.mode) && !hasOwn(splitChunksOptions.cacheGroups, 'main')) {
               splitChunksOptions.cacheGroups.main = {
                 chunks: 'initial',
-                name: 'bundle',
+                name: 'lib/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
                 test: /[\\/]node_modules[\\/]/
               }
               needInit = true
@@ -1230,7 +1234,7 @@ class MpxWebpackPlugin {
             if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
               splitChunksOptions.cacheGroups.async = {
                 chunks: 'async',
-                name: 'async',
+                name: 'async-common/index',
                 minChunks: 2
               }
               needInit = true
@@ -1378,6 +1382,15 @@ 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)

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

@@ -3,7 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
-const { isOriginTag, isBuildInTag } = require('../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInWebTag, isBuildInReactTag } = require('../../../utils/dom-tag-config')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -128,19 +128,41 @@ module.exports = function getSpec ({ warn, error }) {
   /**
    * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
    */
-  function fixComponentName (type) {
-    return function (input) {
-      const usingComponents = input[type]
-      if (usingComponents) {
-        Object.keys(usingComponents).forEach(tag => {
-          if (isOriginTag(tag) || isBuildInTag(tag)) {
-            usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
-            delete usingComponents[tag]
+  function fixComponentName (input, { mode }) {
+    const isNeedFixTag = (tag) => {
+      switch (mode) {
+        case 'web': return isOriginTag(tag) || isBuildInWebTag(tag)
+        case 'ios':
+        case 'android':
+        case 'harmony': return isOriginTag(tag) || isBuildInReactTag(tag)
+      }
+    }
+
+    const usingComponents = input.usingComponents
+    const componentPlaceholder = input.componentPlaceholder
+    if (usingComponents) {
+      const transfromKeys = []
+      Object.keys(usingComponents).forEach(tag => {
+        if (isNeedFixTag(tag)) {
+          usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
+          delete usingComponents[tag]
+          transfromKeys.push(tag)
+        }
+      })
+
+      if (transfromKeys.length && componentPlaceholder) {
+        Object.keys(componentPlaceholder).forEach(key => {
+          if (transfromKeys.includes(componentPlaceholder[key])) {
+            componentPlaceholder[key] = `mpx-com-${componentPlaceholder[key]}`
+          }
+          if (transfromKeys.includes(key)) {
+            componentPlaceholder[`mpx-com-${key}`] = componentPlaceholder[key]
+            delete componentPlaceholder[key]
           }
         })
       }
-      return input
     }
+    return input
   }
 
   const componentRules = [
@@ -154,13 +176,6 @@ module.exports = function getSpec ({ warn, error }) {
       swan: deletePath(),
       jd: deletePath()
     },
-    {
-      test: 'usingComponents',
-      web: fixComponentName('usingComponents'),
-      ios: fixComponentName('usingComponents'),
-      android: fixComponentName('usingComponents'),
-      harmony: fixComponentName('usingComponents')
-    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -170,7 +185,11 @@ module.exports = function getSpec ({ warn, error }) {
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
-      jd: addGlobalComponents
+      jd: addGlobalComponents,
+      web: fixComponentName,
+      ios: fixComponentName,
+      android: fixComponentName,
+      harmony: fixComponentName
     }
   ]
 
@@ -371,13 +390,6 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
-      {
-        test: 'usingComponents',
-        web: fixComponentName('usingComponents'),
-        ios: fixComponentName('usingComponents'),
-        android: fixComponentName('usingComponents'),
-        harmony: fixComponentName('usingComponents')
-      },
       {
         test: 'usingComponents',
         ali: componentNameCapitalToHyphen('usingComponents'),
@@ -442,6 +454,12 @@ module.exports = function getSpec ({ warn, error }) {
         swan: getWindowRule(),
         tt: getWindowRule(),
         jd: getWindowRule()
+      },
+      {
+        web: fixComponentName,
+        ios: fixComponentName,
+        android: fixComponentName,
+        harmony: fixComponentName
       }
     ]
   }

package/lib/platform/template/wx/component-config/fix-component-name.js

@@ -1,4 +1,4 @@
-const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInWebTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
   const handleComponentTag = (el, data) => {
@@ -16,7 +16,7 @@ module.exports = function () {
     waterfall: true,
     skipNormalize: true,
     supportedModes: ['web', 'ios', 'android', 'harmony'],
-    test: (input) => isOriginTag(input) || isBuildInTag(input),
+    test: (input) => isOriginTag(input) || isBuildInWebTag(input),
     web: handleComponentTag,
     ios: handleComponentTag,
     android: handleComponentTag,

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

@@ -34,7 +34,8 @@ module.exports = function getSpec ({ warn, error }) {
       touchstart: 'touchstart',
       touchmove: 'touchmove',
       touchend: 'touchend',
-      touchcancel: 'touchcancel'
+      touchcancel: 'touchcancel',
+      transitionend: 'transitionend'
     }
     if (eventMap[eventName]) {
       return eventMap[eventName]

package/lib/react/processJSON.js

@@ -11,8 +11,11 @@ const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
+const mpxViewPath = normalize.lib('runtime/components/react/dist/mpx-view.jsx')
+const mpxTextPath = normalize.lib('runtime/components/react/dist/mpx-text.jsx')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -133,6 +136,29 @@ module.exports = function (jsonContent, {
     isShow: true
   }
 
+  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
+    const componentPlaceholder = jsonObj.componentPlaceholder || {}
+    if (componentPlaceholder[name]) return
+    componentPlaceholder[name] = placeholder
+    jsonObj.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry && !jsonObj.usingComponents[placeholder]) jsonObj.usingComponents[placeholder] = placeholderEntry
+  }
+  const normalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      const placeholderMap = mode === 'ali'
+        ? {
+          view: { name: 'mpx-view', resource: mpxViewPath },
+          text: { name: 'mpx-text', resource: mpxTextPath }
+        }
+        : {}
+      placeholder = placeholderMap[placeholder] || { name: placeholder }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    return placeholder
+  }
+
   const processTabBar = (tabBar, callback) => {
     if (tabBar) {
       tabBar = Object.assign({}, defaultTabbar, tabBar)
@@ -301,19 +327,48 @@ module.exports = function (jsonContent, {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          const { resourcePath, queryObj } = parseRequest(resource)
-          componentsMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-          localComponentsMap[name] = {
-            resource: addQuery(resource, {
-              isComponent: true,
-              outputPath
-            }),
-            async: queryObj.async || tarRoot
+          const fillComponentsMap = (name, entry, tarRoot) => {
+            const { resource, outputPath } = entry
+            const { resourcePath, queryObj } = parseRequest(resource)
+            componentsMap[resourcePath] = outputPath
+            loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+            localComponentsMap[name] = {
+              resource: addQuery(resource, {
+                isComponent: true,
+                outputPath
+              }),
+              async: queryObj.async || tarRoot
+            }
+          }
+          fillComponentsMap(name, entry, tarRoot)
+          const { relativePath } = entry
+
+          if (tarRoot) {
+            if (placeholder) {
+              placeholder = normalizePlaceholder(placeholder)
+              if (placeholder.resource) {
+                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
+                  if (err) return callback(err)
+                  fillInComponentPlaceholder(name, placeholder.name, entry)
+                  fillComponentsMap(placeholder.name, entry, '')
+                  callback()
+                })
+              } else {
+                fillInComponentPlaceholder(name, placeholder.name)
+                callback()
+              }
+            } else {
+              if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
+                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+                emitError(errMsg)
+              }
+              callback()
+            }
+          } else {
+            callback()
           }
-          callback()
         })
       }, callback)
     } else {

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 } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 \n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
@@ -53,7 +53,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {
-    output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+    output += `import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
     // 获取组件集合
     const componentsMap = buildComponentsMap({
       localComponentsMap,

package/lib/react/script-helper.js

@@ -4,7 +4,6 @@ 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) {
@@ -15,8 +14,6 @@ function getMpxComponentRequest (component) {
   return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
 }
 
-const mpxAsyncContainer = getMpxComponentRequest('AsyncContainer')
-
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
     return `/* webpackChunkName: "${chunkName}/index" */`
@@ -24,55 +21,33 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function getAsyncComponent (componentName, componentRequest, chunkName, fallback) {
-  return `getComponent(memo(forwardRef(function(props, ref) {
-    return createElement(
-      getComponent(require(${mpxAsyncContainer})),
-      {
-        type: 'component',
-        props: Object.assign({}, props, { ref }),
-        loading: getComponent(require(${fallback})),
-        children: (props) => createElement(
-          getComponent(
-            lazy(function(){ return import(${getAsyncChunkName(chunkName)}${componentRequest}) }), { displayName: ${JSON.stringify(componentName)} }
-          ),
-          props
-        )
-      }
-    )
-  })))`
-}
-
-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(${mpxAsyncContainer})),
-      {
-        type: 'page',
-        props: props,
-        fallback: ${fallback},
-        loading: ${loading},
-        children: (props) => createElement(
-          getComponent(
-            lazy(function(){ return import(${getAsyncChunkName(chunkName)}${componentRequest}) }), { __mpxPageRoute: ${JSON.stringify(componentName)}, displayName: 'Page' }
-          ),
-          props
-        )
-      }
-    )
-  })`
+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 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) {
-      pagesMap[pagePath] = getAsyncPage(pagePath, pageRequest, pageCfg.async, rnConfig.asyncChunk && rnConfig.asyncChunk.fallback, rnConfig.asyncChunk && rnConfig.asyncChunk.loading)
+      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)
     } else {
     // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
       pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
@@ -98,6 +73,7 @@ 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]) {
@@ -108,24 +84,21 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
               )
             }
-            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)
+            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, placeholderRequest)
           } else {
-            if (!isBuildInReactTag(placeholder)) {
+            const tag = `mpx-${placeholder}`
+            if (!isBuildInReactTag(tag)) {
               loaderContext.emitError(
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
               )
             }
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, getMpxComponentRequest(`mpx-${placeholder}`))
+            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
           }
         } else {
           loaderContext.emitError(
             new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
           )
-          componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
+          componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async)
         }
       } else {
         componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`