wip(app): uni-app-plus

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

@@ -3,212 +3,6 @@ import { decodeActions } from '../../../src/service/framework/dom/decodeActions'
 
 describe('decode', () => {
   test('actions', () => {
-    console.log(
-      inspect(
-        decodeActions([
-          [3, 1, 4],
-          [3, 2, 4],
-          [
-            4,
-            1,
-            0,
-            -1,
-            {
-              t: '',
-            },
-          ],
-          [
-            4,
-            2,
-            0,
-            -1,
-            {
-              t: '',
-            },
-          ],
-          [3, 3, 1],
-          [
-            4,
-            3,
-            0,
-            2,
-            {
-              a: {
-                '.e0': 0,
-              },
-              t: '跳转二级页面',
-            },
-          ],
-          [3, 4, 1],
-          [3, 5, 1],
-          [
-            4,
-            5,
-            4,
-            -1,
-            {
-              a: {
-                '.e0': 0,
-              },
-              t: '123aaaaaaaaaaaa',
-            },
-          ],
-          [
-            4,
-            4,
-            0,
-            2,
-            {
-              a: {
-                '.c': 'content',
-                '.h0': 'none',
-              },
-            },
-          ],
-          [3, 6, 4],
-          [3, 7, 4],
-          [
-            4,
-            6,
-            0,
-            2,
-            {
-              t: '',
-            },
-          ],
-          [
-            4,
-            7,
-            0,
-            2,
-            {
-              t: '',
-            },
-          ],
-          [3, 8, 1],
-          [
-            4,
-            8,
-            0,
-            7,
-            {
-              a: {
-                '.e0': 0,
-              },
-              t: '1test...........',
-            },
-          ],
-          [3, 9, 1],
-          [
-            4,
-            9,
-            0,
-            7,
-            {
-              t: '2',
-            },
-          ],
-          [3, 10, 1],
-          [
-            4,
-            10,
-            0,
-            2,
-            {
-              a: {
-                '.e0': 0,
-              },
-              t: 'showModal',
-            },
-          ],
-          [3, 11, 1],
-          [
-            4,
-            11,
-            0,
-            2,
-            {
-              a: {
-                '.c': 'title',
-              },
-              t: '456',
-            },
-          ],
-          [3, 12, 1],
-          [
-            4,
-            12,
-            0,
-            2,
-            {
-              a: {
-                '.e0': 0,
-              },
-              t: '切换hover',
-            },
-          ],
-          [3, 13, 1],
-          [
-            4,
-            13,
-            0,
-            2,
-            {
-              a: {
-                '.s': {
-                  color: 'red',
-                },
-              },
-              t: 'static style',
-            },
-          ],
-          [3, 14, 1],
-          [
-            4,
-            14,
-            0,
-            2,
-            {
-              a: {
-                '.s': {
-                  color: 'red',
-                },
-              },
-              t: 'dynamic obj style',
-            },
-          ],
-          [3, 15, 1],
-          [
-            4,
-            15,
-            0,
-            2,
-            {
-              a: {
-                '.s': {
-                  color: 'black',
-                },
-              },
-              t: 'dynamic array style',
-            },
-          ],
-          [3, 16, 1],
-          [
-            4,
-            16,
-            0,
-            2,
-            {
-              a: {
-                '.s': 'color:blue',
-              },
-              t: 'dynamic string style',
-            },
-          ],
-          [2],
-        ]),
-        { colors: true, depth: null }
-      )
-    )
+    console.log(inspect(decodeActions([]), { colors: true, depth: null }))
   })
 })

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

