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

This commit is contained in:
Evan You 2025-02-12 15:47:14 +08:00
parent 242cc15fa6
commit 4121de4960
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
6 changed files with 32 additions and 57 deletions

View File

@ -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

View File

@ -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])

View File

@ -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
},
),

View File

@ -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
}

View File

@ -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
}

View File

@ -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,