@mpxjs/webpack-plugin 2.10.16 → 2.10.17-beta.2

package/lib/runtime/components/react/mpx-text.tsx

@@ -2,15 +2,41 @@
 /**
  * ✔ selectable
  * ✘ space
- * ✘ decode
+ * ✔ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement, Children } from 'react'
 import Portal from './mpx-portal'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils'
 
+const decodeMap = {
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&amp;': '&',
+  '&#39;': '\'',
+  '&nbsp;': ' '
+}
+
+const encodedRe = /&(?:lt|gt|quot|amp|#39|nbsp);/g
+function decode (value: string) {
+  if (value != null) {
+    return value.replace(encodedRe, function (match) {
+      return decodeMap[match as keyof typeof decodeMap]
+    })
+  }
+}
+
+function getDecodedChildren (children: ReactNode) {
+  return Children.map(children, (child) => {
+    if (typeof child === 'string') {
+      return decode(child)
+    }
+    return child
+  })
+}
 interface _TextProps extends TextProps {
   style?: TextStyle
   children?: ReactNode
@@ -21,6 +47,7 @@ interface _TextProps extends TextProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  decode?: boolean
 }
 
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
@@ -33,7 +60,8 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     'user-select': userSelect,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight
+    'parent-height': parentHeight,
+    decode
   } = props
 
   const {
@@ -66,12 +94,17 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
       }
     ),
     [
-      'user-select'
+      'user-select',
+      'decode'
     ]
   )
 
+  const children = decode ? getDecodedChildren(props.children) : props.children
+
   let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren(
-    props,
+    extendObject({}, props, {
+      children
+    }),
     {
       hasVarDec,
       varContext: varContextRef.current

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

@@ -501,7 +501,7 @@ function parseBgImage (text: string): {
   type?: 'image' | 'linear'
   src?: string
 } {
-  if (!text) return {}
+  if (!text || text === 'none') return {}
 
   const src = parseUrl(text)
   if (src) return { src, type: 'image' }

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

@@ -127,8 +127,16 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     style: defaultWebViewStyle
   })
 
+  const getHostFromUrl = function (url: string): string {
+    if (!url) return ''
+    // 匹配协议://主机名(:端口) 的模式
+    const regex = /^(?:https?|ftp):\/\/([^/?:#]+)(?::(\d+))?/i
+    const match = url.match(regex)
+    return match ? match[1] : ''
+  }
+
   const hostValidate = (url: string) => {
-    const host = url && new URL(url).host
+    const host = url && getHostFromUrl(url)
     const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || []
     if (hostWhitelists.length) {
       return hostWhitelists.some((item: string) => {
@@ -343,8 +351,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>
             )
-          : (<WebView
-            style={ defaultWebViewStyle }
+          : (
+          <WebView
+            containerStyle={ defaultWebViewStyle }
             source={{ uri: src }}
             ref={webViewRef}
             javaScriptEnabled={true}
@@ -356,7 +365,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             onHttpError={onHttpError}
             onError={onError}
             allowsBackForwardNavigationGestures={true}
-      ></WebView>)}
+          ></WebView>)}
       </Portal>
   )
 })

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

@@ -18,3 +18,22 @@ export type ExtendedFunctionComponent = FunctionComponent & {
 }
 
 export type AnyFunc = (...args: ReadonlyArray<any>) => any
+
+declare global {
+  interface PageConfig {
+    /**
+     * 是否自定义导航栏
+     */
+    navigationStyle?: 'custom'
+    /**
+     * 标题栏样式
+     */
+    navigationBarTextStyle?: 'white' | 'black' | '#ffffff' | '#000000'
+    /**
+     * 页面标题
+     */
+    navigationBarTitleText?: string
+
+    [key: string]: any
+  }
+}

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

@@ -215,24 +215,33 @@ function resolveVar (input: string, varContext: Record<string, any>) {
   const parsed = parseFunc(input, 'var')
   const replaced = new ReplaceSource(input)
 
-  parsed.forEach(({ start, end, args }) => {
+  for (const { start, end, args } of parsed) {
     const varName = args[0]
-    const fallback = args[1] || ''
+    const fallback = args[1]
     let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback
+    if (varValue === undefined) return
     if (varUseRegExp.test(varValue)) {
-      varValue = '' + resolveVar(varValue, varContext)
+      varValue = resolveVar(varValue, varContext)
+      if (varValue === undefined) return
     } else {
-      varValue = '' + global.__formatValue(varValue)
+      varValue = global.__formatValue(varValue)
     }
     replaced.replace(start, end - 1, varValue)
-  })
+  }
+
   return global.__formatValue(replaced.source())
 }
 
 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)
