import {
applyVShow,
- children,
createComponent,
createIf,
defineVaporComponent,
'<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
-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', () => {
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])
import {
- children,
+ child,
createIf,
insert,
renderEffect,
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
},
),
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
+}
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
-}
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,