@mpxjs/webpack-plugin 2.10.4-beta.9 → 2.10.5-beta.1

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

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
@@ -32,6 +32,7 @@ const unoVarDecRegExp = /^--un-/
 const unoVarUseRegExp = /var\(--un-/
 const calcUseRegExp = /calc\(/
 const envUseRegExp = /env\(/
+const filterRegExp = /(calc|env|%)/
 
 const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-top': 'top',
@@ -168,6 +169,10 @@ interface PercentConfig {
   parentHeight?: number
 }
 
+interface PositionMeta {
+  hasPositionFixed: boolean
+}
+
 function resolvePercent (value: string | number | undefined, key: string, percentConfig: PercentConfig): string | number | undefined {
   if (!(typeof value === 'string' && PERCENT_REGEX.test(value))) return value
   let base
@@ -222,10 +227,11 @@ function resolveVar (input: string, varContext: Record<string, any>) {
   return global.__formatValue(replaced.source())
 }
 
-function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>) {
+function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>, visitOther: (arg: VisitorArg) => void) {
   varKeyPaths.forEach((varKeyPath) => {
     setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
       target[key] = resolveVar(value, varContext)
+      visitOther({ target, key, value: target[key], keyPath: varKeyPath })
     })
   })
 }
@@ -267,13 +273,17 @@ function transformCalc (styleObj: Record<string, any>, calcKeyPaths: Array<Array
   })
 }
 