+      const resolved = resolveVar(value, varContext)
+      if (resolved === undefined) {
+        delete target[key]
+        error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+        return
+      }
+      target[key] = resolved
       visitOther({ target, key, value: target[key], keyPath: varKeyPath })
     })
   })

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

@@ -98,7 +98,7 @@ function compileScriptSetup (
   ) {
     if (node) {
       throw new Error(
-        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n${formatCodeFrame(
+        `[Mpx script error]: ${msg}\n\n${filePath}\n${formatCodeFrame(
           content,
           node.start + startOffset,
           end
@@ -106,7 +106,7 @@ function compileScriptSetup (
       )
     } else {
       throw new Error(
-        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n`
+        `[Mpx script error]: ${msg}\n\n${filePath}\n`
       )
     }
   }

package/lib/style-compiler/index.js

@@ -18,7 +18,8 @@ module.exports = function (css, map) {
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
   const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
-  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath)
+  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath, false, (queryObj.moduleId || mpxStyleOptions.mid) ? null : this)
+
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
@@ -55,7 +56,7 @@ module.exports = function (css, map) {
     }
 
     if (isReact(mode)) {
-      plugins.push(transSpecial({ id }))
+      plugins.push(transSpecial({ id, transPage: true }))
     }
 
     // plugins.push(pluginCondStrip({

package/lib/style-compiler/load-postcss-config.js

@@ -29,7 +29,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       if (err.message.indexOf('No PostCSS Config found') >= 0) {
         return
       }
-      loaderContext.emitWarning(`Error loading PostCSS config: ${err.message}`)
+      loaderContext.emitWarning(`[Mpx style warning]: Error loading PostCSS config: ${err.message}`)
     })
   }
 

package/lib/style-compiler/plugins/trans-special.js

@@ -1,7 +1,8 @@
 const selectorParser = require('postcss-selector-parser')
+const { MPX_TAG_PAGE_SELECTOR } = require('../../utils/const')
 // trans-special
 
