@mpxjs/webpack-plugin 2.9.12 → 2.9.14

package/lib/index.js

@@ -9,7 +9,6 @@ const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
 const CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
-const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
@@ -1331,58 +1330,6 @@ class MpxWebpackPlugin {
               })
             }
           }
-
-          // 为跨平台api调用注入srcMode参数指导api运行时转换
-          const apiBlackListMap = [
-            'createApp',
-            'createPage',
-            'createComponent',
-            'createStore',
-            'createStoreWithThis',
-            'mixin',
-            'injectMixins',
-            'toPureObject',
-            'observable',
-            'watch',
-            'use',
-            'set',
-            'remove',
-            'delete',
-            'setConvertRule',
-            'getMixin',
-            'getComputed',
-            'implement'
-          ].reduce((map, api) => {
-            map[api] = true
-            return map
-          }, {})
-
-          const injectSrcModeForTransApi = (expr, members) => {
-            // members为空数组时，callee并不是memberExpression
-            if (!members.length) return
-            const callee = expr.callee
-            const args = expr.arguments
-            const name = callee.object.name
-            const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
-            const localSrcMode = queryObj.mode
-            const globalSrcMode = mpx.srcMode
-            const srcMode = localSrcMode || globalSrcMode
-
-            if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
-
-            const srcModeString = `__mpx_src_mode_${srcMode}__`
-            const dep = new InjectDependency({
-              content: args.length
-                ? `, ${JSON.stringify(srcModeString)}`
-                : JSON.stringify(srcModeString),
-              index: expr.end - 1
-            })
-            parser.state.current.addPresentationalDependency(dep)
-          }
-
-          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       }
       normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)

package/lib/runtime/components/web/mpx-web-view.vue

@@ -4,8 +4,8 @@
 
 <script>
   import { getCustomEvent } from './getInnerListeners'
-  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy/src/web/api/index'
-
+  import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+  const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
   const eventLoad = 'load'
   const eventError = 'error'
   const eventMessage = 'message'
@@ -95,7 +95,7 @@
       messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
         const data = event.data
-        const value = data.payload
+        let value = data.payload
         if (!hostValidate) {
           return
         }
@@ -108,19 +108,19 @@
             })
             break
           case 'navigateTo':
-            asyncCallback = navigateTo(value)
+            asyncCallback = navObj.navigateTo(value)
             break
           case 'navigateBack':
-            asyncCallback = value ? navigateBack(value) : navigateBack()
+            asyncCallback = navObj.navigateBack(value)
             break
           case 'redirectTo':
-            asyncCallback = redirectTo(value)
+            asyncCallback = navObj.redirectTo(value)
             break
           case 'switchTab':
-            asyncCallback = switchTab(value)
+            asyncCallback = navObj.switchTab(value)
             break
           case 'reLaunch':
-            asyncCallback = reLaunch(value)
+            asyncCallback = navObj.reLaunch(value)
             break
           case 'getLocation':
             const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation

package/lib/style-compiler/index.js

@@ -1,3 +1,4 @@
+const path = require('path')
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
@@ -27,7 +28,7 @@ module.exports = function (css, map) {
     return matchCondition(this.resourcePath, { include, exclude })
   }
 
