@mpxjs/webpack-plugin 2.10.19 → 2.10.20

package/lib/react/processTemplate.js

@@ -1,16 +1,35 @@
-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')
+
+function transformCode (code, wxsModuleMap, error) {
+  try {
+    const ignoreMap = Object.assign({
+      createElement: true,
+      getComponent: true,
+      getTemplate: true
+    }, wxsModuleMap)
+
+    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,
@@ -29,10 +48,12 @@ module.exports = function (template, {
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents,
     autoVirtualHostRules,
     forceProxyEventRules,
-    customTextRules
+    checkUsingComponentsRules,
+    globalComponents,
+    customTextRules,
+    rnConfig
   } = mpx
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -55,20 +76,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 +105,82 @@ 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
+      }
+      const { root, meta } = templateCompiler.parse(template.content, parseOptions)
 
       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, meta.wxsModuleMap, 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`
       }
 
+      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, meta.wxsModuleMap, 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 +204,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'

package/lib/react/style-helper.js

@@ -2,20 +2,24 @@ const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
 const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
+const createDiagnostic = require('../platform/create-diagnostic')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const parseValues = require('../utils/string').parseValues
 const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
+function getClassMap ({ content, styles, filename, inputFileSystem, mode, srcMode, ctorType, formatValueName, warn, error }) {
   const classMap = ctorType === 'page'
       ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
       : {}
 
-  const root = postcss.parse(content, {
-    from: filename
-  })
+  styles = styles && styles.length
+    ? styles
+    : [{
+        content,
+        filename
+      }]
 
   function formatValue (value) {
     let needStringify = true
@@ -67,99 +71,130 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
     }, {})
   }
 
-  const rulesRunner = getRulesRunner({
-    mode,
-    srcMode,
-    type: 'style',
-    testKey: 'prop',
-    warn,
-    error
-  })
-
-  // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
-  root.walkAtRules(rule => {
-    if (rule.name !== 'media') {
-      warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
-      // 删除不支持的 AtRule，防止其影响后续解析
-      rule.remove()
+  styles.forEach((style) => {
+    const styleContent = style.content || ''
+    if (!styleContent.trim()) return
+    const styleFilename = style.filename || filename
+    const sourceMap = style.map
+    const diagnostic = {
+      file: styleFilename,
+      source: styleContent,
+      sourceMap,
+      inputFileSystem
     }
-  })
+    const reporter = createDiagnostic({
+      type: 'style',
+      mode,
+      srcMode,
+      warn,
+      error,
+      diagnostic
+    })
+    const root = postcss.parse(styleContent, {
+      from: styleFilename
+    })
+    const rulesRunner = getRulesRunner({
+      mode,
+      srcMode,
+      type: 'style',
+      testKey: 'prop',
+      warn,
+      error,
+      diagnostic
+    })
 
-  root.walkRules(rule => {
-    const classMapValue = {}
-    rule.walkDecls(({ prop, value }) => {
-      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
-      let newData = rulesRunner({ prop, value, selector: rule.selector })
-      if (!newData) return
-      if (!Array.isArray(newData)) {
-        newData = [newData]
-      }
-      newData.forEach(item => {
-        prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
-        value = item.value
-        if (Array.isArray(value)) {
-          value = value.map(val => {
-            if (typeof val === 'object') {
-              for (const key in val) {
-                val[key] = formatValue(val[key])
-              }
-              return val
-            } else {
-              return formatValue(val)
-            }
-          })
-        } else if (typeof value === 'object') {
-          for (const key in value) {
-            value[key] = formatValue(value[key])
+    // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
+    root.walkAtRules(rule => {
+      if (rule.name !== 'media') {
+        reporter.warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`, {
+          node: rule,
+          sourceMap,
+          target: {
+            kind: 'css-atrule',
+            name: rule.name,
+            params: rule.params
           }
-        } else {
-          value = formatValue(value)
-        }
-        classMapValue[prop] = value
-      })
+        })
+        // 删除不支持的 AtRule，防止其影响后续解析
+        rule.remove()
+      }
     })
 