-import { UniEventListener, UniNodeJSON } from '@dcloudio/uni-shared'
+import { UniEventListener } from '@dcloudio/uni-shared'
 import { createPageNode } from '../../../src/service/framework/dom/Page'
 import {
   createElement,
@@ -45,8 +45,6 @@ describe('dom', () => {
     expect(addElementAction[1]).toBe(1) // nodeId
     expect(addElementAction[2]).toBe(0) // parentNodeId
     expect(addElementAction[3]).toBe(-1) // index
-    const elementJson = addElementAction[4] as UniNodeJSON
-    expect(elementJson.a.id).toBe('view')
 
     const setAttributeAction = updateActions[1] as SetAttributeAction
     expect(setAttributeAction[0]).toBe(ACTION_TYPE_SET_ATTRIBUTE)
@@ -90,8 +88,6 @@ describe('dom', () => {
     expect(addTextNodeAction[1]).toBe(2)
     expect(addTextNodeAction[2]).toBe(0)
     expect(addTextNodeAction[3]).toBe(-1)
-    const textNodeJson = addTextNodeAction[4] as UniNodeJSON
-    expect(textNodeJson.t).toBe('hello')
 
     root.updateActions.length = 0
     const clickFn = () => {}

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

@@ -75,8 +75,8 @@
     function decodePageCreatedAction([]) {
         return ['pageCreated'];
     }
-    function decodeCreateAction([, nodeId, nodeName, nodeJson]) {
-        return ['create', nodeId, decodeTag(nodeName), nodeJson];
+    function decodeCreateAction([, nodeId, nodeName, parentNodeId, nodeJson,]) {
+        return ['create', nodeId, decodeTag(nodeName), parentNodeId, nodeJson];
     }
     function decodeInsertAction([, ...action]) {
         return ['insert', ...action];

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

@@ -7373,7 +7373,10 @@ var serviceContext = (function (vue) {
               case ACTION_TYPE_INSERT:
                   const createAction = this._createActionMap.get(action[1]);
                   if (createAction) {
-                      createAction[3] = extras;
+                      createAction[3] = action[2]; // parentNodeId
+                      if (extras) {
+                          createAction[4] = extras;
+                      }
                   }
                   else {
                       if ((process.env.NODE_ENV !== 'production')) {
@@ -7439,7 +7442,7 @@ var serviceContext = (function (vue) {
       return null;
   }
   function pushCreateAction(pageNode, nodeId, nodeName) {
-      pageNode.push([ACTION_TYPE_CREATE, nodeId, nodeName]);
+      pageNode.push([ACTION_TYPE_CREATE, nodeId, nodeName, -1]);
   }
   function pushInsertAction(pageNode, newChild, parentNodeId, refChildId) {
       const nodeJson = newChild.toJSON({ attr: true });

packages/uni-app-plus/src/service/framework/dom/Page.ts

@@ -115,7 +115,10 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
       case ACTION_TYPE_INSERT:
         const createAction = this._createActionMap.get(action[1])
         if (createAction) {
-          createAction[3] = extras as UniNodeJSON
+          createAction[3] = action[2] // parentNodeId
+          if (extras) {
+            createAction[4] = extras as UniNodeJSON
+          }
         } else {
           if (__DEV__) {
             console.error(formatLog(`Insert`, action, 'not found createAction'))
@@ -124,9 +127,6 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
         break
     }
     this.updateActions.push(action)
-    if (__DEV__) {
-      console.log(formatLog('PageNode', 'push', action))
-    }
     queuePostFlushCb(this._update)
   }
   restore() {
@@ -192,7 +192,7 @@ function pushCreateAction(
   nodeId: number,
   nodeName: string | number
 ) {
-  pageNode.push([ACTION_TYPE_CREATE, nodeId, nodeName])
+  pageNode.push([ACTION_TYPE_CREATE, nodeId, nodeName, -1])
 }
 
 function pushInsertAction(

packages/uni-app-plus/src/service/framework/dom/decodeActions.ts

@@ -27,8 +27,14 @@ function decodePageCreatedAction([]: PageCreatedAction) {
   return ['pageCreated']
 }
 
-function decodeCreateAction([, nodeId, nodeName, nodeJson]: CreateAction) {
-  return ['create', nodeId, decodeTag(nodeName), nodeJson]
+function decodeCreateAction([
+  ,
+  nodeId,
+  nodeName,
+  parentNodeId,
+  nodeJson,
+]: CreateAction) {
+  return ['create', nodeId, decodeTag(nodeName), parentNodeId, nodeJson]
 }
 
 function decodeInsertAction([, ...action]: InsertAction) {

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

@@ -4,7 +4,11 @@ import Ad from '../../../components/ad'
 import { UniComponent } from './UniComponent'
 
 export class UniAd extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-ad', Ad, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-ad', Ad, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniAudio extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-audio', Audio, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-audio', Audio, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniButton extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-button', Button, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-button', Button, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCanvas extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-canvas', Canvas, nodeJson, 'canvas > div')
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-canvas', Canvas, parentNodeId, nodeJson, 'canvas > div')
   }
 }

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

@@ -4,7 +4,18 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCheckbox extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-checkbox', Checkbox, nodeJson, '.uni-checkbox-wrapper')
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(
+      id,
+      'uni-checkbox',
+      Checkbox,
+      parentNodeId,
+      nodeJson,
+      '.uni-checkbox-wrapper'
+    )
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCheckboxGroup extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-checkbox-group', CheckboxGroup, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-checkbox-group', CheckboxGroup, parentNodeId, nodeJson)
   }
 }

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

 import { hasOwn } from '@vue/shared'
 import { Component, createApp, reactive } from 'vue'
-import {
-  decodeAttr,
-  // formatLog,
-  parseEventName,
-  UniNodeJSON,
-} from '@dcloudio/uni-shared'
+import { decodeAttr, parseEventName, UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniNode } from '../elements/UniNode'
 import { createInvoker } from '../modules/events'
-import { createWrapper } from '.'
+import { createWrapper, UniCustomElement } from '.'
 
 export class UniComponent extends UniNode {
-  declare $: Element
+  declare $: UniCustomElement
   private $props!: Record<string, any>
   private $holder?: Element
-  // private $fragment: DocumentFragment | null = null
   constructor(
     id: number,
     tag: string,
     component: Component,
+    parentNodeId: number,
     nodeJson: Partial<UniNodeJSON>,
     selector?: string
   ) {
@@ -27,7 +22,7 @@ export class UniComponent extends UniNode {
     this.$props = reactive({})
     this.init(nodeJson)
     createApp(createWrapper(component, this.$props)).mount(container)
-    this.$ = container.firstElementChild!
+    this.$ = container.firstElementChild! as UniCustomElement
     if (selector) {
       this.$holder = this.$.querySelector(selector)!
     }
@@ -61,40 +56,10 @@ export class UniComponent extends UniNode {
   removeAttr(name: string) {
     this.$props[decodeAttr(name)] = null
   }
-  // get fragment() {
-  //   if (!this.$fragment) {
-  //     this.$fragment = document.createDocumentFragment()
-  //   }
-  //   return this.$fragment
-  // }
   appendChild(node: Element) {
-    // if (!this.$) {
-    //   // 可能还未初始化，临时存放
-    //   if (__DEV__) {
-    //     console.log(
-    //       formatLog(this.tag, 'fragment', 'appendChild', node.tagName)
-    //     )
-    //   }
-    //   return this.fragment.appendChild(node)
-    // }
     return (this.$holder || this.$).appendChild(node)
   }
   insertBefore(newChild: Node, refChild: Node) {
-    // if (!this.$) {
-    //   // 可能还未初始化，临时存放
-    //   if (__DEV__) {
-    //     console.log(
-    //       formatLog(
-    //         this.tag,
-    //         'fragment',
-    //         'insertBefore',
-    //         (newChild as Element).tagName,
-    //         (refChild as Element).tagName
-    //       )
-    //     )
-    //   }
-    //   return this.fragment.insertBefore(newChild, refChild)
-    // }
     return (this.$holder || this.$).insertBefore(newChild, refChild)
   }
 }

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

@@ -4,7 +4,11 @@ import CoverImage from '../../../components/cover-image'
 import { UniComponent } from './UniComponent'
 
 export class UniCoverImage extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-cover-image', CoverImage, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-cover-image', CoverImage, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import CoverView from '../../../components/cover-view'
 import { UniComponent } from './UniComponent'
 
 export class UniCoverView extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-cover-view', CoverView, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-cover-view', CoverView, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniEditor extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-editor', Editor, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-editor', Editor, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniForm extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-form', Form, nodeJson, 'span')
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-form', Form, parentNodeId, nodeJson, 'span')
   }
 }

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

@@ -5,7 +5,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniIcon extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-icon', Icon, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-icon', Icon, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniImage extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-image', Image, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-image', Image, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniInput extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-input', Input, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-input', Input, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniLabel extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-label', Label, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-label', Label, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import Map from '../../../components/map'
 import { UniComponent } from './UniComponent'
 
 export class UniMap extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-map', Map, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-map', Map, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniMovableArea extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-movable-area', MovableArea, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-movable-area', MovableArea, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniMovableView extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-movable-view', MovableView, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-movable-view', MovableView, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniNavigator extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-navigator', Navigator, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-navigator', Navigator, parentNodeId, nodeJson)
   }
 }

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

@@ -3,7 +3,11 @@ import Picker from '../../../components/picker'
 import { UniComponent } from './UniComponent'
 
 export class UniPicker extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-picker', Picker, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-picker', Picker, parentNodeId, nodeJson)
   }
 }

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

@@ -4,11 +4,16 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniPickerView extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
     super(
       id,
       'uni-picker-view',
       PickerView,
+      parentNodeId,
       nodeJson,
       '.uni-picker-view-wrapper'
     )

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

@@ -4,11 +4,16 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniPickerViewColumn extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
     super(
       id,
       'uni-picker-view-column',
       PickerViewColumn,
+      parentNodeId,
       nodeJson,
       '.uni-picker-view-content'
     )

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniProgress extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-progress', Progress, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-progress', Progress, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRadio extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-radio', Radio, nodeJson, '.uni-radio-wrapper')
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-radio', Radio, parentNodeId, nodeJson, '.uni-radio-wrapper')
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRadioGroup extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-radio-group', RadioGroup, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-radio-group', RadioGroup, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRichText extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-rich-text', RichText, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-rich-text', RichText, parentNodeId, nodeJson)
   }
 }

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

@@ -4,11 +4,16 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniScrollView extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
     super(
       id,
       'uni-scroll-view',
       ScrollView,
+      parentNodeId,
       nodeJson,
       '.uni-scroll-view-content'
     )

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSlider extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-slider', Slider, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-slider', Slider, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,18 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwiper extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-swiper', Swiper, nodeJson, '.uni-swiper-slide-frame')
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(
+      id,
+      'uni-swiper',
+      Swiper,
+      parentNodeId,
+      nodeJson,
+      '.uni-swiper-slide-frame'
+    )
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwiperItem extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-swiper-item', SwiperItem, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-swiper-item', SwiperItem, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwitch extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-switch', Switch, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-switch', Switch, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniTextarea extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-textarea', Textarea, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-textarea', Textarea, parentNodeId, nodeJson)
   }
 }

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

@@ -5,7 +5,11 @@ import Video from '../../../components/video'
 import { UniComponent } from './UniComponent'
 
 export class UniVideo extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-video', Video, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-video', Video, parentNodeId, nodeJson)
   }
 }

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