-const stringifyProps = ['fontWeight']
 function transformStringify (styleObj: Record<string, any>) {
-  stringifyProps.forEach((prop) => {
-    if (isNumber(styleObj[prop])) {
-      styleObj[prop] = '' + styleObj[prop]
-    }
-  })
+  if (isNumber(styleObj.fontWeight)) {
+    styleObj.fontWeight = '' + styleObj.fontWeight
+  }
+}
+
+function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
+  if (styleObj.position === 'fixed') {
+    styleObj.position = 'absolute'
+    meta.hasPositionFixed = true
+  }
 }
 
 interface TransformStyleConfig {
@@ -288,17 +298,19 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const varStyle: Record<string, any> = {}
   const unoVarStyle: Record<string, any> = {}
   const normalStyle: Record<string, any> = {}
-  const normalStyleRef = useRef<Record<string, any>>({})
-  const normalStyleChangedRef = useRef(false)
   let hasVarDec = false
   let hasVarUse = false
+  let hasSelfPercent = false
   const varKeyPaths: Array<Array<string>> = []
   const unoVarKeyPaths: Array<Array<string>> = []
+  const percentKeyPaths: Array<Array<string>> = []
+  const calcKeyPaths: Array<Array<string>> = []
+  const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
   const navigation = useNavigation()
 
-  function varVisitor ({ key, value, keyPath }: VisitorArg) {
+  function varVisitor ({ target, key, value, keyPath }: VisitorArg) {
     if (keyPath.length === 1) {
       if (unoVarDecRegExp.test(key)) {
         unoVarStyle[key] = value
@@ -318,10 +330,39 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       } else if (varUseRegExp.test(value)) {
         hasVarUse = true
         varKeyPaths.push(keyPath.slice())
+      } else {
+        visitOther({ target, key, value, keyPath })
       }
     }
   }
 
+  function envVisitor ({ value, keyPath }: VisitorArg) {
+    if (envUseRegExp.test(value)) {
+      envKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function calcVisitor ({ value, keyPath }: VisitorArg) {
+    if (calcUseRegExp.test(value)) {
+      calcKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function percentVisitor ({ key, value, keyPath }: VisitorArg) {
+    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+      hasSelfPercent = true
+      percentKeyPaths.push(keyPath.slice())
+    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+      percentKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function visitOther ({ target, key, value, keyPath }: VisitorArg) {
+    if (filterRegExp.test(value)) {
+      [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
+    }
+  }
+
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
 
@@ -341,104 +382,61 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
       varContextRef.current = newVarContext
     }
-    transformVar(normalStyle, varKeyPaths, varContextRef.current)
+    transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther)
   }
 
   // apply unocss var
   if (unoVarKeyPaths.length) {
-    transformVar(normalStyle, unoVarKeyPaths, unoVarStyle)
+    transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther)
   }
 
-  const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current)
-  if (diff) {
-    normalStyleRef.current = clone
-    normalStyleChangedRef.current = !normalStyleChangedRef.current
+  const percentConfig = {
+    width,
+    height,
+    fontSize: normalStyle.fontSize,
+    parentWidth,
+    parentHeight,
+    parentFontSize
   }
 
-  const memoResult = useMemo(() => {
-    let hasSelfPercent = false
-    let hasPositionFixed = false
-    const percentKeyPaths: Array<Array<string>> = []
-    const calcKeyPaths: Array<Array<string>> = []
-    const envKeyPaths: Array<Array<string>> = []
-    // transform can be memoized
-    function envVisitor ({ value, keyPath }: VisitorArg) {
-      if (envUseRegExp.test(value)) {
-        envKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function calcVisitor ({ value, keyPath }: VisitorArg) {
-      if (calcUseRegExp.test(value)) {
-        calcKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-      if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-        hasSelfPercent = true
-        percentKeyPaths.push(keyPath.slice())
-      } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-        percentKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function transformPosition (styleObj: Record<string, any>) {
-      if (styleObj.position === 'fixed') {
-        hasPositionFixed = true
-        styleObj.position = 'absolute'
-      }
-    }
-
-    // traverse env & calc & percent
-    traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
-
-    const percentConfig = {
-      width,
-      height,
-      fontSize: normalStyle.fontSize,
-      parentWidth,
-      parentHeight,
-      parentFontSize
-    }
+  const positionMeta = {
+    hasPositionFixed: false
+  }
 
-    // apply env
-    transformEnv(normalStyle, envKeyPaths, navigation)
-    // apply percent
-    transformPercent(normalStyle, percentKeyPaths, percentConfig)
-    // apply calc
-    transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
-      if (PERCENT_REGEX.test(value)) {
-        const resolved = resolvePercent(value, key, percentConfig)
-        return typeof resolved === 'number' ? resolved : 0
+  // apply env
+  transformEnv(normalStyle, envKeyPaths, navigation)
+  // apply percent
+  transformPercent(normalStyle, percentKeyPaths, percentConfig)
+  // apply calc
+  transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
+    if (PERCENT_REGEX.test(value)) {
+      const resolved = resolvePercent(value, key, percentConfig)
+      return typeof resolved === 'number' ? resolved : 0
+    } else {
+      const formatted = global.__formatValue(value)
+      if (typeof formatted === 'number') {
+        return formatted
       } else {
-        const formatted = global.__formatValue(value)
-        if (typeof formatted === 'number') {
-          return formatted
-        } else {
-          warn('calc() only support number, px, rpx, % temporarily.')
-          return 0
-        }
+        warn('calc() only support number, px, rpx, % temporarily.')
+        return 0
       }
-    })
-    // apply position
-    transformPosition(normalStyle)
-    // transform number enum stringify
-    transformStringify(normalStyle)
-
-    return {
-      normalStyle,
-      hasSelfPercent,
-      hasPositionFixed
     }
-  }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize])
+  })
+
+  // apply position
+  transformPosition(normalStyle, positionMeta)
+  // transform number enum stringify
+  transformStringify(normalStyle)
 
-  return extendObject({
+  return {
     hasVarDec,
     varContextRef,
     setWidth,
-    setHeight
-  }, memoResult)
+    setHeight,
+    normalStyle,
+    hasSelfPercent,
+    hasPositionFixed: positionMeta.hasPositionFixed
+  }
 }
 
 export interface VisitorArg {
@@ -455,12 +453,7 @@ export function traverseStyle (styleObj: Record<string, any>, visitors: Array<(a
       target.forEach((value, index) => {
         const key = String(index)
         keyPath.push(key)
-        visitors.forEach(visitor => visitor({
-          target,
-          key,
-          value,
-          keyPath
-        }))
+        visitors.forEach(visitor => visitor({ target, key, value, keyPath }))
         traverse(value)
         keyPath.pop()
       })
@@ -510,8 +503,8 @@ export function splitProps<T extends Record<string, any>> (props: T): {
 interface LayoutConfig {
   props: Record<string, any>
   hasSelfPercent: boolean
-  setWidth: Dispatch<SetStateAction<number>>
-  setHeight: Dispatch<SetStateAction<number>>
+  setWidth?: Dispatch<SetStateAction<number>>
+  setHeight?: Dispatch<SetStateAction<number>>
   onLayout?: (event?: LayoutChangeEvent) => void
   nodeRef: React.RefObject<any>
 }
@@ -654,7 +647,7 @@ export function renderImage (
   enableFastImage = false
 ) {
   const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
-  return <Component {...imageProps} />
+  return createElement(Component, imageProps)
 }
 
 export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {

package/lib/runtime/components/web/mpx-web-view.vue

@@ -197,4 +197,4 @@ export default {
   right: 0;
   bottom: 0;
 }
-</style>
+</style>

package/lib/runtime/mpxGlobal.js

@@ -0,0 +1 @@
+module.exports = Object.create(global)

package/lib/runtime/optionProcessor.d.ts

@@ -4,8 +4,13 @@ declare global {
       [key: string]: any
     }
   }
+  interface Window {
+     mpxGlobal: Record<string, any>
+  }
 }
 
+declare const mpxGlobal: Record<string, any>
+
 export function processComponentOption (...args: any): object
 
 export function getComponent (...args: any): object

package/lib/template-compiler/bind-this.js

@@ -70,7 +70,7 @@ function getCollectPath (path) {
 function checkDelAndGetPath (path) {
   let current = path
   let delPath = path
-  let canDel = true
+  let canDel = true // 是否可删除，优先级比replace高
   let ignore = false
   let replace = false
 
@@ -80,8 +80,13 @@ function checkDelAndGetPath (path) {
     if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
       delPath = current.parentPath
     } else if (t.isCallExpression(current.parent)) {
-      const args = current.node.arguments || current.parent.arguments || []
-      if (args.length === 1) { // case: String(a) || this._p(a)
+      const args = current.parent.arguments || []
+      if (
+        // case: String(a) || this._p(a)
+        args.length === 1 ||
+        // 除了自身，参数列表里只能是数字或字符串才能删
+        (args.every(node => node === current.node || t.isNumericLiteral(node) || t.isStringLiteral(node)))
+      ) {
         delPath = current.parentPath
       } else {
         break
@@ -123,24 +128,20 @@ function checkDelAndGetPath (path) {
 
     if (t.isCallExpression(parent) && listKey === 'arguments') {
       canDel = false
-      break
     }
 
     if (t.isMemberExpression(parent) && parent.computed) {
       canDel = false
-      break
     }
 
     if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)
       canDel = false
       ignore = true
-      break
     }
 
     if (t.isConditionalExpression(parent)) {
       if (key === 'test') {
         canDel = false
-        break
       } else {
         ignore = true
         replace = true // 继续往上找，判断是否存在if条件等

package/lib/template-compiler/compiler.js

@@ -2725,8 +2725,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
+    processStyleReact(el, options)
     if (!pass) {
-      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

package/lib/wxs/pre-loader.js

@@ -54,6 +54,7 @@ module.exports = function (content) {
         ExportNamedDeclaration (path) {
           if (
             path.node.declaration &&
+            path.node.declaration.declarations &&
             path.node.declaration.declarations.length === 1 &&
             path.node.declaration.declarations[0].id.name === path.node.declaration.declarations[0].init.name
           ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.9",
+  "version": "2.10.5-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.4",
+    "@mpxjs/api-proxy": "^2.10.5 | ^2.10.5-beta.1",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",