@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.70-alpha.2

package/lib/config.js

@@ -138,7 +138,9 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return dash2hump(prefix + '-' + eventName)
+        return prefix + dash2hump(eventName.replace(/^./, (matched) => {
+          return matched.toUpperCase()
+        }))
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/file-loader.js

@@ -7,6 +7,8 @@ const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDep
 module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
+  const mpx = this.getMpx()
+  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -33,6 +35,9 @@ module.exports = function loader (content, prevOptions) {
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
 
+  // todo 未来添加分包处理后相对地址不一定是./开头的，需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
+  if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`./${url}`)})`
+
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {
       publicPath = options.publicPath(url, this.resourcePath, context)

package/lib/index.js

@@ -1880,7 +1880,7 @@ try {
             if (tenonStyleLoaderIndex > -1 && !isPitcherRequest) {
               loaders.splice(tenonStyleLoaderIndex + 1, 0, {
                 loader: normalize.lib('style-compiler/index.js'),
-                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+                options: (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
               })
             }
           } else if (mpxStyleLoaderIndex === -1) {

package/lib/loader.js

@@ -135,7 +135,6 @@ module.exports = function (content) {
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
 
-
       if (mode === 'tenon') {
         let output = ''
         if (ctorType === 'app' && !queryObj.app) {

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    pad: 'line',
+    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
     env
   })
   if (needMap) {

package/lib/platform/json/wx/index.js

@@ -156,7 +156,9 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'usingComponents',
-      web: fixComponentName('usingComponents')
+      web: fixComponentName('usingComponents'),
+      ios: fixComponentName('usingComponents'),
+      android: fixComponentName('usingComponents')
     },
     {
       test: 'usingComponents',
@@ -256,12 +258,21 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
-    normalizeTest,
-    page: [
-      ...windowRules,
-      ...componentRules
+    supportedModes: [
+      'ali',
+      'swan',
+      'qq',
+      'tt',
+      'jd',
+      'qa',
+      'dd',
+      'web',
+      'ios',
+      'android'
     ],
+
+    normalizeTest,
+    page: [...windowRules, ...componentRules],
     component: componentRules,
     window: windowRules,
     tabBar: {
@@ -297,7 +308,7 @@ module.exports = function getSpec ({ warn, error }) {
           ali (input) {
             const value = input.list
             delete input.list
-            input.items = value.map(item => {
+            input.items = value.map((item) => {
               return runRules(spec.tabBar.list, item, {
                 mode: 'ali',
                 normalizeTest,
@@ -361,7 +372,9 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        web: fixComponentName('usingComponents')
+        web: fixComponentName('usingComponents'),
+        ios: fixComponentName('usingComponents'),
+        android: fixComponentName('usingComponents')
       },
       {
         test: 'usingComponents',

package/lib/platform/style/wx/index.js

@@ -373,11 +373,12 @@ module.exports = function getSpec ({ warn, error }) {
 
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
-    if (Array.isArray(value)) return { prop, value }
+    // css var & 数组直接返回
+    if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
-      const match = item.match(/([/\w]+)\(([^)]+)\)/)
+      const match = item.match(/([/\w]+)\((.+)\)/)
       if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
@@ -398,7 +399,7 @@ module.exports = function getSpec ({ warn, error }) {
             break
           case 'matrix':
           case 'matrix3d':
-            transform.push({ [key]: val.split(',').map(val => +val) })
+            transform.push({ [key]: parseValues(val, ',').map(val => +val) })
             break
           case 'translate':
           case 'scale':
@@ -406,23 +407,23 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
-            {
-              // 2 个以上的值处理
-              key = key.replace('3d', '')
-              const vals = val.split(',', key === 'rotate' ? 4 : 3)
-              // scale(.5) === scaleX(.5) scaleY(.5)
-              if (vals.length === 1 && key === 'scale') {
-                vals.push(vals[0])
-              }
-              const xyz = ['X', 'Y', 'Z']
-              transform.push(...vals.map((v, index) => {
-                if (key !== 'rotate' && index > 1) {
-                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
-                }
-                return { [`${key}${xyz[index] || ''}`]: v.trim() }
-              }))
-              break
+          {
+            // 2 个以上的值处理
+            key = key.replace('3d', '')
+            const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+            // scale(.5) === scaleX(.5) scaleY(.5)
+            if (vals.length === 1 && key === 'scale') {
+              vals.push(vals[0])
             }
+            const xyz = ['X', 'Y', 'Z']
+            transform.push(...vals.map((v, index) => {
+              if (key !== 'rotate' && index > 1) {
+                unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+              }
+              return { [`${key}${xyz[index] || ''}`]: v.trim() }
+            }))
+            break
+          }
           case 'translateZ':
           case 'scaleZ':
           default:
@@ -455,14 +456,17 @@ module.exports = function getSpec ({ warn, error }) {
 
   const formatFlex = ({ prop, value, selector }) => {
     let values = parseValues(value)
+    // 值大于3 去前三
     if (values.length > 3) {
-      error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
+      warn(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
     }
     const cssMap = []
-    const lastOne = values[values.length - 1]
-    const isAuto = lastOne === 'auto'
-    // 枚举值 none initial
+    // 单个css var 直接设置 flex 属性
+    if (values.length === 1 && cssVariableExp.test(value)) {
+      return { prop, value }
+    }
+    // 包含枚举值 none initial
     if (values.includes('initial') || values.includes('none')) {
       // css flex: initial ===> flex: 0 1 ===> rn flex 0 1
       // css flex: none ===> css flex: 0 0 ===> rn flex 0 0
@@ -475,38 +479,31 @@ module.exports = function getSpec ({ warn, error }) {
       }
       return cssMap
     }
-    // 最后一个值是flexBasis 的有效值（auto或者有单位百分比、px等）
-    // flex 0 1 auto flex auto flex 1 auto flex 1 30px flex 1 10% flex 1 1 auto
-    if (!isNumber(lastOne) || !cssVariableExp.test(value)) {
-      // 添加 grow 和 shrink
-      // 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
-      // 单值 flex: 1 1 <flex-basis>
-      // 双值 flex: <flex-grow> 1 <flex-basis>
-      // 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
-      for (let i = 0; i < 2; i++) {
-        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) || cssVariableExp.test(value) ? values[i] : 1 })
+    // 只有1-2个值且最后的值是flexBasis 的有效值（auto或者有单位百分比、px等）
+    // 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
+    // 单值 flex: 1 1 <flex-basis>
+    // 双值 flex: <flex-grow> 1 <flex-basis>
+    // 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
+    for (let i = 0; i < 3; i++) {
+      if (i < 2) {
+        // 添加 grow 和 shrink
+        const isValid = isNumber(values[0]) || cssVariableExp.test(values[0])
+        // 兜底 1
+        const val = isValid ? values[0] : 1
+        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: val, selector })
         item && cssMap.push(item)
+        isValid && values.shift()
+      } else {
+        // 添加 flexBasis
+        // 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理，兜底 0
+        const val = values[0] || 0
+        if (val !== 'auto') {
+          cssMap.push({
+            prop: 'flexBasis',
+            value: val
+          })
+        }
       }
-      if (!isAuto) {
-        // 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理
-        cssMap.push({
-          prop: 'flexBasis',
-          value: lastOne
-        })
-      }
-      return cssMap
-    }
-    // 纯数值：value 按flex-grow flex-shrink flex-basis 顺序赋值
-    // 兜底 shrink & basis
-    if (values.length === 1) {
-      values.push(...[1, 0])
-    } else if (values.length === 2) {
-      values.push(0)
-    }
-    // 循环赋值
-    for (let i = 0; i < values.length; i++) {
-      const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: values[i] })
-      item && cssMap.push(item)
     }
     return cssMap
   }
@@ -514,7 +511,7 @@ module.exports = function getSpec ({ warn, error }) {
   const formatFontFamily = ({ prop, value, selector }) => {
     // 去掉引号 取逗号分隔后的第一个
     const newVal = value.replace(/"|'/g, '').trim()
-    const values = newVal.split(',').filter(i => i)
+    const values = parseValues(newVal, ',')
     if (!newVal || !values.length) {
       error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       return false

package/lib/platform/template/wx/component-config/fix-component-name.js

@@ -1,21 +1,24 @@
 const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
+  const handleComponentTag = (el, data) => {
+    const newTag = `mpx-com-${el.tag}`
+    const usingComponents = data.usingComponents || []
+    // 当前组件名与原生tag或内建tag同名，对组件名进行转义
+    // json转义见：platform/json/wx/index.js fixComponentName
+    if (usingComponents.includes(newTag)) {
+      el.tag = newTag
+    }
+    return el
+  }
+
   return {
     waterfall: true,
     skipNormalize: true,
-    supportedModes: ['web'],
+    supportedModes: ['web', 'ios', 'android'],
     test: (input) => isOriginTag(input) || isBuildInTag(input),
-    // 输出web时对组件名进行转义避免与原生tag和内建tag冲突
-    web (el, data) {
-      const newTag = `mpx-com-${el.tag}`
-      const usingComponents = data.usingComponents || []
-      // 当前组件名与原生tag或内建tag同名，对组件名进行转义
-      // json转义见：platform/json/wx/index.js fixComponentName
-      if (usingComponents.includes(newTag)) {
-        el.tag = newTag
-      }
-      return el
-    }
+    web: handleComponentTag,
+    ios: handleComponentTag,
+    android: handleComponentTag
   }
 }

package/lib/platform/template/wx/component-config/index.js

@@ -82,8 +82,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
-    ...unsupported({ print }),
     fixComponentName({ print }),
+    ...unsupported({ print }),
     ad({ print }),
     view({ print }),
     scrollView({ print }),

package/lib/platform/template/wx/component-config/movable-view.js

@@ -2,6 +2,8 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
@@ -27,7 +29,7 @@ module.exports = function ({ print }) {
         android: androidPropLog
       },
       {
-        test: /^(inertia|damping|animation)$/,
+        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
         ios: iosPropLog,
         android: androidPropLog
       }
@@ -36,6 +38,11 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
+      },
+      {
+        test: /^(bindscale)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/picker-view.js

@@ -6,9 +6,7 @@ module.exports = function ({ print }) {
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const ttEventLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false, type: 'event' })
   const jdEventLog = print({ platform: 'jd', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
@@ -28,9 +26,7 @@ module.exports = function ({ print }) {
     props: [
       {
         test: /^(indicator-class|mask-class)$/,
-        tt: ttPropLog,
-        ios: iosPropLog,
-        android: androidPropLog
+        tt: ttPropLog
       }
     ],
     event: [

package/lib/platform/template/wx/component-config/rich-text.js

@@ -16,6 +16,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'tenon-rich-text'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-rich-text'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-rich-text'
+    },
     props: [
       {
         test: /^(space)$/,

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -57,7 +57,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(scroll-into-view|refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
+        test: /^(refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
         android: androidPropLog,
         ios: iosPropLog
       },

package/lib/platform/template/wx/component-config/unsupported.js

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/platform/template/wx/index.js

@@ -411,7 +411,9 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
+            name: rPrefix + dash2hump(rEventName.replace(/^./, (matched) => {
+              return matched.toUpperCase()
+            })) + modifierStr,
             value
           }
         },
@@ -493,10 +495,6 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ name, value }, { eventRules, el, usingComponents }) {
-          const parsed = parseMustacheWithContext(value)
-          if (parsed.hasBinding) {
-            value = '__invokeHandler(' + parsed.result + ', $event)'
-          }
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]

package/lib/react/processScript.js

@@ -9,6 +9,7 @@ module.exports = function (script, {
   moduleId,
   isProduction,
   jsonConfig,
+  outputPath,
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap
@@ -25,14 +26,16 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { Provider } from '@ant-design/react-native'
+import { useHeaderHeight } from '@react-navigation/elements';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
+  createStackNavigator: createNativeStackNavigator,
+  useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,
@@ -64,7 +67,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/react/script-helper.js

@@ -88,7 +88,8 @@ function buildGlobalParams ({
   jsonConfig,
   componentsMap,
   pagesMap,
-  firstPage
+  firstPage,
+  outputPath
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -117,6 +118,9 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     content += `global.currentInject.getComponents = function () {
   return ${shallowStringify(componentsMap)}
 }\n`
+    if (ctorType === 'component') {
+      content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
+    }
   }
   content += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
   content += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`

package/lib/runtime/components/react/context.ts

@@ -33,6 +33,10 @@ export interface IntersectionObserver {
   }
 }
 
+export interface ScrollViewContextValue {
+   gestureRef: React.RefObject<any> | null
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -51,4 +55,8 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 
 export const RouteContext = createContext<number | null>(null)
 
+export const SwiperContext = createContext({})
+
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
+
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })

package/lib/runtime/components/react/dist/context.js

@@ -8,4 +8,6 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
+export const ScrollViewContext = createContext({ gestureRef: null });