refactor(vapor): reorg node op helpers + remove children helper

Author: yyx990803

packages/runtime-vapor/__tests__/directives/vShow.spec.ts

@@ -1,6 +1,5 @@
 import {
   applyVShow,
-  children,
   createComponent,
   createIf,
   defineVaporComponent,
@@ -23,8 +22,8 @@ const createDemo = (defaultValue: boolean) =>
       '<div><button>toggle</button><h1>hello world</h1></div>',
     )
     const n0 = t0()
-    const n1 = children(n0, 0)
-    const n2 = children(n0, 1)
+    const n1 = n0.firstChild!
+    const n2 = n1.nextSibling
     applyVShow(n2 as VShowElement, () => visible.value)
     on(n1 as HTMLElement, 'click', handleClick)
     return n0

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

@@ -1,4 +1,5 @@
-import { children, next, nextn, template } from '../../src/dom/template'
+import { template } from '../../src/dom/template'
+import { child, next, nextn } from '../../src/dom/node'
 
 describe('api: template', () => {
   test('create element', () => {
@@ -17,21 +18,10 @@ describe('api: template', () => {
     expect(root.$root).toBe(true)
   })
 
-  test('children', () => {
-    const t = template('<div><span><b>nested</b></span><p></p></div>')
-    const root = t()
-    const span = children(root, 0)
-    const b = children(span, 0)
-    const p = children(root, 1)
-    expect(span).toBe(root.firstChild)
-    expect(b).toBe(root.firstChild!.firstChild)
-    expect(p).toBe(root.firstChild!.nextSibling)
-  })
-
   test('next', () => {
     const t = template('<div><span></span><b></b><p></p></div>')
     const root = t()
-    const span = children(root, 0)
+    const span = child(root as ParentNode)
     const b = next(span)
 
     expect(span).toBe(root.childNodes[0])

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

@@ -1,5 +1,5 @@
 import {
-  children,
+  child,
   createIf,
   insert,
   renderEffect,
@@ -161,23 +161,21 @@ describe('createIf', () => {
       const n1 = createIf(
         spyConditionFn1,
         () => {
-          const n2 = t0()
-          withDirectives(children(n2, 0), [
-            [vDirective, () => (update.value, '1')],
-          ])
+          const n2 = t0() as ParentNode
+          withDirectives(child(n2), [[vDirective, () => (update.value, '1')]])
           return n2
         },
         () =>
           createIf(
             spyConditionFn2,
             () => {
-              const n2 = t0()
-              withDirectives(children(n2, 0), [[vDirective, () => '2']])
+              const n2 = t0() as ParentNode
+              withDirectives(child(n2), [[vDirective, () => '2']])
               return n2
             },
             () => {
-              const n2 = t0()
-              withDirectives(children(n2, 0), [[vDirective, () => '3']])
+              const n2 = t0() as ParentNode
+              withDirectives(child(n2), [[vDirective, () => '3']])
               return n2
             },
           ),

packages/runtime-vapor/src/dom/node.ts

@@ -12,3 +12,21 @@ export function createComment(data: string): Comment {
 export function querySelector(selectors: string): Element | null {
   return document.querySelector(selectors)
 }
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function child(node: ParentNode): Node {
+  return node.firstChild!
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function next(node: Node): Node {
+  return node.nextSibling!
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function nextn(node: Node, offset: number = 1): Node {
+  for (let i = 0; i < offset; i++) {
+    node = node.nextSibling!
+  }
+  return node
+}

packages/runtime-vapor/src/dom/template.ts

@@ -12,33 +12,3 @@ export function template(html: string, root?: boolean) {
     return ret
   }
 }
-
-/*! #__NO_SIDE_EFFECTS__ */
-export function children(node: Node, ...paths: number[]): Node {
-  for (const idx of paths) {
-    // In various situations, select the quickest approach.
-    // See https://github.com/vuejs/vue-vapor/pull/263
-    node =
-      idx === 0
-        ? node.firstChild!
-        : idx === 1
-          ? node.firstChild!.nextSibling!
-          : node.childNodes[idx]
-  }
-  return node
-}
-
-export function child(node: ParentNode): Node {
-  return node.firstChild!
-}
-
-export function next(node: Node): Node {
-  return node.nextSibling!
-}
-
-export function nextn(node: Node, offset: number = 1): Node {
-  for (let i = 0; i < offset; i++) {
-    node = node.nextSibling!
-  }
-  return node
-}

packages/runtime-vapor/src/index.ts

@@ -9,8 +9,8 @@ export { insert, prepend, remove } from './block'
 export { createComponent, createComponentWithFallback } from './component'
 export { renderEffect } from './renderEffect'
 export { createSlot } from './componentSlots'
-export { template, children, child, next, nextn } from './dom/template'
-export { createTextNode } from './dom/node'
+export { template } from './dom/template'
+export { createTextNode, child, next, nextn } from './dom/node'
 export {
   setText,
   setHtml,