@mpxjs/webpack-plugin 2.9.69-beta.3 → 2.9.69-beta.4

package/lib/index.js

@@ -54,11 +54,13 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
+const styleStripConditaionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
 const extractorPath = normalize.lib('extractor')
+const selectorPath = normalize.lib('selector')
 const async = require('async')
 const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
@@ -1775,7 +1777,7 @@ try {
       })
 
       const typeLoaderProcessInfo = {
-        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath],
+        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath, styleStripConditaionalPath],
         template: ['node_modules/html-loader', wxmlLoaderPath, templateCompilerPath]
       }
 
@@ -1833,6 +1835,20 @@ try {
               loader: extractorPath
             })
           }
+          if (type === 'styles') {
+            // 判断最后一个loader是否是 selectorPath, 如果是，则在sectorPath之前插入strip-conditional
+            const lastLoader = loaders[loaders.length - 1]
+            if (lastLoader.loader.includes(selectorPath)) {
+              loaders.splice(loaders.length - 1, 0, {
+                loader: styleStripConditaionalPath
+              })
+            } else {
+              // 在最后一个插入strip-conditional
+              loaders.push({
+                loader: styleStripConditaionalPath
+              })
+            }
+          }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效

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

@@ -374,11 +374,11 @@ module.exports = function getSpec ({ warn, error }) {
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     // css var & 数组直接返回
-    if (Array.isArray(value) || calcExp.test(value)) return { prop, value }
+    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]
@@ -407,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 = 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
+          {
+            // 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:

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/scroll-view.js

@@ -53,7 +53,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/react/processScript.js

@@ -26,7 +26,7 @@ module.exports = function (script, {
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
-import { Provider } from '@ant-design/react-native'
+import Provider from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-provider'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 

package/lib/resolver/AddEnvPlugin.js

@@ -34,6 +34,7 @@ module.exports = class AddEnvPlugin {
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
+      // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)

package/lib/resolver/AddModePlugin.js

@@ -43,6 +43,7 @@ module.exports = class AddModePlugin {
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
           obj.query = stringifyQuery(queryObj)
           obj.path = addInfix(resourcePath, defaultMode, extname)
           resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {

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

@@ -32,6 +32,23 @@ export interface IntersectionObserver {
     throttleMeasure: () => void
   }
 }
+export interface PortalManagerContextValue {
+  mount: (key: number, children: React.ReactNode) => void
+  update: (key: number, children: React.ReactNode) => void
+  unmount: (key: number) => void,
+  portals: Array<{key: number, children: React.ReactNode}>
+}
+
+export interface PortalContextValue {
+  mount: (children: React.ReactNode, key?: number, pageId?: number|null) => number| undefined
+  update: (key: number, children: React.ReactNode, pageId?: number|null) => void
+  unmount: (key: number, pageId?: number|null) => void
+  manager?: PortalManagerContextValue
+}
+
+export interface ScrollViewContextValue {
+   gestureRef: React.RefObject<any> | null
+}
 
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
@@ -51,4 +68,12 @@ 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 })
+
+export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const PortalManagerContext = createContext<PortalManagerContextValue| null>(null)

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

@@ -11,3 +11,5 @@ export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null });
+export const PortalContext = createContext(null);
+export const PortalManagerContext = createContext(null);

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

@@ -82,8 +82,8 @@ function checkIsNeedPress(e, type, ref) {
     const nativeEvent = e.nativeEvent;
     const currentPageX = nativeEvent.changedTouches[0].pageX;
     const currentPageY = nativeEvent.changedTouches[0].pageY;
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         ref.current.needPress[type] = false;
         ref.current.startTimer[type] &&
             clearTimeout(ref.current.startTimer[type]);

package/lib/runtime/components/react/dist/locale-provider.jsx

@@ -0,0 +1,15 @@
+import { createContext, useMemo, memo } from 'react';
+import { extendObject } from './utils';
+export const LocaleContext = createContext(undefined);
+const LocaleProvider = (props) => {
+    const locale = useMemo(() => {
+        return {
+            antLocale: extendObject({}, props.locale, { exist: true })
+        };
+    }, [props.locale]);
+    return (<LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>);
+};
+LocaleProvider.displayName = 'LocaleProvider';
+export default memo(LocaleProvider);

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

@@ -34,10 +34,11 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, forwardRef, useContext } from 'react';
+import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -128,20 +129,16 @@ const Loading = ({ alone = false }) => {
 };
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
+    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled });
     let submitFn;
     let resetFn;
     if (formContext) {
         submitFn = formContext.submit;
         resetFn = formContext.reset;
     }
