@mpxjs/webpack-plugin 2.9.66 → 2.9.67

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()
@@ -64,7 +64,7 @@ module.exports = function (template, {
       const { root, meta } = templateCompiler.parse(template.content, {
         warn,
         error,
-        usingComponents,
+        usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
         hasComment,
         isNative,
         ctorType,

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/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;

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

@@ -121,27 +121,24 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const onInputFocus = (evt) => {
-        bindfocus &&
-            bindfocus(getCustomEvent('focus', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
+        bindfocus(getCustomEvent('focus', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
     };
     const onInputBlur = (evt) => {
-        bindblur &&
-            bindblur(getCustomEvent('blur', evt, {
-                detail: {
-                    value: tmpValue.current || '',
-                    cursor: cursorIndex.current
-                },
-                layoutRef
-            }, props));
+        bindblur(getCustomEvent('blur', evt, {
+            detail: {
+                value: tmpValue.current || '',
+                cursor: cursorIndex.current
+            },
+            layoutRef
+        }, props));
     };
     const onKeyPress = (evt) => {
-        bindconfirm &&
-            evt.nativeEvent.key === 'Enter' &&
+        evt.nativeEvent.key === 'Enter' &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
                     value: tmpValue.current || ''
@@ -150,14 +147,21 @@ const Input = forwardRef((props, ref) => {
             }, props));
     };
     const onSubmitEditing = (evt) => {
-        bindconfirm &&
-            multiline &&
-            bindconfirm(getCustomEvent('confirm', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
+        bindconfirm(getCustomEvent('confirm', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
+    };
+    const onSelectionChange = (evt) => {
+        bindselectionchange(getCustomEvent('selectionchange', evt, {
+            detail: {
+                selectionStart: evt.nativeEvent.selection.start,
+                selectionEnd: evt.nativeEvent.selection.end
+            },
+            layoutRef
+        }, props));
     };
     const onContentSizeChange = (evt) => {
         const { width, height } = evt.nativeEvent.contentSize;
@@ -178,16 +182,6 @@ const Input = forwardRef((props, ref) => {
             setContentHeight(height);
         }
     };
-    const onSelectionChange = (evt) => {
-        bindselectionchange &&
-            bindselectionchange(getCustomEvent('selectionchange', evt, {
-                detail: {
-                    selectionStart: evt.nativeEvent.selection.start,
-                    selectionEnd: evt.nativeEvent.selection.end
-                },
-                layoutRef
-            }, props));
-    };
     const resetValue = () => {
         setInputValue('');
     };
@@ -202,6 +196,13 @@ const Input = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     useUpdateEffect(() => {
         if (!nodeRef?.current) {
             return;
@@ -220,11 +221,16 @@ const Input = forwardRef((props, ref) => {
                 height: Math.max(composeStyle?.minHeight || 35, contentHeight)
             }
         },
-        ...layoutProps
+        ...layoutProps,
+        onFocus: bindfocus && onInputFocus,
+        onBlur: bindblur && onInputBlur,
+        onKeyPress: bindconfirm && onKeyPress,
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+        onSelectionChange: bindselectionchange && onSelectionChange
     }, [], {
         layoutRef
     });
-    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange}/>);
+    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onContentSizeChange={onContentSizeChange}/>);
 });
-Input.displayName = 'mpx-input';
+Input.displayName = 'MpxInput';
 export default Input;

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

@@ -1,7 +1,7 @@
 /**
  * ✘ for
  */
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
@@ -10,7 +10,9 @@ import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } fr
 import { LabelContext } from './context';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
+    const propsRef = useRef({});
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    propsRef.current = props;
     const defaultStyle = {
         flexDirection: 'row'
     };
@@ -29,10 +31,11 @@ const Label = forwardRef((labelProps, ref) => {
     const contextRef = useRef({
         triggerChange: noop
     });
-    const onTap = (evt) => {
-        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
-        contextRef.current.triggerChange?.(evt);
-    };
+    const onTap = useCallback((evt) => {
+        const { bindtap } = propsRef.current;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
+        contextRef.current.triggerChange(evt);
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...innerStyle, ...layoutStyle },
@@ -52,5 +55,5 @@ const Label = forwardRef((labelProps, ref) => {
       </LabelContext.Provider>
     </View>;
 });
-Label.displayName = 'mpx-label';
+Label.displayName = 'MpxLabel';
 export default Label;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -2,34 +2,27 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const [areaWidth, setAreaWidth] = useState(0);
-    const [areaHeight, setAreaHeight] = useState(0);
-    useEffect(() => {
-        setAreaWidth(width);
-        setAreaHeight(height);
-    }, [width, height]);
+    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 movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef);
-    const onLayout = (e) => {
-        const { width = 10, height = 10 } = e.nativeEvent.layout;
-        setAreaWidth(width);
-        setAreaHeight(height);
-    };
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout });
+    const contextValue = useMemo(() => ({
+        height: normalStyle.height || 10,
+        width: normalStyle.width || 10
+    }), [normalStyle.width, normalStyle.height]);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
     const innerProps = useInnerProps(props, {
-        style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
+        style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
         ref: movableViewRef,
         ...layoutProps
     }, [], { layoutRef });
-    return (<MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
+    return (<MovableAreaContext.Provider value={contextValue}>
       <View {...innerProps}>
       {wrapChildren(props, {
             hasVarDec,
@@ -38,5 +31,5 @@ const _MovableArea = forwardRef((props, ref) => {
       </View>
     </MovableAreaContext.Provider>);
 });
-_MovableArea.displayName = 'mpx-movable-area';
+_MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;