@@ -4,7 +4,11 @@ import WebView from '../../../components/web-view'
 import { UniComponent } from './UniComponent'
 
 export class UniWebView extends UniComponent {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
-    super(id, 'uni-web-view', WebView, nodeJson)
+  constructor(
+    id: number,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(id, 'uni-web-view', WebView, parentNodeId, nodeJson)
   }
 }

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

 import { UniNodeJSON } from '@dcloudio/uni-shared'
-import { defineComponent, h } from 'vue'
+import { ComponentPublicInstance, defineComponent, h } from 'vue'
 import { UniComment } from '../elements/UniComment'
 import { UniTextElement } from '../elements/UniTextElement'
 import { UniTextNode } from '../elements/UniTextNode'
@@ -46,6 +46,7 @@ import { UniWebView } from './UniWebView'
 
 export interface UniCustomElement extends Element {
   __id: number
+  __vm: ComponentPublicInstance
   __listeners: Record<string, (evt: Event) => void>
 }
 
@@ -101,9 +102,10 @@ export type WrapperComponent = ReturnType<typeof createWrapper>
 export function createBuiltInComponent(
   type: number,
   id: number,
+  parentNodeId: number,
   nodeJson: Partial<UniNodeJSON>
 ) {
-  return new BuiltInComponents[type]!(id, nodeJson)
+  return new BuiltInComponents[type]!(id, parentNodeId, nodeJson)
 }
 
 export function createWrapper(

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

@@ -13,7 +13,11 @@ const PROP_NAMES_HOVER = ['space', 'decode']
 export class UniTextElement extends UniElement<TextProps> {
   private _text: string = ''
 
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+  constructor(
+    id: number,
+    _parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
     super(id, document.createElement('uni-text'), nodeJson, PROP_NAMES_HOVER)
   }
 

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

@@ -2,7 +2,11 @@ import '@dcloudio/uni-components/style/view.css'
 import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniHoverElement } from './UniHoverElement'
 export class UniViewElement extends UniHoverElement {
-  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+  constructor(
+    id: number,
+    _parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
     super(id, document.createElement('uni-view'), nodeJson)
   }
 }

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

@@ -20,7 +20,7 @@ export function onVdSync(actions: PageAction[]) {
       case ACTION_TYPE_PAGE_CREATED:
         return onPageCreated()
       case ACTION_TYPE_CREATE:
-        return createElement(action[1], action[2], action[3])
+        return createElement(action[1], action[2], action[3], action[4])
       case ACTION_TYPE_INSERT:
         return $(action[1]).insert(action[2], action[3])
       case ACTION_TYPE_REMOVE:

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

@@ -22,6 +22,7 @@ export function $(id: number) {
 export function createElement(
   id: number,
   tag: string | number,
+  parentNodeId?: number,
   nodeJson: Partial<UniNodeJSON> = {}
 ) {
   let element: UniNode
@@ -35,7 +36,7 @@ export function createElement(
   } else if (isString(tag)) {
     element = new UniElement(id, document.createElement(tag), nodeJson)
   } else {
-    element = createBuiltInComponent(tag, id, nodeJson)
+    element = createBuiltInComponent(tag, id, parentNodeId!, nodeJson)
   }
   elements.set(id, element)
   return element
@@ -91,7 +92,7 @@ function initSystemInfo(
 }
 
 function initPageElement() {
-  createElement(0, 'div', {}).$ = document.getElementById('app')!
+  createElement(0, 'div').$ = document.getElementById('app')!
 }
 
 function initPageCss(route: string) {