-    const classMapKeys = []
-    const options = getMediaOptions(rule.parent.params || '')
-    const isMedia = options.maxWidth || options.minWidth
-    selectorParser(selectors => {
-      selectors.each(selector => {
-        if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
-          classMapKeys.push(selector.nodes[0].value)
-        } else {
-          error('Only single class selector is supported in react native mode temporarily.')
+    root.walkRules(rule => {
+      const classMapValue = {}
+      rule.walkDecls((decl) => {
+        let { prop, value } = decl
+        if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+        let newData = rulesRunner && rulesRunner({ prop, value, selector: rule.selector, decl, rule, sourceMap })
+        if (!newData) return
+        if (!Array.isArray(newData)) {
+          newData = [newData]
         }
-      })
-    }).processSync(rule.selector)
-
-    if (classMapKeys.length) {
-      classMapKeys.forEach((key) => {
-        if (Object.keys(classMapValue).length) {
-          let _default = classMap[key]?._default
-          let _media = classMap[key]?._media
-          if (isMedia) {
-            // 当前是媒体查询
-            _default = _default || {}
-            _media = _media || []
-            _media.push({
-              options,
-              value: classMapValue
+        newData.forEach(item => {
+          prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
+          value = item.value
+          if (Array.isArray(value)) {
+            value = value.map(val => {
+              if (typeof val === 'object') {
+                for (const key in val) {
+                  val[key] = formatValue(val[key])
+                }
+                return val
+              } else {
+                return formatValue(val)
+              }
             })
-            classMap[key] = {
-              _media,
-              _default
+          } else if (typeof value === 'object') {
+            for (const key in value) {
+              value[key] = formatValue(value[key])
             }
-          } else if (_default) {
-            // 已有媒体查询数据，此次非媒体查询
-            Object.assign(_default, classMapValue)
           } else {
-            // 无媒体查询
+            value = formatValue(value)
+          }
+          classMapValue[prop] = value
+        })
+      })
+
+      const classMapKeys = []
+      const options = getMediaOptions(rule.parent.params || '')
+      const isMedia = options.maxWidth || options.minWidth
+      selectorParser(selectors => {
+        selectors.each(selector => {
+          if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
+            classMapKeys.push(selector.nodes[0].value)
+          } else {
+            reporter.error('Only single class selector is supported in react native mode temporarily.', {
+              node: rule,
+              sourceMap,
+              target: {
+                kind: 'selector',
+                value: rule.selector
+              }
+            })
+          }
+        })
+      }).processSync(rule.selector)
+
+      if (classMapKeys.length) {
+        classMapKeys.forEach((key) => {
+          if (Object.keys(classMapValue).length) {
+            // set css defalut value
             const val = classMap[key] || {}
             classMap[key] = Object.assign(val, classMapValue)
+
+            // set css media
+            if (isMedia) {
+              const _media = classMap[key]?._media || []
+              _media.push({
+                options,
+                value: classMapValue
+              })
+              classMap[key]._media = _media
+            }
           }
-        }
-      })
-    }
+        })
+      }
+    })
   })
   return classMap
 }

package/lib/react/template-loader.js

