wip(app): uni-app-plus

packages/uni-app-plus/__tests__/service/dom/dom.spec.ts

-import { UniEventListener } from '@dcloudio/uni-shared'
+import { encodeTag, UniEventListener } from '@dcloudio/uni-shared'
 import { createPageNode } from '../../../src/service/framework/dom/Page'
 import {
   createElement,
@@ -13,6 +13,8 @@ import {
   ACTION_TYPE_REMOVE_ATTRIBUTE,
   ACTION_TYPE_SET_TEXT,
   ACTION_TYPE_REMOVE,
+  CreateAction,
+  ACTION_TYPE_CREATE,
 } from '../../../src/PageAction'
 
 import { EventModifierFlags } from '@dcloudio/uni-shared'
@@ -35,18 +37,24 @@ describe('dom', () => {
     windowBottom: 0,
   })
   test('proxyNode', () => {
-    const viewElem = createElement('view')
+    const viewElem = createElement('view', { pageNode: root })
     viewElem.setAttribute('id', 'view')
     root.appendChild(viewElem)
     viewElem.setAttribute('hidden', true)
     const { updateActions } = root
-    const addElementAction = updateActions[0] as InsertAction
+    const createElementAction = updateActions[0] as CreateAction
+    expect(createElementAction[0]).toBe(ACTION_TYPE_CREATE)
+    expect(createElementAction[1]).toBe(1)
+    expect(createElementAction[2]).toBe(encodeTag('VIEW'))
+    expect(createElementAction[3]).toBe(0)
+    expect(createElementAction[4]!.a!.id).toBe('view')
+    const addElementAction = updateActions[1] as InsertAction
     expect(addElementAction[0]).toBe(ACTION_TYPE_INSERT)
     expect(addElementAction[1]).toBe(1) // nodeId
     expect(addElementAction[2]).toBe(0) // parentNodeId
     expect(addElementAction[3]).toBe(-1) // index
 
-    const setAttributeAction = updateActions[1] as SetAttributeAction
+    const setAttributeAction = updateActions[2] as SetAttributeAction
     expect(setAttributeAction[0]).toBe(ACTION_TYPE_SET_ATTRIBUTE)
     expect(setAttributeAction[1]).toBe(1)
     expect(setAttributeAction[2]).toBe('hidden')
@@ -79,10 +87,10 @@ describe('dom', () => {
     expect(removeChildAction[1]).toBe(1)
 
     root.updateActions.length = 0
-    const textNode = createTextNode('hello')
+    const textNode = createTextNode('hello', { pageNode: root })
     root.appendChild(textNode)
     const {
-      updateActions: [addTextNodeAction],
+      updateActions: [, addTextNodeAction],
     } = root
     expect(addTextNodeAction[0]).toBe(ACTION_TYPE_INSERT)
     expect(addTextNodeAction[1]).toBe(2)

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -7386,9 +7386,6 @@ var serviceContext = (function (vue) {
                   break;
           }
           this.updateActions.push(action);
-          if ((process.env.NODE_ENV !== 'production')) {
-              console.log(formatLog('PageNode', 'push', action));
-          }
           vue.queuePostFlushCb(this._update);
       }
       restore() {

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -3248,6 +3248,10 @@
         }
         setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent);
       }
+      Object.defineProperty(el, "__vueParentComponent", {
+        value: parentComponent,
+        enumerable: false
+      });
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
       }
@@ -3866,7 +3870,7 @@
           unmount(container._vnode, null, null, true);
         }
       } else {
-        patch(container._vnode || null, vnode, container, null, null, null, isSVG);
+        patch(container._vnode || null, vnode, container, null, container.__vueParent || null, null, isSVG);
       }
       flushPostFlushCbs();
       container._vnode = vnode;
