refactor(vapor): reorg node op helpers + remove children helper
This commit is contained in:
parent
242cc15fa6
commit
4121de4960
|
@ -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
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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
|
||||
},
|
||||
),
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue