wip(vapor): component hydration

Author: yyx990803

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -26,7 +26,7 @@ export function render(_ctx) {
 `;
 
 exports[`compile > custom directive > component 1`] = `
-"import { resolveComponent as _resolveComponent, resolveDirective as _resolveDirective, createComponentWithFallback as _createComponentWithFallback, withVaporDirectives as _withVaporDirectives, insert as _insert, createIf as _createIf, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, resolveDirective as _resolveDirective, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, withVaporDirectives as _withVaporDirectives, createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
@@ -38,9 +38,9 @@ export function render(_ctx) {
     "default": () => {
       const n0 = _createIf(() => (true), () => {
         const n3 = t0()
+        _setInsertionState(n3)
         const n2 = _createComponentWithFallback(_component_Bar)
         _withVaporDirectives(n2, [[_directive_hello, void 0, void 0, { world: true }]])
-        _insert(n2, n3)
         return n3
       })
       return n0
@@ -149,7 +149,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { resolveComponent as _resolveComponent, child as _child, createComponentWithFallback as _createComponentWithFallback, prepend as _prepend, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, child as _child, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div> </div>")
 
@@ -158,8 +158,8 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
   const n3 = t1()
   const n2 = _child(n3)
+  _setInsertionState(n3, 0)
   const n1 = _createComponentWithFallback(_component_Comp)
-  _prepend(n3, n1)
   _renderEffect(() => {
     _setText(n2, _toDisplayString(_ctx.bar))
     _setProp(n3, "id", _ctx.foo)

packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -65,20 +65,20 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > nested v-for 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, insert as _insert, template as _template } from 'vue';
+"import { setInsertionState as _setInsertionState, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<span> </span>")
 const t1 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
     const n5 = t1()
+    _setInsertionState(n5)
     const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
       const n4 = t0()
       const x4 = _child(n4)
       _renderEffect(() => _setText(x4, _toDisplayString(_for_item1.value+_for_item0.value)))
       return n4
     }, null, 1)
-    _insert(n2, n5)
     return n5
   })
   return n0

packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap

@@ -36,14 +36,14 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-once > on component 1`] = `
-"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, insert as _insert, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n1 = t0()
+  _setInsertionState(n1)
   const n0 = _createComponentWithFallback(_component_Comp, { id: () => (_ctx.foo) }, null, null, true)
