@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/web/processTemplate.js

@@ -1,9 +1,8 @@
 const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
-const path = require('path')
 const parseRequest = require('../utils/parse-request')
-const getMainCompilation = require('../utils/get-main-compilation')
+// const { matchCondition } = require('../utils/match-condition')
 
 function calculateRootEleChild (arr) {
   if (!arr) {
@@ -21,19 +20,30 @@ function calculateRootEleChild (arr) {
   }, 0)
 }
 
-module.exports = function (template, options, callback) {
-  const mode = options.mode
-  const srcMode = options.srcMode
-  const defs = options.defs
-  const moduleId = options.moduleId
-  const loaderContext = options.loaderContext
-  const ctorType = options.ctorType
-  const resourcePath = parseRequest(loaderContext.resource).resourcePath
+module.exports = function (template, {
+  loaderContext,
+  // hasScoped,
+  hasComment,
+  isNative,
+  srcMode,
+  moduleId,
+  ctorType,
+  usingComponents,
+  componentGenerics
+}, callback) {
+  const mpx = loaderContext.getMpx()
+  const {
+    mode,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    checkUsingComponents
+    // autoVirtualHostRules
+  } = mpx
+  const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
-  const compilation = loaderContext._compilation
-  const mainCompilation = getMainCompilation(compilation)
-  const mpx = mainCompilation.__mpx__
-  const wxsContentMap = mpx.wxsContentMap
+
   let wxsModuleMap, genericsInfo
   let output = '/* template */\n'
 
@@ -43,7 +53,7 @@ module.exports = function (template, options, callback) {
       content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
     }
     builtInComponentsMap['mpx-keep-alive'] = {
-      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { component: true })
+      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })
     }
   }
 
