@mpxjs/webpack-plugin 2.8.13 → 2.8.17

package/lib/loader.js

@@ -18,15 +18,17 @@ const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 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
+  // 兼容处理处理ts-loader中watch-run/updateFile逻辑，直接跳过当前loader及后续的loader返回内容
+  const pathExtname = path.extname(this.resourcePath)
+  if (!['.vue', '.mpx'].includes(pathExtname)) {
+    this.loaderIndex = tsWatchRunLoaderFilter(this.loaders, this.loaderIndex)
     return content
   }
 

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

@@ -1,6 +1,10 @@
 const runRules = require('../../run-rules')
 const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
+const normalize = require('../../../utils/normalize')
+
+const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
+const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
 
 module.exports = function getSpec ({ warn, error }) {
   function print (mode, path, isError) {
@@ -38,6 +42,30 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
+  // 处理支付宝 componentPlaceholder 不支持 view、text 原生标签
+  function aliComponentPlaceholderFallback (input) {
+    const componentPlaceholder = input.componentPlaceholder
+    const usingComponents = input.usingComponents || (input.usingComponents = {})
+    for (const cph in componentPlaceholder) {
+      const cur = componentPlaceholder[cph]
+      const placeholderCompMatched = cur.match(/^(?:view|text)$/g)
+      if (!Array.isArray(placeholderCompMatched)) continue
+      let compName, compPath
+      switch (placeholderCompMatched[0]) {
+        case 'view':
+          compName = 'mpx-view'
+          compPath = mpxViewPath
+          break
+        case 'text':
+          compName = 'mpx-text'
+          compPath = mpxTextPath
+      }
+      usingComponents[compName] = compPath
+      componentPlaceholder[cph] = compName
+    }
+    return input
+  }
+
   const spec = {
     supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
     normalizeTest,
@@ -99,6 +127,10 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath()
       },
+      {
+        test: 'componentPlaceholder',
+        ali: aliComponentPlaceholderFallback
+      },
       {
         ali: addGlobalComponents,
         swan: addGlobalComponents,
@@ -112,6 +144,10 @@ module.exports = function getSpec ({ warn, error }) {
         test: 'componentGenerics',
         ali: deletePath(true)
       },
+      {
+        test: 'componentPlaceholder',
+        ali: aliComponentPlaceholderFallback
+      },
       {
         ali: addGlobalComponents,
         swan: addGlobalComponents,

package/lib/runtime/components/ali/mpx-text.mpx

@@ -0,0 +1,3 @@
+<template>
+  <text><slot></slot></text>
+</template>

package/lib/runtime/components/ali/mpx-view.mpx

@@ -0,0 +1,3 @@
+<template>
+  <view><slot></slot></view>
+</template>

package/lib/selector.js

@@ -1,9 +1,16 @@
+const path = require('path')
 const parseComponent = require('./parser')
 const parseRequest = require('./utils/parse-request')
+const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 
 module.exports = function (content) {
   this.cacheable()
-
+  // 兼容处理处理ts-loader中watch-run/updateFile逻辑，直接跳过当前loader及后续的loader返回内容
+  const pathExtname = path.extname(this.resourcePath)
+  if (!['.vue', '.mpx'].includes(pathExtname)) {
+    this.loaderIndex = tsWatchRunLoaderFilter(this.loaders, this.loaderIndex)
+    return content
+  }
   // 移除mpx访问依赖，支持 thread-loader
   const { mode, env } = this.getOptions() || {}
   if (!mode && !env) {

package/lib/style-compiler/index.js

@@ -86,13 +86,42 @@ module.exports = function (css, map) {
         if (mode === 'ali' && isApp) {
           result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
-        if (result.messages) {
-          result.messages.forEach(({ type, file }) => {
-            if (type === 'dependency') {
-              this.addDependency(file)
-            }
-          })
+
+        for (const warning of result.warnings()) {
+          this.emitWarning(warning)
         }
+
+        // todo 后续考虑直接使用postcss-loader来处理postcss
+        for (const message of result.messages) {
+          // eslint-disable-next-line default-case
+          switch (message.type) {
+            case 'dependency':
+              this.addDependency(message.file)
+              break
+
+            case 'build-dependency':
+              this.addBuildDependency(message.file)
+              break
+
+            case 'missing-dependency':
+              this.addMissingDependency(message.file)
+              break
+
+            case 'context-dependency':
+              this.addContextDependency(message.file)
+              break
+
+            case 'dir-dependency':
+              this.addContextDependency(message.dir)
+              break
+
+            case 'asset':
+              if (message.content && message.file) {
+                this.emitFile(message.file, message.content, message.sourceMap, message.info)
+              }
+          }
+        }
+
         const map = result.map && result.map.toJSON()
         cb(null, result.css, map)
         return null // silence bluebird warning

package/lib/utils/get-entry-name.js

@@ -4,7 +4,7 @@ module.exports = function (loaderContext) {
   let entryName = ''
   for (const [name, { dependencies }] of loaderContext._compilation.entries) {
     const entryModule = moduleGraph.getModule(dependencies[0])
-    if (entryModule.resource === loaderContext.resource) {
+    if (entryModule && entryModule.resource === loaderContext.resource) {
       entryName = name
       break
     }

package/lib/utils/ts-loader-watch-run-loader-filter.js

@@ -0,0 +1,23 @@
+const normalize = require('./normalize')
+const selectorPath = normalize.lib('selector.js')
+const scriptSetupPath = normalize.lib('script-setup-compiler/index.js')
+const mpxLoaderPath = normalize.lib('loader.js')
+const { has } = require('./set')
+
+const tsLoaderWatchRunFilterLoaders = new Set([
+  selectorPath,
+  scriptSetupPath,
+  mpxLoaderPath,
+  'node_modules/vue-loader/lib/index.js'
+])
+
+module.exports = (loaders, loaderIndex) => {
+  for (let len = loaders.length; len > 0; --len) {
+    const currentLoader = loaders[len - 1]
+    if (!has(tsLoaderWatchRunFilterLoaders, filterLoaderPath => currentLoader.path.endsWith(filterLoaderPath))) {
+      break
+    }
+    loaderIndex--
+  }
+  return loaderIndex
+}

package/lib/wxss/loader.js

@@ -45,8 +45,7 @@ module.exports = async function loader (content, map, meta) {
   let options
 
   try {
-    options = normalizeOptions(rawOptions, this)
-    options = Object.assign({}, options, { sourceMap, root, externals })
+    options = normalizeOptions(Object.assign({}, rawOptions, { sourceMap }), this)
   } catch (error) {
     callback(error)
 
@@ -60,7 +59,7 @@ module.exports = async function loader (content, map, meta) {
     plugins.push(...getModulesPlugins(options, this))
   }
 
-  let importPluginImports = []
+  const importPluginImports = []
   const importPluginApi = []
 
   let isSupportAbsoluteURL = false
@@ -78,22 +77,26 @@ module.exports = async function loader (content, map, meta) {
     options.esModule && Boolean('fsStartTime' in this._compiler)
 
   if (shouldUseImportPlugin(options)) {
+    const { getRequestString } = createHelpers(this)
     plugins.push(
       importParser({
         isSupportAbsoluteURL: false,
         isSupportDataURL: false,
+        externals,
+        root,
         isCSSStyleSheet: options.exportType === 'css-style-sheet',
         loaderContext: this,
         imports: importPluginImports,
         api: importPluginApi,
         filter: options.import.filter,
-        urlHandler: (url) =>
-          stringifyRequest(
-            this,
-            combineRequests(getPreRequester(this)(options.importLoaders), url)
-          ),
-        externals: options.externals,
-        root: options.root
+        urlHandler: (url) => {
+          url = combineRequests(getPreRequester(this)(options.importLoaders), url)
+          return getRequestString('styles', { src: url }, {
+            isStatic: true,
+            issuerResource: this.resource,
+            fromImport: true
+          })
+        }
       })
     )
   }
@@ -107,6 +110,8 @@ module.exports = async function loader (content, map, meta) {
       urlParser({
         isSupportAbsoluteURL,
         isSupportDataURL,
+        externals,
+        root,
         imports: urlPluginImports,
         replacements,
         context: this.context,
@@ -205,22 +210,6 @@ module.exports = async function loader (content, map, meta) {
     this.emitWarning(new Warning(warning))
   }
 
-  const { getRequestString } = createHelpers(this)
-
-  // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止 WebPack 的默认解析规则，后续 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
-  importPluginImports = importPluginImports.map((importItem, index) => {
-    const splittedUrl = importItem.url.slice(1, -1)
-    const requestString = getRequestString('styles', { src: splittedUrl }, {
-      isStatic: true,
-      issuerResource: this.resource,
-      fromImport: true
-    }, index)
-    return {
-      ...importItem,
-      url: requestString
-    }
-  })
-
   const imports = []
     .concat(icssPluginImports.sort(sort))
     .concat(importPluginImports.sort())

package/lib/wxss/plugins/postcss-import-parser.js

@@ -46,7 +46,7 @@ function parseNode (atRule, key, options) {
   // Nodes do not exists - `@import url('http://') :root {}`
   if (atRule.nodes) {
     const error = new Error(
-      "It looks like you didn't end your @import statement correctly. Child nodes are attached to it."
+      'It looks like you didn\'t end your @import statement correctly. Child nodes are attached to it.'
     )
 
     error.node = atRule
@@ -215,7 +215,7 @@ const plugin = (options = {}) => {
               options.loaderContext.emitError(
                 new Error(
                   atRule.error(
-                    "'@import' rules are not allowed here and will not be processed"
+                    '\'@import\' rules are not allowed here and will not be processed'
                   ).message
                 )
               )
@@ -223,7 +223,7 @@ const plugin = (options = {}) => {
               return
             }
 
-            const { isSupportDataURL, isSupportAbsoluteURL } = options
+            const { isSupportDataURL, isSupportAbsoluteURL, externals, root } = options
 
             let parsedAtRule
 
@@ -231,7 +231,8 @@ const plugin = (options = {}) => {
               parsedAtRule = parseNode(atRule, 'params', {
                 isSupportAbsoluteURL,
                 isSupportDataURL,
-                externals: options.externals
+                externals,
+                root
               })
             } catch (error) {
               result.warn(error.message, { node: error.node })

package/lib/wxss/plugins/postcss-url-parser.js

@@ -296,10 +296,12 @@ const plugin = (options = {}) => {
 
       return {
         Declaration (declaration) {
-          const { isSupportDataURL, isSupportAbsoluteURL } = options
+          const { isSupportDataURL, isSupportAbsoluteURL, externals, root } = options
           const parsedURL = parseDeclaration(declaration, 'value', result, {
             isSupportDataURL,
-            isSupportAbsoluteURL
+            isSupportAbsoluteURL,
+            externals,
+            root
           })
 
           if (!parsedURL) {

package/lib/wxss/utils.js

@@ -317,7 +317,7 @@ function escapeLocalIdent (localident) {
   // TODO simplify in the next major release
   return escape(
     localident
-      // For `[hash]` placeholder
+    // For `[hash]` placeholder
       .replace(/^((-?[0-9])|--)/, '_$1')
       .replace(filenameReservedRegex, '-')
       .replace(reControlChars, '-')
@@ -389,7 +389,7 @@ function defaultGetLocalIdent (
     hash.update(Buffer.from(options.content, 'utf8'))
 
     localIdentHash = (localIdentHash + hash.digest(hashDigest))
-      // Remove all leading digits
+    // Remove all leading digits
       .replace(/^\d+/, '')
       // Replace all slashes with underscores (same as in base64url)
       .replace(/\//g, '_')
@@ -652,13 +652,13 @@ function getModulesOptions (rawOptions, exportType, loaderContext) {
   if (needNamedExport) {
     if (rawOptions.esModule === false) {
       throw new Error(
-        "The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled"
+        'The \'exportType\' option with the \'css-style-sheet\' or \'string\' value requires the \'esModules\' option to be enabled'
       )
     }
 
     if (modulesOptions.namedExport === false) {
       throw new Error(
-        "The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'modules.namedExport' option to be enabled"
+        'The \'exportType\' option with the \'css-style-sheet\' or \'string\' value requires the \'modules.namedExport\' option to be enabled'
       )
     }
   }
@@ -666,7 +666,7 @@ function getModulesOptions (rawOptions, exportType, loaderContext) {
   if (modulesOptions.namedExport === true) {
     if (rawOptions.esModule === false) {
       throw new Error(
-        "The 'modules.namedExport' option requires the 'esModules' option to be enabled"
+        'The \'modules.namedExport\' option requires the \'esModules\' option to be enabled'
       )
     }
 
@@ -896,18 +896,18 @@ function getPreRequester ({ loaders, loaderIndex }) {
       return cache[number]
     }
 
-    if (number === false) {
-      cache[number] = ''
-    } else {
+    if (typeof number === 'number') {
       const loadersRequest = loaders
         .slice(
           loaderIndex,
-          loaderIndex + 1 + (typeof number !== 'number' ? 0 : number + 1) // 与css-loader 不同，需要增加 1，因为 css 文件会经过 style-compiler loader 进行处理。
+          loaderIndex + 1 + number
         )
         .map((x) => x.request)
         .join('!')
 
       cache[number] = `-!${loadersRequest}!`
+    } else {
+      cache[number] = ''
     }
 
     return cache[number]
@@ -924,7 +924,7 @@ function getImportCode (imports, options) {
       if (icss && options.modules.namedExport) {
         code += `import ${
           options.modules.exportOnlyLocals ? '' : `${importName}, `
-        }* as ${importName}_NAMED___ from ${url};\n`
+          }* as ${importName}_NAMED___ from ${url};\n`
       } else {
         code +=
           type === 'url'
@@ -1039,7 +1039,7 @@ function getModuleCode (
     options.sourceMap
       ? '___CSS_LOADER_API_SOURCEMAP_IMPORT___'
       : '___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___'
-  });\n`
+    });\n`
 
   for (const item of api) {
     const { url, layer, supports, media, dedupe } = item
@@ -1066,10 +1066,10 @@ function getModuleCode (
       code = code.replace(new RegExp(replacementName, 'g'), () =>
         options.modules.namedExport
           ? `" + ${importName}_NAMED___[${JSON.stringify(
-            getValidLocalName(
-              localName,
-              options.modules.exportLocalsConvention
-            )
+          getValidLocalName(
+            localName,
+            options.modules.exportLocalsConvention
+          )
           )}] + "`
           : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`
       )
@@ -1172,7 +1172,7 @@ function getExportCode (exports, replacements, icssPluginUsed, options) {
         ? localsCode
         : `${
           options.esModule ? 'export default' : 'module.exports ='
-        } {\n${localsCode}\n};\n`
+          } {\n${localsCode}\n};\n`
 
       return code
     }
@@ -1181,7 +1181,7 @@ function getExportCode (exports, replacements, icssPluginUsed, options) {
       ? localsCode
       : `___CSS_LOADER_EXPORT___.locals = {${
         localsCode ? `\n${localsCode}\n` : ''
-      }};\n`
+        }};\n`
   }
 
   const isCSSStyleSheetExport = options.exportType === 'css-style-sheet'
@@ -1210,7 +1210,7 @@ function getExportCode (exports, replacements, icssPluginUsed, options) {
 
   code += `${
     options.esModule ? 'export default ' : 'module.exports ='
-  } ${finalExport};\n`
+    } ${finalExport};\n`
 
   return code
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.13",
+  "version": "2.8.17",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "257b5bd882d6344be8ce36a99715c87f9d8adb51"
+  "gitHead": "65458d02d8bfd5c49863f4e467e48ae76c382628"
 }