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

package/lib/index.js

@@ -44,7 +44,6 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
-const WriteVfsDependency = require('./dependencies/WriteVfsDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -73,6 +72,8 @@ const isEmptyObject = require('./utils/is-empty-object')
 const DynamicPlugin = require('./resolver/DynamicPlugin')
 const { isReact, isWeb } = require('./utils/env')
 const VirtualModulesPlugin = require('webpack-virtual-modules')
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -409,7 +410,7 @@ class MpxWebpackPlugin {
     let splitChunksOptions = null
     let splitChunksPlugin = null
     // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
-    if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
+    if (optimization.splitChunks !== false) {
       splitChunksOptions = Object.assign({
         chunks: 'all',
         usedExports: optimization.usedExports === true,
@@ -607,6 +608,22 @@ class MpxWebpackPlugin {
           return mpx
         }
       })
+
+      if (isReact(this.options.mode)) {
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.loadScript)
+          .tap({
+            stage: -1000,
+            name: 'LoadAsyncChunk'
+          }, (chunk, set) => {
+            compilation.addRuntimeModule(
+              chunk,
+              new LoadAsyncChunkModule(this.options.rnConfig && this.options.rnConfig.asyncChunk && this.options.rnConfig.asyncChunk.timeout)
+            )
+            return true
+          })
+      }
+
       compilation.dependencyFactories.set(ResolveDependency, new NullFactory())
       compilation.dependencyTemplates.set(ResolveDependency, new ResolveDependency.Template())
 
@@ -655,9 +672,6 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
-      compilation.dependencyFactories.set(WriteVfsDependency, new NullFactory())
-      compilation.dependencyTemplates.set(WriteVfsDependency, new WriteVfsDependency.Template())
-
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -681,8 +695,6 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
-          // 用于template模版获取父组件引用的自定义组件，目前仅输出web时下支持使用
-          parentLocalComponentsMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
@@ -746,7 +758,7 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
-          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || isReact(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -1395,10 +1407,10 @@ class MpxWebpackPlugin {
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
               if (mpx.supportRequireAsync) {
-                if (isWeb(mpx.mode)) {
+                if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   const depBlock = new AsyncDependenciesBlock(
                     {
-                      name: tarRoot
+                      name: tarRoot + '/index'
                     },
                     expr.loc,
                     request

package/lib/platform/index.js

@@ -9,7 +9,6 @@ module.exports = function getRulesRunner ({
   testKey,
   mainKey,
   waterfall,
-  moduleId,
   warn,
   error
 }) {
@@ -24,14 +23,13 @@ module.exports = function getRulesRunner ({
       wx: require('./json/wx')
     }
   }
-  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error, moduleId })
+  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error })
   if (spec && spec.supportedModes.indexOf(mode) > -1) {
     const normalizeTest = spec.normalizeTest
     const mainRules = mainKey ? spec[mainKey] : spec
     if (mainRules) {
       return function (input) {
-        const a = runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
-        return a
+        return runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
       }
     }
   }

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

@@ -45,7 +45,7 @@ const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
 
-module.exports = function getComponentConfigs ({ warn, error, moduleId }) {
+module.exports = function getComponentConfigs ({ warn, error }) {
   /**
    * universal print for detail component warn or error
    * @param {object} config
@@ -116,7 +116,7 @@ module.exports = function getComponentConfigs ({ warn, error, moduleId }) {
     map({ print }),
     canvas({ print }),
     wxs({ print }),
-    template({ moduleId }),
+    template(),
     block(),
     icon(),
     webView({ print }),

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

@@ -1,13 +1,8 @@
 const TAG_NAME = 'template'
 
-module.exports = function ({ moduleId }) {
+module.exports = function () {
   return {
     test: TAG_NAME,
-    web (tag, { el }) {
-      if (el.attrsMap[':is']) {
-        return 'component'
-      }
-    },
     props: [
       {
         test: 'data',
@@ -16,26 +11,6 @@ module.exports = function ({ moduleId }) {
             name,
             value: `{${value}}`
           }
-        },
-        web ({ value }) {
-          let bindValue = value
-          if (moduleId) {
-            const lastIndex = value.lastIndexOf('}}')
-            bindValue = value ? value.slice(0, lastIndex) + `, _data_v_id: '${moduleId}'}}` : `{{ _data_v_id: '${moduleId}' }}`
-          }
-          return {
-            name: 'v-bind',
-            value: bindValue
-          }
-        }
-      },
-      {
-        test: 'is',
-        web ({ value }) {
-          return {
-            name: ':is',
-            value: `'${value}'`
-          }
         }
       }
     ]

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

@@ -3,11 +3,11 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const { vbindMustache, parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
+const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 const { dash2hump } = require('../../../utils/hump-dash')
 
-module.exports = function getSpec ({ warn, error, moduleId }) {
+module.exports = function getSpec ({ warn, error }) {
   function getRnDirectiveEventHandle (mode) {
     return function ({ name, value }, { eventRules, el }) {
       const match = this.test.exec(name)
@@ -68,13 +68,6 @@ module.exports = function getSpec ({ warn, error, moduleId }) {
     postProps: [
       {
         web ({ name, value }) {
-          if (name === 'v-bind') {
-            const vbindValue = vbindMustache(value)
-            return {
-              name,
-              value: vbindValue
-            }
-          }
           const parsed = parseMustacheWithContext(value)
           if (name.startsWith('data-')) {
             return {
@@ -574,6 +567,6 @@ module.exports = function getSpec ({ warn, error, moduleId }) {
       ]
     }
   }
-  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error, moduleId }).concat({}), spec)
+  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }).concat({}), spec)
   return spec
 }

package/lib/react/LoadAsyncChunkModule.js

@@ -0,0 +1,68 @@
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const Template = require('webpack/lib/Template')
+const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
+
+class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
+  constructor (timeout) {
+    super('load async chunk')
+    this.timeout = timeout || 5000
+  }
+
+  generate () {
+    const { compilation } = this
+    const { runtimeTemplate } = compilation
+    const loadScriptFn = RuntimeGlobals.loadScript
+    return Template.asString([
+      'var inProgress = {};',
+      `${loadScriptFn} = ${runtimeTemplate.basicFunction(
+        'url, done, key, chunkId',
+        [
+          `var packageName = ${RuntimeGlobals.getChunkScriptFilename}(chunkId) || ''`,
+          'packageName = packageName.split("/")[0]',
+          'var config = {',
+          Template.indent([
+            'url: url,',
+            'package: packageName'
+          ]),
+          '}',
+          'if(inProgress[url]) { inProgress[url].push(done); return; }',
+          'inProgress[url] = [done];',
+          'var callback = function (type, result) {',
+          Template.indent([
+            'var event = {',
+            Template.indent([
+              'type: type,',
+              'target: {',
+              Template.indent(['src: url']),
+              '}'
+            ]),
+            '}'
+          ]),
+          Template.indent([
+            'var doneFns = inProgress[url]',
+            'clearTimeout(timeoutCallback)',
+            'delete inProgress[url]',
+            `doneFns && doneFns.forEach(${runtimeTemplate.returningFunction(
+              'fn(event)',
+              'fn'
+            )})`
+          ]),
+          '}',
+          `var timeoutCallback = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
+          "var successCallback = callback.bind(null, 'load');",
+          "var failedCallback = callback.bind(null, 'fail')",
+          'var loadChunkAsyncFn = global.__mpx.config.rnConfig && global.__mpx.config.rnConfig.loadChunkAsync',
+          'if (typeof loadChunkAsyncFn !== \'function\') {',
+            Template.indent([
+              'console.error("[Mpx runtime error]: please provide correct loadChunkAsync function")',
+              'return'
+            ]),
+          '}',
+          'loadChunkAsyncFn(config).then(successCallback).catch(failedCallback)'
+        ]
+      )}`
+    ])
+  }
+}
+
+module.exports = LoadAsyncChunkRuntimeModule

package/lib/react/index.js

@@ -35,6 +35,7 @@ module.exports = function ({
     })
   }
   const mpx = loaderContext.getMpx()
+  const rnConfig = mpx.rnConfig
   // 通过RecordLoaderContentDependency和loaderContentCache确保子request不再重复生成loaderContent
   const cacheContent = mpx.loaderContentCache.get(loaderContext.resourcePath)
   if (cacheContent) return callback(null, cacheContent)
@@ -91,7 +92,8 @@ module.exports = function ({
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
         localComponentsMap: jsonRes.localComponentsMap,
-        localPagesMap: jsonRes.localPagesMap
+        localPagesMap: jsonRes.localPagesMap,
+        rnConfig
       }, callback)
     }
   ], (err, scriptRes) => {

package/lib/react/processJSON.js

@@ -113,14 +113,14 @@ module.exports = function (jsonContent, {
   }
 
   if (ctorType === 'page') {
-    // const keysToExtract = ['navigationStyle']
+    const keysToExtract = ['navigationStyle', 'navigationBarTitleText', 'navigationBarTextStyle', 'navigationBarBackgroundColor']
     const configObj = {}
     // 暂时先不注入数据，后续如需要使用再用
-    // keysToExtract.forEach(key => {
-    //   if (jsonObj[key]) {
-    //     configObj[key] = jsonObj[key]
-    //   }
-    // })
+    keysToExtract.forEach(key => {
+      if (jsonObj[key]) {
+        configObj[key] = jsonObj[key]
+      }
+    })
     loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
   }
 

package/lib/react/processScript.js

@@ -13,6 +13,7 @@ module.exports = function (script, {
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap,
+  rnConfig,
   componentGenerics,
   genericsInfo
 }, callback) {
@@ -32,6 +33,7 @@ module.exports = function (script, {
   }
 
   let output = '/* script */\n'
+  output += "import { lazy, createElement, memo, forwardRef } from 'react'\n"
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
@@ -39,7 +41,8 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
     const componentsMap = buildComponentsMap({
       localComponentsMap,
@@ -50,8 +53,6 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {
-    // RN环境暂不支持异步加载
-    // output += 'import { lazy } from \'react\'\n'
     output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
     // 获取组件集合
     const componentsMap = buildComponentsMap({

package/lib/react/script-helper.js

@@ -3,30 +3,80 @@ const createHelpers = require('../helpers')
 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) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
 
-// function getAsyncChunkName (chunkName) {
-//   if (chunkName && typeof chunkName !== 'boolean') {
-//     return `/* webpackChunkName: "${chunkName}" */`
-//   }
-//   return ''
-// }
+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" */`
+  }
+  return ''
+}
 
-function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
+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 buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig }) {
   let firstPage = ''
   const pagesMap = {}
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    // if (pageCfg.async) {
-    //   pagesMap[pagePath] = `lazy(function(){return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})})})`
-    // } else {
+    if (pageCfg.async) {
+      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"})`
-    // }
+      pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
+    }
     if (pagePath === jsonConfig.entryPagePath) {
       firstPage = pagePath
     }
@@ -42,16 +92,44 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
 
 function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
   const componentsMap = {}
+  const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      // RN中暂不支持异步加载
-      // if (componentCfg.async) {
-      //   componentsMap[componentName] = `lazy(function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res, {displayName: ${JSON.stringify(componentName)}})})})`
-      // } else {
-      componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
-      // }
+      if (componentCfg.async) {
+        const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
+        if (placeholder) {
+          if (localComponentsMap[placeholder]) {
+            const placeholderCfg = localComponentsMap[placeholder]
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
+            if (placeholderCfg.async) {
+              loaderContext.emitWarning(
+                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)
+          } else {
+            if (!isBuildInReactTag(placeholder)) {
+              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}`))
+          }
+        } else {
+          loaderContext.emitError(
+            new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
+          )
+          componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
+        }
+      } else {
+        componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
+      }
     })
   }
   if (builtInComponentsMap) {
@@ -107,6 +185,7 @@ global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
 global.__getAppComponents = function () {
   return ${shallowStringify(componentsMap)}
 }
+global.__preloadRule = ${JSON.stringify(jsonConfig.preloadRule)}
 global.currentInject.getPages = function () {
   return ${shallowStringify(pagesMap)}
 }