[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', 'onShareAppMessage']
+const unsupported = ['moved', 'definitionFilter', 'onShareAppMessage']
 
 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,101 @@
+import { BEFORECREATE, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
+import { isArray } from '@mpxjs/utils'
+
+const relationTypeMap = {
+  parent: 'child',
+  ancestor: 'descendant'
+}
+
+const isChildNode = (target, instance) => {
+  let children = target.props.children
+  if (!children) return
+  if (!isArray(children)) {
+    children = [children]
+  }
+  return children.some((item = {}) => {
+    if (item.type?.__mpxBuiltIn) { // 如果是基础节点，继续向下查找
+      return isChildNode(item, instance)
+    } else {
+      return item.type === instance.__getReactFunctionComponent()
+    }
+  })
+}
+
+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 target = current.__getRelation()
+          if (!target) return
+
+          // parent 只需要处理一层，ancestor 需要考虑多个层级
+          if ((type === 'parent' && isChildNode(target, this)) || type === 'ancestor') {
+            const targetRelation = target.__mpxProxy.options.relations?.[this.__componentPath]
+            if (targetRelation && targetRelation.type === relationTypeMap[type] && target.__componentPath === path) {
+              this.__mpxRelations[path] = {
+                target,
+                targetRelation,
+                relation
+              }
+              this.__mpxRelationNodesMap[path] = [target]
+            } else if (type === 'ancestor') {
+              this.__mpxCheckParent(target, relation, path)
+            }
+          }
+        },
+        __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/react/getDefaultOptions.ios.js

@@ -68,14 +68,20 @@ function getRootProps (props) {
   return rootProps
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, relation, reactFunctionComponent }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
     },
     getPageId () {
       return pageId
     },
+    __getRelation () {
+      return relation
+    },
+    __getReactFunctionComponent () {
+      return reactFunctionComponent
+    },
     __getProps () {
       const props = propsRef.current
       const propsData = {}
@@ -127,6 +133,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       }
       return null
     },
+    __componentPath: currentInject.componentPath,
     __injectedRender: currentInject.render || noop,
     __getRefsData: currentInject.getRefsData || noop,
     // render helper
@@ -342,19 +349,33 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
+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 RelationsContext = createContext(null)
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
+    const reactFunctionComponent = defaultOptions
     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 })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, relation, reactFunctionComponent })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -403,7 +424,17 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
 
-    const root = rawOptions.options?.disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
+    const runRenderEffect = () => {
+      if (needRelationContext(rawOptions)) {
+        return createElement(RelationsContext.Provider, {
+          value: instance
+        }, proxy.effect.run())
+      }
+
+      return proxy.effect.run()
+    }
+
+    const root = rawOptions.options?.disableMemo ? runRenderEffect() : useMemo(runRenderEffect, [proxy.stateVersion])
     if (root) {
       const rootProps = getRootProps(props)
       rootProps.style = { ...root.props.style, ...rootProps.style }

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

@@ -9,6 +9,7 @@ module.exports = function (script, {
   moduleId,
   isProduction,
   jsonConfig,
+  outputPath,
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap
@@ -65,7 +66,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,7 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     content += `global.currentInject.getComponents = function () {
   return ${shallowStringify(componentsMap)}
 }\n`
+    content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
   }
   content += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
   content += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`