@mpxjs/webpack-plugin 2.9.58 → 2.9.62

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useRef, useEffect } from 'react'
+import { forwardRef, JSX, useEffect } from 'react'
 // @ts-ignore
 import { noop } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
@@ -7,7 +7,6 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 // @ts-ignore
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { StyleSheet } from 'react-native'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -55,21 +54,19 @@ interface FormRef {
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
   const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
 
-  const defaultWebViewStyle = [
-    {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    }
-  ]
+  const defaultWebViewStyle = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }
+
   const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
-    defaultStyle: StyleSheet.flatten([
-      ...defaultWebViewStyle
-    ])
+    defaultStyle: defaultWebViewStyle
   })
-  const _messageList:any[] = []
+
+  const _messageList: any[] = []
   const handleUnload = () => {
     // 这里是 WebView 销毁前执行的逻辑
     bindmessage(getCustomEvent('messsage', {}, {
@@ -86,7 +83,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       handleUnload()
     }
   }, [])
-  const _load = function(res:LoadRes) {
+  const _load = function (res: LoadRes) {
     const result = {
       type: 'load',
       timeStamp: res.timeStamp,
@@ -96,7 +93,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     bindload(result)
   }
-  const _error = function(res:LoadRes) {
+  const _error = function (res: LoadRes) {
     const result = {
       type: 'error',
       timeStamp: res.timeStamp,
@@ -106,7 +103,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
-  const _message = function(res:LoadRes) {
+  const _message = function (res: LoadRes) {
     let data: MessageData
     let asyncCallback
     const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
@@ -116,7 +113,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     } catch (e) {
       data = {}
     }
-    const postData:PayloadData = data.payload || {}
+    const postData: PayloadData = data.payload || {}
     switch (data.type) {
       case 'postMessage':
         _messageList.push(postData.data)
@@ -152,16 +149,15 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       }
     })
   }
-  // @ts-ignore
-  return(<Portal>
+  return (<Portal>
     <WebView
-        style={[ ...defaultWebViewStyle ]}
-        source={{ uri: src }}
-        ref={webViewRef}
-        onLoad={_load}
-        onError={_error}
-        onMessage={_message}
-        javaScriptEnabled={true}
+      style={defaultWebViewStyle}
+      source={{ uri: src }}
+      ref={webViewRef}
+      onLoad={_load}
+      onError={_error}
+      onMessage={_message}
+      javaScriptEnabled={true}
     ></WebView>
   </Portal>)
 })

package/lib/runtime/components/react/types/common.ts

@@ -0,0 +1,12 @@
+import { ViewStyle, ImageResizeMode} from 'react-native'
+
+type NumberVal = number | `${number}%`
+type backgroundPositionList = [ 'left'| 'right', NumberVal, 'top' | 'bottom',  NumberVal ] | []
+
+export type ExtendedViewStyle = ViewStyle & {
+  backgroundImage?: string
+  backgroundSize?: Array<ImageResizeMode | string> | ImageResizeMode | string
+  borderRadius?: string | number
+  backgroundPosition?: backgroundPositionList
+  [key: string]: any
+}

package/lib/runtime/components/react/types/getInnerListeners.ts

@@ -49,7 +49,8 @@ interface InnerRef {
 }
 interface UseInnerPropsConfig {
   layoutRef: LayoutRef;
-  disableTouch?: boolean
+  disableTouch?: boolean;
+  disableTap?: boolean
 }
 interface DataSetType {
   [key: string]: string;

package/lib/runtime/components/react/types/global.d.ts

@@ -12,4 +12,8 @@ declare module 'react-native-svg/css' {
   }
 
   export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
+}
+
+declare module '@mpxjs/utils' {
+  export function isEmptyObject(obj: Record<string, any>): boolean;
 }

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

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useImperativeHandle, RefObject, ForwardedRef } from 'react'
+import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
 
 
 type Obj = Record<string, any>
@@ -13,14 +13,9 @@ export type HandlerRef<T, P> = {
 
 export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {} ) {
   const nodeRef = useRef<T>(null)
-  const _props = useRef<P | null>(props)
+  const _props = useRef<P | null>(null)
+  _props.current = props
 
-  useEffect(() => {
-    _props.current = props
-    return () => {
-      _props.current = null // 组件销毁，清空 _props 依赖数据
-    }
-  }, [props])
   useImperativeHandle(ref, () => {
     return {
       getNodeInstance () {

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

@@ -1,9 +1,20 @@
-import { useEffect, useRef, Children, ReactNode, FunctionComponent, isValidElement } from 'react'
-import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+import { useEffect, useRef, ReactNode, FunctionComponent, isValidElement } from 'react'
+import { ExtendedViewStyle } from './types/common'
+import { TextStyle } from 'react-native'
+
+type GroupData = Record<string, Record<string, any>>
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 
-export const PERCENT_REGX = /^\s*-?\d+(\.\d+)?%\s*$/
+export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
+
+export const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/
+
+export const TEXT_PROPS_REGEX =  /ellipsizeMode|numberOfLines/
+
+export const DEFAULT_STYLE = {
+  fontSize: 16
+}
 
 const URL_REGEX = /url\(["']?(.*?)["']?\)/
 
@@ -16,18 +27,6 @@ export function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K> {
   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，但是会忽略首次执行，只在依赖更新时执行
  */
@@ -87,6 +86,85 @@ export const isText = (ele: ReactNode) => {
   return false
 }
 
+export const isEmbedded = (ele: ReactNode) => {
+  if (isValidElement(ele)) {
+    const displayName = (ele.type as FunctionComponent)?.displayName
+    return displayName && ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName) 
+  }
+  return false
+}
+
 export function every(children: ReactNode, callback: (children: ReactNode) => boolean ) {
-  return Children.toArray(children).every((child) => callback(child as ReactNode))
+  const childrenArray = Array.isArray(children) ? children : [children];
+  return childrenArray.every((child) => callback(child as ReactNode))
+}
+
+export function groupBy(obj: Record<string, any>, callback: (key: string, val: string) => string, group:GroupData = {}):GroupData {
+  let groupKey = ''
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) { // 确保处理对象自身的属性
+      let val: string = obj[key] as string
+      groupKey = callback(key, val)
+      if (!group[groupKey]) {
+        group[groupKey] = {}
+      }
+      group[groupKey][key] = val
+    }
+  }
+  return group
+}
+
+export const normalizeStyle = (style: ExtendedViewStyle = {}) => {
+  const { borderRadius } = style
+  if (borderRadius && PERCENT_REGEX.test(borderRadius as string)) {
+    style.borderTopLeftRadius = borderRadius
+    style.borderBottomLeftRadius = borderRadius
+    style.borderBottomRightRadius = borderRadius
+    style.borderTopRightRadius = borderRadius
+    delete style.borderRadius
+  }
+  ['backgroundSize', 'backgroundPosition'].forEach(name => {
+    if (style[name] && typeof style[name] === 'string') {
+      if (style[name].trim()) {
+        style[name] = style[name].split(' ')
+     }
+    }
+  })
+  return style
+}
+
+export function splitStyle<T extends Record<string, any>>(styles: T) {
+  return groupBy(styles, (key) => {
+    if (TEXT_STYLE_REGEX.test(key)) {
+      return 'textStyle'
+    } else if (IMAGE_STYLE_REGEX.test(key)) {
+      return 'imageStyle'
+    } else {
+      return 'innerStyle'
+    }
+  }, {})
+}
+
+export function splitProps<T extends Record<string, any>>(props: T) {
+  return groupBy(props, (key) => {
+    if (TEXT_PROPS_REGEX.test(key)) {
+      return 'textProps'
+    } else {
+      return 'innerProps'
+    }
+  }, {})
+}
+
+export const throwReactWarning = (message: string) => {
+  setTimeout(() => {
+    console.warn(message)
+  }, 0)
+}
+
+export const transformTextStyle = (styleObj: TextStyle) => {
+  let { lineHeight } = styleObj
+  if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
+    lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize)
+    styleObj.lineHeight = lineHeight
+  }
 }

package/lib/runtime/optionProcessor.js

@@ -81,23 +81,25 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    option.watch = {
-      $route: {
-        handler () {
-          const actionType = global.__mpxRouter.currentActionType
+    if (!global.__mpx.config.webConfig.disablePageTransition) {
+      option.watch = {
+        $route: {
+          handler () {
+            const actionType = global.__mpxRouter.currentActionType
 
-          switch (actionType) {
-            case 'to':
-              this.transitionName = 'mpx-slide-left'
-              break
-            case 'back':
-              this.transitionName = 'mpx-slide-right'
-              break
-            default:
-              this.transitionName = ''
-          }
-        },
-        immediate: true
+            switch (actionType) {
+              case 'to':
+                this.transitionName = 'mpx-slide-left'
+                break
+              case 'back':
+                this.transitionName = 'mpx-slide-right'
+                break
+              default:
+                this.transitionName = ''
+            }
+          },
+          immediate: true
+        }
       }
     }
   }
@@ -161,7 +163,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         redirect: '/' + firstPage
       })
     }
-    const webRouteConfig = global.__mpx.config.webRouteConfig
+    const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
     global.__mpxRouter = option.router = new VueRouter({
       ...webRouteConfig,
       routes: routes

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
@@ -1052,7 +1052,7 @@ function stringifyWithResolveComputed (modelValue) {
   return result.join('+')
 }
 
-function processStyleReact (el) {
+function processStyleReact (el, options) {
   // process class/wx:class/style/wx:style/wx:show for react native
   const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
   let staticClass = getAndRemoveAttr(el, 'class').val || ''
@@ -1088,10 +1088,24 @@ function processStyleReact (el) {
     const staticClassExp = parseMustacheWithContext(staticHoverClass).result
     addAttrs(el, [{
       name: 'hoverStyle',
-      // runtime helper
       value: `{{this.__getStyle(${staticClassExp})}}`
     }])
   }
+
+  // 处理externalClasses，将其转换为style作为props传递
+  if (options.externalClasses) {
+    options.externalClasses.forEach((className) => {
+      let externalClass = getAndRemoveAttr(el, className).val || ''
+      externalClass = externalClass.replace(/\s+/g, ' ')
+      if (externalClass) {
+        const externalClassExp = parseMustacheWithContext(externalClass).result
+        addAttrs(el, [{
+          name: className,
+          value: `{{this.__getStyle(${externalClassExp})}}`
+        }])
+      }
+    })
+  }
 }
 
 function getModelConfig (el, match) {
@@ -2427,12 +2441,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 || ''
@@ -2469,40 +2497,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
       }
     }
   })
@@ -2550,15 +2579,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)
   }
@@ -2567,8 +2598,6 @@ function processElement (el, root, options, meta) {
 
   processDuplicateAttrsList(el)
 
-  processMpxTagName(el)
-
   processInjectWxs(el, meta, options)
 
   const transAli = mode === 'ali' && srcMode === 'wx'
@@ -2590,7 +2619,7 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el)
+    processStyleReact(el, options)
     processEventReact(el)
     processComponentIs(el, options)
     processSlotReact(el)
@@ -2670,8 +2699,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

@@ -61,7 +61,7 @@ function genNode (node) {
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.isRoot) {
-              exp += `, Object.assign({}, rootProps, {style: [${attrExpMap.style}, rootProps.style]})`
+              exp += `, Object.assign({}, rootProps, {style: Object.assign({}, ${attrExpMap.style}, rootProps.style)})`
             } else if (node.attrsList.length) {
               const attrs = []
               node.attrsList && node.attrsList.forEach(({ name, value }) => {
@@ -75,17 +75,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/utils/shallow-stringify.js

@@ -6,7 +6,7 @@ module.exports = function shallowStringify (obj, isTemplateExp) {
     if (hasOwn(obj, key)) {
       let value = obj[key]
       if (Array.isArray(value)) {
-        value = `[${value.join(',')}]`
+        value = `[${value.map((item) => typeof item === 'object' ? shallowStringify(item, isTemplateExp) : item).join(',')}]`
       } else if (typeof value === 'object') {
         value = shallowStringify(value, isTemplateExp)
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.58",
+  "version": "2.9.62",
   "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.59",
     "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,16 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
+    "@mpxjs/api-proxy": "^2.9.62",
     "@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",
     "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
+  "gitHead": "c31a343e7ef2c1c1585002752d8c50f016a858ae"
 }