@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/template-compiler/compiler.js

@@ -990,7 +990,7 @@ function processComponentIs (el, options) {
 const eventIdentifier = '__mpx_event__'
 
 function parseFuncStr (str, extraStr = '') {
-  const funcRE = /^([^()]+)(\((.*)\))?/
+  const funcRE = /^(.*{{.+}}[^()]*|[^()]+)(\((.*)\))?/
   const match = funcRE.exec(str)
   if (match) {
     const funcName = parseMustacheWithContext(match[1]).result
@@ -1068,7 +1068,10 @@ function processStyleReact (el, options) {
   let staticStyle = getAndRemoveAttr(el, 'style').val || ''
   staticStyle = staticStyle.replace(/\s+/g, ' ')
 
-  const show = getAndRemoveAttr(el, config[mode].directive.show).val
+  const { val: show, has } = getAndRemoveAttr(el, config[mode].directive.show)
+  if (has && show === undefined) {
+    error$1(`Attrs ${config[mode].directive.show} should have a value `)
+  }
 
   if (dynamicClass || staticClass || dynamicStyle || staticStyle || show) {
     const staticClassExp = parseMustacheWithContext(staticClass).result
@@ -1080,14 +1083,14 @@ function processStyleReact (el, options) {
     addAttrs(el, [{
       name: 'style',
       // runtime helper
-      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}, ${showExp})}}`
+      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}`
     }])
   }
 
   if (staticHoverClass && staticHoverClass !== 'none') {
     const staticClassExp = parseMustacheWithContext(staticHoverClass).result
     addAttrs(el, [{
-      name: 'hoverStyle',
+      name: 'hover-style',
       value: `{{this.__getStyle(${staticClassExp})}}`
     }])
   }
@@ -1355,11 +1358,13 @@ function processEvent (el, options) {
   }
 }
 
-function processSlotReact (el) {
+function processSlotReact (el, meta) {
   if (el.tag === 'slot') {
     el.slot = {
       name: getAndRemoveAttr(el, 'name').val
     }
+    meta.options = meta.options || {}
+    meta.options.disableMemo = true
   }
 }
 
@@ -1720,34 +1725,33 @@ function processRefReact (el, meta) {
       type
     }
 
+    const selectors = []
+
+    /**
+     * selectorsConf: [type, [[prefix, selector], [prefix, selector]]]
+     */
     if (!val) {
-      refConf.key = `ref_rn_${++refId}`
-      refConf.sKeys = []
       const rawId = el.attrsMap.id
       const rawClass = el.attrsMap.class
       const rawDynamicClass = el.attrsMap[config[mode].directive.dynamicClass]
 
-      meta.computed = meta.computed || []
       if (rawId) {
         const staticId = parseMustacheWithContext(rawId).result
-        const computedIdKey = `_ri${refId}`
-        refConf.sKeys.push({ key: computedIdKey, prefix: '#' })
-        meta.computed.push(`${computedIdKey}() {\n return ${staticId}}`)
+        selectors.push({ prefix: '#', selector: `${staticId}` })
       }
       if (rawClass || rawDynamicClass) {
         const staticClass = parseMustacheWithContext(rawClass).result
         const dynamicClass = parseMustacheWithContext(rawDynamicClass).result
-        const computedClassKey = `_rc${refId}`
-        refConf.sKeys.push({ key: computedClassKey, prefix: '.' })
-        meta.computed.push(`${computedClassKey}() {\n return this.__getClass(${staticClass}, ${dynamicClass})}`)
+        selectors.push({ prefix: '.', selector: `this.__getClass(${staticClass}, ${dynamicClass})` })
       }
+    } else {
+      meta.refs.push(refConf)
+      selectors.push({ prefix: '', selector: `"${refConf.key}"` })
     }
-
-    meta.refs.push(refConf)
-
+    const selectorsConf = selectors.map(item => `["${item.prefix}", ${item.selector}]`)
     addAttrs(el, [{
       name: 'ref',
-      value: `{{ this.__getRefVal('${refConf.key}') }}`
+      value: `{{ this.__getRefVal('${type}', [${selectorsConf}]) }}`
     }])
   }
 }
@@ -2329,7 +2333,7 @@ function getVirtualHostRoot (options, meta) {
     if (ctorType === 'component') {
       if (mode === 'wx' && hasVirtualHost) {
         // wx组件注入virtualHost配置
-        !meta.options && (meta.options = {})
+        meta.options = meta.options || {}
         meta.options.virtualHost = true
       }
       if (mode === 'web' && !hasVirtualHost) {
@@ -2353,8 +2357,12 @@ function getVirtualHostRoot (options, meta) {
             name: 'class',
             value: `${MPX_ROOT_VIEW} host-${moduleId}`
           }
+          // todo 运行时通过root标识确定是否合并rootProps
+          // {
+          //   name: 'is-root',
+          //   value: '{{true}}'
+          // }
         ])
-        rootView.isRoot = true
         processElement(rootView, rootView, options, meta)
         return rootView
       }
