Merge pull request #1781 from didi/feat-mp-parent-reference

Feat: provide/inject 完善小程序父组件继承 & 支持 RN

Author: hiyuki

docs-vitepress/guide/advance/provide-inject.md

@@ -244,5 +244,24 @@ const foo = inject(key, 1) // ❌ 默认值是非字符串则会 TS 类型报错
 
 ## 跨端差异
 
-- Mpx 输出 Web 端后，使用规则与 Vue 一致，`provide/inject` 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。
-- Mpx 输出小程序端会略有不同，由于小程序原生框架限制，暂时无法在子组件获取真实渲染时的父组件引用关系，所以不能像 Vue 那样基于父组件原型继承来实现 `provide`。在 Mpx 底层实现中，我们将组件层的 `provide` 挂载在所属页面实例上，相当于将组件 scope 提升到页面 scope，可以理解成一种“降级模拟”。当然，这并不影响父组件向子孙组件 `provide` 的能力，只是会额外存在“**副作用**”：同一页面中的组件可以向页面中其他所有在其之后渲染子组件提供依赖。比如同一页面下的组件 A 可以向后渲染的兄弟组件 B 的子孙组件提供数据，这在 Web 端是不允许的。因此，针对小程序端可能出现的“副作用”需要开发者自行保证，可以结合上述注入名的管理优化来规避。
+- Mpx 输出 **Web** 端，使用规则与 Vue 一致，`provide/inject` 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。
+- Mpx 输出 **RN** 端，框架内部基于 React 的 `useContext` 钩子来转换实现，表现和 Web 端一致。
+- Mpx 输出 **小程序** 端同样遵循类似 Vue 的父子组件关系，但是在 `slot` 场景下小程序表现会和 Web、RN 端略有差异。举个例子，如下代码所示：在组件 A 的 `template` 模板中包含子组件 B，然后组件 B 通过 `slot` 包含子组件 C，组件 B 和 C 都定义在组件 A 的模板中。该场景下：在 Web 端，组件 A 是 B 的父组件，B 是 C 的父组件，所以 A 和 B 都可以向 C 提供依赖。但在小程序端，B 和 C 的父组件都是 A，组件 B 不能再向 C 提供依赖。这个跨端差异或者说“副作用”可以理解成：Web 端是基于“节点树”，即虚拟组件节点纬度，而小程序的父子组件关系是基于“组件树”，即组件模板维度，也就是说当前组件的创建者（在 WXML/AXML 模板中定义了此组件的组件）才是它的父组件。
+
+```html
+<!-- ComponentA -->
+<template>
+  <view>组件 A</view>
+  <ComponentB>
+    <ComponentC></ComponentC>
+  </ComponentB>
+</template>
+
+<!-- ComponentB -->
+<template>
+  <view>
+    <view>组件 B</view>
+    <slot></slot>
+  </view>
+</template>
+```

packages/core/src/core/proxy.js

@@ -171,6 +171,8 @@ export default class MpxProxy {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
       setCurrentInstance(this)
+      this.parent = this.resolveParent()
+      this.provides = this.parent ? this.parent.provides : Object.create(null)
       // 在 props/data 初始化之前初始化 inject
       this.initInject()
       this.initProps()
@@ -195,6 +197,18 @@ export default class MpxProxy {
     }
   }
 