-    const refs = useRef({
-        hoverStartTimer: undefined,
-        hoverStayTimer: undefined
-    });
-    const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
@@ -224,32 +221,6 @@ const Button = forwardRef((buttonProps, ref) => {
             });
         }
     };
-    const setStayTimer = () => {
-        clearTimeout(refs.current.hoverStayTimer);
-        refs.current.hoverStayTimer = setTimeout(() => {
-            setIsHover(false);
-            clearTimeout(refs.current.hoverStayTimer);
-        }, hoverStayTime);
-    };
-    const setStartTimer = () => {
-        clearTimeout(refs.current.hoverStartTimer);
-        refs.current.hoverStartTimer = setTimeout(() => {
-            setIsHover(true);
-            clearTimeout(refs.current.hoverStartTimer);
-        }, hoverStartTime);
-    };
-    const onTouchStart = (evt) => {
-        bindtouchstart && bindtouchstart(evt);
-        if (disabled)
-            return;
-        setStartTimer();
-    };
-    const onTouchEnd = (evt) => {
-        bindtouchend && bindtouchend(evt);
-        if (disabled)
-            return;
-        setStayTimer();
-    };
     const handleFormTypeFn = () => {
         if (formType === 'submit') {
             submitFn && submitFn();
@@ -269,8 +240,6 @@ const Button = forwardRef((buttonProps, ref) => {
         ref: nodeRef,
         style: extendObject({}, innerStyle, layoutStyle)
     }, layoutProps, {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
     }), [
         'disabled',
@@ -288,12 +257,15 @@ const Button = forwardRef((buttonProps, ref) => {
         layoutRef,
         disableTap: disabled
     });
-    return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     }));
+    return enableHoverStyle
+        ? createElement(GestureDetector, { gesture }, baseButton)
+        : baseButton;
 });
 Button.displayName = 'MpxButton';
 export default Button;

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

@@ -268,14 +268,8 @@ const Image = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    return createElement(View, innerProps, isSvg
-        ? createElement(SvgCssUri, {
-            uri: src,
-            onLayout: onSvgLoad,
-            onError: binderror && onSvgError,
-            style: extendObject({ transformOrigin: 'top left' }, modeStyle)
-        })
-        : loaded && renderImage({
+    const createBaseImage = (innerProps = {}) => {
+        return renderImage(extendObject({
             source: { uri: src },
             resizeMode: resizeMode,
             onLoad: bindload && onImageLoad,
@@ -285,7 +279,17 @@ const Image = forwardRef((props, ref) => {
                 width: isCropMode ? imageWidth : '100%',
                 height: isCropMode ? imageHeight : '100%'
             }, isCropMode ? modeStyle : {})
-        }, enableFastImage));
+        }, innerProps), enableFastImage);
+    };
+    const SvgImage = createElement(View, innerProps, createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
+        style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+    }));
+    const BaseImage = createBaseImage(innerProps);
+    const LayoutImage = createElement(View, innerProps, loaded && createBaseImage());
+    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
 });
 Image.displayName = 'mpx-image';
 export default Image;

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView, Portal } from '@ant-design/react-native';
+import Portal from '../mpx-portal';
+import { PickerView } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。

