@mpxjs/webpack-plugin 2.7.15 → 2.7.18

package/lib/index.js

@@ -8,6 +8,7 @@ const ReplaceDependency = require('./dependencies/ReplaceDependency')
 const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
+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')
@@ -33,6 +34,7 @@ const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
+const PartialCompilePlugin = require('./partial-compile/index')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
@@ -159,6 +161,7 @@ class MpxWebpackPlugin {
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
+    options.partialCompile = options.mode !== 'web' && options.partialCompile
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -366,6 +369,10 @@ class MpxWebpackPlugin {
 
     let mpx
 
+    if (this.options.partialCompile) {
+      new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+    }
+
     const getPackageCacheGroup = packageName => {
       if (packageName === 'main') {
         return {
@@ -962,46 +969,6 @@ class MpxWebpackPlugin {
             stage: -1000
           }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
 
-        const transHandler = (expr) => {
-          const module = parser.state.module
-          const current = parser.state.current
-          const { queryObj, resourcePath } = parseRequest(module.resource)
-          const localSrcMode = queryObj.mode
-          const globalSrcMode = mpx.srcMode
-          const srcMode = localSrcMode || globalSrcMode
-          const mode = mpx.mode
-
-          let target
-
-          if (expr.type === 'Identifier') {
-            target = expr
-          } else if (expr.type === 'MemberExpression') {
-            target = expr.object
-          }
-          if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) {
-            return
-          }
-
-          const type = target.name
-
-          const name = type === 'wx' ? 'mpx' : 'createFactory'
-          const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
-
-          const dep = new ReplaceDependency(replaceContent, target.range)
-          current.addPresentationalDependency(dep)
-
-          let needInject = true
-          for (let dep of module.dependencies) {
-            if (dep instanceof CommonJsVariableDependency && dep.name === name) {
-              needInject = false
-              break
-            }
-          }
-          if (needInject) {
-            const dep = new CommonJsVariableDependency(`@mpxjs/core/src/runtime/${name}`, name)
-            module.addDependency(dep)
-          }
-        }
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {
@@ -1036,90 +1003,119 @@ class MpxWebpackPlugin {
           }
         })
 
+        // 处理跨平台转换
         if (mpx.srcMode !== mpx.mode) {
-          // 全量替换未声明的wx identifier
-          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transHandler)
-
-          // parser.hooks.evaluate.for('MemberExpression').tap('MpxWebpackPlugin', (expr) => {
-          //   // Undeclared varible for wx[identifier]()
-          //   // TODO Unable to handle wx[identifier]
-          //   if (expr.object.name === 'wx' && !parser.scope.definitions.has('wx')) {
-          //     transHandler(expr)
-          //   }
-          // })
-          // // Trans for wx.xx, wx['xx'], wx.xx(), wx['xx']()
-          // parser.hooks.expressionMemberChain.for('wx').tap('MpxWebpackPlugin', transHandler)
+          // 处理跨平台全局对象转换
+          const transGlobalObject = (expr) => {
+            const module = parser.state.module
+            const current = parser.state.current
+            const { queryObj, resourcePath } = parseRequest(module.resource)
+            const localSrcMode = queryObj.mode
+            const globalSrcMode = mpx.srcMode
+            const srcMode = localSrcMode || globalSrcMode
+            const mode = mpx.mode
+
+            let target
+            if (expr.type === 'Identifier') {
+              target = expr
+            } else if (expr.type === 'MemberExpression') {
+              target = expr.object
+            }
+
+            if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) return
+
+            const type = target.name
+            const name = type === 'wx' ? 'mpx' : 'createFactory'
+            const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
+
+            const dep = new ReplaceDependency(replaceContent, target.range)
+            current.addPresentationalDependency(dep)
+
+            let needInject = true
+            for (let dep of module.dependencies) {
+              if (dep instanceof CommonJsVariableDependency && dep.name === name) {
+                needInject = false
+                break
+              }
+            }
+            if (needInject) {
+              const dep = new CommonJsVariableDependency(`@mpxjs/core/src/runtime/${name}`, name)
+              module.addDependency(dep)
+            }
+          }
+
+          // 转换wx全局对象
+          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transGlobalObject)
           // Proxy ctor for transMode
           if (!this.options.forceDisableProxyCtor) {
             parser.hooks.call.for('Page').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('Component').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             if (mpx.mode === 'ali' || mpx.mode === 'web') {
               // 支付宝和web不支持Behaviors
               parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
-                transHandler(expr.callee)
+                transGlobalObject(expr.callee)
               })
             }
           }
-        }
 
-        const apiBlackListMap = [
-          'createApp',
-          'createPage',
-          'createComponent',
-          'createStore',
-          'createStoreWithThis',
-          'mixin',
-          'injectMixins',
-          'toPureObject',
-          'observable',
-          'watch',
-          'use',
-          'set',
-          'remove',
-          'delete: del',
-          'setConvertRule',
-          'getMixin',
-          'getComputed',
-          'implement'
-        ].reduce((map, api) => {
-          map[api] = true
-          return map
-        }, {})
-
-        const handler = (expr) => {
-          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
-          }
+          // 为跨平台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 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)
-        }
+          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)
+          }
 
-        if (mpx.srcMode !== mpx.mode) {
-          parser.hooks.callMemberChain.for('imported var').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', handler)
+          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       })
 

package/lib/json-compiler/helper.js