@@ -62,7 +72,7 @@ module.exports = function (template, options, callback) {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
-        const parsed = templateCompiler.parse(template.content, {
+        const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
@@ -73,52 +83,59 @@ module.exports = function (template, options, callback) {
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
             )
           },
-          usingComponents: options.usingComponents,
-          hasComment: options.hasComment,
-          isNative: options.isNative,
-          basename: path.basename(resourcePath),
+          usingComponents,
+          hasComment,
+          isNative,
           isComponent: ctorType === 'component',
           mode,
           srcMode: templateSrcMode,
           defs,
-          decodeHTMLText: options.decodeHTMLText,
-          externalClasses: options.externalClasses,
+          decodeHTMLText,
+          externalClasses,
+          // todo 后续输出web也采用mpx的scoped处理
           hasScoped: false,
           moduleId,
-          filePath: loaderContext.resourcePath,
+          filePath: resourcePath,
           i18n: null,
-          checkUsingComponents: options.checkUsingComponents,
+          checkUsingComponents,
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics: options.componentGenerics
+          componentGenerics
+          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
+          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
-        if (parsed.meta.wxsModuleMap) {
-          wxsModuleMap = parsed.meta.wxsModuleMap
+        if (meta.wxsModuleMap) {
+          wxsModuleMap = meta.wxsModuleMap
         }
-        if (parsed.meta.wxsContentMap) {
-          for (let module in parsed.meta.wxsContentMap) {
-            wxsContentMap[`${resourcePath}~${module}`] = parsed.meta.wxsContentMap[module]
+        if (meta.wxsContentMap) {
+          for (let module in meta.wxsContentMap) {
+            wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
-        if (parsed.meta.builtInComponentsMap) {
-          Object.keys(parsed.meta.builtInComponentsMap).forEach((name) => {
+        if (meta.builtInComponentsMap) {
+          Object.keys(meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
-              resource: addQuery(parsed.meta.builtInComponentsMap[name], { component: true })
+              resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
             }
           })
         }
-        if (parsed.meta.genericsInfo) {
-          genericsInfo = parsed.meta.genericsInfo
+        if (meta.genericsInfo) {
+          genericsInfo = meta.genericsInfo
         }
-        // 输出H5有多个root element时, 使用div标签包裹
-        if (parsed.root.tag === 'temp-node') {
-          const childLen = calculateRootEleChild(parsed.root.children)
+        // 输出H5有多个root element时, 使用mpx-root-view标签包裹
+        // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
+        if (root.tag === 'temp-node') {
+          const childLen = calculateRootEleChild(root.children)
           if (childLen >= 2) {
-            parsed.root.tag = 'div'
+            root.tag = 'div'
+            templateCompiler.addAttrs(root, [{
+              name: 'class',
+              value: 'mpx-root-view'
+            }])
           }
         }
-        return templateCompiler.serialize(parsed.root)
+        return templateCompiler.serialize(root)
       }
     })
     output += '\n\n'

package/lib/wxml/{wxml-loader.js → loader.js}

@@ -1,12 +1,9 @@
-// const htmlMinifier = require('html-minifier')
 const attrParse = require('./attributesParser')
 const loaderUtils = require('loader-utils')
 const url = require('url')
 const config = require('../config')
-const getMainCompilation = require('../utils/get-main-compilation')
 const createHelpers = require('../helpers')
 const isUrlRequest = require('../utils/is-url-request')
-const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
 
 function randomIdent () {
@@ -14,39 +11,21 @@ function randomIdent () {
 }
 
 module.exports = function (content) {
-  const loaderContext = this
-  const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const options = loaderUtils.getOptions(this) || {}
-  const mpx = getMainCompilation(this._compilation).__mpx__
+  const mpx = this.getMpx()
+  const root = mpx.projectRoot
+  const externals = mpx.externals
 
-  const { resourcePath: filePath, queryObj } = parseRequest(this.resource)
-  const moduleId = 'm' + mpx.pathHash(filePath)
+  const { queryObj } = parseRequest(this.resource)
   const hasScoped = false
   const hasComment = false
   const isNative = true
 
-  const usingComponents = []
-
   const mode = mpx.mode
-  const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
-  const srcMode = localSrcMode || globalSrcMode
   const customAttributes = options.attributes || mpx.attributes || []
 
-  const {
-    getSrcRequestString
-  } = createHelpers({
-    loaderContext,
-    options,
-    moduleId,
-    isProduction,
-    hasScoped,
-    hasComment,
-    usingComponents,
-    srcMode,
-    isNative,
-    projectRoot: options.root || ''
-  })
+  const { getRequestString } = createHelpers(this)
 
   const attributes = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src', `${config[mode].wxs.tag}:${config[mode].wxs.src}`].concat(customAttributes)
 
@@ -64,7 +43,7 @@ module.exports = function (content) {
   const data = {}
   content = [content]
   links.forEach(function (link) {
-    if (!isUrlRequest(link.value, options.root)) return
+    if (!isUrlRequest(link.value, root, externals)) return
 
     if (link.value.indexOf('mailto:') > -1) return
 
@@ -88,57 +67,37 @@ module.exports = function (content) {
   })
   content.reverse()
   content = content.join('')
-
-  // if (isProduction) {
-  //   const minimizeOptions = Object.assign({}, options);
-  //   [
-  //     'removeComments',
-  //     'removeCommentsFromCDATA',
-  //     'removeCDATASectionsFromCDATA',
-  //     'caseSensitive',
-  //     'collapseWhitespace',
-  //     'conservativeCollapse',
-  //     'useShortDoctype',
-  //     'keepClosingSlash',
-  //     'removeScriptTypeAttributes',
-  //     'removeStyleTypeAttributes'
-  //   ].forEach(function (name) {
-  //     if (typeof minimizeOptions[name] === 'undefined') {
-  //       minimizeOptions[name] = true
-  //     }
-  //   })
-  //
-  //   const KEY_IGNORECUSTOM_FRAGMENTS = 'ignoreCustomFragments'
-  //   if (typeof minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] === 'undefined') {
-  //     minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] = [/{{[\s\S]*?}}/]
-  //   }
-  //
-  //   content = htmlMinifier.minify(content, minimizeOptions)
-  // }
-
   content = JSON.stringify(content)
 
   const exportsString = 'module.exports = '
 
-  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, function (match) {
+  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, (match) => {
     if (!data[match]) return match
 
     const link = data[match]
 
-    let src = loaderUtils.urlToRequest(link.value, options.root)
-    src = addQuery(src, { isStatic: true })
+    let src = loaderUtils.urlToRequest(link.value, root)
 
-    let requestString
+    let requestString, extraOptions
 
     switch (link.tag) {
       case 'import':
       case 'include':
-        requestString = getSrcRequestString('template', { src, mode: localSrcMode }, -1)
+        extraOptions = {
+          hasScoped,
+          hasComment,
+          isNative,
+          isStatic: true
+        }
+        requestString = getRequestString('template', { src, mode: localSrcMode }, extraOptions)
         break
       case config[mode].wxs.tag:
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
-        src = addQuery(src, { issuerResource: loaderContext.resource })
-        requestString = getSrcRequestString('wxs', { src, mode: localSrcMode }, -1, undefined, '!!')
+        extraOptions = {
+          issuerResource: this.resource,
+          isStatic: true
+        }
+        requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)
         break
       default:
         requestString = JSON.stringify(src)

package/lib/wxs/WxsModuleIdsPlugin.js

@@ -0,0 +1,29 @@
+const {
+  compareModulesByPreOrderIndexOrIdentifier
+} = require('webpack/lib/util/comparators')
+const {
+  assignAscendingModuleIds,
+  getUsedModuleIdsAndModules
+} = require('webpack/lib/ids/IdHelpers')
+
+/** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("../Module")} Module */
+
+class WxsModuleIdsPlugin {
+  apply (compilation) {
+    compilation.hooks.moduleIds.tap({
+      name: 'WxsModuleIdsPlugin',
+      // 放在最前面执行，确保生成的代码模块为数组形式，符合wxs规范
+      stage: -1000
+    }, () => {
+      const [usedIds, modulesInNaturalOrder] =
+        getUsedModuleIdsAndModules(compilation)
+      modulesInNaturalOrder.sort(
+        compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
+      )
+      assignAscendingModuleIds(usedIds, modulesInNaturalOrder, compilation)
+    })
+  }
+}
+
+module.exports = WxsModuleIdsPlugin

package/lib/wxs/WxsParserPlugin.js

@@ -3,11 +3,11 @@ class WxsParserPlugin {
     this.options = options
   }
 
-  apply (parser, compilation) {
+  apply (parser) {
     parser.hooks.program.tap({
       name: 'WxsParserPlugin',
       // 放在最后面执行
-      stage: 100
+      stage: 1000
     }, ast => {
       const module = parser.state.module
       if (module.buildInfo) {

package/lib/wxs/WxsPlugin.js

@@ -1,5 +1,6 @@
 const WxsTemplatePlugin = require('./WxsTemplatePlugin')
 const WxsParserPlugin = require('./WxsParserPlugin')
+const WxsModuleIdsPlugin = require('./WxsModuleIdsPlugin')
 
 class WxsPlugin {
   constructor (options = { mode: 'wx' }) {
@@ -8,20 +9,15 @@ class WxsPlugin {
 
   apply (compiler) {
     compiler.hooks.thisCompilation.tap('WxsPlugin', (compilation, { normalModuleFactory }) => {
-      new WxsTemplatePlugin(this.options).apply(
-        compilation.mainTemplate,
-        compilation
-      )
+      new WxsTemplatePlugin(this.options).apply(compilation)
+      new WxsModuleIdsPlugin(this.options).apply(compilation)
 
       compilation.hooks.buildModule.tap('WxsPlugin', (module) => {
         module.wxs = true
       })
 
       const handler = (parser) => {
-        new WxsParserPlugin(this.options).apply(
-          parser,
-          compilation
-        )
+        new WxsParserPlugin(this.options).apply(parser)
       }
 
       normalModuleFactory.hooks.parser

package/lib/wxs/WxsTemplatePlugin.js

@@ -1,104 +1,58 @@
-const Template = require('webpack/lib/Template')
 const config = require('../config')
-const { ConcatSource } = require('webpack-sources')
+const { ConcatSource } = require('webpack').sources
+const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 
-module.exports = class WxsMainTemplatePlugin {
+module.exports = class WxsTemplatePlugin {
   constructor (options = { mode: 'wx' }) {
     this.options = options
   }
 
-  apply (mainTemplate, compilation) {
-    mainTemplate.hooks.require.tap('MainTemplate', (source, chunk, hash) => {
-      return Template.asString([
-        '// Check if module is in cache',
-        'if(installedModules[moduleId]) {',
-        Template.indent('return installedModules[moduleId].exports;'),
-        '}',
-        '// Create a new module (and put it into the cache)',
-        'var module = installedModules[moduleId] = {',
-        Template.indent(mainTemplate.hooks.moduleObj.call('', chunk, hash, 'moduleId')),
-        '};',
-        '',
-        Template.asString(
-          [
-            '// Execute the module function',
-            '// wxs连call都不支持我也是服气...',
-            `modules[moduleId](module, module.exports, ${mainTemplate.renderRequireFunctionForModule(
-              hash,
-              chunk,
-              'moduleId'
-            )});`
-          ]
-        ),
-        '',
-        '// Flag the module as loaded',
-        'module.l = true;',
-        '',
-        '// Return the exports of the module',
-        'return module.exports;'
-      ])
-    })
-    mainTemplate.hooks.requireExtensions.tap(
-      'WxsMainTemplatePlugin',
-      () => {
-        return Template.asString([
-          '// define harmony function exports',
-          `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
-          Template.indent([
-            'exports[name] = getter();'
-          ]),
-          '};',
-          '',
-          '// define __esModule on exports',
-          `${mainTemplate.requireFn}.r = function(exports) {`,
-          Template.indent([
-            'exports.__esModule = true;'
-          ]),
-          '};',
-          '',
-          '// getDefaultExport function for compatibility with non-harmony modules',
-          mainTemplate.requireFn + '.n = function(module) {',
-          Template.indent([
-            'var getter = module && module.__esModule ?',
-            Template.indent([
-              'function getDefault() { return module["default"]; } :',
-              'function getModuleExports() { return module; };'
-            ]),
-            `getter.a = getter();`,
-            'return getter;'
-          ]),
-          '};'
-        ])
-      }
-    )
-    mainTemplate.hooks.renderWithEntry.tap(
-      'WxsMainTemplatePlugin',
-      (source, chunk, hash) => {
-        const prefix = config[this.options.mode].wxs.templatePrefix
-        return new ConcatSource(prefix, source)
-      }
-    )
+  apply (compilation) {
+    const hooks = JavascriptModulesPlugin.getCompilationHooks(compilation)
 
-    mainTemplate.hooks.startup.tap('MainTemplate', (source, chunk, hash) => {
-      /** @type {string[]} */
-      const buf = []
-      if (chunk.entryModule) {
-        buf.push('// Load entry module and return exports')
-        buf.push(
-          `var entryExports = ${mainTemplate.renderRequireFunctionForModule(
-            hash,
-            chunk,
-            JSON.stringify(chunk.entryModule.id)
-          )}(${mainTemplate.requireFn}.s = ${JSON.stringify(chunk.entryModule.id)});`
-        )
-        buf.push('return entryExports && entryExports.__esModule? entryExports["default"] : entryExports;')
-      }
-      return Template.asString(buf)
+    hooks.renderStartup.tap('WxsTemplatePlugin', (source) => {
+      const postfix = 'return __webpack_exports__ && __webpack_exports__.__esModule? __webpack_exports__["default"] : __webpack_exports__;\n'
+      return new ConcatSource(source, postfix)
     })
 
-    mainTemplate.hooks.hash.tap('WxsMainTemplatePlugin', hash => {
-      hash.update('wxs')
-      hash.update(this.options.mode)
+    hooks.render.tap('WxsTemplatePlugin', (source) => {
+      const prefix = config[this.options.mode].wxs.templatePrefix
+      return new ConcatSource(prefix, source)
     })
+
+    // todo webpack5的新的代码生成模式下完美支持.d.r.n的成本较高，暂不处理，wxs暂时只支持wx源码形式
+    // mainTemplate.hooks.requireExtensions.tap(
+    //   'WxsMainTemplatePlugin',
+    //   () => {
+    //     return Template.asString([
+    //       '// define harmony function exports',
+    //       `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
+    //       Template.indent([
+    //         'exports[name] = getter();'
+    //       ]),
+    //       '};',
+    //       '',
+    //       '// define __esModule on exports',
+    //       `${mainTemplate.requireFn}.r = function(exports) {`,
+    //       Template.indent([
+    //         'exports.__esModule = true;'
+    //       ]),
+    //       '};',
+    //       '',
+    //       '// getDefaultExport function for compatibility with non-harmony modules',
+    //       mainTemplate.requireFn + '.n = function(module) {',
+    //       Template.indent([
+    //         'var getter = module && module.__esModule ?',
+    //         Template.indent([
+    //           'function getDefault() { return module["default"]; } :',
+    //           'function getModuleExports() { return module; };'
+    //         ]),
+    //         `getter.a = getter();`,
+    //         'return getter;'
+    //       ]),
+    //       '};'
+    //     ])
+    //   }
+    // )
   }
 }

package/lib/wxs/{wxs-i18n-loader.js → i18n-loader.js}

@@ -1,11 +1,9 @@
 // 该loader用于将用户定义的messages注入到i18n.wxs中
-const getMainCompilation = require('../utils/get-main-compilation')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
-  const mainCompilation = getMainCompilation(this._compilation)
-  const i18n = mainCompilation.__mpx__.i18n
-  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__\n'
+  const i18n = this.getMpx().i18n
+  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__, __mpx_locale__\n'
   if (i18n) {
     if (i18n.messages) {
       prefix += `__mpx_messages__ = ${JSON.stringify(i18n.messages)}\n`
@@ -22,6 +20,9 @@ module.exports = function (content) {
     } else if (i18n.numberFormatsPath) {
       prefix += `__mpx_number_formats__ = require(${loaderUtils.stringifyRequest(this, i18n.numberFormatsPath)})\n`
     }
+    if (i18n.locale) {
+      prefix += `__mpx_locale__ = ${JSON.stringify(i18n.locale)}\n`
+    }
   }
   content = prefix + content
   return content