package/lib/runtime/components/react/dist/mpx-picker-view-column.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, useDebounceCallback, useStableCallback } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -49,7 +49,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         return index * itemRawH;
     }, [itemRawH]);
     const stableResetScrollPosition = useStableCallback((y) => {
-        console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current);
+        // console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current, itemRawH, 'snapToOffsets=', snapToOffsets)
         if (touching.current || scrolling.current) {
             return;
         }
@@ -95,8 +95,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
     };
     const onScrollBeginDrag = () => {
@@ -111,7 +112,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         touching.current = false;
         const { y } = e.nativeEvent.contentOffset;
         if (isIOS) {
-            if (y > 0 && y < snapToOffsets[maxIndex]) {
+            if (y >= 0 && y <= snapToOffsets[maxIndex]) {
                 debounceResetScrollPosition(y);
             }
         }
@@ -123,25 +124,23 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const onMomentumScrollEnd = (e) => {
         scrolling.current = false;
         const { y: scrollY } = e.nativeEvent.contentOffset;
+        // console.log('[mpx-picker-view-column], onMomentumScrollEnd --->', 'columnIndex=', columnIndex, scrollY, itemRawH)
         if (isIOS && scrollY % itemRawH !== 0) {
             return debounceResetScrollPosition(scrollY);
         }
         const calcIndex = getIndex(scrollY);
-        activeIndex.current = calcIndex;
-        if (calcIndex !== initialIndex) {
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
             onSelectChange(calcIndex);
         }
     };
     const onScroll = (e) => {
-        const { y } = e.nativeEvent.contentOffset;
-        if (isAndroid) {
-            return;
-        }
-        // 全局注册的震动触感 hook
-        const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate;
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
         if (typeof pickerVibrate !== 'function') {
             return;
         }
+        const { y } = e.nativeEvent.contentOffset;
         const { index: prevIndex, y: _y } = prevScrollingInfo.current;
         if (touching.current || scrolling.current) {
             if (Math.abs(y - _y) >= itemRawH) {

package/lib/runtime/components/react/dist/mpx-portal/portal-consumer.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFocusedNavigation } from '@mpxjs/utils';
+const PortalConsumer = ({ manager, children }) => {
+    const keyRef = useRef(null);
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        manager.update(keyRef.current, children, curPageId);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n');
+        }
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        keyRef.current = manager.mount(children, undefined, curPageId);
+        return () => {
+            manager.unmount(keyRef.current, curPageId);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

package/lib/runtime/components/react/dist/mpx-portal/portal-host.jsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { getFocusedNavigation } from '@mpxjs/utils';
+import { PortalContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const _queue = useRef([]);
+    const _addType = useRef(null);
+    const _removeType = useRef(null);
+    const manager = useRef(null);
+    let currentPageId;
+    const _mount = (children, _key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        const key = _key || _nextKey.current++;
+        if (manager.current) {
+            manager.current.mount(key, children);
+        }
+        else {
+            _queue.current.push({ type: 'mount', key, children });
+        }
+        return key;
+    };
+    const _unmount = (key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            _queue.current.push({ type: 'unmount', key });
+        }
+    };
+    const _update = (key, children, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const op = { type: 'mount', key, children };
+            const index = _queue.current.findIndex((o) => o.type === 'mount' || (o.type === 'update' && o.key === key));
+            if (index > -1) {
+                _queue.current[index] = op;
+            }
+            else {
+                _queue.current.push(op);
+            }
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        return () => {
+            while (_queue.current.length && manager.current) {
+                const action = _queue.current.pop();
+                if (!action) {
+                    continue;
+                }
+                // tslint:disable-next-line:switch-default
+                switch (action.type) {
+                    case 'mount':
+                        manager.current?.mount(action.key, action.children);
+                        break;
+                    case 'update':
+                        manager.current?.update(action.key, action.children);
+                        break;
+                    case 'unmount':
+                        manager.current?.unmount(action.key);
+                        break;
+                }
+            }
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -0,0 +1,40 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return { ...item, children };
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -0,0 +1,12 @@
+import { PortalContext } from './context';
+import PortalConsumer from './mpx-portal/portal-consumer';
+import PortalHost, { portal } from './mpx-portal/portal-host';
+const Portal = ({ children }) => {
+    return (<PortalContext.Consumer>
+      {(manager) => (<PortalConsumer manager={manager}>{children}</PortalConsumer>)}
+    </PortalContext.Consumer>);
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+export default Portal;