@mpxjs/core 2.9.62 → 2.9.64

package/@types/global.d.ts

@@ -8,4 +8,4 @@ declare let __mpx_env__: string
 declare module '*?resolve' {
   const resourcePath: string
   export default resourcePath
-}
+}

package/@types/index.d.ts

@@ -7,10 +7,8 @@
 /// <reference path="./global.d.ts" />
 /// <reference path="./node.d.ts" />
 
-// @ts-ignore
 import { GetComputedType } from '@mpxjs/store'
 
-// @ts-ignore
 export * from '@mpxjs/store'
 
 // utils
@@ -34,7 +32,7 @@ type Data = object | (() => object)
 export type PropType<T> = {
   __type: T
 } & (
-    T extends String
+    T extends string
     ? StringConstructor
     : T extends number
     ? NumberConstructor
@@ -427,9 +425,7 @@ export interface ComputedRef<T = any> extends WritableComputedRef<T> {
   [ComputedRefSymbol]: true
 }
 
-export interface WritableComputedRef<T> extends Ref<T> {
-  // readonly effect: ReactiveEffect<T>
-}
+export type WritableComputedRef<T> = Ref<T>
 
 type WatchCallback<T> = (
   value: T,
@@ -463,7 +459,6 @@ interface EffectScope {
   resume (ignoreDirty?: boolean): void
 }
 
-
 type StringObj = {
   [k: string]: string | StringObj
 }
@@ -490,7 +485,6 @@ interface UseI18n {
   mergeLocaleMessage (locale: string, messages: StringObj): void
 }
 
-
 export function ref<T extends object> (
   value: T
 ): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>
@@ -530,7 +524,6 @@ export function computed<T> (
   options: WritableComputedOptions<T>
 ): WritableComputedRef<T>
 
-
 export function watchEffect (
   effect: (onCleanup: (cleanupFn: () => void) => void) => void,
   options?: WatchEffectOptions
@@ -546,7 +539,6 @@ export function watchPostEffect (
   options?: WatchEffectOptions
 ): void
 
-
 export function watch<T extends MultiWatchSources> (
   sources: [...T],
   callback: WatchCallback<{

package/@types/node.d.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 declare let global: Record<string, any> // in web, we use global varible to do some things, here to declare
 
 type Dict<T> = {
@@ -7,7 +6,6 @@ type Dict<T> = {
 
 type EnvType = Dict<string>
 
-// @ts-ignore
 declare let process: {
   env: EnvType
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.62",
+  "version": "2.9.64",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.59",
+    "@mpxjs/utils": "^2.9.64",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -93,5 +93,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "c31a343e7ef2c1c1585002752d8c50f016a858ae"
+  "gitHead": "803334dc0e600f219d514c27461aa7663b7a6653"
 }

package/src/convertor/wxToReact.js

@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage', 'options']
+const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)

package/src/index.js

@@ -138,6 +138,7 @@ Mpx.config = {
   ignoreProxyWhiteList: ['id', 'dataset', 'data'],
   observeClassInstance: false,
   errorHandler: null,
+  warnHandler: null,
   proxyEventHandler: null,
   setDataHandler: null,
   forceFlushSync: false,

package/src/platform/builtInMixins/index.js

@@ -14,13 +14,13 @@ import { dynamicRefsMixin, dynamicRenderHelperMixin, dynamicSlotMixin } from '..
 import styleHelperMixin from './styleHelperMixin'
 import directiveHelperMixin from './directiveHelperMixin'
 
-export default function getBuiltInMixins (options, type) {
+export default function getBuiltInMixins ({ type, rawOptions = {} }) {
   let bulitInMixins
   if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
     bulitInMixins = [
       proxyEventMixin(),
       directiveHelperMixin(),
-      styleHelperMixin(type),
+      styleHelperMixin(),
       refsMixin(),
       i18nMixin()
     ]
@@ -46,7 +46,7 @@ export default function getBuiltInMixins (options, type) {
       relationsMixin(type)
     ]
     // 此为纯增强类mixins，原生模式下不需要注入
-    if (!options.__nativeRender__) {
+    if (!rawOptions.__nativeRender__) {
       bulitInMixins = bulitInMixins.concat([
         renderHelperMixin(),
         showMixin(type),

package/src/platform/builtInMixins/refsMixin.ios.js

@@ -1,78 +1,55 @@
-import { BEFORECREATE, CREATED } from '../../core/innerLifecycle'
+import { BEFORECREATE } from '../../core/innerLifecycle'
 import { createSelectorQuery } from '@mpxjs/api-proxy'
-import { computed } from '../../observer/computed'
 
 export default function getRefsMixin () {
   return {
     [BEFORECREATE] () {
       this.__refs = {}
       this.$refs = {}
-    },
-    // __getRefs强依赖数据响应，需要在CREATED中执行
-    [CREATED] () {
       this.__getRefs()
     },
     methods: {
       __getRefs () {
         const refs = this.__getRefsData() || []
         const target = this
-        this.__selectorMap = computed(() => {
-          const selectorMap = {}
-          refs.forEach(({ key, type, sKeys }) => {
-            // sKeys 是使用 wx:ref 没有值的标记场景，支持运行时的 createSelectorQuery 的使用
-            if (sKeys) {
-              sKeys.forEach((item = {}) => {
-                const computedKey = item.key
-                const prefix = item.prefix
-                const selectors = this[computedKey] || ''
-                selectors.trim().split(/\s+/).forEach(item => {
-                  const selector = prefix + item
-                  selectorMap[selector] = selectorMap[selector] || []
-                  selectorMap[selector].push({ type, key })
-                })
-              })
-            } else {
-              selectorMap[key] = selectorMap[key] || []
-              selectorMap[key].push({ type, key })
+        refs.forEach(({ key, type, all }) => {
+          Object.defineProperty(this.$refs, key, {
+            enumerable: true,
+            configurable: true,
+            get () {
+              if (type === 'component') {
+                return all ? target.selectAllComponents(key) : target.selectComponent(key)
+              } else {
+                return createSelectorQuery().in(target).select(key, all)
+              }
             }
           })
-          return selectorMap
-        })
-        refs.forEach(({ key, type, all, sKeys }) => {
-          // 如果没有 sKey 说明使用的是 wx:ref="xxx" 的场景
-          if (!sKeys) {
-            Object.defineProperty(this.$refs, key, {
-              enumerable: true,
-              configurable: true,
-              get () {
-                const refs = target.__refs[key] || []
-                if (type === 'component') {
-                  return all ? refs : refs[0]
-                } else {
-                  return createSelectorQuery().in(target).select(key, all)
-                }
-              }
-            })
-          }
         })
       },
-      __getRefVal (key) {
+      __getRefVal (type, selectorsConf) {
         return (instance) => {
           if (instance) {
-            this.__refs[key] = this.__refs[key] || []
-            this.__refs[key].push(instance)
+            selectorsConf.forEach((item = []) => {
+              const [prefix, selectors = ''] = item
+              if (selectors) {
+                selectors.trim().split(/\s+/).forEach(selector => {
+                  const refKey = prefix + selector
+                  this.__refs[refKey] = this.__refs[refKey] || []
+                  this.__refs[refKey].push({ type, instance })
+                })
+              }
+            })
           }
         }
       },
       __selectRef (selector, refType, all = false) {
         const splitedSelector = selector.match(/(#|\.)?[^.#]+/g) || []
         const refsArr = splitedSelector.map(selector => {
-          const selectorMap = this.__selectorMap?.value[selector] || []
+          const refs = this.__refs[selector] || []
           const res = []
-          selectorMap.forEach(({ type, key }) => {
+          refs.forEach(({ type, instance }) => {
             if (type === refType) {
-              const _refs = this.__refs[key] || []
-              res.push(..._refs)
+              res.push(instance)
             }
           })
           return res

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,5 +1,56 @@
-import { isObject, isArray, dash2hump, isFunction } from '@mpxjs/utils'
-import { Dimensions } from 'react-native'
+import { isObject, isArray, dash2hump, isFunction, cached } from '@mpxjs/utils'
+import { Dimensions, StyleSheet } from 'react-native'
+
+function rpx (value) {
+  const { width } = Dimensions.get('screen')
+  // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
+  // px = rpx * (750 / 屏幕宽度)
+  return value * width / 750
+}
+function vw (value) {
+  const { width } = Dimensions.get('screen')
+  return value * width / 100
+}
+function vh (value) {
+  const { height } = Dimensions.get('screen')
+  return value * height / 100
+}
+
+global.__unit = {
+  rpx,
+  vw,
+  vh
+}
+global.__hairlineWidth = StyleSheet.hairlineWidth
+
+const escapeReg = /[()[\]{}#!.:,%'"+$]/g
+const escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '}': '_cr_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  '\'': '_q_',
+  '"': '_dq_',
+  '+': '_a_',
+  $: '_si_'
+}
+
+const mpEscape = cached((str) => {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // unknown escaped
+    return '_u_'
+  })
+})
 
 function concat (a = '', b = '') {
   return a ? b ? (a + ' ' + b) : a : b
@@ -41,10 +92,12 @@ function stringifyDynamicClass (value) {
 
 const listDelimiter = /;(?![^(]*[)])/g
 const propertyDelimiter = /:(.+)/
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
+const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 
-function parseStyleText (cssText = '') {
+const parseStyleText = cached((cssText = '') => {
   const res = {}
   const arr = cssText.split(listDelimiter)
   for (let i = 0; i < arr.length; i++) {
@@ -52,13 +105,14 @@ function parseStyleText (cssText = '') {
     if (item) {
       const tmp = item.split(propertyDelimiter)
       if (tmp.length > 1) {
-        const k = dash2hump(tmp[0].trim())
+        let k = tmp[0].trim()
+        k = varRegExp.test(k) ? k : dash2hump(k)
         res[k] = tmp[1].trim()
       }
     }
   }
   return res
-}
+})
 
 function normalizeDynamicStyle (value) {
   if (!value) return {}
@@ -79,48 +133,44 @@ function mergeObjectArray (arr) {
   return res
 }
 
-function transformStyleObj (context, styleObj) {
+function transformStyleObj (styleObj) {
   const keys = Object.keys(styleObj)
   const transformed = {}
   keys.forEach((prop) => {
-    // todo 检测不支持的prop
     let value = styleObj[prop]
     let matched
-    if ((matched = pxRegExp.exec(value))) {
+    if ((matched = numberRegExp.exec(value))) {
       value = +matched[1]
-    } else if ((matched = rpxRegExp.exec(value))) {
-      value = context.__rpx(+matched[1])
+    } else if ((matched = unitRegExp.exec(value))) {
+      value = global.__unit[matched[2]](+matched[1])
+    } else if (hairlineRegExp.test(value)) {
+      value = StyleSheet.hairlineWidth
     }
-    // todo 检测不支持的value
     transformed[prop] = value
   })
   return transformed
 }
 
-export default function styleHelperMixin (type) {
+export default function styleHelperMixin () {
   return {
     methods: {
-      __rpx (value) {
-        const { width } = Dimensions.get('screen')
-        // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
-        // px = rpx * (750 / 屏幕宽度)
-        return value * width / 750
-      },
       __getClass (staticClass, dynamicClass) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
-      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
-        // todo 每次返回新对象会导致react memo优化失效，需要考虑优化手段
+      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const result = {}
         const classMap = {}
-        if (type === 'page' && isFunction(global.__getAppClassMap)) {
-          Object.assign(classMap, global.__getAppClassMap.call(this))
+        // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
+        if (isFunction(global.__getAppClassMap)) {
+          Object.assign(classMap, global.__getAppClassMap())
         }
         if (isFunction(this.__getClassMap)) {
           Object.assign(classMap, this.__getClassMap())
         }
+
         if (staticClass || dynamicClass) {
-          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
+          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
+          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               Object.assign(result, classMap[className])
@@ -132,11 +182,11 @@ export default function styleHelperMixin (type) {
         }
 
         if (staticStyle || dynamicStyle) {
-          const styleObj = Object.assign(parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
-          Object.assign(result, transformStyleObj(this, styleObj))
+          const styleObj = Object.assign({}, parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
+          Object.assign(result, transformStyleObj(styleObj))
         }
 
-        if (show === false) {
+        if (hide) {
           Object.assign(result, {
             display: 'none'
           })

package/src/platform/patch/index.js

@@ -58,7 +58,7 @@ export default function createFactory (type) {
     // 不接受mixin中的setup配置
     // 注入内建的mixins, 内建mixin是按原始平台编写的，所以合并规则和rootMixins保持一致
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
-    rawOptions.mixins = getBuiltInMixins(rawOptions, type)
+    rawOptions.mixins = getBuiltInMixins({ type, rawOptions, currentInject })
     const defaultOptions = getDefaultOptions({ type, rawOptions, currentInject })
     if (__mpx_mode__ === 'web' || __mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}

package/src/platform/patch/react/getDefaultOptions.ios.js

@@ -1,9 +1,9 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment, cloneElement } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { watch } from '../../../observer/watch'
 import { reactive, set, del } from '../../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset, hump2dash } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
@@ -46,15 +46,31 @@ function createEffect (proxy, components) {
   proxy.effect = new ReactiveEffect(() => {
     // reset instance
     proxy.target.__resetInstance()
-    return proxy.target.__injectedRender(createElement, getComponent, proxy.target.__getRootProps())
+    return proxy.target.__injectedRender(createElement, getComponent)
   }, () => queueJob(update), proxy.scope)
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components }) {
+function getRootProps (props) {
+  const rootProps = {}
+  for (const key in props) {
+    if (hasOwn(props, key)) {
+      const match = /^(bind|catch|capture-bind|capture-catch|style|enable-var):?(.*?)(?:\.(.*))?$/.exec(key)
+      if (match) {
+        rootProps[key] = props[key]
+      }
+    }
+  }
+  return rootProps
+}
+
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
     },
+    getPageId () {
+      return pageId
+    },
     __getProps () {
       const props = propsRef.current
       const propsData = {}
@@ -62,31 +78,23 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         if (hasOwn(props, key)) {
           propsData[key] = props[key]
         } else {
-          let field = validProps[key]
-          if (isFunction(field) || field === null) {
-            field = {
-              type: field
+          const altKey = hump2dash(key)
+          if (hasOwn(props, altKey)) {
+            propsData[key] = props[altKey]
+          } else {
+            let field = validProps[key]
+            if (isFunction(field) || field === null) {
+              field = {
+                type: field
+              }
             }
+            // 处理props默认值
+            propsData[key] = field.value
           }
-          // 处理props默认值
-          propsData[key] = field.value
         }
       })
       return propsData
     },
-    __getRootProps () {
-      const props = propsRef.current
-      const rootProps = {}
-      for (const key in props) {
-        if (hasOwn(props, key)) {
-          const match = /^(bind|catch|capture-bind|capture-catch|style):?(.*?)(?:\.(.*))?$/.exec(key)
-          if (match) {
-            rootProps[key] = props[key]
-          }
-        }
-      }
-      return rootProps
-    },
     __resetInstance () {
       this.__refs = {}
       this.__dispatchedSlotSet = new WeakSet()
@@ -97,22 +105,19 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         const result = []
         if (Array.isArray(children)) {
           children.forEach(child => {
-            if (child && child.props && child.props.slot === name) {
+            if (child?.props?.slot === name) {
               result.push(child)
             }
           })
         } else {
-          if (children && children.props && children.props.slot === name) {
+          if (children?.props?.slot === name) {
             result.push(children)
           }
         }
         return result.filter(item => {
-          if (this.__dispatchedSlotSet.has(item)) {
-            return false
-          } else {
-            this.__dispatchedSlotSet.add(item)
-            return true
-          }
+          if (!isObject(item) || this.__dispatchedSlotSet.has(item)) return false
+          this.__dispatchedSlotSet.add(item)
+          return true
         })
       }
       return null
@@ -255,7 +260,7 @@ function hasPageHook (mpxProxy, hookNames) {
   })
 }
 
-const routeContext = createContext(null)
+const RouteContext = createContext(null)
 
 const triggerPageStatusHook = (mpxProxy, event) => {
   mpxProxy.callHook(event === 'show' ? ONSHOW : ONHIDE)
@@ -279,13 +284,7 @@ const triggerResizeEvent = (mpxProxy) => {
   }
 }
 
-function usePageContext (mpxProxy, instance) {
-  const { pageId } = useContext(routeContext) || {}
-
-  instance.getPageId = () => {
-    return pageId
-  }
-
+function usePageEffect (mpxProxy, pageId) {
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
@@ -302,7 +301,6 @@ function usePageContext (mpxProxy, instance) {
         })
       }
     }
-
     return () => {
       unWatch && unWatch()
     }
@@ -346,11 +344,12 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
+    const pageId = useContext(RouteContext)
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -364,9 +363,14 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     useEffect(() => {
       if (!isFirst) {
         // 处理props更新
-        Object.keys(props).forEach(key => {
-          if (hasOwn(validProps, key)) {
+        Object.keys(validProps).forEach((key) => {
+          if (hasOwn(props, key)) {
             instance[key] = props[key]
+          } else {
+            const altKey = hump2dash(key)
+            if (hasOwn(props, altKey)) {
+              instance[key] = props[altKey]
+            }
           }
         })
       }
@@ -376,7 +380,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }
     })
 
-    usePageContext(proxy, instance)
+    usePageEffect(proxy, pageId)
 
     useEffect(() => {
       if (type === 'page') {
@@ -385,6 +389,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       proxy.mounted()
       return () => {
         proxy.unmounted()
+        proxy.target.__resetInstance()
         if (type === 'page') {
           delete global.__mpxPagesMap[props.route.key]
         }
@@ -393,7 +398,14 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
 
-    return rawOptions.__disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
+    const root = rawOptions.options?.disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
+    if (root) {
+      const rootProps = getRootProps(props)
+      rootProps.style = { ...root.props.style, ...rootProps.style }
+      // update root props
+      return cloneElement(root, rootProps)
+    }
+    return root
   }))
 
   if (type === 'page') {
@@ -416,27 +428,28 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
       navigation.insets = useSafeAreaInsets()
 
-      return createElement(Provider,
-        null,
-        createElement(GestureHandlerRootView,
-          {
-            style: {
-              flex: 1,
-              backgroundColor: pageConfig.backgroundColor || '#ffffff'
-            },
-            onLayout (e) {
-              navigation.layout = e.nativeEvent.layout
-            }
+      return createElement(GestureHandlerRootView,
+        {
+          style: {
+            flex: 1,
+            backgroundColor: pageConfig.backgroundColor || '#ffffff'
           },
-          createElement(routeContext.Provider,
+          onLayout (e) {
+            navigation.layout = e.nativeEvent.layout
+          }
+        },
+        // todo custom portal host for active route
+        createElement(Provider,
+          null,
+          createElement(RouteContext.Provider,
             {
-              value: { pageId: currentPageId }
+              value: currentPageId
             },
             createElement(defaultOptions,
               {
                 navigation,
                 route,
-                pageConfig
+                id: currentPageId
               }
             )
           )