-  const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
+  const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs, inlineConfigFile: path.join(mpx.projectRoot, 'vue.config.js') })
   loadPostcssConfig(this, inlineConfig).then(config => {
     const plugins = [] // init with trim plugin
     const options = Object.assign(

package/lib/style-compiler/load-postcss-config.js

@@ -3,6 +3,10 @@ const loadPlugins = require('postcss-load-config/src/plugins')
 
 let loaded
 
+function formatPlugins (plugins, file) {
+  return plugins ? loadPlugins({ plugins }, file) : []
+}
+
 module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
   if (inlineConfig.ignoreConfigFile) {
     loaded = Promise.resolve({
@@ -30,9 +34,9 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
   }
 
   return loaded.then((config = {}) => {
-    let plugins = inlineConfig.plugins || []
+    let plugins = formatPlugins(inlineConfig.plugins, inlineConfig.inlineConfigFile)
+    let prePlugins = formatPlugins(inlineConfig.mpxPrePlugins, inlineConfig.inlineConfigFile)
     let options = inlineConfig.options || {}
-    let prePlugins = inlineConfig.prePlugins || []
 
     // merge postcss config file
     if (config.plugins) {
@@ -41,7 +45,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     if (config.options) {
       if (config.options.mpxPrePlugins) {
         // 使入参和postcss格式保持一致
-        prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file))
+        prePlugins = prePlugins.concat(formatPlugins(config.options.mpxPrePlugins, config.file))
         delete config.options.mpxPrePlugins
       }
       options = Object.assign({}, config.options, options)

package/lib/template-compiler/bind-this.js

@@ -80,23 +80,23 @@ function checkDelAndGetPath (path) {
     if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
       delPath = current.parentPath
     } else if (t.isCallExpression(current.parent)) {
-      // case: String(a) || this._p(a)
       const args = current.node.arguments || current.parent.arguments || []
-      if (args.length === 1) {
+      if (args.length === 1) { // case: String(a) || this._p(a)
         delPath = current.parentPath
       } else {
-        // case: _i(a, function() {})
-        canDel = false
         break
       }
     } else if (t.isMemberExpression(current.parent)) { // case: String(a,'123').b.c
-      if (current.parent.computed && !t.isLiteral(current.parent.property)) { // case: a[b] or a.b[c.d]
-        canDel = false
-        break
+      if (current.parent.computed) { // case: a['b'] or a.b['c.d']
+        if (t.isLiteral(current.parent.property)) {
+          delPath = current.parentPath
+        } else { // case: a[b]
+          break
+        }
       } else {
         delPath = current.parentPath
       }
-    } else if (t.isLogicalExpression(current.container)) { // 只处理case: a || '' or '123' || a
+    } else if (t.isLogicalExpression(current.parent)) { // 只处理case: a || '' or '123' || a
       const key = current.key === 'left' ? 'right' : 'left'
       if (t.isLiteral(current.parent[key])) {
         delPath = current.parentPath
@@ -114,35 +114,49 @@ function checkDelAndGetPath (path) {
 
   // 确定是否可删除
   while (!t.isBlockStatement(current) && canDel) {
-    const { key, container } = current
-    if (t.isIfStatement(container) && key === 'test') { // if (a) {}
+    const { key, listKey, parent } = current
+
+    if (t.isIfStatement(parent) && key === 'test') {
       canDel = false
       break
     }
 
-    if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
+    if (listKey === 'arguments' && t.isCallExpression(parent)) {
+      canDel = false
+      break
+    }
+
+    if (parent.computed && t.isMemberExpression(parent)) {
+      if (key === 'property') {
+        replace = true
+      } else {
+        canDel = false
+        break
+      }
+    }
+
+    if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)
       canDel = false
       ignore = true
       break
     }
 
-    if (t.isConditionalExpression(container)) {
+    if (t.isConditionalExpression(parent)) {
       if (key === 'test') {
         canDel = false
         break
       } else {
         ignore = true
-        replace = true
+        replace = true // 继续往上找，判断是否存在if条件等
       }
     }
 
-    if (
-      t.isBinaryExpression(container) || // 运算 a + b
-      (key === 'value' && t.isObjectProperty(container) && canDel) // ({ name: a })
-    ) {
-      canDel = true
+    if (t.isBinaryExpression(parent)) { // 运算 a + b
+      replace = true // 不能break，case: if (a + b) {}
+    }
+
+    if (key === 'value' && t.isObjectProperty(parent)) { // ({ name: a })
       replace = true
-      // 不能break，case: if (a + b) {}
     }
 
     current = current.parentPath

package/lib/web/processMainScript.js

@@ -69,13 +69,13 @@ module.exports = function (script, {
 
   output += `
   export default processAppOption({
-    App,
+    App: App,
     tabBarMap: ${JSON.stringify(tabBarMap)},
     firstPage: ${JSON.stringify(firstPage)},
     pagesMap: ${shallowStringify(pagesMap)},
     componentsMap: ${shallowStringify(componentsMap)},
-    Vue,
-    VueRouter,
+    Vue: Vue,
+    VueRouter: VueRouter,
     el: ${JSON.stringify(webConfig.el || '#app')}
   })\n`
 

package/lib/web/processScript.js

@@ -56,7 +56,7 @@ module.exports = function (script, {
       }
 
       // 获取组件集合
-      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext })
+      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
 
       // 获取pageConfig
       const pageConfig = {}

package/lib/web/script-helper.js

@@ -31,14 +31,27 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext }) {
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
   const componentsMap = {}
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
       if (componentCfg.async) {
-        componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
+        // todo 暂时只处理局部注册的组件作为componentPlaceholder，暂不支持全局组件和原生组件，如使用了支持范围外的组件将不进行placeholder渲染及替换
+        if (jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName] && localComponentsMap[jsonConfig.componentPlaceholder[componentName]]) {
+          const placeholder = jsonConfig.componentPlaceholder[componentName]
+          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] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
+        } else {
+          componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
+        }
       } else {
         componentsMap[componentName] = `getComponent(require(${componentRequest}))`
       }
@@ -48,7 +61,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
     Object.keys(builtInComponentsMap).forEach((componentName) => {
       const componentCfg = builtInComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+      componentsMap[componentName] = `getComponent(require(${componentRequest}), {__mpxBuiltIn: true})`
     })
   }
   return componentsMap
@@ -69,15 +82,13 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       if (pageCfg) {
         const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
         if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `function() {
-            return import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(function(res) {return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
-          }`
+          tabBarPagesMap[pagePath] = `function(){return import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(function(res) {return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}})})}`
         } else {
-          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}})`
         }
       } else {
         loaderContext.emitWarning(
-          new Error('[json processor][' + loaderContext.resource + ']: ' + `TabBar page path ${pagePath} is not exist in local page map, please check!`)
+          new Error(`[json processor][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
         )
       }
     })
@@ -93,15 +104,13 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
     if (tabBarMap && tabBarMap[pagePath]) {
-      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
+      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), {__mpxBuiltIn: true})`
     } else {
       if (pageCfg.async) {
-        pagesMap[pagePath] = `function() {
-          return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){ return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
-        }`
+        pagesMap[pagePath] = `function(){return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}})})}`
       } else {
         // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
-        pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+        pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}})`
       }
     }
 
@@ -127,7 +136,16 @@ function getRequireScript ({ ctorType, script, loaderContext }) {
   return content
 }
 
-function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain, globalTabBar }) {
+function buildGlobalParams ({
+  moduleId,
+  scriptSrcMode,
+  loaderContext,
+  isProduction,
+  jsonConfig,
+  webConfig,
+  isMain,
+  globalTabBar
+}) {
   let content = ''
   if (isMain) {
     content += `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.12",
+  "version": "2.9.14",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "f4f0a46610bed836be92b95417c6d66087d7cb0d"
+  "gitHead": "e8ab845a544d2db0619a6a7d6c04d9d384d1a6ca"
 }