Merge pull request #259 from wechat-miniprogram/fix-lazy-relation

Fx relation when anthor component is lazily loaded

Author: LastLeaf

glass-easel/src/relation.ts

@@ -59,6 +59,7 @@ export const normalizeRelation = <TOut extends { [key: string]: any }>(
   let target:
     | GeneralBehavior
     | TraitBehavior<{ [key: string]: unknown }, { [key: string]: unknown }>
+    | string
     | null = null
   if (relation.target instanceof ComponentDefinition) {
     target = relation.target.behavior as GeneralBehavior
@@ -73,6 +74,8 @@ export const normalizeRelation = <TOut extends { [key: string]: any }>(
       const globalTarget = ownerSpace.getGlobalUsingComponent(path)
       if (typeof globalTarget === 'object' && globalTarget !== null) {
         target = globalTarget.behavior
+      } else {
+        target = path
       }
     }
   }
@@ -110,7 +113,10 @@ export type RelationListener = (target: unknown) => void
 export type RelationFailedListener = () => void
 
 export type RelationDefinition = {
-  target: GeneralBehavior | TraitBehavior<{ [x: string]: unknown }, { [x: string]: unknown }>
+  target:
+    | GeneralBehavior
+    | TraitBehavior<{ [x: string]: unknown }, { [x: string]: unknown }>
+    | string
   type: RelationType
   linked: RelationListener | null
   linkChanged: RelationListener | null

glass-easel/tests/core/relation.test.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-restricted-syntax */
+import { domBackend } from '../base/env'
+import * as glassEasel from '../../src'
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+describe('Relation', () => {
+  test('should link when another component is lazily loaded', () => {
+    const childLinkedList: ['linked' | 'unlinked', glassEasel.GeneralComponent][] = []
+    const childDef = componentSpace.defineComponent({
+      is: 'child',
+      relations: {
+        parent: {
+          type: 'ancestor',
+          linked(target) {
+            childLinkedList.push(['linked', target])
+          },
+          unlinked(target) {
+            childLinkedList.push(['unlinked', target])
+          },
+        },
+      },
+    })
+    const child = glassEasel.Component.createWithContext('child', childDef, domBackend)
+
+    expect(childLinkedList).toEqual([])
+
+    const parentLinkedList: ['linked' | 'unlinked', glassEasel.GeneralComponent][] = []
+    const parentDef = componentSpace.defineComponent({
+      is: 'parent',
+      relations: {
+        child: {
+          type: 'descendant',
+          linked(target) {
+            parentLinkedList.push(['linked', target])
+          },
+          unlinked(target) {
+            parentLinkedList.push(['unlinked', target])
+          },
+        },
+      },
+    })
+    const parent = glassEasel.Component.createWithContext('parent', parentDef, domBackend)
+    glassEasel.Element.pretendAttached(parent)
+
+    expect(childLinkedList).toStrictEqual([])
+    expect(parentLinkedList).toStrictEqual([])
+
+    parent.appendChild(child)
+
+    expect(childLinkedList).toStrictEqual([['linked', parent]])
+    expect(parentLinkedList).toStrictEqual([['linked', child]])
+
+    parent.removeChild(child)
+
+    expect(childLinkedList).toStrictEqual([
+      ['linked', parent],
+      ['unlinked', parent],
+    ])
+    expect(parentLinkedList).toStrictEqual([
+      ['linked', child],
+      ['unlinked', child],
+    ])
+  })
+})