refactor: remove append helper

replace `append` with `insertBefore`

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

@@ -120,7 +120,7 @@ export function render(_ctx) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div><Comp></Comp></div>")
 
@@ -128,7 +128,7 @@ export function render(_ctx) {
   const n0 = t0()
   const n2 = t1()
   const n1 = _createTextNode()
-  _append(n2, n1)
+  _insert(n1, n2)
   _renderEffect(() => _setText(n1, _ctx.bar))
   _renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
   return [n0, n2]

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

@@ -1,16 +1,11 @@
 import type { CodegenContext } from '../generate'
-import type {
-  AppendNodeIRNode,
-  InsertNodeIRNode,
-  PrependNodeIRNode,
-} from '../ir'
+import type { InsertNodeIRNode, PrependNodeIRNode } from '../ir'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
 
 export function genInsertNode(
-  oper: InsertNodeIRNode,
+  { parent, elements, anchor }: InsertNodeIRNode,
   { vaporHelper }: CodegenContext,
 ): CodeFragment[] {
-  const elements = ([] as number[]).concat(oper.element)
   let element = elements.map(el => `n${el}`).join(', ')
   if (elements.length > 1) element = `[${element}]`
   return [
@@ -18,8 +13,8 @@ export function genInsertNode(
     ...genCall(
       vaporHelper('insert'),
       element,
-      `n${oper.parent}`,
-      `n${oper.anchor}`,
+      `n${parent}`,
+      anchor === undefined ? undefined : `n${anchor}`,
     ),
   ]
 }
@@ -37,17 +32,3 @@ export function genPrependNode(
     ),
   ]
 }
-
-export function genAppendNode(
-  oper: AppendNodeIRNode,
-  { vaporHelper }: CodegenContext,
-): CodeFragment[] {
-  return [
-    NEWLINE,
-    ...genCall(
-      vaporHelper('append'),
-      `n${oper.parent}`,
-      ...oper.elements.map(el => `n${el}`),
-    ),
-  ]
-}

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

@@ -1,6 +1,6 @@
 import { type IREffect, IRNodeTypes, type OperationNode } from '../ir'
 import type { CodegenContext } from '../generate'
-import { genAppendNode, genInsertNode, genPrependNode } from './dom'
+import { genInsertNode, genPrependNode } from './dom'
 import { genSetEvent } from './event'
 import { genFor } from './for'
 import { genSetHtml } from './html'