-  _insert(n0, n1)
   return n1
 }"
 `;

packages/compiler-vapor/__tests__/transforms/vOnce.spec.ts

@@ -132,10 +132,6 @@ describe('compiler: v-once', () => {
         id: 0,
         tag: 'Comp',
         once: true,
-      },
-      {
-        type: IRNodeTypes.INSERT_NODE,
-        elements: [0],
         parent: 1,
       },
     ])

packages/compiler-vapor/src/generators/component.ts

@@ -51,6 +51,7 @@ export function genCreateComponent(
   const rawSlots = genRawSlots(slots, context)
   const [ids, handlers] = processInlineHandlers(props, context)
   const rawProps = context.withId(() => genRawProps(props, context), ids)
+
   const inlineHandlers: CodeFragment[] = handlers.reduce<CodeFragment[]>(
     (acc, { name, value }) => {
       const handler = genEventHandler(context, value, undefined, false)

packages/compiler-vapor/src/generators/operation.ts

@@ -1,4 +1,10 @@
-import { type IREffect, IRNodeTypes, type OperationNode } from '../ir'
+import {
+  type IREffect,
+  IRNodeTypes,
+  type InsertionStateTypes,
+  type OperationNode,
+  isTypeThatNeedsInsertionState,
+} from '../ir'
 import type { CodegenContext } from '../generate'
 import { genInsertNode, genPrependNode } from './dom'
 import { genSetDynamicEvents, genSetEvent } from './event'
@@ -14,6 +20,7 @@ import {
   INDENT_START,
   NEWLINE,
   buildCodeFragment,
+  genCall,
 } from './utils'
 import { genCreateComponent } from './component'
 import { genSlotOutlet } from './slotOutlet'
@@ -26,6 +33,9 @@ export function genOperations(
 ): CodeFragment[] {
   const [frag, push] = buildCodeFragment()
   for (const operation of opers) {
+    if (isTypeThatNeedsInsertionState(operation) && operation.parent) {
+      push(...genInsertionstate(operation, context))
+    }
     push(...genOperation(operation, context))
   }
   return frag
@@ -134,3 +144,21 @@ export function genEffect(
 
   return frag
 }
+
+function genInsertionstate(
+  operation: InsertionStateTypes,
+  context: CodegenContext,
+): CodeFragment[] {
+  return [
+    NEWLINE,
+    ...genCall(
+      context.helper('setInsertionState'),
+      `n${operation.parent}`,
+      operation.anchor == null
+        ? undefined
+        : operation.anchor === -1 // -1 indicates prepend
+          ? `0` // runtime anchor value for prepend
+          : `n${operation.anchor}`,
+    ),
+  ]
+}

packages/compiler-vapor/src/ir/index.ts

@@ -76,6 +76,8 @@ export interface IfIRNode extends BaseIRNode {
   positive: BlockIRNode
   negative?: BlockIRNode | IfIRNode
   once?: boolean
+  parent?: number
+  anchor?: number
 }
 
 export interface IRFor {
@@ -93,6 +95,8 @@ export interface ForIRNode extends BaseIRNode, IRFor {
   once: boolean
   component: boolean
   onlyChild: boolean
+  parent?: number
+  anchor?: number
 }
 
 export interface SetPropIRNode extends BaseIRNode {
@@ -158,6 +162,7 @@ export interface SetTemplateRefIRNode extends BaseIRNode {
   effect: boolean
 }
 
+// TODO remove, no longer needed
 export interface CreateTextNodeIRNode extends BaseIRNode {
   type: IRNodeTypes.CREATE_TEXT_NODE
   id: number
@@ -198,6 +203,8 @@ export interface CreateComponentIRNode extends BaseIRNode {
   root: boolean
   once: boolean
   dynamic?: SimpleExpressionNode
+  parent?: number
+  anchor?: number
 }
 
 export interface DeclareOldRefIRNode extends BaseIRNode {
@@ -211,6 +218,8 @@ export interface SlotOutletIRNode extends BaseIRNode {
   name: SimpleExpressionNode
   props: IRProps[]
   fallback?: BlockIRNode
+  parent?: number
+  anchor?: number
 }
 
 export interface GetTextChildIRNode extends BaseIRNode {
@@ -288,3 +297,21 @@ export type VaporDirectiveNode = Overwrite<
     arg: Exclude<DirectiveNode['arg'], CompoundExpressionNode>
   }
 >
+
+export type InsertionStateTypes =
+  | IfIRNode
+  | ForIRNode
+  | SlotOutletIRNode
+  | CreateComponentIRNode
+
+export function isTypeThatNeedsInsertionState(
+  op: OperationNode,
+): op is InsertionStateTypes {
+  const type = op.type
+  return (
+    type === IRNodeTypes.CREATE_COMPONENT_NODE ||
+    type === IRNodeTypes.SLOT_OUTLET_NODE ||
+    type === IRNodeTypes.IF ||
+    type === IRNodeTypes.FOR
+  )
+}

packages/compiler-vapor/src/transforms/transformChildren.ts

@@ -4,7 +4,12 @@ import {
   type TransformContext,
   transformNode,
 } from '../transform'
-import { DynamicFlag, type IRDynamicInfo, IRNodeTypes } from '../ir'
+import {
+  DynamicFlag,
+  type IRDynamicInfo,
+  IRNodeTypes,
+  isTypeThatNeedsInsertionState as isBlockOperation,
+} from '../ir'
 
 export const transformChildren: NodeTransform = (node, context) => {
   const isFragment =
@@ -66,21 +71,11 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
       if (prevDynamics.length) {
         if (hasStaticTemplate) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`
-
           prevDynamics[0].flags -= DynamicFlag.NON_TEMPLATE
           const anchor = (prevDynamics[0].anchor = context.increaseId())
-          context.registerOperation({
-            type: IRNodeTypes.INSERT_NODE,
-            elements: prevDynamics.map(child => child.id!),
-            parent: context.reference(),
-            anchor,
-          })
+          registerInsertion(prevDynamics, context, anchor)
         } else {
-          context.registerOperation({
-            type: IRNodeTypes.PREPEND_NODE,
-            elements: prevDynamics.map(child => child.id!),
-            parent: context.reference(),
-          })
+          registerInsertion(prevDynamics, context, -1 /* prepend */)
         }
         prevDynamics = []
       }
@@ -89,10 +84,32 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
   }
 
   if (prevDynamics.length) {
-    context.registerOperation({
-      type: IRNodeTypes.INSERT_NODE,
-      elements: prevDynamics.map(child => child.id!),
-      parent: context.reference(),
-    })
+    registerInsertion(prevDynamics, context)
+  }
+}
+
+function registerInsertion(
+  dynamics: IRDynamicInfo[],
+  context: TransformContext,
+  anchor?: number,
+) {
+  for (const child of dynamics) {
+    if (child.template != null) {
+      // template node due to invalid nesting - generate actual insertion
+      context.registerOperation({
+        type: IRNodeTypes.INSERT_NODE,
+        elements: dynamics.map(child => child.id!),
+        parent: context.reference(),
+        anchor,
+      })
+    } else {
+      // block types
+      for (const op of context.block.operation) {
+        if (isBlockOperation(op) && op.id === child.id) {
+          op.parent = context.reference()
+          op.anchor = anchor
+        }
+      }
+    }
   }
 }