-module.exports = ({ id }) => {
+module.exports = ({ id, transPage = false }) => {
   return {
     postcssPlugin: 'trans-special',
     Once: (root) => {
@@ -13,7 +14,14 @@ module.exports = ({ id }) => {
               if (/^:host$/.test(n.value)) {
                 const compoundSelectors = n.nodes
                 n.replaceWith(selectorParser.className({
-                  value: 'host-' + id
+                  value: `host-${id}`
+                }))
+                selector.insertAfter(n, compoundSelectors)
+              }
+              if (transPage && /^page$/.test(n.value)) {
+                const compoundSelectors = n.nodes || []
+                n.replaceWith(selectorParser.className({
+                  value: MPX_TAG_PAGE_SELECTOR
                 }))
                 selector.insertAfter(n, compoundSelectors)
               }

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

@@ -1,5 +1,10 @@
+const fs = require('fs/promises')
+const parseRequest = require('../utils/parse-request')
+const path = require('path')
+const loaderUtils = require('loader-utils')
+
 class Node {
-  constructor (type, condition = null) {
+  constructor(type, condition = null) {
     this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
     this.condition = condition // If 或 Elif 的条件
     this.children = []
@@ -8,7 +13,7 @@ class Node {
 }
 
 // 提取 css string 为 token
-function tokenize (cssString) {
+function tokenize(cssString) {
   const regex = /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*\*\//g
   const tokens = []
   let lastIndex = 0
@@ -37,7 +42,7 @@ function tokenize (cssString) {
 }
 
 // parse：将生成的 token 数组构造成嵌套的 AST
-function parse (cssString) {
+function parse(cssString) {
   const tokens = tokenize(cssString)
   const ast = []
   const nodeStack = []
@@ -54,7 +59,7 @@ function parse (cssString) {
       currentChildren = node.children
     } else if (token.type === 'elif') {
       if (nodeStack.length === 0) {
-        throw new Error('elif without a preceding if')
+        throw new Error('[Mpx style error]: elif without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
       const node = new Node('ElseIf', token.condition)
@@ -62,7 +67,7 @@ function parse (cssString) {
       currentChildren = node.children
     } else if (token.type === 'else') {
       if (nodeStack.length === 0) {
-        throw new Error('else without a preceding if')
+        throw new Error('[Mpx style error]: else without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
       const node = new Node('Else')
@@ -77,7 +82,7 @@ function parse (cssString) {
   return ast
 }
 
-function evaluateCondition (condition, defs) {
+function evaluateCondition(condition, defs) {
   try {
     const keys = Object.keys(defs)
     const values = keys.map(key => defs[key])
@@ -85,15 +90,15 @@ function evaluateCondition (condition, defs) {
     const func = new Function(...keys, `return (${condition});`)
     return func(...values)
   } catch (e) {
-    console.error(`Error evaluating condition: ${condition}`, e)
+    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
     return false
   }
 }
 
-function traverseAndEvaluate (ast, defs) {
+function traverseAndEvaluate(ast, defs) {
   let output = ''
   let batchedIf = false
-  function traverse (nodes) {
+  function traverse(nodes) {
     for (const node of nodes) {
       if (node.type === 'Text') {
         output += node.value
@@ -118,10 +123,220 @@ function traverseAndEvaluate (ast, defs) {
   return output
 }
 
-module.exports = function (css) {
+/**
+ *
+ * @param {string} content
+ * @param {Record<string, any>} defs
+ * @returns
+ */
+function stripCondition(content, defs) {
+  const ast = parse(content)
+  const result = traverseAndEvaluate(ast, defs)
+  return result
+}
+
+/**
+ * @typedef {Object} StripByPostcssOption
+ * @property {string} lang 样式语法格式
+ * @property {string} resourcePath 文件路径
+ * @property {string} css 源文件
+ * @property {Record<string, any>} defs 条件定义
+ * @property {import('webpack').LoaderContext<any>['resolve']} resolve webpack resolve 方法
+ */
+
+/**
+ * @typedef {Object} AtImportConfig
+ * @property {string} from 当前文件路径
+ * @property {(filename: string) => Promise<string> | string;} load 加载文件内容的函数
+ * @property {(id: string, base: string) => Promise<string | null> | string | null;} resolve 解析文件路径的函数
+ */
+
+async function atImport(options) {
+  let { css, load, resolve, from } = options
+  const fromParent = path.dirname(from)
+  const e1 = /\/\*[\s\S]*?\*\//g
+  // 匹配 // 单行注释，可能匹配到静态资源中的 http:// 的 //，不过影响不大， @import 不太可能出现在静态资源链接中
+  const e2 = /\/\/.*/g
+  // 使用正则匹配匹配出 多行注释和单行注释
+  const comments = []
+  let comment
+  while ((comment = e1.exec(css))) {
+    const [content] = comment
+    comments.push({
+      start: comment.index,
+      end: comment.index + content.length,
+      content: content
+    })
+  }
+
+  while ((comment = e2.exec(css))) {
+    const [content] = comment
+    comments.push({
+      start: comment.index,
+      end: comment.index + content.length,
+      content: content
+    })
+  }
+
+  // 排序方便二分
+  comments.sort((a, b) => (a.start > b.start ? 1 : -1))
+
+  function isInComments(index) {
+    let left = 0
+    let right = comments.length - 1
+
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2)
+      const comment = comments[mid]
+
+      if (index >= comment.start && index <= comment.end) {
+        return true
+      } else if (index < comment.start) {
+        right = mid - 1
+      } else {
+        left = mid + 1
+      }
+    }
+
+    return false
+  }
+
+  // 使用正则表达式匹配出所有 @import 语法，语法包含 @import "path", @import 'path', @import url("path"), @import url('path')
+  // 注意清理分号，否则留个分号会报错
+  const importRegex = /@import\s+(url\(['"]([^'"]+)['"]\)|['"]([^'"]+)['"])(\s*;)?/g
+  let importList = []
+  let importMatch
+  while ((importMatch = importRegex.exec(css))) {
+    const fullMatch = importMatch[0]
+    const importSyntax = fullMatch.trim()
+    importSyntax.startsWith('@import')
+    const importValue = importSyntax.slice(7).trim()
+    // 匹配 @import 后字符串格式
+    const importUrlRegex = /url\s*\(['"]([^'"]+)['"]\)/g
+    const importStrRegexp = /^(['"])([^'"]+)\1/
+
+    let urlMatch = null
+    if (importValue.startsWith('url')) {
+      urlMatch = importUrlRegex.exec(importValue)?.[1]
+    } else {
+      urlMatch = importStrRegexp.exec(importValue)?.[2]
+    }
+    if (!urlMatch) {
+      continue
+    }
+
+    importList.push({
+      start: importMatch.index,
+      end: importMatch.index + fullMatch.length,
+      content: fullMatch,
+      url: urlMatch
+    })
+  }
+
+  // 过滤掉在注释中的 @import 语法
+  importList = importList.filter(imp => !isInComments(imp.start))
+
+  // 逆序替换 import，避免修改内容导致的索引偏移问题
+  importList.sort((a, b) => (a.start > b.start ? -1 : 1))
+
+  for (const imp of importList) {
+    const importPath = imp.url
+    if (!importPath) continue
+    // 非法路径直接报错
+    const resolvedUrl = await resolve(importPath, fromParent)
+    const content = (await load(resolvedUrl)) ?? ''
+    css = css.slice(0, imp.start) + '\n' + content + '\n' + css.slice(imp.end)
+  }
+
+  return css
+}
+/**
+ * @param {StripByPostcssOption} options
+ */
+async function stripByPostcss(options) {
+  const defs = options.defs ?? {}
+
+  function stripContentCondition(content) {
+    content = stripCondition(content, defs)
+
+    if (options.lang === 'stylus') {
+      content = content.replace(/\t/g, '  ')
+    }
+
+    return content
+  }
+
+  /**
+   * @type {string}
+   */
+  const afterConditionStrip = stripContentCondition(options.css, defs)
+
+  const atImportOptions = {
+    async load(filename) {
+      let content = await fs.readFile(filename, 'utf-8')
+
+      content = stripContentCondition(content, defs)
+
+      return await atImport({
+        ...atImportOptions,
+        from: filename,
+        css: content
+      })
+    },
+    resolve: (id, base) => {
+      return new Promise((resolve, reject) => {
+        // 处理 ~ 开头的路径
+        options.resolve(base, id.startsWith('~') && !id.startsWith('~/') ? loaderUtils.urlToRequest(id) : id, (err, res) => {
+          if (err) return reject(err)
+          if (typeof res !== 'string') {
+            return reject(new Error(`[mpx-strip-conditional-loader]: Cannot resolve ${id} from ${base}`))
+          }
+          resolve(res)
+        })
+      })
+    }
+  }
+
+  return {
+    css: await atImport({
+      ...atImportOptions,
+      from: options.resourcePath,
+      css: afterConditionStrip
+    })
+  }
+}
+
+const createResolver = (contetx, extensions) =>
+  contetx.getResolve({ mainFiles: ['index'], extensions: [...extensions, '.css'], preferRelative: true })
+const resolver = {
+  stylus: contetx => createResolver(contetx, ['.styl']),
+  scss: contetx => createResolver(contetx, ['.scss']),
+  less: contetx => createResolver(contetx, ['.styl'])
+}
+
+/**
+ *
+ * @this {import('webpack').LoaderContext<any>}
+ * @param {string} css
+ */
+module.exports = async function (css) {
   this.cacheable()
+
+  const callback = this.async()
+
   const mpx = this.getMpx()
-  const defs = mpx.defs
-  const ast = parse(css)
-  return traverseAndEvaluate(ast, defs)
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+
+  const result = await stripByPostcss({
+    lang: queryObj.lang,
+    resourcePath,
+    css,
+    defs: mpx.defs,
+    resolve: resolver[queryObj.lang] ? resolver[queryObj.lang](this) : this.resolve.bind(this)
+  })
+
+  callback(null, result.css, result.map)
 }
+
+module.exports.stripByPostcss = stripByPostcss
+module.exports.stripCondition = stripCondition