@@ -50,8 +50,6 @@ export function genOperation(
       return genInsertNode(oper, context)
     case IRNodeTypes.PREPEND_NODE:
       return genPrependNode(oper, context)
-    case IRNodeTypes.APPEND_NODE:
-      return genAppendNode(oper, context)
     case IRNodeTypes.IF:
       return genIf(oper, context)
     case IRNodeTypes.FOR:

packages/compiler-vapor/src/ir.ts

@@ -27,7 +27,6 @@ export enum IRNodeTypes {
 
   INSERT_NODE,
   PREPEND_NODE,
-  APPEND_NODE,
   CREATE_TEXT_NODE,
 
   WITH_DIRECTIVE,
@@ -147,9 +146,9 @@ export interface CreateTextNodeIRNode extends BaseIRNode {
 
 export interface InsertNodeIRNode extends BaseIRNode {
   type: IRNodeTypes.INSERT_NODE
-  element: number | number[]
+  elements: number[]
   parent: number
-  anchor: number
+  anchor?: number
 }
 
 export interface PrependNodeIRNode extends BaseIRNode {
@@ -158,12 +157,6 @@ export interface PrependNodeIRNode extends BaseIRNode {
   parent: number
 }
 
-export interface AppendNodeIRNode extends BaseIRNode {
-  type: IRNodeTypes.APPEND_NODE
-  elements: number[]
-  parent: number
-}
-
 export interface WithDirectiveIRNode extends BaseIRNode {
   type: IRNodeTypes.WITH_DIRECTIVE
   element: number
@@ -183,7 +176,6 @@ export type OperationNode =
   | CreateTextNodeIRNode
   | InsertNodeIRNode
   | PrependNodeIRNode
-  | AppendNodeIRNode
   | WithDirectiveIRNode
   | IfIRNode
   | ForIRNode

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

@@ -78,7 +78,7 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
 
           context.registerOperation({
             type: IRNodeTypes.INSERT_NODE,
-            element: prevDynamics.map(child => child.id!),
+            elements: prevDynamics.map(child => child.id!),
             parent: context.reference(),
             anchor,
           })
@@ -97,7 +97,7 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
 
   if (prevDynamics.length) {
     context.registerOperation({
-      type: IRNodeTypes.APPEND_NODE,
+      type: IRNodeTypes.INSERT_NODE,
       elements: prevDynamics.map(child => child.id!),
       parent: context.reference(),
     })

packages/runtime-vapor/__tests__/dom.spec.ts

@@ -1,4 +1,4 @@
-import { append, insert, normalizeBlock, prepend, remove } from '../src/dom/dom'
+import { insert, normalizeBlock, prepend, remove } from '../src/dom/element'
 import { fragmentKey } from '../src/render'
 
 const node1 = document.createTextNode('node1')
@@ -43,13 +43,6 @@ describe('dom', () => {
     expect(Array.from(container.childNodes)).toEqual([node3, node1, node2])
   })
 
-  test('append', () => {
-    const container = document.createElement('div')
-    append(container, [node1], node2)
-    append(container, { nodes: node3, [fragmentKey]: true })
-    expect(Array.from(container.childNodes)).toEqual([node1, node2, node3])
-  })
-
   test('remove', () => {
     const container = document.createElement('div')
     container.append(node1, node2, node3)

packages/runtime-vapor/src/dom/dom.ts → packages/runtime-vapor/src/dom/element.ts

@@ -27,10 +27,6 @@ export function prepend(parent: ParentNode, ...blocks: Block[]) {
   parent.prepend(...normalizeBlock(blocks))
 }
 
-export function append(parent: ParentNode, ...blocks: Block[]) {
-  parent.append(...normalizeBlock(blocks))
-}
-
 export function remove(block: Block, parent: ParentNode) {
   normalizeBlock(block).forEach(node => parent.removeChild(node))
 }

packages/runtime-vapor/src/for.ts

@@ -1,6 +1,6 @@
 import { type EffectScope, effectScope, isReactive } from '@vue/reactivity'
 import { isArray } from '@vue/shared'
-import { createComment, createTextNode, insert, remove } from './dom/dom'
+import { createComment, createTextNode, insert, remove } from './dom/element'
 import { renderEffect } from './renderWatch'
 import { type Block, type Fragment, fragmentKey } from './render'
 

packages/runtime-vapor/src/if.ts

@@ -1,7 +1,7 @@
 import { renderWatch } from './renderWatch'
 import { type Block, type Fragment, fragmentKey } from './render'
 import { type EffectScope, effectScope } from '@vue/reactivity'
-import { createComment, createTextNode, insert, remove } from './dom/dom'
+import { createComment, createTextNode, insert, remove } from './dom/element'
 
 type BlockFn = () => Block
 

packages/runtime-vapor/src/index.ts

@@ -74,7 +74,7 @@ export {
 } from './directives'
 
 export { template, children } from './dom/template'
-export { insert, prepend, append, remove, createTextNode } from './dom/dom'
+export { insert, prepend, remove, createTextNode } from './dom/element'
 export { setStyle } from './dom/style'
 export {
   setText,

packages/runtime-vapor/src/render.ts

@@ -15,7 +15,7 @@ import {
 } from './component'
 import { initProps } from './componentProps'
 import { invokeDirectiveHook } from './directives'
-import { insert, querySelector, remove } from './dom/dom'
+import { insert, querySelector, remove } from './dom/element'
 import { queuePostRenderEffect } from './scheduler'
 
 export const fragmentKey = Symbol(__DEV__ ? `fragmentKey` : ``)

playground/src/v-for.js

@@ -1,8 +1,8 @@
 // @ts-check
 import {
-  append,
   createFor,
   defineComponent,
+  insert,
   on,
   ref,
   renderEffect,
@@ -29,7 +29,7 @@ export default defineComponent({
         block => {
           const node = document.createTextNode('')
           const container = document.createElement('li')
-          append(container, node)
+          insert(node, container)
 
           const update = () => {
             const [item, index] = block.s
@@ -42,7 +42,7 @@ export default defineComponent({
         (item, index) => index,
       )
       const container = document.createElement('ul')
-      append(container, li)
+      insert(li, container)
 
       const input = document.createElement('input')
       on(input, 'input', () => e => {