@@ -2441,12 +2449,26 @@ function isValidModeP (i) {
 
 const wrapRE = /^\((.*)\)$/
 
-function processAtMode (el) {
-  // 父节点的atMode匹配状态不应该影响子节点，atMode的影响范围应该限制在当前节点本身
-  // if (el.parent && el.parent._atModeStatus) {
-  //   el._atModeStatus = el.parent._atModeStatus
-  // }
+// MATCH: mode 与 env 都匹配，节点/属性保留，但不做跨平台转换
+// IMPLICITMATCH: mode 与 env 匹配，节点/属性保留，属于隐式匹配，做跨平台转换
+// MISMATCH: mode 或 env不匹配，节点/属性直接删除
+const statusEnum = {
+  MISMATCH: 1,
+  IMPLICITMATCH: 2,
+  MATCH: 3
+}
 
+// 父节点的atMode匹配状态不应该影响子节点，atMode的影响范围应该限制在当前节点本身
+function setModeStatus (target, status) {
+  // 高优status才可以覆盖低优status，status枚举值代表优先级
+  if (!target._matchStatus) {
+    target._matchStatus = status
+  } else if (status > target._matchStatus) {
+    target._matchStatus = status
+  }
+}
+
+function processAtMode (el) {
   const attrsListClone = cloneAttrsList(el.attrsList)
   attrsListClone.forEach(item => {
     const attrName = item.name || ''
@@ -2483,40 +2505,41 @@ function processAtMode (el) {
       const attrValue = getAndRemoveAttr(el, attrName).val
       const replacedAttrName = attrArr.join('@')
       const processedAttr = { name: replacedAttrName, value: attrValue }
-
+      const target = replacedAttrName ? processedAttr : el
+      // 循环 conditionMap
+      // 判断 env 是否匹配
+      // 判断 mode 是否匹配
+      // 额外处理attr value 场景
       for (let [defineMode, defineEnvArr] of conditionMap.entries()) {
         const isImplicitMode = defineMode[0] === '_'
         if (isImplicitMode) defineMode = defineMode.slice(1)
-        if (defineMode === 'noMode' || defineMode === mode) {
-          // 命中 env 规则(没有定义env 或者定义的envArr包含当前env)
-          if (!defineEnvArr.length || defineEnvArr.includes(env)) {
-            if (!replacedAttrName) {
-              if (defineMode === 'noMode' || isImplicitMode) {
-                // 若defineMode 为 noMode 或 implicitMode，则 element 都需要进行规则转换
-              } else {
-                el._atModeStatus = 'match'
-              }
-            } else {
-              if (defineMode === 'noMode' || isImplicitMode) {
-                // 若defineMode 为 noMode 或 implicitMode，则直接将 attr 挂载回 el，进行规则转换
-                addAttrs(el, [processedAttr])
-              } else {
-                // 如果命中了指定的mode，且当前 mode 不为 noMode 或 implicitMode，则把不需要转换的 attrs 暂存在 noTransAttrs 上，等规则转换后再挂载回去
-                el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
-              }
-            }
-            // 命中mode，命中env，完成匹配，直接退出
+
+        const isNoMode = defineMode === 'noMode'
+        const isMatchMode = isNoMode || defineMode === mode
+        const isMatchEnv = !defineEnvArr.length || defineEnvArr.includes(env)
+        let matchStatus = statusEnum.MISMATCH
+        // 是否为针对于节点的条件判断，否为节点属性
+        if (isMatchMode && isMatchEnv) {
+          // mpxTagName 特殊标签，需要做转换保留处理
+          matchStatus = (isNoMode || isImplicitMode || replacedAttrName === 'mpxTagName') ? statusEnum.IMPLICITMATCH : statusEnum.MATCH
+        }
+        setModeStatus(target, matchStatus)
+      }
+      // 解析处理attr._matchStatus
+      if (replacedAttrName) {
+        switch (processedAttr._matchStatus) {
+          // IMPLICITMATCH保留属性并进行平台转换
+          case statusEnum.IMPLICITMATCH:
+            addAttrs(el, [processedAttr])
             break
-          } else if (!replacedAttrName) {
-            // 命中mode规则，没有命中当前env规则，设置为 'mismatch'
-            el._atModeStatus = 'mismatch'
-          }
-        } else if (!replacedAttrName) {
-          // 没有命中当前mode规则，设置为 'mismatch'
-          el._atModeStatus = 'mismatch'
-        } else {
-          // 如果没命中指定的mode，则该属性删除
+          // MATCH保留属性并跳过平台转换
+          case statusEnum.MATCH:
+            el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
+            break
+          default:
+          // MISMATCH丢弃属性
         }
+        delete processedAttr._matchStatus
       }
     }
   })
@@ -2564,15 +2587,17 @@ function processMpxTagName (el) {
 function processElement (el, root, options, meta) {
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
-  if (el._atModeStatus === 'mismatch') {
+  if (el._matchStatus === statusEnum.MISMATCH) {
     return
   }
 
+  processMpxTagName(el)
+
   if (runtimeCompile && options.dynamicTemplateRuleRunner) {
     options.dynamicTemplateRuleRunner(el, options, config[mode])
   }
 
-  if (rulesRunner && el._atModeStatus !== 'match') {
+  if (rulesRunner && el._matchStatus !== statusEnum.MATCH) {
     currentEl = el
     rulesRunner(el)
   }
@@ -2581,8 +2606,6 @@ function processElement (el, root, options, meta) {
 
   processDuplicateAttrsList(el)
 
-  processMpxTagName(el)
-
   processInjectWxs(el, meta, options)
 
   const transAli = mode === 'ali' && srcMode === 'wx'
@@ -2607,7 +2630,7 @@ function processElement (el, root, options, meta) {
     processStyleReact(el, options)
     processEventReact(el)
     processComponentIs(el, options)
-    processSlotReact(el)
+    processSlotReact(el, meta)
     processAttrs(el, options)
     return
   }
@@ -2684,8 +2707,8 @@ function collectDynamicInfo (el, options, meta) {
 }
 
 function postProcessAtMode (el) {
-  if (el._atModeStatus === 'mismatch') {
-    removeNode(el, true)
+  if (el._matchStatus === statusEnum.MISMATCH) {
+    removeNode(el)
   }
 }
 

package/lib/template-compiler/gen-node-react.js

@@ -60,9 +60,7 @@ function genNode (node) {
             exp += `__getSlot(${name ? s(name) : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
-            if (node.isRoot) {
-              exp += `, Object.assign({}, rootProps, {style: [${attrExpMap.style}, rootProps.style]})`
-            } else if (node.attrsList.length) {
+            if (node.attrsList.length) {
               const attrs = []
               node.attrsList && node.attrsList.forEach(({ name, value }) => {
                 const attrExp = attrExpMap[name] ? attrExpMap[name] : s(value)
@@ -75,17 +73,17 @@ function genNode (node) {
 
             if (!node.unary && node.children.length) {
               exp += ','
-              node.children.forEach(function (child, index) {
-                exp += `${index === 0 ? '' : ','}${genNode(child)}`
-              })
+              exp += node.children.map((child) => {
+                return genNode(child)
+              }).filter(fragment => fragment).join(',')
             }
             exp += ')'
           }
         }
       } else {
-        node.children.forEach(function (child, index) {
-          exp += `${index === 0 ? '' : ','}${genNode(child)}`
-        })
+        exp += node.children.map((child) => {
+          return genNode(child)
+        }).filter(fragment => fragment).join(',')
       }
     }
   }

package/lib/web/processStyles.js

@@ -8,11 +8,8 @@ module.exports = function (styles, options, callback) {
         attrs (style) {
           const attrs = Object.assign({}, style.attrs)
           if (options.autoScope) attrs.scoped = true
-          attrs.mpxStyleOptions = JSON.stringify({
-            // scoped: !!options.autoScope,
-            // query中包含module字符串会被新版vue-cli中的默认rules当做css-module处理
-            mid: options.moduleId
-          })
+          // query中包含module字符串会被新版vue-cli中的默认rules当做css-module处理
+          attrs.mid = options.moduleId
           return attrs
         }
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.59",
+  "version": "2.9.64",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,6 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
+    "@mpxjs/utils": "^2.9.64",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -41,7 +42,7 @@
     "html-minifier": "^3.5.8",
     "icss-utils": "^2.1.0",
     "json5": "^2.1.3",
-    "loader-utils": "^2.0.2",
+    "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
     "lodash.camelcase": "^4.3.0",
     "lru-cache": "^4.1.2",
@@ -81,14 +82,18 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
+    "@mpxjs/api-proxy": "^2.9.64",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
     "react-native": "^0.74.5",
+    "react-native-gesture-handler": "^2.18.1",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
+  "gitHead": "803334dc0e600f219d514c27461aa7663b7a6653"
 }

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

@@ -1,80 +0,0 @@
-import { useEffect, useRef, Children, isValidElement } from 'react';
-import { StyleSheet } from 'react-native';
-export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
-export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
-const URL_REGEX = /url\(["']?(.*?)["']?\)/;
-export function omit(obj, fields) {
-    const shallowCopy = Object.assign({}, obj);
-    for (let i = 0; i < fields.length; i += 1) {
-        const key = fields[i];
-        delete shallowCopy[key];
-    }
-    return shallowCopy;
-}
-/**
- * 从 style 中提取 TextStyle
- * @param style
- * @returns
- */
-export const extractTextStyle = (style) => {
-    return Object.entries(StyleSheet.flatten(style)).reduce((textStyle, [key, value]) => {
-        TEXT_STYLE_REGEX.test(key) && Object.assign(textStyle, { [key]: value });
-        return textStyle;
-    }, {});
-};
-/**
- * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
- */
-export const useUpdateEffect = (effect, deps) => {
-    const isMounted = useRef(false);
-    // for react-refresh
-    useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    useEffect(() => {
-        if (!isMounted.current) {
-            isMounted.current = true;
-        }
-        else {
-            return effect();
-        }
-    }, deps);
-};
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = '') => {
-    return inlineStyle.split(';').reduce((styleObj, style) => {
-        const [k, v, ...rest] = style.split(':');
-        if (rest.length || !v || !k)
-            return styleObj;
-        const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return Object.assign(styleObj, { [key]: v.trim() });
-    }, {});
-};
-export const parseUrl = (cssUrl = '') => {
-    if (!cssUrl)
-        return;
-    const match = cssUrl.match(URL_REGEX);
-    return match?.[1];
-};
-export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
-    return {
-        ...transferProps,
-        ...omit(originProps, deletePropsKey)
-    };
-};
-export const isText = (ele) => {
-    if (isValidElement(ele)) {
-        const displayName = ele.type?.displayName;
-        return displayName === 'mpx-text' || displayName === 'Text';
-    }
-    return false;
-};
-export function every(children, callback) {
-    return Children.toArray(children).every((child) => callback(child));
-}

package/lib/runtime/components/react/utils.ts

@@ -1,92 +0,0 @@
-import { useEffect, useRef, Children, ReactNode, FunctionComponent, isValidElement } from 'react'
-import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
-
-export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
-
-export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
-
-const URL_REGEX = /url\(["']?(.*?)["']?\)/
-
-export function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K> {
-  const shallowCopy: any = Object.assign({}, obj)
-  for (let i = 0; i < fields.length; i += 1) {
-    const key = fields[i]
-    delete shallowCopy[key]
-  }
-  return shallowCopy
-}
-
-/**
- * 从 style 中提取 TextStyle
- * @param style
- * @returns
- */
-export const extractTextStyle = (style: StyleProp<ViewStyle & TextStyle>): TextStyle => {
-  return Object.entries(StyleSheet.flatten(style)).reduce((textStyle, [key, value]) => {
-    TEXT_STYLE_REGEX.test(key) && Object.assign(textStyle, { [key]: value })
-    return textStyle
-  }, {})
-}
-
-/**
- * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
- */
-export const useUpdateEffect = (effect: any, deps: any) => {
-  const isMounted = useRef(false)
-
-  // for react-refresh
-  useEffect(() => {
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true
-    } else {
-      return effect()
-    }
-  }, deps)
-}
-
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
-  return inlineStyle.split(';').reduce((styleObj, style) => {
-    const [k, v, ...rest] = style.split(':')
-    if (rest.length || !v || !k) return styleObj
-    const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return Object.assign(styleObj, { [key]: v.trim() })
-  }, {})
-}
-
-export const parseUrl = (cssUrl: string = '') => {
-  if (!cssUrl) return
-
-  const match = cssUrl.match(URL_REGEX)
-
-  return match?.[1]
-}
-
-export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => {
-  return {
-    ...transferProps,
-    ...omit(originProps, deletePropsKey)
-  }
-}
-
-export const isText = (ele: ReactNode) => {
-  if (isValidElement(ele)) {
-    const displayName = (ele.type as FunctionComponent)?.displayName
-    return displayName === 'mpx-text' || displayName === 'Text'  
-  }
-  return false
-}
-
-export function every(children: ReactNode, callback: (children: ReactNode) => boolean ) {
-  return Children.toArray(children).every((child) => callback(child as ReactNode))
-}