@mpxjs/webpack-plugin 2.10.17 → 2.10.18

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

@@ -4,9 +4,8 @@ import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } fr
 import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
+import type { FastImageProps } from '@d11/react-native-fast-image'
 import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
-import { runOnJS } from 'react-native-reanimated'
 import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
@@ -31,6 +30,7 @@ const varUseRegExp = /var\(/
 const unoVarDecRegExp = /^--un-/
 const unoVarUseRegExp = /var\(--un-/
 const calcUseRegExp = /calc\(/
+const calcPercentExp = /^calc\(.*-?\d+(\.\d+)?%.*\)$/
 const envUseRegExp = /env\(/
 const filterRegExp = /(calc|env|%)/
 
@@ -41,6 +41,8 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-left': 'left'
 }
 
+export const extendObject = Object.assign
+
 function getSafeAreaInset (name: string, navigation: Record<string, any> | undefined) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
@@ -143,16 +145,17 @@ export function splitStyle<T extends Record<string, any>> (styleObj: T): {
     innerStyle: Partial<T>
   }
 }
-
-const selfPercentRule: Record<string, 'height' | 'width'> = {
-  translateX: 'width',
-  translateY: 'height',
+const radiusPercentRule: Record<string, 'height' | 'width'> = {
   borderTopLeftRadius: 'width',
   borderBottomLeftRadius: 'width',
   borderBottomRightRadius: 'width',
   borderTopRightRadius: 'width',
   borderRadius: 'width'
 }
+const selfPercentRule: Record<string, 'height' | 'width'> = extendObject({
+  translateX: 'width',
+  translateY: 'height'
+}, radiusPercentRule)
 
 const parentHeightPercentRule: Record<string, boolean> = {
   height: true,
@@ -216,16 +219,22 @@ function resolveVar (input: string, varContext: Record<string, any>) {
   const replaced = new ReplaceSource(input)
 
   for (const { start, end, args } of parsed) {
+    // NOTE:
+    // - CSS var() fallback 允许包含空格、逗号等字符（如 font-family 的 fallback）
+    // - parseFunc 会按逗号分割 args，因此这里把 args[1..] 重新 join 回 fallback
     const varName = args[0]
-    const fallback = args[1]
-    let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback
-    if (varValue === undefined) return
-    if (varUseRegExp.test(varValue)) {
-      varValue = resolveVar(varValue, varContext)
-      if (varValue === undefined) return
-    } else {
-      varValue = global.__formatValue(varValue)
+    const fallback: string | undefined = args.length > 1 ? args.slice(1).join(',').trim() : undefined
+
+    // 先处理 varValue
+    let varValue = hasOwn(varContext, varName) ? varContext[varName] : undefined
+    if (varValue !== undefined) {
+      varValue = varUseRegExp.test(varValue) ? resolveVar(varValue, varContext) : global.__formatValue(varValue)
+    }
+    // 再处理 fallback
+    if (varValue === undefined && fallback !== undefined) {
+      varValue = varUseRegExp.test(fallback) ? resolveVar(fallback, varContext) : global.__formatValue(fallback)
     }
+    if (varValue === undefined) return
     replaced.replace(start, end - 1, varValue)
   }
 
@@ -288,6 +297,10 @@ function transformStringify (styleObj: Record<string, any>) {
   if (isNumber(styleObj.fontWeight)) {
     styleObj.fontWeight = '' + styleObj.fontWeight
   }
+  // transformOrigin 20px 需要转换为 transformOrigin '20'
+  if (isNumber(styleObj.transformOrigin)) {
+    styleObj.transformOrigin = '' + styleObj.transformOrigin
+  }
 }
 
 function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
@@ -297,7 +310,7 @@ function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
   }
 }
 // 多value解析
-function parseValues (str: string, char = ' ') {
+export function parseValues (str: string, char = ' ') {
   let stack = 0
   let temp = ''
   const result = []
@@ -308,11 +321,11 @@ function parseValues (str: string, char = ' ') {
       stack--
     }
     // 非括号内 或者 非分隔字符且非空
-    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+    if (stack !== 0 || str[i] !== char) {
       temp += str[i]
     }
     if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-      result.push(temp)
+      result.push(temp.trim())
       temp = ''
     }
   }
@@ -321,6 +334,8 @@ function parseValues (str: string, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform (transformStr: string) {
   const values = parseValues(transformStr)
+  // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+  values.sort()
   const transform: { [propName: string]: string | number | number[] }[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\((.+)\)/)
@@ -390,9 +405,10 @@ interface TransformStyleConfig {
   parentFontSize?: number
   parentWidth?: number
   parentHeight?: number
+  transformRadiusPercent?: boolean
 }
 
-export function useTransformStyle (styleObj: Record<string, any> = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig) {
+export function useTransformStyle (styleObj: Record<string, any> = {}, { enableVar, transformRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig) {
   const varStyle: Record<string, any> = {}
   const unoVarStyle: Record<string, any> = {}
   const normalStyle: Record<string, any> = {}
@@ -440,14 +456,21 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     }
   }
 
-  function calcVisitor ({ value, keyPath }: VisitorArg) {
+  function calcVisitor ({ key, value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
+      // calc translate & border-radius 的百分比计算
+      if (hasOwn(selfPercentRule, key) && calcPercentExp.test(value)) {
+        hasSelfPercent = true
+        percentKeyPaths.push(keyPath.slice())
+      }
       calcKeyPaths.push(keyPath.slice())
     }
   }
 
   function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+    // fixme 去掉 translate & border-radius 的百分比计算
+    // fixme Image 组件 borderRadius 仅支持 number
+    if (transformRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
       hasSelfPercent = true
       percentKeyPaths.push(keyPath.slice())
     } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
@@ -463,7 +486,6 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
 
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
-
   hasVarDec = hasVarDec || !!externalVarContext
   enableVar = enableVar || hasVarDec || hasVarUse
   const enableVarRef = useRef(enableVar)
@@ -527,8 +549,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformStringify(normalStyle)
   // transform rpx to px
   transformBoxShadow(normalStyle)
-
-  // transform 字符串格式转化数组格式
+  // transform 字符串格式转化数组格式(先转数组再处理css var)
   transformTransform(normalStyle)
 
   return {
@@ -726,8 +747,6 @@ export function flatGesture (gestures: Array<GestureHandler> = []) {
   })) || []
 }
 
-export const extendObject = Object.assign
-
 export function getCurrentPage (pageId: number | null | undefined) {
   if (!global.getCurrentPages) return
   const pages = global.getCurrentPages()
@@ -736,9 +755,14 @@ export function getCurrentPage (pageId: number | null | undefined) {
 
 export function renderImage (
   imageProps: ImageProps | FastImageProps,
-  enableFastImage = false
+  enableFastImage = true
 ) {
-  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
+  let Component: React.ComponentType<ImageProps | FastImageProps> = Image
+  if (enableFastImage) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const fastImageModule = require('@d11/react-native-fast-image')
+    Component = fastImageModule.default || fastImageModule
+  }
   return createElement(Component, imageProps)
 }
 

package/lib/runtime/optionProcessor.js

@@ -2,6 +2,7 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
+import { error } from '@mpxjs/utils'
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 export function processComponentOption (
@@ -107,6 +108,10 @@ registered in parent context!`)
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error('getComponent() expected component options as the first argument, but got undefined.')
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/optionProcessorReact.js

@@ -1,9 +1,16 @@
 import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
 import { memo, forwardRef, createElement } from 'react'
+import { error } from '@mpxjs/utils'
 import { extend } from './utils'
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error(
+      `getComponent expecting function/class component ${extendOptions?.displayName ? `[${extendOptions.displayName}] ` : ''}as the first argument, but got undefined.`
+    )
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/stringify.wxs

@@ -45,7 +45,7 @@ function objectKeys (obj) {
 }
 
 function genRegExp (str, flags) {
-  if (!__mpx_wxs__) {
+  if (!__mpx_wxs__ || __mpx_mode__ === 'ks') {
     return new RegExp(str, flags)
   } else {
     return getRegExp(str, flags)
@@ -234,4 +234,4 @@ module.exports = {
     var parsedStaticStyle = typeof staticStyle === 'string' ? parseStyleText(staticStyle) : {}
     return genStyleText(extend(parsedStaticStyle, normalizedDynamicStyle))
   }
-}
+}

package/lib/script-setup-compiler/index.js

@@ -605,8 +605,7 @@ function compileScriptSetup (
       if (node.key.name === 'properties' && hasDefinePropsCall) {
         console.warn(`${DEFINE_PROPS} has been called, ${DEFINE_OPTIONS} set properties will be ignored`)
       } else {
-        const declCode = content.slice(node.value.start, node.value.end).trim()
-        runtimeOptions += `\n ${node.key.name}: ${declCode},`
+        runtimeOptions += `\n ${content.slice(node.start, node.end).trim()},`
       }
     }
   }

package/lib/style-compiler/strip-conditional.js

@@ -0,0 +1,243 @@
+const fs = require('fs')
+
+class Node {
+  constructor(type, condition = null) {
+    this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
+    this.condition = condition // If 或 Elif 的条件
+    this.children = []
+    this.value = ''
+  }
+}
+
+// 提取 css string 为 token
+function tokenize(cssString) {
+  // Support /* ... */, // ..., and <!-- ... --> styles
+  // 1. : /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\//g
+  // 2. : /\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*$/gm
+  // 3. : /<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->/g
+  // Combined:
+  const regex = /(?:\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\/)|(?:\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*)|(?:<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->)/g
+  const tokens = []
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(cssString)) !== null) {
+    // 如果 token 前有普通文本，生成文本 token
+    if (match.index > lastIndex) {
+      const text = cssString.substring(lastIndex, match.index)
+      tokens.push({ type: 'text', content: text })
+    }
+    // 1,2: (/* ... */)
+    // 3,4: (// ...)
+    // 5,6: (<!-- ... -->)
+    const type = match[1] || match[3] || match[5]
+    const condition = (match[2] || match[4] || match[6])
+
+    tokens.push({
+      type: type,
+      condition: condition ? condition.trim() : null
+    })
+    lastIndex = regex.lastIndex
+  }
+  // 处理结尾剩余的文本
+  if (lastIndex < cssString.length) {
+    const text = cssString.substring(lastIndex)
+    tokens.push({ type: 'text', content: text })
+  }
+  return tokens
+}
+
+// parse：将生成的 token 数组构造成嵌套的 AST
+function parse(cssString) {
+  const tokens = tokenize(cssString)
+  const ast = []
+  const nodeStack = []
+  let currentChildren = ast
+  tokens.forEach(token => {
+    if (token.type === 'text') {
+      const node = new Node('Text')
+      node.value = token.content
+      currentChildren.push(node)
+    } else if (token.type === 'if') {
+      const node = new Node('If', token.condition)
+      currentChildren.push(node)
+      nodeStack.push(currentChildren)
+      currentChildren = node.children
+    } else if (token.type === 'elif') {
+      if (nodeStack.length === 0) {
+        throw new Error('[Mpx style error]: elif without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('ElseIf', token.condition)
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'else') {
+      if (nodeStack.length === 0) {
+        throw new Error('[Mpx style error]: else without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('Else')
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'endif') {
+      if (nodeStack.length > 0) {
+        currentChildren = nodeStack.pop()
+      }
+    }
+  })
+  if (nodeStack.length > 0) {
+    throw new Error('[Mpx strip conditional error]: mpx-if without a matching endif')
+  }
+  return ast
+}
+
+function evaluateCondition(condition, defs) {
+  try {
+    const keys = Object.keys(defs)
+    const values = keys.map(key => defs[key])
+    /* eslint-disable no-new-func */
+    const func = new Function(...keys, `return (${condition});`)
+    return func(...values)
+  } catch (e) {
+    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
+    return false
+  }
+}
+
+function traverseAndEvaluate(ast, defs) {
+  let output = ''
+  let batchedIf = false
+  function traverse(nodes) {
+    for (const node of nodes) {
+      if (node.type === 'Text') {
+        output += node.value
+      } else if (node.type === 'If') {
+        // 直接判断 If 节点
+        batchedIf = false
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'ElseIf' && !batchedIf) {
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'Else' && !batchedIf) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(ast)
+  return output
+}
+
+/**
+ *
+ * @param {string} content
+ * @param {Record<string, any>} defs
+ * @returns
+ */
+function stripCondition(content, defs) {
+  const ast = parse(content)
+  return traverseAndEvaluate(ast, defs)
+}
+
+let proxyReadFileSync
+let proxyReadFile
+const rawReadFileSync = fs.readFileSync
+const rawReadFile = fs.readFile
+
+let isRewritten = false
+let __compilation = null
+
+function registerStripCompilation(compilation) {
+  __compilation = compilation
+}
+
+function logStripError(path, e) {
+  const msg = `[Mpx strip conditional error]\n  path: ${path}\n  message: ${e && e.message}\n  stack:\n${e && e.stack}`
+  console.error(msg)
+  if (__compilation && Array.isArray(__compilation.errors)) {
+    const err = new Error(msg)
+    err.file = path
+    __compilation.errors.push(err)
+  }
+}
+
+function rewriteFSForCss() {
+  if (isRewritten) return
+  isRewritten = true
+  fs.readFileSync = function () {
+    return (proxyReadFileSync || rawReadFileSync).apply(fs, arguments)
+  }
+  fs.readFile = function () {
+    return (proxyReadFile || rawReadFile).apply(fs, arguments)
+  }
+}
+
+function startFSStripForCss(defs) {
+  function shouldStrip(path) {
+    return typeof path === 'string' && /\.(styl|scss|sass|less|css|mpx)$/.test(path)
+  }
+  proxyReadFileSync = function (path, options) {
+    const content = rawReadFileSync.call(fs, path, options)
+    if (shouldStrip(path)) {
+      try {
+        if (typeof content === 'string') {
+          return stripCondition(content, defs)
+        } else if (Buffer.isBuffer(content)) {
+          const str = content.toString('utf-8')
+          const result = stripCondition(str, defs)
+          if (result !== str) {
+            return Buffer.from(result, 'utf-8')
+          }
+        }
+      } catch (e) {
+        logStripError(path, e)
+        return content
+      }
+    }
+    return content
+  }
+
+  proxyReadFile = function () {
+    const args = Array.from(arguments)
+    const callback = args[args.length - 1]
+    const path = args[0]
+
+    if (typeof callback !== 'function') {
+      return rawReadFile.apply(fs, args)
+    }
+
+    const wrappedCallback = (err, data) => {
+      if (err) return callback(err)
+      if (shouldStrip(path)) {
+        try {
+          if (typeof data === 'string') {
+            const result = stripCondition(data, defs)
+            return callback(null, result)
+          } else if (Buffer.isBuffer(data)) {
+            const content = data.toString('utf-8')
+            const result = stripCondition(content, defs)
+            if (result !== content) {
+              return callback(null, Buffer.from(result, 'utf-8'))
+            }
+          }
+        } catch (e) {
+          logStripError(path, e)
+          return callback(null, data)
+        }
+      }
+      callback(null, data)
+    }
+
+    args[args.length - 1] = wrappedCallback
+    return rawReadFile.apply(fs, args)
+  }
+}
+
+module.exports.stripCondition = stripCondition
+module.exports.rewriteFSForCss = rewriteFSForCss
+module.exports.startFSStripForCss = startFSStripForCss
+module.exports.registerStripCompilation = registerStripCompilation

package/lib/template-compiler/compiler.js

@@ -764,9 +764,7 @@ function parse (template, options) {
 
       const children = currentParent.children
 
-      const isTextLikeParent = currentParent.tag === 'text' || currentParent.tag === 'mpx-text' || currentParent.tag === 'Text' || currentParent.tag === 'mpx-simple-text'
-
-      if (!isTextLikeParent) {
+      if (currentParent.tag !== 'text') {
         text = text.trim()
       } else {
         text = text.trim() ? text : ''
@@ -2247,7 +2245,6 @@ function postProcessIfReact (el) {
           delete el.elseif
           el._if = true
           addIfCondition(ifNode, {
-            exp: el.elseif.exp,
             block: el
           })
           removeNode(el, true)
@@ -2720,7 +2717,7 @@ function postProcessTemplate (el) {
   }
 }
 
-const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,ios,android,harmony,noMode')
+const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,ios,android,harmony,ks,noMode')
 
 function isValidModeP (i) {
   return isValidMode(i[0] === '_' ? i.slice(1) : i)

package/lib/utils/string.js

@@ -28,9 +28,33 @@ function trimBlankRow (str) {
   return str.replace(/^\s*[\r\n]/gm, '')
 }
 
+// 多value解析
+function parseValues (str, char = ' ') {
+  let stack = 0
+  let temp = ''
+  const result = []
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') {
+      stack++
+    } else if (str[i] === ')') {
+      stack--
+    }
+    // 非括号内 或者 非分隔字符且非空
+    if (stack !== 0 || str[i] !== char) {
+      temp += str[i]
+    }
+    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+      result.push(temp.trim())
+      temp = ''
+    }
+  }
+  return result
+}
+
 module.exports = {
   isCapital,
   isMustache,
   capitalToHyphen,
-  trimBlankRow
+  trimBlankRow,
+  parseValues
 }

package/lib/wxss/loader.js

@@ -92,6 +92,9 @@ module.exports = async function loader (content, map, meta) {
         filter: options.import.filter,
         urlHandler: (url) => {
           url = combineRequests(getPreRequester(this)(options.importLoaders), url)
+          if (isRN) {
+            return stringifyRequest(this, url)
+          }
           return getRequestString('styles', { src: url }, {
             isStatic: true,
             issuerResource: this.resource,
@@ -249,7 +252,7 @@ module.exports = async function loader (content, map, meta) {
   let moduleCode
 
   try {
-    moduleCode = getModuleCode(result, api, replacements, options, this)
+    moduleCode = getModuleCode(result, api, replacements, options, isRN, this)
   } catch (error) {
     callback(error)
 

package/lib/wxss/utils.js

@@ -1016,6 +1016,7 @@ function getModuleCode (
   api,
   replacements,
   options,
+  isRN,
   loaderContext
 ) {
   if (options.modules.exportOnlyLocals === true) {
@@ -1054,8 +1055,12 @@ function getModuleCode (
     } else {
       // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止使用 webpack 的默认解析规则，此时 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
       const printedParam = printParams(media, dedupe, supports, layer)
-      const otherParams = printedParam.length > 0 ? printedParam : ''
-      beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, '@import "' + ${item.importName} + '";', ${JSON.stringify(otherParams)} ]);\n`
+      const hasParams = printedParam.length > 0
+      if (isRN) {
+        beforeCode += `___CSS_LOADER_EXPORT___.i(${item.importName}${hasParams ? `, ${printedParam}` : ''});\n`
+      } else {
+        beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, '@import "' + ${item.importName} + '";'${hasParams ? `, ${printedParam}` : ''}]);\n`
+      }
     }
   }