@mpxjs/webpack-plugin 2.8.49 → 2.8.51

package/lib/dependencies/CommonJsExtractDependency.js

@@ -0,0 +1,51 @@
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class CommonJsExtractDependency extends ModuleDependency {
+  constructor (request, range) {
+    super(request)
+    this.range = range
+  }
+
+  get type () {
+    return 'mpx cjs extract'
+  }
+
+  get category () {
+    return 'commonjs'
+  }
+}
+
+CommonJsExtractDependency.Template = class CommonJsExtractDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  apply (
+    dep,
+    source,
+    {
+      runtimeTemplate,
+      moduleGraph,
+      chunkGraph,
+      runtimeRequirements
+    }
+  ) {
+    let content = ''
+    if (!dep.weak) {
+      content = runtimeTemplate.moduleExports({
+        module: moduleGraph.getModule(dep),
+        chunkGraph,
+        request: dep.request,
+        weak: dep.weak,
+        runtimeRequirements
+      })
+    }
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+makeSerializable(
+  CommonJsExtractDependency,
+  '@mpxjs/webpack-plugin/lib/dependencies/CommonJsExtractDependency'
+)
+
+module.exports = CommonJsExtractDependency

package/lib/extractor.js

@@ -116,5 +116,6 @@ module.exports.pitch = async function (remainingRequest) {
     }
   }
 
+  if (!resultSource) buildInfo.isEmpty = true
   return resultSource
 }

package/lib/helpers.js

@@ -20,7 +20,15 @@ module.exports = function createHelpers (loaderContext) {
   const { mode, env } = loaderContext.getMpx() || {}
 
   function getRequire (type, part, extraOptions, index) {
-    return 'require(' + getRequestString(type, part, extraOptions, index) + ')'
+    let extract = false
+    switch (type) {
+      // eslint-disable-next-line no-fallthrough
+      case 'json':
+      case 'styles':
+      case 'template':
+        extract = true
+    }
+    return (extract ? 'require.extract(' : 'require(') + getRequestString(type, part, extraOptions, index) + ')'
   }
 
   function getImport (type, part, extraOptions, index) {

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 CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
 const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
@@ -124,6 +125,7 @@ class MpxWebpackPlugin {
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
+    options.renderOptimizeRules = options.renderOptimizeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
@@ -171,6 +173,12 @@ class MpxWebpackPlugin {
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
+    let proxyComponentEventsRules = []
+    const proxyComponentEventsRulesRaw = options.proxyComponentEventsRules
+    if (proxyComponentEventsRulesRaw) {
+      proxyComponentEventsRules = Array.isArray(proxyComponentEventsRulesRaw) ? proxyComponentEventsRulesRaw : [proxyComponentEventsRulesRaw]
+    }
+    options.proxyComponentEventsRules = proxyComponentEventsRules
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -405,13 +413,13 @@ class MpxWebpackPlugin {
               name: 'MpxPartialCompilePlugin',
               stage: -100
             }, (obj, resolverContext, callback) => {
-              if (obj.path.startsWith(require.resolve('./json-compiler/default-page.mpx'))) {
+              if (obj.path.startsWith(require.resolve('./runtime/components/wx/default-page.mpx'))) {
                 return callback(null, obj)
               }
               if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompile)) {
                 const infix = obj.query ? '&' : '?'
                 obj.query += `${infix}resourcePath=${obj.path}`
-                obj.path = require.resolve('./json-compiler/default-page.mpx')
+                obj.path = require.resolve('./runtime/components/wx/default-page.mpx')
               }
               callback(null, obj)
             })
@@ -554,6 +562,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(CommonJsAsyncDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.Template())
 
+      compilation.dependencyFactories.set(CommonJsExtractDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(CommonJsExtractDependency, new CommonJsExtractDependency.Template())
+
       compilation.dependencyFactories.set(RecordVueContentDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordVueContentDependency, new RecordVueContentDependency.Template())
     })
@@ -628,12 +639,14 @@ class MpxWebpackPlugin {
           appTitle: 'Mpx homepage',
           attributes: this.options.attributes,
           externals: this.options.externals,
+          renderOptimizeRules: this.options.renderOptimizeRules,
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
           partialCompile: this.options.partialCompile,
           asyncSubpackageRules: this.options.asyncSubpackageRules,
+          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -923,6 +936,17 @@ class MpxWebpackPlugin {
       })
 
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
+        // 移除extractor抽取后的空模块
+        for (const module of modules) {
+          if (module.buildInfo.isEmpty) {
+            for (const connection of moduleGraph.getIncomingConnections(module)) {
+              if (connection.dependency.type === 'mpx cjs extract') {
+                connection.weak = true
+                connection.dependency.weak = true
+              }
+            }
+          }
+        }
         // 自动跟进分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
@@ -1096,6 +1120,31 @@ class MpxWebpackPlugin {
             stage: -1000
           }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers, expr.arguments))
 
