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

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

@@ -0,0 +1,225 @@
+const path = require('node:path')
+/**
+ * @typedef {(id: string, importer?: string, aliasOnly?: boolean) => Promise<string | undefined>} ResolveIdFn
+ */
+/**
+ * @typedef {(unquotedUrl: string, rawUrl: string) => Promise<string | false> | string | false} CssUrlReplacer
+ */
+
+// https://drafts.csswg.org/css-syntax-3/#identifier-code-point
+const cssUrlRE = /(?<!@import\s+)(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|(?:\\.|[^'")\\])+)\)/
+const cssDataUriRE = /(?<=^|[^\w\-\u0080-\uffff])data-uri\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
+const importCssRE = /@import\s+(?:url\()?('[^']+\.css'|"[^"]+\.css"|[^'"\s)]+\.css)/
+const nonEscapedDoubleQuoteRe = /(?<!\\)"/g
+const externalRE = /^([a-z]+:)?\/\//
+const isExternalUrl = url => externalRE.test(url)
+
+const dataUrlRE = /^\s*data:/i
+const isDataUrl = url => dataUrlRE.test(url)
+const functionCallRE = /^[A-Z_][.\w-]*\(/i
+
+function skipUrlReplacer(unquotedUrl) {
+  return isExternalUrl(unquotedUrl) || isDataUrl(unquotedUrl) || unquotedUrl[0] === '#' || unquotedUrl[0] === '@' || functionCallRE.test(unquotedUrl)
+}
+
+/**
+ *
+ * @param {string} rawUrl
+ * @param {string} matched
+ * @param {CssUrlReplacer} replacer
+ * @param {string} funcName
+ * @returns {Promise<string>}
+ */
+async function doUrlReplace(rawUrl, matched, replacer, funcName = 'url') {
+  let wrap = ''
+  const first = rawUrl[0]
+  let unquotedUrl = rawUrl
+  if (first === '"' || first === "'") {
+    wrap = first
+    unquotedUrl = rawUrl.slice(1, -1)
+  }
+  if (skipUrlReplacer(unquotedUrl)) {
+    return matched
+  }
+  //  Remove escape sequences to get the actual file name before resolving.
+  unquotedUrl = unquotedUrl.replace(/\\(\W)/g, '$1')
+
+  let newUrl = await replacer(unquotedUrl, rawUrl)
+  if (newUrl === false) {
+    return matched
+  }
+
+  // The new url might need wrapping even if the original did not have it, e.g.
+  // if a space was added during replacement or the URL contains ")"
+  if (wrap === '' && (newUrl !== encodeURI(newUrl) || newUrl.includes(')'))) {
+    wrap = '"'
+  }
+  // If wrapping in single quotes and newUrl also contains single quotes, switch to double quotes.
+  // Give preference to double quotes since SVG inlining converts double quotes to single quotes.
+  if (wrap === "'" && newUrl.includes("'")) {
+    wrap = '"'
+  }
+  // Escape double quotes if they exist (they also tend to be rarer than single quotes)
+  if (wrap === '"' && newUrl.includes('"')) {
+    newUrl = newUrl.replace(nonEscapedDoubleQuoteRe, '\\"')
+  }
+  return `${funcName}(${wrap}${newUrl}${wrap})`
+}
+
+/**
+ *
+ * @param {string} rawUrl
+ * @param {string} matched
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+async function doImportCSSReplace(rawUrl, matched, replacer) {
+  let wrap = ''
+  const first = rawUrl[0]
+  let unquotedUrl = rawUrl
+  if (first === '"' || first === "'") {
+    wrap = first
+    unquotedUrl = rawUrl.slice(1, -1)
+  }
+  if (skipUrlReplacer(unquotedUrl)) {
+    return matched
+  }
+
+  const newUrl = await replacer(unquotedUrl, rawUrl)
+  if (newUrl === false) {
+    return matched
+  }
+
+  const prefix = matched.includes('url(') ? 'url(' : ''
+  return `@import ${prefix}${wrap}${newUrl}${wrap}`
+}
+
+/**
+ *
+ * @param {string} input
+ * @param {RegExp} re
+ * @param {(match: RegExpMatchArray) => string | Promise<string>} replacer
+ * @returns {Promise<string>}
+ */
+async function asyncReplace(input, re, replacer) {
+  let match = null
+  let remaining = input
+  let rewritten = ''
+  while ((match = re.exec(remaining))) {
+    rewritten += remaining.slice(0, match.index)
+    rewritten += await replacer(match)
+    remaining = remaining.slice(match.index + match[0].length)
+  }
+  rewritten += remaining
+  return rewritten
+}
+module.exports.asyncReplace = asyncReplace
+
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteCssUrls(css, replacer) {
+  return asyncReplace(css, cssUrlRE, async match => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl.trim(), matched, replacer)
+  })
+}
+
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteCssDataUris(css, replacer) {
+  return asyncReplace(css, cssDataUriRE, async match => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl.trim(), matched, replacer, 'data-uri')
+  })
+}
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteImportCss(css, replacer) {
+  return asyncReplace(css, importCssRE, async match => {
+    const [matched, rawUrl] = match
+    return await doImportCSSReplace(rawUrl, matched, replacer)
+  })
+}
+
+const windowsSlashRE = /\\/g
+function slash(p) {
+  return p.replace(windowsSlashRE, '/')
+}
+
+const isWindows = typeof process !== 'undefined' && process.platform === 'win32'
+/**
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function normalizePath(id) {
+  return path.posix.normalize(isWindows ? slash(id) : id)
+}
+
+/**
+ *
+ * @param {string} file
+ * @param {string} rootFile
+ * @param {string} content
+ * @param {ResolveIdFn} resolver
+ * @param {(unquotedUrl: string, rawUrl: string) => boolean} [ignoreUrl]
+ * @returns {Promise<{ file: string, contents?: string }>}
+ */
+async function rebaseUrls(file, rootFile, content, resolver, ignoreUrl) {
+  //   file = path.resolve(file) // ensure os-specific flashes
+  // in the same dir, no need to rebase
+  const fileDir = path.dirname(file)
+  const rootDir = path.dirname(rootFile)
+
+  // no url()
+  const hasUrls = cssUrlRE.test(content)
+  // data-uri() calls
+  const hasDataUris = cssDataUriRE.test(content)
+  // no @import xxx.css
+  const hasImportCss = importCssRE.test(content)
+
+  if (!hasUrls && !hasDataUris && !hasImportCss) {
+    return { file }
+  }
+
+  let rebased
+  const rebaseFn = async (unquotedUrl, rawUrl) => {
+    if (ignoreUrl?.(unquotedUrl, rawUrl)) return false
+    if (unquotedUrl[0] === '/') return unquotedUrl
+    const absolute = (await resolver(unquotedUrl, file)) || path.resolve(fileDir, unquotedUrl)
+    const relative = path.relative(rootDir, absolute)
+    return normalizePath(relative)
+  }
+
+  // fix css imports in less such as `@import "foo.css"`
+  if (hasImportCss) {
+    rebased = await rewriteImportCss(content, rebaseFn)
+  }
+
+  if (hasUrls) {
+    rebased = await rewriteCssUrls(rebased || content, rebaseFn)
+  }
+
+  if (hasDataUris) {
+    rebased = await rewriteCssDataUris(rebased || content, rebaseFn)
+  }
+
+  return {
+    file,
+    contents: rebased
+  }
+}
+
+module.exports.rebaseUrls = rebaseUrls

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

@@ -1,7 +1,4 @@
-const fs = require('fs/promises')
-const parseRequest = require('../utils/parse-request')
-const path = require('path')
-const loaderUtils = require('loader-utils')
+const fs = require('fs')
 
 class Node {
   constructor(type, condition = null) {
@@ -131,189 +128,74 @@ function traverseAndEvaluate(ast, defs) {
  */
 function stripCondition(content, defs) {
   const ast = parse(content)
-  const result = traverseAndEvaluate(ast, defs)
-  return result
+  return traverseAndEvaluate(ast, defs)
 }
 
-/**
- * @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
-    })
-  }
+let proxyReadFileSync
+let proxyReadFile
+const rawReadFileSync = fs.readFileSync
+const rawReadFile = fs.readFile
 
-  while ((comment = e2.exec(css))) {
-    const [content] = comment
-    comments.push({
-      start: comment.index,
-      end: comment.index + content.length,
-      content: content
-    })
+function rewriteFSForCss() {
+  proxyReadFileSync = function (path, options) {
+    return rawReadFileSync.call(fs, path, options)
   }
-
-  // 排序方便二分
-  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
+  proxyReadFile = function (path, options, callback) {
+    return rawReadFile.call(fs, path, options, callback)
   }
-
-  // 使用正则表达式匹配出所有 @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
-    })
+  fs.readFileSync = function (path, options) {
+    return proxyReadFileSync(path, options)
   }
-
-  // 过滤掉在注释中的 @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)
+  fs.readFile = function (path, options, callback) {
+    return proxyReadFile(path, options, callback)
   }
-
-  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, '  ')
+function startFSStripForCss(defs) {
+  function shouldStrip(path) {
+    return typeof path === 'string' && /\.(styl|scss|sass|less|css)$/.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)
+        }
+      } catch (e) {
+        return content
+      }
     }
-
     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)
+  proxyReadFile = function (path, options, callback) {
+    let cb = callback
+    if (typeof options === 'function') {
+      cb = options
+      options = null
+    }
 
-      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}`))
+    const wrappedCallback = (err, data) => {
+      if (err) return cb(err)
+      if (shouldStrip(path)) {
+        try {
+          if (typeof data === 'string') {
+            const result = stripCondition(data, defs)
+            return cb(null, result)
           }
-          resolve(res)
-        })
-      })
+        } catch (e) {
+          return cb(null, data)
+        }
+      }
+      cb(null, data)
     }
+    if (options) {
+      return rawReadFile.call(fs, path, options, wrappedCallback)
+    }
+    return rawReadFile.call(fs, path, wrappedCallback)
   }
-
-  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>}
@@ -325,18 +207,11 @@ module.exports = async function (css) {
   const callback = this.async()
 
   const mpx = this.getMpx()
-  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)
-  })
+  const result = stripCondition(css, mpx.defs)
 
-  callback(null, result.css, result.map)
+  callback(null, result)
 }
 
-module.exports.stripByPostcss = stripByPostcss
 module.exports.stripCondition = stripCondition
+module.exports.rewriteFSForCss = rewriteFSForCss
+module.exports.startFSStripForCss = startFSStripForCss

package/lib/template-compiler/compiler.js

@@ -764,8 +764,6 @@ 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 (currentParent.tag !== 'text') {
         text = text.trim()
       } else {
@@ -2719,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/dom-tag-config.js

@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-input,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-camera'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.17-beta.2",
+  "version": "2.10.17-beta.4",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -97,6 +97,7 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },

package/lib/runtime/components/react/dist/useAnimationHooks.d.ts

@@ -1,33 +0,0 @@
-import type { MutableRefObject } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
-import { ExtendedViewStyle } from './types/common';
-import type { _ViewProps } from './mpx-view';
-type AnimatedOption = {
-    duration: number;
-    delay: number;
-    useNativeDriver: boolean;
-    timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out';
-    transformOrigin: string;
-};
-export type AnimationStepItem = {
-    animatedOption: AnimatedOption;
-    rules: Map<string, number | string>;
-    transform: Map<string, number>;
-};
-export type AnimationProp = {
-    id: number;
-    actions: AnimationStepItem[];
-};
-export default function useAnimationHooks<T, P>(props: _ViewProps & {
-    enableAnimation?: boolean;
-    layoutRef: MutableRefObject<any>;
-    transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
-}): {
-    enableStyleAnimation: boolean;
-    animationStyle?: undefined;
-} | {
-    enableStyleAnimation: true;
-    animationStyle: ExtendedViewStyle;
-};
-export {};
-//# sourceMappingURL=useAnimationHooks.d.ts.map

package/lib/runtime/components/react/dist/useAnimationHooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnimationHooks.d.ts","sourceRoot":"","sources":["../useAnimationHooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,cAAc,CAAA;AAezE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAE,UAAU,CAAA;IACzE,eAAe,EAAE,MAAM,CAAA;CACxB,CAAA;AAID,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,cAAc,CAAA;IAC9B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACnC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC/B,CAAA;AACD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,iBAAiB,EAAE,CAAA;CAC7B,CAAA;AA0DD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EAAE,CAAC,EAAG,KAAK,EAAE,UAAU,GAAG;IAAE,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,UAAU,CAAC,GAAG,OAAO,KAAK,IAAI,CAAA;CAAE;;;;;;EA+NhN"}