[feat]rn-relatons

packages/core/src/convertor/wxToReact.js

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

packages/core/src/platform/builtInMixins/index.js

@@ -22,7 +22,8 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
       directiveHelperMixin(),
       styleHelperMixin(),
       refsMixin(),
-      i18nMixin()
+      i18nMixin(),
+      relationsMixin(type)
     ]
   } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [

packages/core/src/platform/builtInMixins/relationsMixin.android.js

@@ -0,0 +1,2 @@
+import relationsMixin from './relationsMixin.ios'
+export default relationsMixin

packages/core/src/platform/builtInMixins/relationsMixin.ios.js

@@ -0,0 +1,83 @@
+import { BEFORECREATE, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
+
+const relationTypeMap = {
+  parent: 'child',
+  ancestor: 'descendant'
+}
+
+export default function relationsMixin (mixinType) {
+  if (mixinType === 'component') {
+    return {
+      [BEFORECREATE] () {
+        this.__mpxRelations = {}
+        this.__mpxRelationNodesMap = {}
+      },
+      [MOUNTED] () {
+        this.__mpxCollectRelations()
+        this.__mpxExecRelations('linked')
+      },
+      [BEFOREUNMOUNT] () {
+        this.__mpxExecRelations('unlinked')
+        this.__mpxRelations = {}
+        this.__mpxRelationNodesMap = {}
+      },
+      methods: {
+        getRelationNodes (path) {
+          return this.__mpxRelationNodesMap[path] || null
+        },
+        __mpxCollectRelations () {
+          const relations = this.__mpxProxy.options.relations
+          if (!relations) return
+          Object.keys(relations).forEach(path => {
+            const relation = relations[path]
+            this.__mpxCheckParent(this, relation, path)
+          })
+        },
+        __mpxCheckParent (current, relation, path) {
+          const type = relation.type
+          const relationMap = current.__relation
+          if (!relationMap) return
+
+          if (relationMap[path]) {
+            const target = relationMap[path]
+            const targetRelation = target.__mpxProxy.options.relations?.[this.__componentPath]
+            if (targetRelation && targetRelation.type === relationTypeMap[type] && target.__componentPath) {
+              this.__mpxRelations[path] = {
+                target,
+                targetRelation,
+                relation
+              }
+              this.__mpxRelationNodesMap[path] = [target]
+            }
+          }
+        },
+        __mpxExecRelations (type) {
+          Object.keys(this.__mpxRelations).forEach(path => {
+            const { target, targetRelation, relation } = this.__mpxRelations[path]
+            const currentPath = this.__componentPath
+            if (type === 'linked') {
+              this.__mpxLinkRelationNodes(target, currentPath)
+            } else if (type === 'unlinked') {
+              this.__mpxRemoveRelationNodes(target, currentPath)
+            }
+            if (typeof targetRelation[type] === 'function') {
+              targetRelation[type].call(target, this)
+            }
+            if (typeof relation[type] === 'function') {
+              relation[type].call(this, target)
+            }
+          })
+        },
+        __mpxLinkRelationNodes (target, path) {
+          target.__mpxRelationNodesMap[path] = target.__mpxRelationNodesMap[path] || [] // 父级绑定子级
+          target.__mpxRelationNodesMap[path].push(this)
+        },
+        __mpxRemoveRelationNodes (target, path) {
+          const arr = target.__mpxRelationNodesMap[path] || []
+          const index = arr.indexOf(this)
+          if (index !== -1) arr.splice(index, 1)
+        }
+      }
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement, createContext } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
@@ -193,7 +193,7 @@ const instanceProto = {
   }
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation }) {
   const instance = Object.create(instanceProto, {
     dataset: {
       get () {
@@ -233,6 +233,18 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       },
       enumerable: false
     },
+    __componentPath: {
+      get () {
+        return currentInject.componentPath || ''
+      },
+      enumerable: false
+    },
+    __relation: {
+      get () {
+        return relation
+      },
+      enumerable: false
+    },
     __injectedRender: {
       get () {
         return currentInject.render || noop
@@ -374,6 +386,43 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
+const RelationsContext = createContext(null)
+
+const needRelationContext = (options) => {
+  const relations = options.relations
+  if (!relations) return false
+  return Object.keys(relations).some((path) => {
+    const relation = relations[path]
+    const type = relation.type
+    return type === 'child' || type === 'descendant'
+  })
+}
+
+const provideRelation = (instance) => {
+  const componentPath = instance.__componentPath
+  const relation = instance.__relation
+  if (relation) {
+    if (!relation[componentPath]) {
+      relation[componentPath] = instance
+    }
+    return relation
+  } else {
+    return {
+      [componentPath]: instance
+    }
+  }
+}
+
+const wrapRelationProvider = (element, instance) => {
+  if (needRelationContext(instance.__mpxProxy.options)) {
+    return createElement(RelationsContext.Provider, {
+      value: provideRelation(instance)
+    }, element)
+  } else {
+    return element
+  }
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
@@ -384,11 +433,12 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const propsRef = useRef(null)
     const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
+    const relation = useContext(RelationsContext)
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -472,9 +522,9 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       const rootProps = getRootProps(props, validProps)
       rootProps.style = Object.assign({}, root.props.style, rootProps.style)
       // update root props
-      return cloneElement(root, rootProps)
+      return wrapRelationProvider(cloneElement(root, rootProps), instance)
     }
-    return root
+    return wrapRelationProvider(root, instance)
   }))
 
   if (rawOptions.options?.isCustomText) {

packages/webpack-plugin/lib/react/processScript.js

@@ -9,6 +9,7 @@ module.exports = function (script, {
   moduleId,
   isProduction,
   jsonConfig,
+  outputPath,
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap
@@ -64,7 +65,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

packages/webpack-plugin/lib/react/script-helper.js

@@ -88,7 +88,8 @@ function buildGlobalParams ({
   jsonConfig,
   componentsMap,
   pagesMap,
-  firstPage
+  firstPage,
+  outputPath
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -117,6 +118,9 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     content += `global.currentInject.getComponents = function () {
   return ${shallowStringify(componentsMap)}
 }\n`
+    if (ctorType === 'component') {
+      content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
+    }
   }
   content += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
   content += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`