@mpxjs/webpack-plugin 2.10.15 → 2.10.16-beta.3

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

@@ -287,16 +287,13 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear') {
-        const dimensionWidth = calcPercent(width as NumberVal, layoutWidth) || 0
-        const dimensionHeight = calcPercent(height as NumberVal, layoutHeight) || 0
-        // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
-        if (dimensionWidth && dimensionHeight) {
-          dimensions = {
-            width: dimensionWidth,
-            height: dimensionHeight
-          } as { width: NumberVal, height: NumberVal }
-        }
+      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+        // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+        // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+        dimensions = {
+          width: 0,
+          height: 0
+        } as { width: NumberVal, height: NumberVal }
       } else {
         dimensions = {
           width: isPercent(width) ? width : +width,
@@ -504,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

@@ -226,7 +226,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
         break
       case 'postMessage':
-        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+        bindmessage && bindmessage(getCustomEvent('message', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
           detail: {
             data: params[0]?.data
           }

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/runtime/components/web/mpx-input.vue

@@ -56,7 +56,7 @@
           if (val !== -1) this.setSelectionRange(undefined, val)
         },
         immediate: true
-      }
+      },
     },
     render (createElement) {
       const mergeBefore = {

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

@@ -4,10 +4,12 @@
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
   import PullDown from '@better-scroll/pull-down'
+  import MouseWheel from '@better-scroll/mouse-wheel'
   import throttle from 'lodash/throttle'
   import debounce from 'lodash/debounce'
 
   BScroll.use(PullDown)
+  BScroll.use(MouseWheel)
 
   let mutationObserver = null
   let resizeObserver = null
@@ -222,7 +224,11 @@
           bounce: false,
           stopPropagation: true,
           bindToWrapper: true,
-          eventPassthrough: (this.scrollX && 'vertical') || (this.scrollY && 'horizontal') || ''
+          eventPassthrough: (this.scrollX && 'vertical') || (this.scrollY && 'horizontal') || '',
+          mouseWheel: {
+            speed: 20,
+            easeTime: 300
+          }
         }
         if (this.refresherEnabled) {
           originBsOptions.bounce = true

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

@@ -148,6 +148,11 @@
       },
       controls: function (show) {
         this.$emit('controlstoggle', inheritEvent('controlstoggle', {}, { show }))
+      },
+      objectFit (val) {
+        if (this._player && this._player.video) {
+          this._player.video.style.objectFit = val
+        }
       }
     },
     mounted () {
@@ -189,6 +194,9 @@
         if (this.initialTime) {
           this._player.seek(this.initialTime)
         }
+        if (this.objectFit) {
+          this._player.video.style.objectFit = this.objectFit
+        }
       },
       initStyle () {
 
@@ -239,7 +247,10 @@
 
         this._player.on('progress', (e) => {
           const eNode = e.target
-          const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
+          let buffered = 0
+          if (eNode?.buffered && eNode.buffered.length > 0) {
+            buffered = (eNode.buffered.end(0)) / (eNode?.duration)
+          }
           this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 

package/lib/runtime/optionProcessor.js

@@ -108,7 +108,9 @@ registered in parent context!`)
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) extend(component, extendOptions)
+  if (extendOptions && !component.__mpxExtended) {
+    extend(component, extendOptions, { __mpxExtended: true })
+  }
   return component
 }
 

package/lib/runtime/optionProcessorReact.js

@@ -5,7 +5,9 @@ import { extend } from './utils'
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) Object.assign(component, extendOptions)
+  if (extendOptions && !component.__mpxExtended) {
+    extend(component, extendOptions, { __mpxExtended: true })
+  }
   return component
 }
 
@@ -15,7 +17,7 @@ export function getAsyncSuspense (commonProps) {
     result = memo(forwardRef(function (props, ref) {
       return createElement(AsyncSuspense,
         extend({}, commonProps, {
-          innerProps: Object.assign({}, props, { ref })
+          innerProps: extend({}, props, { ref })
         })
       )
     }))

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 atImport = require('postcss-import')
+const { default: postcss } = require('postcss')
+
 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,12 +42,12 @@ function tokenize (cssString) {
 }
 
 // parse：将生成的 token 数组构造成嵌套的 AST
-function parse (cssString) {
+function parse(cssString) {
   const tokens = tokenize(cssString)
   const ast = []
   const nodeStack = []
   let currentChildren = ast
-  tokens.forEach(token => {
+  tokens.forEach((token) => {
     if (token.type === 'text') {
       const node = new Node('Text')
       node.value = token.content
@@ -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,23 +82,23 @@ 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])
+    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(`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,145 @@ 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 解析文件路径的函数
+ */
+
+/**
+ *
+ * @param {Function} callback
+ * @param {string} name
+ * @returns
+ */
+const shouldInstallWarning = (callback, name) => {
+  return () => {
+    try {
+      return callback()
+    } catch (error) {
+      throw new Error(
+        `[mpx-strip-conditional-loader]: ${name} is not installed, please install it first.\norginal Error: ${
+          error?.message ?? error.toString()
+        }`,
+        {
+          cause: error
+        }
+      )
+    }
+  }
+}
+/**
+ *
+ * @typedef {import('postcss').ProcessOptions} ProcessOptions
+ * @typedef {import('postcss').Root} Root
+ *
+ * @type {Record<string, ProcessOptions['syntax']>}
+ */
+const styleSyntaxProcesserMap = {
+  stylus: shouldInstallWarning(() => require('postcss-styl'), 'postcss-styl'),
+  less: shouldInstallWarning(() => require('postcss-less'), 'postcss-less'),
+  scss: shouldInstallWarning(() => require('postcss-scss'), 'postcss-scss')
+}
+
+/**
+ * @param {StripByPostcssOption} options
+ */
+async function stripByPostcss(options) {
+  const syntax = styleSyntaxProcesserMap[options.lang]?.()
+  const defs = options.defs ?? {}
+
+  const afterConditionStrip = stripCondition(options.css, defs)
+
+    /**
+   * @type {import('postcss').AcceptedPlugin[]}
+   */
+  const plugins = [
+    atImport({
+      async load(filename) {
+        let content = await fs.readFile(filename, 'utf-8')
+        const processer = postcss(plugins)
+
+        content = stripCondition(content, defs)
+
+        const { css } = await processer.process(content, {
+          syntax,
+          from: filename,
+          to: options.resourcePath
+        })
+        return css
+      },
+      resolve: (id, base) => {
+        return new Promise((resolve, reject) => {
+          options.resolve(base, 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)
+          })
+        })
+      }
+    })
+  ]
+
+  const processer = postcss(plugins)
+
+  return processer.process(afterConditionStrip, {
+    from: options.resourcePath,
+    syntax
+  })
+}
+
+/**
+ *
+ * @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: this.resolve.bind(this)
+  })
+
+  callback(null, result.css, result.map)
 }
+
+module.exports.stripByPostcss = stripByPostcss
+module.exports.stripCondition = stripCondition