+  resolveParent () {
+    if (isReact) {
+      return {
+        provides: this.target.__getParentProvides
+      }
+    }
+    if (isFunction(this.target.selectOwnerComponent)) {
+      const parent = this.target.selectOwnerComponent()
+      return parent ? parent.__mpxProxy : null
+    }
+  }
+
   createRenderTask (isEmptyRender) {
     if ((!this.isMounted() && this.currentRenderTask) || (this.isMounted() && isEmptyRender)) {
       return
@@ -234,16 +248,6 @@ export default class MpxProxy {
       // 页面/组件销毁清除上下文的缓存
       contextMap.remove(this.uid)
     }
-    if (!isWeb && this.options.__type__ === 'page') {
-      // 小程序页面销毁时移除对应的 provide
-      if (isFunction(this.target.getPageId)) {
-        const pageId = this.target.getPageId()
-        const providesMap = global.__mpxProvidesMap
-        if (providesMap.__pages[pageId]) {
-          delete providesMap.__pages[pageId]
-        }
-      }
-    }
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false

packages/core/src/platform/createApp.ios.js

@@ -7,6 +7,7 @@ import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
 import { Image } from 'react-native'
+import { initAppProvides } from './export/inject'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -35,6 +36,7 @@ export default function createApp (options) {
   const { NavigationContainer, createStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
   const { rawOptions, currentInject } = transferOptions(options, 'app', false)
+  initAppProvides(rawOptions.provide, rawOptions)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
   // 在页面script执行前填充getApp()
   global.getApp = function () {

packages/core/src/platform/export/inject.js

@@ -1,14 +1,8 @@
 import { callWithErrorHandling, isFunction, isObject, warn } from '@mpxjs/utils'
 import { currentInstance } from '../../core/proxy'
 
-const providesMap = {
-  /** 全局 scope */
-  __app: Object.create(null),
-  /** 页面 scope */
-  __pages: Object.create(null)
-}
-
-global.__mpxProvidesMap = providesMap
+/** 全局 scope */
+let appProvides = Object.create(null)
 
 /** @internal createApp() 初始化应用层 scope provide */
 export function initAppProvides (provideOpt, instance) {
@@ -17,22 +11,20 @@ export function initAppProvides (provideOpt, instance) {
       ? callWithErrorHandling(provideOpt.bind(instance), instance, 'createApp provide function')
       : provideOpt
     if (isObject(provided)) {
-      providesMap.__app = provided
+      appProvides = provided
     } else {
       warn('App provides must be an object or a function that returns an object.')
     }
   }
 }
 
-function resolvePageId (context) {
-  if (context && isFunction(context.getPageId)) {
-    return context.getPageId()
+function resolveProvides (vm) {
+  const provides = vm.provides
+  const parentProvides = vm.parent && vm.parent.provides
+  if (parentProvides === provides) {
+    return (vm.provides = Object.create(parentProvides))
   }
-}
-
-function resolvePageProvides (context) {
-  const pageId = resolvePageId(context)
-  return providesMap.__pages[pageId] || (providesMap.__pages[pageId] = Object.create(null))
+  return provides
 }
 
 export function provide (key, value) {
@@ -41,8 +33,7 @@ export function provide (key, value) {
     warn('provide() can only be used inside setup().')
     return
   }
-  // 小程序无法实现组件父级引用，所以 provide scope 设置为组件所在页面
-  const provides = resolvePageProvides(instance.target)
+  const provides = resolveProvides(instance)
   provides[key] = value
 }
 
@@ -52,11 +43,11 @@ export function inject (key, defaultValue, treatDefaultAsFactory = false) {
     warn('inject() can only be used inside setup()')
     return
   }
-  const provides = resolvePageProvides(instance.target)
-  if (key in provides) {
+  const provides = instance.parent && instance.parent.provides
+  if (provides && key in provides) {
     return provides[key]
-  } else if (key in providesMap.__app) {
-    return providesMap.__app[key]
+  } else if (key in appProvides) {
+    return appProvides[key]
   } else if (arguments.length > 1) {
     return treatDefaultAsFactory && isFunction(defaultValue)
       ? defaultValue.call(instance && instance.target)

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -11,6 +11,8 @@ import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { IntersectionObserverContext, RouteContext, KeyboardAvoidContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
+const ProviderContext = createContext(null)
+
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
   const screen = ReactNative.Dimensions.get('screen')
@@ -193,7 +195,7 @@ const instanceProto = {
   }
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation, parentProvides }) {
   const instance = Object.create(instanceProto, {
     dataset: {
       get () {
@@ -244,6 +246,12 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         return currentInject.getRefsData || noop
       },
       enumerable: false
+    },
+    __getParentProvides: {
+      get () {
+        return parentProvides || null
+      },
+      enumerable: false
     }
   })
 
@@ -435,6 +443,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const propsRef = useRef(null)
     const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
+    const parentProvides = useContext(ProviderContext)
     let relation = null
     if (hasDescendantRelation || hasAncestorRelation) {
       relation = useContext(RelationsContext)
@@ -443,7 +452,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation, parentProvides })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -536,6 +545,12 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       // update root props
       root = cloneElement(root, rootProps)
     }
+
+    const provides = proxy.provides
+    if (provides) {
+      root = createElement(ProviderContext.Provider, { value: provides }, root)
+    }
+
     return hasDescendantRelation
       ? createElement(RelationsContext.Provider,
           {