@@ -0,0 +1,148 @@
+const loaderUtils = require('loader-utils')
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const parseRequest = require('../utils/parse-request')
+const { matchCondition } = require('../utils/match-condition')
+const templateCompiler = require('../template-compiler/compiler')
+const { genTemplate } = require('../template-compiler/gen-node-react')
+const bindThis = require('../template-compiler/bind-this')
+
+module.exports = function (content) {
+  const loaderContext = this
+  const mpx = loaderContext.getMpx()
+
+  const {
+    projectRoot,
+    mode,
+    srcMode,
+    env,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    forceProxyEventRules,
+    getModuleId,
+    rnConfig
+  } = mpx
+
+  const { resourcePath, rawResourcePath, queryObj } = parseRequest(loaderContext.resource)
+  const moduleId = getModuleId(resourcePath)
+
+  const warn = (msg, loc) => {
+    loaderContext.emitWarning(
+      new Error('[Mpx template warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+  const error = (msg, loc) => {
+    loaderContext.emitError(
+      new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+  const parseOptions = {
+    warn,
+    error,
+    mode,
+    srcMode: queryObj.srcMode || srcMode,
+    env,
+    defs,
+    decodeHTMLText,
+    externalClasses,
+    moduleId,
+    filePath: rawResourcePath,
+    forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
+    customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents
+  }
+
+  // Parse the template
+  const { meta } = templateCompiler.parse(content, parseOptions)
+  if (meta.wxsContentMap && wxsContentMap) {
+    for (const module in meta.wxsContentMap) {
+      wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
+    }
+  }
+
+  // Generate imports
+  const imports = []
+  if (meta.imports) {
+    const reactTemplateLoaderPath = normalize.lib('react/template-loader')
+    meta.imports.forEach((importSrc) => {
+      const request = loaderUtils.urlToRequest(importSrc, projectRoot)
+      imports.push(`require(${loaderUtils.stringifyRequest(loaderContext, `!!${reactTemplateLoaderPath}!${request}`)})`)
+    })
+  }
+
+  const builtInPaths = meta.builtInComponentsMap || {}
+  const builtInComponents = []
+  Object.keys(builtInPaths).forEach((componentName) => {
+    const componentRequest = loaderUtils.stringifyRequest(loaderContext, addQuery(builtInPaths[componentName], { isComponent: true }))
+    builtInComponents.push(`"${componentName}": function () { return getBuiltInBaseComponent(require(${componentRequest}), { __mpxBuiltIn: true }) }`)
+  })
+
+  // Generate local templates
+  let localTemplatesCode = 'var localTemplates = {\n'
+  if (meta.templates) {
+    Object.keys(meta.templates).forEach((name) => {
+      const template = meta.templates[name]
+      const templateCode = genTemplate(template)
+      if (templateCode) {
+        localTemplatesCode += `${JSON.stringify(name)}: ${templateCode},\n`
+      }
+    })
+  }
+  localTemplatesCode += '};'
+
+  try {
+    const ignoreMap = Object.assign({
+      createElement: true,
+      getComponent: true,
+      getTemplate: true
+    }, meta.wxsModuleMap)
+    const bindResult = bindThis.transform(localTemplatesCode, {
+      ignoreMap
+    })
+    localTemplatesCode = bindResult.code
+  } catch (e) {
+    loaderContext.emitError(
+      new Error(`[Mpx template error]: Invalid render function generated by the template, please check!\\n  Error code:\\n  ${localTemplatesCode}\\n  Error Detail:\\n  ${e.stack}`)
+    )
+  }
+
+  let wxsImports = ''
+  for (const module in meta.wxsModuleMap) {
+    const request = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
+    wxsImports += `var ${module} = require(${loaderUtils.stringifyRequest(loaderContext, request)});\n`
+  }
+  const hasTemplateSource = imports.length || (meta.templates && Object.keys(meta.templates).length)
+  const templateHelpersCode = hasTemplateSource
+    ? `var templates = Object.assign({}, ${imports.join(', ') || '{}'});
+    Object.assign(templates, localTemplates);
+    function getTemplate(name) {
+      return templates[name] || function(){};
+    }`
+    : ''
+
+  const output = `
+    ${wxsImports}
+    var getBuiltInBaseComponent = require(${loaderUtils.stringifyRequest(loaderContext, normalize.lib('runtime/optionProcessorReact'))}).getComponent;
+    var builtInComponentsMap = {${builtInComponents.join(',')}};
+    ${localTemplatesCode}
+    ${templateHelpersCode}
+    function getBuiltInComponent(name) {
+      var getter = builtInComponentsMap[name];
+      return getter && getter();
+    }
+    function getTemplateComponent(name, getComponent) {
+      return getComponent(name) || getBuiltInComponent(name);
+    }
+    Object.keys(localTemplates).forEach(function (name) {
+      var template = localTemplates[name];
+      localTemplates[name] = function (createElement, getComponent) {
+        return template.call(this, createElement, function (componentName) {
+          return getTemplateComponent(componentName, getComponent);
+        });
+      };
+    });
+    module.exports = localTemplates;
+  `
+  return output
+}

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -124,7 +124,7 @@ const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getF
     else if (status === 'error') {
         if (type === 'page') {
             const fallback = getFallback ? getFallback() : DefaultFallback;
-            return createElement(fallback, { onReload: reloadPage });
+            return createElement(fallback, { onReload: reloadPage, bindreload: reloadPage });
         }
         else {
             return getFallback ? createElement(getFallback(), innerProps) : null;

package/lib/runtime/components/react/dist/mpx-image.d.ts

@@ -5,7 +5,6 @@ export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'he
 export interface ImageProps {
     src?: string;
     mode?: Mode;
-    svg?: boolean;
     style?: ImageStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -310,8 +310,7 @@ const Image = forwardRef((props, ref) => {
         style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
     }), [
         'src',
-        'mode',
-        'svg'
+        'mode'
     ], {
         layoutRef
     });

package/lib/runtime/components/react/dist/mpx-picker/type.d.ts

@@ -71,7 +71,7 @@ export interface RegionProps extends BasePickerProps {
     /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
     value?: string[];
     /** 默认值 region */
-    level?: 'province' | 'city' | 'region' | 'sub-district';
+    level?: 'province' | 'city' | 'region';
     /** 可为每一列的顶部添加一个自定义的项 */
     'custom-item'?: string;
     /** value 改变时触发 change 事件, event.detail = {value, code, postcode},

package/lib/runtime/components/react/dist/utils.jsx

@@ -284,8 +284,9 @@ export function parseValues(str, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
-    // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort();
+    // Todo 2 RN下顺序不一致转换结果不一致，故这里不处理，动画前后transform 排序不一致的问题，由业务调整写法
+    // Todo 1 transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+    // values.sort()
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
 
 interface DefaultFallbackProps {
   onReload: () => void
+  bindreload: () => void
 }
 
 const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
@@ -171,7 +172,7 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
   } else if (status === 'error') {
     if (type === 'page') {
       const fallback = getFallback ? getFallback() : DefaultFallback
-      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
+      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage, bindreload: reloadPage })
     } else {
       return getFallback ? createElement(getFallback(), innerProps) : null
     }