+        const requireExtractHandler = (expr, members, args) => {
+          if (members[0] === 'extract') {
+            const request = expr.arguments[0].value
+            const range = expr.range
+            const dep = new CommonJsExtractDependency(request, range)
+            parser.state.current.addDependency(dep)
+            if (args) parser.walkExpressions(args)
+            return true
+          }
+        }
+
+        parser.hooks.callMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -2000
+          }, (expr, members) => requireExtractHandler(expr, members))
+
+        parser.hooks.callMemberChainOfCallMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -2000
+          }, (expr, calleeMembers, callExpr) => requireExtractHandler(callExpr, calleeMembers, expr.arguments))
+
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {

package/lib/json-compiler/index.js

@@ -250,7 +250,7 @@ module.exports = function (content) {
     const localPages = []
     const subPackagesCfg = {}
     const pageKeySet = new Set()
-    const defaultPagePath = require.resolve('./default-page.mpx')
+    const defaultPagePath = require.resolve('../runtime/components/wx/default-page.mpx')
     const processPages = (pages, context, tarRoot = '', callback) => {
       if (pages) {
         const pagesCache = []

package/lib/loader.js

@@ -280,7 +280,7 @@ module.exports = function (content) {
       let ctor = 'App'
       if (ctorType === 'page') {
         // swan也默认使用Page构造器
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

package/lib/native-loader.js

@@ -214,7 +214,7 @@ module.exports = function (content) {
       let ctorType = 'app'
       if (pagesMap[resourcePath]) {
         ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

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

@@ -3,6 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
+const { isOriginTag } = 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')
@@ -125,6 +126,26 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  /**
+   * 将小程序代码中使用的与原生 HTML tag 同名组件进行转化，以解决与原生tag命名冲突问题。
+   * @param {string} type usingComponents
+   * @returns input
+   */
+  function webHTMLTagProcesser (type) {
+    return function (input) {
+      const usingComponents = input[type]
+      if (usingComponents) {
+        Object.keys(usingComponents).forEach(tag => {
+          if (isOriginTag(tag)) {
+            usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
+            delete usingComponents[tag]
+          }
+        })
+      }
+      return input
+    }
+  }
+
   const componentRules = [
     {
       test: 'componentGenerics',
@@ -137,6 +158,10 @@ module.exports = function getSpec ({ warn, error }) {
       tt: deletePath(),
       jd: deletePath()
     },
+    {
+      test: 'usingComponents',
+      web: webHTMLTagProcesser('usingComponents')
+    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -237,7 +262,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
     normalizeTest,
     page: [
       ...windowRules,
@@ -338,6 +363,10 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
+      {
+        test: 'usingComponents',
+        web: webHTMLTagProcesser('usingComponents')
+      },
       {
         test: 'usingComponents',
         ali: componentNameCapitalToHyphen('usingComponents'),

package/lib/platform/run-rules.js

@@ -32,7 +32,8 @@ module.exports = function runRules (rules = [], input, options = {}) {
       if (result !== undefined) {
         input = result
       }
-      if (!waterfall) break
+      // rule 内外 waterfall 均为 false 时跳过
+      if (!rule.waterfall && !waterfall) break
     }
   }
   return input

package/lib/platform/template/normalize-component-rules.js

@@ -11,6 +11,8 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
     if (cfg.test) {
       result.test = cfg.test
     }
+    // 透传 waterfall 信息
+    if (cfg.waterfall) result.waterfall = cfg.waterfall
     const supportedModes = cfg.supportedModes || spec.supportedModes
     // 合并component-config中组件的event 与index中公共的event规则
     const eventRules = (cfg.event || []).concat(spec.event.rules)

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

@@ -0,0 +1,17 @@
+const { isOriginTag } = require('../../../../utils/dom-tag-config')
+
+module.exports = function () {
+  return {
+    waterfall: true,
+    test: (input) => isOriginTag(input),
+    // 处理原生tag
+    web (tag, data = {}) {
+      // @see packages/webpack-plugin/lib/platform/json/wx/index.js webHTMLTagProcesser
+      const newTag = `mpx-com-${tag}`
+      const usingComponents = data.usingComponents || []
+      // 存在同名组件，则返回新tag
+      if (usingComponents.includes(newTag)) return newTag
+      return tag
+    }
+  }
+}

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

@@ -39,6 +39,7 @@ const view = require('./view')
 const webView = require('./web-view')
 const wxs = require('./wxs')
 const component = require('./component')
+const fixHTMLTag = require('./fix-html-tag')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -79,6 +80,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
+    fixHTMLTag(),
     ...Nonsupport({ print }),
     ad({ print }),
     view({ print }),

package/lib/runtime/components/web/filterTag.js

@@ -1,3 +1,12 @@
+const {
+  isRichTextTag,
+  isUnaryTag,
+  isSpace,
+  isContWidth,
+  isContHeight,
+  isContConRow
+} = require('../../../utils/dom-tag-config')
+
 // eslint-disable-next-line
 const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // useless escape
 const ncname = '[a-zA-Z_][\\w\\-\\.]*'
@@ -11,36 +20,6 @@ const comment = /^<!\--/
 const invalidAttributeRE = /[\s"'<>\/=]/
 let currentParent
 
-function makeMap (str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
-}
-
-const isRichTextTag = makeMap(
-  'a,abbr,address,article,aside,b,bdi,bdo,big,blockquote,br,caption,' +
-  'center,cite,code,col,colgroup,dd,del,div,dl,dt,em,fieldset,' +
-  'font,footer,h1,h2,h3,h4,h5,h6,header,hr,i,img,ins,label,legend,' +
-  'li,mark,nav,ol,p,pre,q,rt,ruby,s,section,small,span,strong,sub,sup,' +
-  'table,tbody,td,tfoot,th,thead,tr,tt,u,ul'
-)
-const isUnaryTag = makeMap(
-  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
-  'link,meta,param,source,track,wbr'
-)
-const isSpace = makeMap('ensp,emsp,nbsp')
-
-const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
-
-const isContHeight = makeMap('img,td,th,tr')
-
-const isContConRow = makeMap('td,th,tr')
-
 function makeAttrsMap (attrs) {
   const map = {}
   for (let i = 0, l = attrs.length; i < l; i++) {

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

@@ -345,7 +345,11 @@
             class: 'circle circle-c'
           }),
         ]
-      ) : null
+      ) : this.$slots.refresher
+        ? createElement('div', {
+          class: 'mpx-pull-down-slot',
+        }, this.$slots.refresher)
+        : null
 
       const pullDownWrapper = this.refresherEnabled ? createElement('div', {
         class: 'mpx-pull-down-wrapper',
@@ -379,7 +383,11 @@
         bottom: 20px
         left: 50%
         transform: translateX(-50%)
-
+      .mpx-pull-down-slot
+        position: absolute
+        width: 100%
+        height: auto
+        bottom: 0
       .mpx-pull-down-content-black
         .circle
           display: inline-block;

package/lib/runtime/components/wx/default-page.mpx

@@ -0,0 +1,27 @@
+<template>
+  <view>局部构建兜底页面</view>
+  <view>当前路由：{{currentRoute}}</view>
+</template>
+
+<script>
+import { onLoad } from '@mpxjs/core'
+import { createPage } from '@mpxjs/core'
+
+createPage({
+  data() {
+    return {
+      currentRoute: '',
+    }
+  },
+  onLoad() {
+    this.getPagePath()
+  },
+  methods: {
+    getPagePath() {
+      const pages = getCurrentPages() || []
+      const currPage = pages[pages.length - 1]
+      this.currentRoute = currPage && currPage.route || ''
+    },
+  }
+})
+</script>

package/lib/style-compiler/index.js

@@ -47,6 +47,10 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
+    if (mode === 'web') {
+      plugins.push(transSpecial({ id }))
+    }
+
     plugins.push(pluginCondStrip({
       defs
     }))