@mpxjs/webpack-plugin 2.9.65 → 2.9.67

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

@@ -190,13 +190,22 @@ module.exports = function getSpec ({ warn, error }) {
     flex: ['flexGrow', 'flexShrink', 'flexBasis'],
     // flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
     'flex-flow': ['flexDirection', 'flexWrap'],
-    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'],
+    'border-width': ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+    'border-color': ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+    margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
+    padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']
   }
   const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
-    const values = parseValues(value)
+    const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
+    // 复合属性不支持单个css var（css var可以接收单个值可以是复合值，复合值运行时不处理，这里前置提示一下）
+    if (values.length === 1 && cssVariableExp.test(value)) {
+      error(`Property ${prop} in ${selector} is abbreviated property and does not support a single CSS var`)
+      return cssMap
+    }
     let idx = 0
     let propsIdx = 0
     const diff = values.length - props.length
@@ -255,32 +264,20 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  // margin padding
-  const formatMargins = ({ prop, value, selector }) => {
-    const values = parseValues(value)
-    // format
-    let suffix = []
+  const formatCompositeVal = ({ prop, value, selector }, { mode }) => {
+    const values = parseValues(value).splice(0, 4)
     switch (values.length) {
-      // case 1:
+      case 1:
+        verifyValues({ prop, value, selector }, false)
+        return { prop, value }
       case 2:
-        suffix = ['Vertical', 'Horizontal']
+        values.push(...values)
         break
       case 3:
-        suffix = ['Top', 'Horizontal', 'Bottom']
-        break
-      case 4:
-        suffix = ['Top', 'Right', 'Bottom', 'Left']
+        values.push(values[1])
         break
     }
-    return values.map((value, index) => {
-      const newProp = `${prop}${suffix[index] || ''}`
-      // validate
-      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
-      return {
-        prop: newProp,
-        value: value
-      }
-    })
+    return formatAbbreviation({ prop, value: values, selector }, { mode })
   }
 
   // line-height
@@ -304,16 +301,12 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
-    const linerExp = /linear-gradient\(.*\)\s*$/
+    const linearExp = /linear-gradient\(.*\)/
     switch (prop) {
       case bgPropMap.image: {
-        // background-image 仅支持背景图
-        const imgUrl = value.match(urlExp)?.[0]
-        const linerVal = value.match(linerExp)?.[0]
-        if (imgUrl) {
-          return { prop, value: imgUrl }
-        } else if (linerVal) {
-          return { prop, value: linerVal }
+        // background-image 支持背景图/渐变/css var
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+          return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
           return false
@@ -352,11 +345,15 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
+        if (cssVariableExp.test(value)) {
+          error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
+          return false
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
-          const linerVal = item.match(linerExp)?.[0]
+          const linerVal = item.match(linearExp)?.[0]
           if (url) {
             bgMap.push({ prop: bgPropMap.image, value: url })
           } else if (linerVal) {
@@ -374,22 +371,6 @@ module.exports = function getSpec ({ warn, error }) {
     return false
   }
 
-  // border-radius 缩写转换
-  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
-    const values = parseValues(value)
-    if (values.length === 1) {
-      verifyValues({ prop, value, selector }, false)
-      return { prop, value }
-    } else {
-      if (values.length === 2) {
-        values.push(...values)
-      } else if (values.length === 3) {
-        values.push(values[1])
-      }
-      return formatAbbreviation({ prop, value: values.join(' ') }, { mode })
-    }
-  }
-
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
@@ -428,7 +409,7 @@ module.exports = function getSpec ({ warn, error }) {
             {
               // 2 个以上的值处理
               key = key.replace('3d', '')
-              const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              const vals = val.split(',', key === 'rotate' ? 4 : 3)
               // scale(.5) === scaleX(.5) scaleY(.5)
               if (vals.length === 1 && key === 'scale') {
                 vals.push(vals[0])
@@ -566,15 +547,10 @@ module.exports = function getSpec ({ warn, error }) {
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
-      {
-        test: 'border-radius',
-        ios: getBorderRadius,
-        android: getBorderRadius
-      },
       { // margin padding 内外边距的处理
-        test: /^(margin|padding)$/,
-        ios: formatMargins,
-        android: formatMargins
+        test: /^(margin|padding|border-radius|border-width|border-color)$/,
+        ios: formatCompositeVal,
+        android: formatCompositeVal
       },
       { // line-height 换算
         test: 'line-height',

package/lib/react/index.js

@@ -8,6 +8,7 @@ const RecordLoaderContentDependency = require('../dependencies/RecordLoaderConte
 
 module.exports = function ({
   parts,
+  jsonContent,
   loaderContext,
   pagesMap,
   componentsMap,
@@ -19,7 +20,7 @@ module.exports = function ({
   hasScoped,
   hasComment,
   isNative,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics,
   autoScope,
   callback
@@ -50,7 +51,7 @@ module.exports = function ({
             srcMode,
             moduleId,
             ctorType,
-            usingComponents,
+            usingComponentsInfo,
             componentGenerics
           }, callback)
         },
@@ -63,7 +64,7 @@ module.exports = function ({
           }, callback)
         },
         (callback) => {
-          processJSON(parts.json, {
+          processJSON(jsonContent, {
             loaderContext,
             ctorType,
             pagesMap,

package/lib/react/processJSON.js

@@ -12,9 +12,8 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
-const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
-module.exports = function (json, {
+module.exports = function (jsonContent, {
   loaderContext,
   ctorType,
   pagesMap,
@@ -81,12 +80,11 @@ module.exports = function (json, {
   }
 
   const isApp = ctorType === 'app'
-  if (!json) {
+  if (!jsonContent) {
     return callback()
   }
-  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
-    jsonObj = JSON5.parse(json.content)
+    jsonObj = JSON5.parse(jsonContent)
     // 处理runner
     const rulesRunnerOptions = {
       mode,
@@ -96,8 +94,8 @@ module.exports = function (json, {
       warn: emitWarning,
       error: emitError,
       data: {
-        // polyfill global usingComponents & record globalComponents
-        globalComponents: mpx.usingComponents
+        // polyfill global usingComponents
+        globalComponents: mpx.globalComponents
       }
     }
 
@@ -110,12 +108,6 @@ module.exports = function (json, {
     if (rulesRunner) {
       rulesRunner(jsonObj)
     }
-    if (isApp) {
-      // 收集全局组件
-      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
-      // 在 rulesRunner 运行后保存全局注册组件
-      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
-    }
   } catch (e) {
     return callback(e)
   }

package/lib/react/processMainScript.js

@@ -8,7 +8,7 @@ const {
 module.exports = function ({
   loaderContext
 }, callback) {
-  const { i18n, projectName } = loaderContext.getMpx()
+  const { i18n, rnConfig } = loaderContext.getMpx()
 
   let output = 'import { AppRegistry } from \'react-native\'\n'
 
@@ -16,8 +16,12 @@ module.exports = function ({
     output += buildI18n({ loaderContext })
   }
   // 此处可添加前置于App执行的语句
-  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
-  output += `AppRegistry.registerComponent(${JSON.stringify(projectName)}, () => App)\n`
+  output += `var app = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
+  if (rnConfig.projectName) {
+    output += `AppRegistry.registerComponent(${JSON.stringify(rnConfig.projectName)}, () => app)\n`
+  } else {
+    output += 'export default app\n'
+  }
 
   callback(null, {
     output

package/lib/react/processScript.js

@@ -24,16 +24,15 @@ module.exports = function (script, {
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { NavigationContainer, StackActions } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import { Provider } from '@ant-design/react-native'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createNavigationContainerRef: createNavigationContainerRef,
-  createNativeStackNavigator: createNativeStackNavigator,
+  createStackNavigator: createStackNavigator,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,

package/lib/react/processTemplate.js

@@ -14,7 +14,7 @@ module.exports = function (template, {
   srcMode,
   moduleId,
   ctorType,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -27,7 +27,8 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
-    autoVirtualHostRules
+    autoVirtualHostRules,
+    customTextRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -63,7 +64,7 @@ module.exports = function (template, {
       const { root, meta } = templateCompiler.parse(template.content, {
         warn,
         error,
-        usingComponents,
+        usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
         hasComment,
         isNative,
         ctorType,
@@ -84,7 +85,8 @@ module.exports = function (template, {
         globalComponents: [],
         // web模式下实现抽象组件
         componentGenerics,
-        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
+        isCustomText: matchCondition(resourcePath, customTextRules)
       })
 
       if (meta.wxsContentMap) {

package/lib/resolver/AddModePlugin.js

@@ -6,16 +6,17 @@ const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddModePlugin {
-  constructor (source, mode, fileConditionRules, target) {
+  constructor (source, mode, fileConditionRules, target, defaultMode) {
     this.source = source
     this.target = target
     this.mode = mode
     this.fileConditionRules = fileConditionRules
+    this.defaultMode = defaultMode
   }
 
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
-    const mode = this.mode
+    const { defaultMode, mode } = this
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -33,12 +34,24 @@ module.exports = class AddModePlugin {
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
+      const queryInfix = queryObj.infix
       queryObj.mode = mode
-      queryObj.infix = `${queryObj.infix || ''}.${mode}`
+      queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
-      resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, callback)
+      resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
+        if (this.defaultMode && !result) {
+          queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          obj.query = stringifyQuery(queryObj)
+          obj.path = addInfix(resourcePath, defaultMode, extname)
+          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + this.defaultMode, resolveContext, (err, result) => {
+            callback(err, result)
+          })
+          return
+        }
+        callback(err, result)
+      })
     })
   }
 }

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

@@ -25,6 +25,12 @@ export interface FormContextValue {
   reset: () => void
 }
 
+export interface IntersectionObserver {
+  [key: number]: {
+    throttleMeasure: () => void
+  }
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -38,3 +44,5 @@ export const LabelContext = createContext<LabelContextValue | null>(null)
 export const PickerContext = createContext(null)
 
 export const VarContext = createContext({})
+
+export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)

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

@@ -6,3 +6,4 @@ export const RadioGroupContext = createContext(null);
 export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
 export const VarContext = createContext({});
+export const IntersectionObserverContext = createContext(null);

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -267,5 +267,5 @@ const Button = forwardRef((buttonProps, ref) => {
         })}
     </View>);
 });
-Button.displayName = 'mpx-button';
+Button.displayName = 'MpxButton';
 export default Button;

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -1,7 +1,7 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, CheckboxGroupContext } from './context';
@@ -9,7 +9,9 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const CheckboxGroup = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange } = props;
+    const propsRef = useRef({});
+    propsRef.current = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -28,7 +30,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const getSelectionValue = () => {
+    const getValue = () => {
         const arr = [];
         for (const key in groupValue) {
             if (groupValue[key].checked) {
@@ -37,9 +39,6 @@ const CheckboxGroup = forwardRef((props, ref) => {
         }
         return arr;
     };
-    const getValue = () => {
-        return getSelectionValue();
-    };
     const resetValue = () => {
         Object.keys(groupValue).forEach((key) => {
             groupValue[key].checked = false;
@@ -54,15 +53,13 @@ const CheckboxGroup = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const notifyChange = (evt) => {
-        bindchange &&
-            bindchange(getCustomEvent('tap', evt, {
-                layoutRef,
-                detail: {
-                    value: getSelectionValue()
-                }
-            }, props));
-    };
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -70,8 +67,24 @@ const CheckboxGroup = forwardRef((props, ref) => {
     }, [], {
         layoutRef
     });
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
     return (<View {...innerProps}>
-      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+      <CheckboxGroupContext.Provider value={contextValue}>
         {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current
@@ -79,5 +92,5 @@ const CheckboxGroup = forwardRef((props, ref) => {
       </CheckboxGroupContext.Provider>
     </View>);
 });
-CheckboxGroup.displayName = 'mpx-checkbox-group';
+CheckboxGroup.displayName = 'MpxCheckboxGroup';
 export default CheckboxGroup;

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -136,5 +136,5 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         })}
       </View>);
 });
-Checkbox.displayName = 'mpx-checkbox';
+Checkbox.displayName = 'MpxCheckbox';
 export default Checkbox;

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -5,40 +5,21 @@
  * ✔ bindreset
  */
 import { View } from 'react-native';
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, useMemo } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
-    const formValuesMap = useRef(new Map()).current;
     const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const formRef = useRef(null);
     useNodesRef(props, ref, formRef);
+    const propsRef = useRef({});
+    propsRef.current = props;
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
-    const submit = () => {
-        const { bindsubmit } = props;
-        const formValue = {};
-        for (const name of formValuesMap.keys()) {
-            if (formValuesMap.get(name).getValue) {
-                formValue[name] = formValuesMap.get(name).getValue();
-            }
-        }
-        bindsubmit && bindsubmit(getCustomEvent('submit', {}, {
-            detail: {
-                value: formValue
-            },
-            layoutRef
-        }, props));
-    };
-    const reset = () => {
-        const { bindreset } = props;
-        bindreset && bindreset();
-        formValuesMap.forEach(item => item.resetValue());
-    };
     const innerProps = useInnerProps(props, {
         style: { ...innerStyle, ...layoutStyle },
         ref: formRef,
@@ -47,8 +28,36 @@ const _Form = forwardRef((fromProps, ref) => {
         'bindsubmit',
         'bindreset'
     ], { layoutRef });
+    const contextValue = useMemo(() => {
+        const formValuesMap = new Map();
+        const submit = () => {
+            const { bindsubmit } = propsRef.current;
+            const formValue = {};
+            for (const name of formValuesMap.keys()) {
+                if (formValuesMap.get(name).getValue) {
+                    formValue[name] = formValuesMap.get(name).getValue();
+                }
+            }
+            bindsubmit && bindsubmit(getCustomEvent('submit', {}, {
+                detail: {
+                    value: formValue
+                },
+                layoutRef
+            }, propsRef.current));
+        };
+        const reset = () => {
+            const { bindreset } = propsRef.current;
+            bindreset && bindreset();
+            formValuesMap.forEach(item => item.resetValue());
+        };
+        return {
+            formValuesMap,
+            submit,
+            reset
+        };
+    }, []);
     return (<View {...innerProps}>
-      <FormContext.Provider value={{ formValuesMap, submit, reset }}>
+      <FormContext.Provider value={contextValue}>
         {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,
@@ -58,5 +67,5 @@ const _Form = forwardRef((fromProps, ref) => {
       </FormContext.Provider>
     </View>);
 });
-_Form.displayName = 'mpx-form';
+_Form.displayName = 'MpxForm';
 export default _Form;

package/lib/runtime/components/react/dist/mpx-icon.jsx

@@ -45,5 +45,5 @@ const Icon = forwardRef((props, ref) => {
     });
     return <Image {...innerProps}/>;
 });
-Icon.displayName = 'mpx-icon';
+Icon.displayName = 'MpxIcon';
 export default Icon;

package/lib/runtime/components/react/dist/mpx-image/index.jsx

@@ -222,5 +222,5 @@ const Image = forwardRef((props, ref) => {
             }}/>}
     </View>);
 });
-Image.displayName = 'mpx-image';
+Image.displayName = 'MpxImage';
 export default Image;