@@ -97,6 +97,8 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     if (resolveMode === 'native') {
       page = urlToRequest(page)
     }
+    // 增加 page 标识
+    page = addQuery(page, { isPage: true })
     resolve(context, page, loaderContext, (err, resource) => {
       if (err) return callback(err)
       const { resourcePath, queryObj: { isFirst } } = parseRequest(resource)

package/lib/json-compiler/index.js

@@ -571,10 +571,14 @@ module.exports = function (content) {
       delete json.subPackages
       json.pages = localPages
       for (let root in subPackagesCfg) {
-        if (!json.subPackages) {
-          json.subPackages = []
+        const subPackageCfg = subPackagesCfg[root]
+        // 分包不存在 pages，输出 subPackages 字段会报错
+        if (subPackageCfg.pages.length) {
+          if (!json.subPackages) {
+            json.subPackages = []
+          }
+          json.subPackages.push(subPackageCfg)
         }
-        json.subPackages.push(subPackagesCfg[root])
       }
       const processOutput = (output) => {
         output = processDynamicEntry(output)

package/lib/loader.js

@@ -18,15 +18,23 @@ const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
+const path = require('path')
 
 module.exports = function (content) {
   this.cacheable()
 
+  // 兼容处理处理ts-loader中watch-run/updateFile逻辑，直接跳过当前loader及后续的vue-loader返回内容
+  if (path.extname(this.resourcePath) === '.ts') {
+    this.loaderIndex -= 2
+    return content
+  }
+
   const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
   const { resourcePath, queryObj } = parseRequest(this.resource)
+
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const packageName = packageRoot || 'main'
   const independent = queryObj.independent
@@ -298,8 +306,10 @@ module.exports = function (content) {
           // require style
           output += getRequire('styles', style, extraOptions, i) + '\n'
         })
-      } else if (ctorType === 'app' && mode === 'ali') {
-        output += getRequire('styles', {}) + '\n'
+      }
+
+      if (parts.styles.filter(style => !style.src).length === 0 && ctorType === 'app' && mode === 'ali') {
+        output += getRequire('styles', {}, {}, parts.styles.length) + '\n'
       }
 
       // json

package/lib/partial-compile/index.js

@@ -0,0 +1,35 @@
+const { matchCondition } = require('../utils/match-condition')
+const { parseQuery } = require('loader-utils')
+
+class MpxPartialCompilePlugin {
+  constructor (condition) {
+    this.condition = condition
+  }
+
+  isResolvingPage (obj) {
+    // valid query should start with '?'
+    const query = obj.query || '?'
+    return parseQuery(query).isPage
+  }
+
+  apply (compiler) {
+    compiler.resolverFactory.hooks.resolver.intercept({
+      factory: (type, hook) => {
+        hook.tap('MpxPartialCompilePlugin', (resolver) => {
+          resolver.hooks.result.tapAsync({
+            name: 'MpxPartialCompilePlugin',
+            stage: -100
+          }, (obj, resolverContext, callback) => {
+            if (this.isResolvingPage(obj) && !matchCondition(obj.path, this.condition)) {
+              obj.path = false
+            }
+            callback(null, obj)
+          })
+        })
+        return hook
+      }
+    })
+  }
+}
+
+module.exports = MpxPartialCompilePlugin

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

@@ -29,7 +29,7 @@
             height: this.image.height
           }
         })
-        
+
         this.$emit('load', e)
       }
       this.image.onerror = (e) => {
@@ -45,14 +45,22 @@
       }
     },
     render (createElement) {
-      if (this.mode === 'widthFix') {
+      if (this.mode === 'widthFix' || this.mode === 'heightFix') {
+        let style
+        if (this.mode === 'widthFix') {
+           style = {
+             height: 'auto'
+           }
+        } else {
+          style = {
+            width: 'auto'
+          }
+        }
         const domProps = {}
         if (this.src) domProps.src = this.src
         return createElement('img', {
           domProps,
-          style: {
-            height: 'auto'
-          },
+          style,
           class: ['mpx-image'],
           on: getInnerListeners(this, { ignoredListeners: ['load', 'error'] })
         })

package/lib/template-compiler/compiler.js

@@ -1822,7 +1822,8 @@ function processAliAddComponentRootView (el, options) {
     { condition: /^(on|catch)TouchCancel$/, action: 'clone' },
     { condition: /^(on|catch)LongTap$/, action: 'clone' },
     { condition: /^data-/, action: 'clone' },
-    { condition: 'style', action: 'move' }
+    { condition: /^style$/, action: 'move' },
+    { condition: /^slot$/, action: 'move' }
   ]
   const processAppendAttrsRules = [
     { name: 'class', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
@@ -1835,13 +1836,8 @@ function processAliAddComponentRootView (el, options) {
   }
 
   function processMove (attr) {
-    let movedAttr = getAndRemoveAttr(el, attr.name)
-    if (movedAttr.has) {
-      newElAttrs.push({
-        name: attr,
-        value: movedAttr.val
-      })
-    }
+    getAndRemoveAttr(el, attr.name)
+    newElAttrs.push(attr)
   }
 
   function processAppendRules (el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.15",
+  "version": "2.7.18",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "bf6b0d9938fecb4faafa2557c2c2caad1ea98535"
+  "gitHead": "5cca51d77d97143319c895dab301ef9a789ce40f"
 }