@mpxjs/webpack-plugin 2.10.19 → 2.10.21

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

@@ -9,7 +9,7 @@ const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   function getRnDirectiveEventHandle (mode) {
-    return function ({ name, value }, { eventRules, el }) {
+    return function ({ name, value }, { eventRules, el, attr, diagnostic }) {
       const match = this.test.exec(name)
       const prefix = match[1]
       const eventName = match[2]
@@ -17,8 +17,9 @@ module.exports = function getSpec ({ warn, error }) {
       const meta = {
         modifierStr
       }
-      const rPrefix = runRules(spec.event.prefix, prefix, { mode })
-      const rEventName = runRules(eventRules, eventName, { mode, data: { el } })
+      const data = { el, attr }
+      const rPrefix = runRules(spec.event.prefix, prefix, { mode, data, diagnostic })
+      const rEventName = runRules(eventRules, eventName, { mode, data, diagnostic })
       return {
         name: rPrefix + rEventName + meta.modifierStr,
         value
@@ -68,7 +69,12 @@ module.exports = function getSpec ({ warn, error }) {
     // props后处理
     postProps: [
       {
-        web ({ name, value }) {
+        web (prop, data) {
+          const { name, value } = prop
+          // `<template is>` / `data` 留给 compiler 与 RN 一致的 parseMustache 路径；勿在此处转成 :is / :data
+          if (data.el && data.el.tag === 'template' && (name === 'is' || name === 'data')) {
+            return prop
+          }
           const parsed = parseMustacheWithContext(value)
           if (name.startsWith('data-')) {
             return {
@@ -119,14 +125,14 @@ module.exports = function getSpec ({ warn, error }) {
             }
           }
           if (el) {
-            const injectWxsProp = {
-              injectWxsPath: '~' + normalize.lib('runtime/swanHelper.wxs'),
+            const injectWxsInfo = {
+              injectWxsRequest: '~' + normalize.lib('runtime/swanHelper.wxs'),
               injectWxsModuleName: 'mpxSwanHelper'
             }
-            if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
-              el.injectWxsProps.push(injectWxsProp)
+            if (el.injectWxsInfos && Array.isArray(el.injectWxsInfos)) {
+              el.injectWxsInfos.push(injectWxsInfo)
             } else {
-              el.injectWxsProps = [injectWxsProp]
+              el.injectWxsInfos = [injectWxsInfo]
             }
           }
           return {
@@ -354,13 +360,14 @@ module.exports = function getSpec ({ warn, error }) {
       // 事件
       {
         test: /^(bind|catch|capture-bind|capture-catch):?(.*?)(\..*)?$/,
-        ali ({ name, value }, { eventRules }) {
+        ali ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
+          const data = { el, attr }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ali', data, diagnostic })
           return {
             name: rPrefix + dash2hump(rEventName.replace(/^./, (matched) => {
               return matched.toUpperCase()
@@ -368,85 +375,91 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        swan ({ name, value }, { eventRules }) {
+        swan ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'swan', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        qq ({ name, value }, { eventRules }) {
+        qq ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'qq', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        jd ({ name, value }, { eventRules }) {
+        jd ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'jd', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        tt ({ name, value }, { eventRules }) {
+        tt ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'tt', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        ks ({ name, value }, { eventRules }) {
+        ks ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ks' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ks' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ks', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ks', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        dd ({ name, value }, { eventRules }) {
+        dd ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'dd', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        web ({ name, value }, { eventRules, el, usingComponents }) {
+        web ({ name, value }, { eventRules, el, attr, usingComponents, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
@@ -455,8 +468,9 @@ module.exports = function getSpec ({ warn, error }) {
             modifierStr
           }
           const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
-          const rEventName = runRules(eventRules, eventName, { mode: 'web', data: { isComponent } })
+          const data = { el, attr, isComponent }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', data, meta, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web', data, diagnostic })
           return {
             name: rPrefix + rEventName + meta.modifierStr,
             value
@@ -590,6 +604,6 @@ module.exports = function getSpec ({ warn, error }) {
       ]
     }
   }
-  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }).concat({}), spec)
+  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }), spec)
   return spec
 }

package/lib/react/processJSON.js

@@ -37,15 +37,15 @@ module.exports = function (jsonContent, {
 
   const context = loaderContext.context
 
-  const emitWarning = (msg) => {
+  const emitWarning = (msg, loc) => {
     loaderContext.emitWarning(
-      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
-  const emitError = (msg) => {
+  const emitError = (msg, loc) => {
     loaderContext.emitError(
-      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
@@ -109,6 +109,9 @@ module.exports = function (jsonContent, {
       waterfall: true,
       warn: emitWarning,
       error: emitError,
+      diagnostic: {
+        file: loaderContext.resourcePath
+      },
       data: {
         // polyfill global usingComponents
         globalComponents: mpx.globalComponents

package/lib/react/processStyles.js

@@ -12,16 +12,17 @@ module.exports = function (styles, {
 }, callback) {
   const { getRequestString } = createHelpers(loaderContext)
   let content = ''
+  const styleResults = []
   let output = '/* styles */\n'
   if (styles.length) {
-    const warn = (msg) => {
+    const warn = (msg, loc) => {
       loaderContext.emitWarning(
-        new Error('[Mpx style warning][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
       )
     }
-    const error = (msg) => {
+    const error = (msg, loc) => {
       loaderContext.emitError(
-        new Error('[Mpx style error][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
       )
     }
     const { mode, srcMode } = loaderContext.getMpx()
@@ -35,11 +36,22 @@ module.exports = function (styles, {
       // todo 建立新的request在内部导出classMap，便于样式模块复用
       loaderContext.importModule(JSON.parse(getRequestString('styles', style, extraOptions, i))).then((result) => {
         if (Array.isArray(result)) {
-          result = result.map((item) => {
-            return item[1]
-          }).join('\n')
+          result.forEach((item) => {
+            const css = item[1]
+            styleResults.push({
+              content: css,
+              map: item[3],
+              filename: loaderContext.resourcePath
+            })
+            content += css.trim() + '\n'
+          })
+        } else {
+          styleResults.push({
+            content: result,
+            filename: loaderContext.resourcePath
+          })
+          content += result.trim() + '\n'
         }
-        content += result.trim() + '\n'
         callback()
       }).catch((e) => {
         callback(e)
@@ -55,7 +67,9 @@ module.exports = function (styles, {
         const formatValueName = '_f'
         const classMap = getClassMap({
           content,
+          styles: styleResults,
           filename: loaderContext.resourcePath,
+          inputFileSystem: loaderContext._compiler && loaderContext._compiler.inputFileSystem,
           mode,
           srcMode,
           ctorType,

package/lib/react/processTemplate.js

@@ -1,16 +1,30 @@
-const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
 const parseRequest = require('../utils/parse-request')
 const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
 const templateCompiler = require('../template-compiler/compiler')
-const genNode = require('../template-compiler/gen-node-react')
+const { genNode, genTemplate } = require('../template-compiler/gen-node-react')
 const bindThis = require('../template-compiler/bind-this')
 const isEmptyObject = require('../utils/is-empty-object')
 const dash2hump = require('../utils/hump-dash').dash2hump
+const addQuery = require('../utils/add-query')
+const isUrlRequestBase = require('../utils/is-url-request')
+
+function transformCode (code, ignoreMap, error) {
+  try {
+    const bindResult = bindThis.transform(code, {
+      ignoreMap
+    })
+
+    return bindResult.code
+  } catch (e) {
+    error(`[Mpx template error]: Invalid render function generated by the template, please check!\n  Error code:\n  ${code}\n  Error Detail:\n  ${e.stack}`)
+    return null
+  }
+}
 
 module.exports = function (template, {
   loaderContext,
-  // hasScoped,
   hasComment,
   isNative,
   srcMode,
@@ -23,16 +37,19 @@ module.exports = function (template, {
   const mpx = loaderContext.getMpx()
   const {
     projectRoot,
+    externals,
     mode,
     env,
     defs,
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents,
     autoVirtualHostRules,
     forceProxyEventRules,
-    customTextRules
+    checkUsingComponentsRules,
+    globalComponents,
+    customTextRules,
+    rnConfig
   } = mpx
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -55,20 +72,20 @@ module.exports = function (template, {
 
     if (template.content) {
       const templateSrcMode = template.mode || srcMode
-      const warn = (msg) => {
+      const warn = (msg, loc) => {
         loaderContext.emitWarning(
-          new Error('[Mpx template warning][' + loaderContext.resource + ']: ' + msg)
+          new Error('[Mpx template warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
         )
       }
-      const error = (msg) => {
+      const error = (msg, loc) => {
         loaderContext.emitError(
-          new Error('[mpx template error][' + loaderContext.resource + ']: ' + msg)
+          new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
         )
       }
-      const { root, meta } = templateCompiler.parse(template.content, {
+      const parseOptions = {
         warn,
         error,
-        usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
+        usingComponentsInfo,
         originalUsingComponents,
         hasComment,
         isNative,
@@ -84,59 +101,99 @@ module.exports = function (template, {
         filePath: rawResourcePath,
         // react中模版i18n不需要特殊处理
         i18n: null,
-        checkUsingComponents,
-        // rn模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
-        globalComponents: [],
+        // 与 template-compiler/index 一致：usingComponentsInfo 已合并 globalComponentsInfo，此处白名单避免对仅 app 注册的组件误报「未使用」
+        globalComponents: Object.keys(globalComponents || {}),
         // rn模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
         forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
-        isCustomText: matchCondition(resourcePath, customTextRules)
-      })
+        checkUsingComponents: matchCondition(resourcePath, checkUsingComponentsRules),
+        isCustomText: matchCondition(resourcePath, customTextRules),
+        customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents,
+        isUrlRequest: (url) => isUrlRequestBase(url, projectRoot, externals)
+      }
+      const { root, meta } = templateCompiler.parse(template.content, parseOptions)
+      const templateAssetsIgnoreMap = {}
+      let templateAssetsCode = ''
+      if (meta.templateAssets) {
+        Object.keys(meta.templateAssets).forEach((name) => {
+          templateAssetsIgnoreMap[name] = true
+          const request = loaderUtils.urlToRequest(meta.templateAssets[name], projectRoot)
+          templateAssetsCode += `var ${name} = require(${loaderUtils.stringifyRequest(loaderContext, request)});\n`
+        })
+      }
+
+      const ignoreMap = Object.assign({
+        createElement: true,
+        getComponent: true,
+        getTemplate: true
+      }, meta.wxsModuleMap, templateAssetsIgnoreMap)
 
       if (meta.wxsContentMap) {
         for (const module in meta.wxsContentMap) {
           wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
         }
       }
-      if (meta.builtInComponentsMap) {
-        Object.keys(meta.builtInComponentsMap).forEach((name) => {
-          builtInComponentsMap[name] = {
-            resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
+
+      const templates = []
+      if (meta.imports) {
+        const reactTemplateLoaderPath = normalize.lib('react/template-loader')
+        meta.imports.forEach((importSrc) => {
+          const request = loaderUtils.urlToRequest(importSrc, projectRoot)
+          templates.push(`require(${loaderUtils.stringifyRequest(loaderContext, `!!${reactTemplateLoaderPath}!${request}`)})`)
+        })
+      }
+
+      if (meta.templates) {
+        let localTemplatesCode = 'var localTemplates = {\n'
+        Object.keys(meta.templates).forEach((name) => {
+          const template = meta.templates[name]
+          const templateCode = genTemplate(template)
+          if (templateCode) {
+            localTemplatesCode += `${JSON.stringify(name)}: ${templateCode},\n`
           }
         })
+        localTemplatesCode += '};'
+        const transformedCode = transformCode(localTemplatesCode, ignoreMap, error)
+        if (transformedCode) {
+          output += transformedCode + '\n'
+          templates.push('localTemplates')
+        }
       }
+
+      const builtInPaths = meta.builtInComponentsMap || {}
+      Object.keys(builtInPaths).forEach((name) => {
+        builtInComponentsMap[name] = {
+          resource: addQuery(builtInPaths[name], { isComponent: true })
+        }
+      })
       if (meta.genericsInfo) {
         genericsInfo = meta.genericsInfo
       }
 
       for (const module in meta.wxsModuleMap) {
         const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
-        output += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
+        output += `var ${module} = require(${loaderUtils.stringifyRequest(loaderContext, src)});\n`
       }
+      output += templateAssetsCode
+
+      const templateHelpersCode = templates.length
+        ? `var templates = Object.assign({}, ${templates.join(', ')});
+function getTemplate(name) {
+  return templates[name] || function(){};
+}
+`
+        : ''
+      output += templateHelpersCode
 
       const rawCode = genNode(root, true)
       if (rawCode) {
-        try {
-          const ignoreMap = Object.assign({
-            createElement: true,
-            getComponent: true
-          }, meta.wxsModuleMap)
-          const bindResult = bindThis.transform(rawCode, {
-            ignoreMap
-            // customBindThis (path, t) {
-            //   path.replaceWith(t.callExpression(t.identifier('getValue'), [t.stringLiteral(path.node.name)]))
-            // }
-          })
+        const transformedCode = transformCode(rawCode, ignoreMap, error)
+        if (transformedCode) {
           output += `global.currentInject.render = function (createElement, getComponent) {
-  return ${bindResult.code}
-};\n`
-        } catch (e) {
-          error(`[Mpx template error]: Invalid render function generated by the template, please check!
-Error code:
-${rawCode}
-Error Detail:
-${e.stack}`)
+  return ${transformedCode}
+};
+`
         }
       }
 
@@ -160,7 +217,7 @@ ${e.stack}`)
           if (defaultValue) {
             output += `  generic${dash2hump(genericName)}: { type: String, value: '${genericName}default' },\n`
           } else {
-             output += `  generic${dash2hump(genericName)}: String,\n`
+            output += `  generic${dash2hump(genericName)}: String,\n`
           }
         })
         output += '}\n'