@@ -5826,11 +5830,12 @@
   const ACTION_TYPE_SET_TEXT = 8;
   const ACTION_TYPE_EVENT = 20;
   class UniNode {
-    constructor(id2, tag, element) {
+    constructor(id2, tag, parentNodeId, element) {
       this.isMounted = false;
       this.isUnmounted = false;
       this.id = id2;
       this.tag = tag;
+      this.pid = parentNodeId;
       if (element) {
         this.$ = element;
       }
@@ -5857,6 +5862,7 @@
       const { $: $2 } = this;
       $2.parentNode.removeChild($2);
       this.isUnmounted = false;
+      removeElement(this.id);
     }
     appendChild(node) {
       return this.$.appendChild(node);
@@ -5866,8 +5872,8 @@
     }
   }
   class UniComment extends UniNode {
-    constructor(id2) {
-      super(id2, "#comment", document.createComment(""));
+    constructor(id2, parentNodeId) {
+      super(id2, "#comment", parentNodeId, document.createComment(""));
     }
   }
   var text$1 = "uni-text[selectable] {\n  cursor: auto;\n  -webkit-user-select: text;\n          user-select: text;\n}\n";
@@ -14083,8 +14089,8 @@
     }
   }
   class UniElement extends UniNode {
-    constructor(id2, element, nodeJson, propNames = []) {
-      super(id2, element.tagName, element);
+    constructor(id2, element, parentNodeId, nodeJson, propNames = []) {
+      super(id2, element.tagName, parentNodeId, element);
       this.$props = reactive({});
       this.$.__id = id2;
       this.$.__listeners = Object.create(null);
@@ -14148,8 +14154,8 @@
   }
   const PROP_NAMES_HOVER$1 = ["space", "decode"];
   class UniTextElement extends UniElement {
-    constructor(id2, _parentNodeId, nodeJson) {
-      super(id2, document.createElement("uni-text"), nodeJson, PROP_NAMES_HOVER$1);
+    constructor(id2, parentNodeId, nodeJson) {
+      super(id2, document.createElement("uni-text"), parentNodeId, nodeJson, PROP_NAMES_HOVER$1);
       this._text = "";
     }
     init(nodeJson) {
@@ -14173,8 +14179,8 @@
     }
   }
   class UniTextNode extends UniNode {
-    constructor(id2) {
-      super(id2, "#text", document.createTextNode(""));
+    constructor(id2, parentNodeId) {
+      super(id2, "#text", parentNodeId, document.createTextNode(""));
     }
   }
   var view = "uni-view {\n  display: block;\n}\nuni-view[hidden] {\n  display: none;\n}\n";
@@ -14185,8 +14191,11 @@
     "hover-stay-time"
   ];
   class UniHoverElement extends UniElement {
-    constructor(id2, element, nodeJson, propNames = []) {
-      super(id2, element, nodeJson, [...PROP_NAMES_HOVER, ...propNames]);
+    constructor(id2, element, parentNodeId, nodeJson, propNames = []) {
+      super(id2, element, parentNodeId, nodeJson, [
+        ...PROP_NAMES_HOVER,
+        ...propNames
+      ]);
     }
     update() {
       const hoverClass = this.$props["hover-class"];
@@ -14294,8 +14303,8 @@
     }
   }
   class UniViewElement extends UniHoverElement {
-    constructor(id2, _parentNodeId, nodeJson) {
-      super(id2, document.createElement("uni-view"), nodeJson);
+    constructor(id2, parentNodeId, nodeJson) {
+      super(id2, document.createElement("uni-view"), parentNodeId, nodeJson);
     }
   }
   var Ad = /* @__PURE__ */ defineBuiltInComponent({
@@ -14303,8 +14312,9 @@
   });
   class UniComponent extends UniNode {
     constructor(id2, tag, component, parentNodeId, nodeJson, selector) {
-      super(id2, tag);
+      super(id2, tag, parentNodeId);
       const container = document.createElement("div");
+      container.__vueParent = getVueParent(this);
       this.$props = reactive({});
       this.init(nodeJson);
       createApp(createWrapper(component, this.$props)).mount(container);
@@ -14345,6 +14355,18 @@
       return (this.$holder || this.$).insertBefore(newChild, refChild);
     }
   }
+  function getVueParent(node) {
+    while (node && node.pid > 0) {
+      node = $(node.pid);
+      if (node) {
+        const { __vueParentComponent } = node.$;
+        if (__vueParentComponent) {
+          return __vueParentComponent;
+        }
+      }
+    }
+    return null;
+  }
   class UniAd extends UniComponent {
     constructor(id2, parentNodeId, nodeJson) {
       super(id2, "uni-ad", Ad, parentNodeId, nodeJson);
@@ -15214,12 +15236,18 @@
   function $(id2) {
     return elements.get(id2);
   }
+  function removeElement(id2) {
+    {
+      console.log(formatLog("Remove", id2, elements.size - 1));
+    }
+    return elements.delete(id2);
+  }
   function createElement(id2, tag, parentNodeId, nodeJson = {}) {
     let element;
     if (id2 === 0) {
-      element = new UniNode(id2, tag, document.createElement(tag));
+      element = new UniNode(id2, tag, parentNodeId, document.createElement(tag));
     } else if (isString(tag)) {
-      element = new UniElement(id2, document.createElement(tag), nodeJson);
+      element = new UniElement(id2, document.createElement(tag), parentNodeId, nodeJson);
     } else {
       element = createBuiltInComponent(tag, id2, parentNodeId, nodeJson);
     }
@@ -15265,7 +15293,7 @@
     };
   }
   function initPageElement() {
-    createElement(0, "div").$ = document.getElementById("app");
+    createElement(0, "div", -1).$ = document.getElementById("app");
   }
   function initPageCss(route) {
     const element = document.createElement("link");

packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts

 import { hasOwn } from '@vue/shared'
-import { Component, createApp, reactive } from 'vue'
+import { Component, ComponentInternalInstance, createApp, reactive } from 'vue'
 import { decodeAttr, parseEventName, UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniNode } from '../elements/UniNode'
 import { createInvoker } from '../modules/events'
 import { createWrapper, UniCustomElement } from '.'
+import { $ } from '../page'
 
 export class UniComponent extends UniNode {
   declare $: UniCustomElement
@@ -17,8 +18,9 @@ export class UniComponent extends UniNode {
     nodeJson: Partial<UniNodeJSON>,
     selector?: string
   ) {
-    super(id, tag)
+    super(id, tag, parentNodeId)
     const container = document.createElement('div')
+    ;(container as any).__vueParent = getVueParent(this)
     this.$props = reactive({})
     this.init(nodeJson)
     createApp(createWrapper(component, this.$props)).mount(container)
@@ -63,3 +65,18 @@ export class UniComponent extends UniNode {
     return (this.$holder || this.$).insertBefore(newChild, refChild)
   }
 }
+
+function getVueParent(node: UniNode): ComponentInternalInstance | null {
+  while (node && node.pid > 0) {
+    node = $(node.pid)
+    if (node) {
+      const { __vueParentComponent } = node.$ as unknown as {
+        __vueParentComponent: ComponentInternalInstance
+      }
+      if (__vueParentComponent) {
+        return __vueParentComponent
+      }
+    }
+  }
+  return null
+}

packages/uni-app-plus/src/view/framework/dom/elements/UniComment.ts

 import { UniNode } from './UniNode'
 
 export class UniComment extends UniNode {
-  constructor(id: number) {
-    super(id, '#comment', document.createComment(''))
+  constructor(id: number, parentNodeId: number) {
+    super(id, '#comment', parentNodeId, document.createComment(''))
   }
 }

packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts

@@ -16,10 +16,11 @@ export class UniElement<T extends object> extends UniNode {
   constructor(
     id: number,
     element: Element,
+    parentNodeId: number,
     nodeJson: Partial<UniNodeJSON>,
     propNames: string[] = []
   ) {
-    super(id, element.tagName, element)
+    super(id, element.tagName, parentNodeId, element)
     this.$.__id = id
     this.$.__listeners = Object.create(null)
     this.$propNames = propNames

packages/uni-app-plus/src/view/framework/dom/elements/UniHoverElement.ts

@@ -19,10 +19,14 @@ export class UniHoverElement extends UniElement<HoverProps> {
   constructor(
     id: number,
     element: Element,
+    parentNodeId: number,
     nodeJson: Partial<UniNodeJSON>,
     propNames: string[] = []
   ) {
-    super(id, element, nodeJson, [...PROP_NAMES_HOVER, ...propNames])
+    super(id, element, parentNodeId, nodeJson, [
+      ...PROP_NAMES_HOVER,
+      ...propNames,
+    ])
   }
   update() {
     const hoverClass = this.$props['hover-class']

packages/uni-app-plus/src/view/framework/dom/elements/UniNode.ts

 import { hasOwn } from '@vue/shared'
 import { UniNodeJSON } from '@dcloudio/uni-shared'
 
-import { $ } from '../page'
+import { $, removeElement } from '../page'
 
 export class UniNode {
   id: number
   tag: string
+  pid: number
   $!: Element | Text | Comment
   isMounted: boolean = false
   isUnmounted: boolean = false
-  constructor(id: number, tag: string, element?: Element | Text | Comment) {
+  constructor(
+    id: number,
+    tag: string,
+    parentNodeId: number,
+    element?: Element | Text | Comment
+  ) {
     this.id = id
     this.tag = tag
+    this.pid = parentNodeId
     if (element) {
       this.$ = element
     }
@@ -38,6 +45,7 @@ export class UniNode {
     const { $ } = this
     $.parentNode!.removeChild($)
     this.isUnmounted = false
+    removeElement(this.id)
   }
   appendChild(node: Node) {
     return this.$.appendChild(node)

packages/uni-app-plus/src/view/framework/dom/elements/UniTextElement.ts

@@ -15,10 +15,16 @@ export class UniTextElement extends UniElement<TextProps> {
 
   constructor(
     id: number,
-    _parentNodeId: number,
+    parentNodeId: number,
     nodeJson: Partial<UniNodeJSON>
   ) {
-    super(id, document.createElement('uni-text'), nodeJson, PROP_NAMES_HOVER)
+    super(
+      id,
+      document.createElement('uni-text'),
+      parentNodeId,
+      nodeJson,
+      PROP_NAMES_HOVER
+    )
   }
 
   init(nodeJson: Partial<UniNodeJSON>) {

packages/uni-app-plus/src/view/framework/dom/elements/UniTextNode.ts

 import { UniNode } from './UniNode'
 
 export class UniTextNode extends UniNode {
-  constructor(id: number) {
-    super(id, '#text', document.createTextNode(''))
+  constructor(id: number, parentNodeId: number) {
+    super(id, '#text', parentNodeId, document.createTextNode(''))
   }
 }

packages/uni-app-plus/src/view/framework/dom/elements/UniViewElement.ts

@@ -4,9 +4,9 @@ import { UniHoverElement } from './UniHoverElement'
 export class UniViewElement extends UniHoverElement {
   constructor(
     id: number,
-    _parentNodeId: number,
+    parentNodeId: number,
     nodeJson: Partial<UniNodeJSON>
   ) {
-    super(id, document.createElement('uni-view'), nodeJson)
+    super(id, document.createElement('uni-view'), parentNodeId, nodeJson)
   }
 }

packages/uni-app-plus/src/view/framework/dom/page.ts

@@ -19,10 +19,17 @@ export function $(id: number) {
   return elements.get(id) as UniElement<any>
 }
 
+export function removeElement(id: number) {
+  if (__DEV__) {
+    console.log(formatLog('Remove', id, elements.size - 1))
+  }
+  return elements.delete(id)
+}
+
 export function createElement(
   id: number,
   tag: string | number,
-  parentNodeId?: number,
+  parentNodeId: number,
   nodeJson: Partial<UniNodeJSON> = {}
 ) {
   let element: UniNode
@@ -31,10 +38,16 @@ export function createElement(
     element = new UniNode(
       id,
       tag as string,
+      parentNodeId,
       document.createElement(tag as string)
     )
   } else if (isString(tag)) {
-    element = new UniElement(id, document.createElement(tag), nodeJson)
+    element = new UniElement(
+      id,
+      document.createElement(tag),
+      parentNodeId,
+      nodeJson
+    )
   } else {
     element = createBuiltInComponent(tag, id, parentNodeId!, nodeJson)
   }
@@ -92,7 +105,7 @@ function initSystemInfo(
 }
 
 function initPageElement() {
-  createElement(0, 'div').$ = document.getElementById('app')!
+  createElement(0, 'div', -1).$ = document.getElementById('app')!
 }
 
 function initPageCss(route: string) {

packages/uni-app-vue/dist/view.runtime.esm.js

@@ -5705,11 +5705,16 @@ function baseCreateRenderer(options, createHydrationFns) {
                 value: vnode,
                 enumerable: false
             });
-            Object.defineProperty(el, '__vueParentComponent', {
-                value: parentComponent,
-                enumerable: false
-            });
-        }
+            // Object.defineProperty(el, '__vueParentComponent', {
+            //   value: parentComponent,
+            //   enumerable: false
+            // })
+        }
+        // fixed by xxxxxx 始终提供__vueParentComponent
+        Object.defineProperty(el, '__vueParentComponent', {
+            value: parentComponent,
+            enumerable: false
+        });
         if (dirs) {
             invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
         }
@@ -6690,7 +6695,8 @@ function baseCreateRenderer(options, createHydrationFns) {
             }
         }
         else {
-            patch(container._vnode || null, vnode, container, null, null, null, isSVG);
+            // fixed by xxxxxx 补充父组件
+            patch(container._vnode || null, vnode, container, null, container.__vueParent || null, null, isSVG);
         }
         flushPostFlushCbs();
         container._vnode = vnode;

packages/uni-app-vue/lib/view.runtime.esm.js

@@ -5723,11 +5723,16 @@ function baseCreateRenderer(options, createHydrationFns) {
                 value: vnode,
                 enumerable: false
             });
-            Object.defineProperty(el, '__vueParentComponent', {
-                value: parentComponent,
-                enumerable: false
-            });
-        }
+            // Object.defineProperty(el, '__vueParentComponent', {
+            //   value: parentComponent,
+            //   enumerable: false
+            // })
+        }
+        // fixed by xxxxxx 始终提供__vueParentComponent
+        Object.defineProperty(el, '__vueParentComponent', {
+            value: parentComponent,
+            enumerable: false
+        });
         if (dirs) {
             invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
         }
@@ -6708,7 +6713,8 @@ function baseCreateRenderer(options, createHydrationFns) {
             }
         }
         else {
-            patch(container._vnode || null, vnode, container, null, null, null, isSVG);
+            // fixed by xxxxxx 补充父组件
+            patch(container._vnode || null, vnode, container, null, container.__vueParent || null, null, isSVG);
         }
         flushPostFlushCbs();
         container._vnode = vnode;