wip: update test runtime
This commit is contained in:
Evan You
parent
9c0f820a8e
commit
645c1eceea
@ -1,10 +1,11 @@
|
||||
import { createRenderer, VNode } from '@vue/runtime-core'
|
||||
import { DOMRendererOptions } from './rendererOptions'
|
||||
import { nodeOps } from './nodeOps'
|
||||
import { patchProp } from './patchProp'
|
||||
|
||||
export const render = createRenderer(DOMRendererOptions) as (
|
||||
vnode: VNode | null,
|
||||
container: HTMLElement
|
||||
) => VNode
|
||||
export const render = createRenderer({
|
||||
patchProp,
|
||||
...nodeOps
|
||||
}) as (vnode: VNode | null, container: HTMLElement) => VNode
|
||||
|
||||
// re-export everything from core
|
||||
// h, Component, observer API, nextTick, flags & types
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
import { RendererOptions } from '@vue/runtime-core'
|
||||
import { patchProp } from './patchProp'
|
||||
|
||||
const doc = document
|
||||
const svgNS = 'http://www.w3.org/2000/svg'
|
||||
|
||||
export const DOMRendererOptions: RendererOptions = {
|
||||
patchProp,
|
||||
|
||||
export const nodeOps = {
|
||||
insert: (child: Node, parent: Node, anchor?: Node) => {
|
||||
if (anchor != null) {
|
||||
parent.insertBefore(child, anchor)
|
||||
@ -16,7 +11,6 @@ export const DOMRendererOptions: RendererOptions = {
|
||||
},
|
||||
|
||||
remove: (child: Node) => {
|
||||
if (!child) debugger
|
||||
const parent = child.parentNode
|
||||
if (parent != null) {
|
||||
parent.removeChild(child)
|
||||
@ -1,36 +1,32 @@
|
||||
import {
|
||||
h,
|
||||
createVNode as h,
|
||||
render,
|
||||
Component,
|
||||
nodeOps,
|
||||
NodeTypes,
|
||||
TestElement,
|
||||
TestText,
|
||||
dumpOps,
|
||||
NodeOpTypes,
|
||||
nextTick,
|
||||
observable,
|
||||
resetOps,
|
||||
serialize,
|
||||
renderInstance,
|
||||
triggerEvent
|
||||
TestText
|
||||
// dumpOps,
|
||||
// NodeOpTypes,
|
||||
// nextTick,
|
||||
// state,
|
||||
// resetOps,
|
||||
// serialize,
|
||||
// triggerEvent
|
||||
} from '../src'
|
||||
|
||||
describe('test renderer', () => {
|
||||
it('should work', async () => {
|
||||
class App extends Component {
|
||||
render() {
|
||||
return h(
|
||||
const root = nodeOps.createElement('div')
|
||||
render(
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
id: 'test'
|
||||
},
|
||||
'hello'
|
||||
),
|
||||
root
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
await render(h(App), root)
|
||||
|
||||
expect(root.children.length).toBe(1)
|
||||
|
||||
@ -44,137 +40,137 @@ describe('test renderer', () => {
|
||||
expect(text.text).toBe('hello')
|
||||
})
|
||||
|
||||
it('should record ops', async () => {
|
||||
const state = observable({
|
||||
id: 'test',
|
||||
text: 'hello'
|
||||
})
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
id: state.id
|
||||
},
|
||||
state.text
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
|
||||
resetOps()
|
||||
await render(h(App), root)
|
||||
const ops = dumpOps()
|
||||
|
||||
expect(ops.length).toBe(5)
|
||||
|
||||
expect(ops[0]).toEqual({
|
||||
type: NodeOpTypes.CREATE,
|
||||
nodeType: NodeTypes.ELEMENT,
|
||||
tag: 'div',
|
||||
targetNode: root.children[0]
|
||||
})
|
||||
|
||||
expect(ops[1]).toEqual({
|
||||
type: NodeOpTypes.PATCH,
|
||||
targetNode: root.children[0],
|
||||
propKey: 'id',
|
||||
propPrevValue: null,
|
||||
propNextValue: 'test'
|
||||
})
|
||||
|
||||
expect(ops[2]).toEqual({
|
||||
type: NodeOpTypes.CREATE,
|
||||
nodeType: NodeTypes.TEXT,
|
||||
text: 'hello',
|
||||
targetNode: (root.children[0] as TestElement).children[0]
|
||||
})
|
||||
|
||||
expect(ops[3]).toEqual({
|
||||
type: NodeOpTypes.APPEND,
|
||||
targetNode: (root.children[0] as TestElement).children[0],
|
||||
parentNode: root.children[0]
|
||||
})
|
||||
|
||||
expect(ops[4]).toEqual({
|
||||
type: NodeOpTypes.APPEND,
|
||||
targetNode: root.children[0],
|
||||
parentNode: root
|
||||
})
|
||||
|
||||
// test update ops
|
||||
state.id = 'foo'
|
||||
state.text = 'bar'
|
||||
await nextTick()
|
||||
|
||||
const updateOps = dumpOps()
|
||||
expect(updateOps.length).toBe(2)
|
||||
|
||||
expect(updateOps[0]).toEqual({
|
||||
type: NodeOpTypes.PATCH,
|
||||
targetNode: root.children[0],
|
||||
propKey: 'id',
|
||||
propPrevValue: 'test',
|
||||
propNextValue: 'foo'
|
||||
})
|
||||
|
||||
expect(updateOps[1]).toEqual({
|
||||
type: NodeOpTypes.SET_TEXT,
|
||||
targetNode: (root.children[0] as TestElement).children[0],
|
||||
text: 'bar'
|
||||
})
|
||||
})
|
||||
|
||||
it('should be able to serialize nodes', async () => {
|
||||
class App extends Component {
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
id: 'test'
|
||||
},
|
||||
[h('span', 'foo'), 'hello']
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
await render(h(App), root)
|
||||
expect(serialize(root)).toEqual(
|
||||
`<div><div id="test"><span>foo</span>hello</div></div>`
|
||||
)
|
||||
expect(serialize(root, 2)).toEqual(
|
||||
`<div>
|
||||
<div id="test">
|
||||
<span>
|
||||
foo
|
||||
</span>
|
||||
hello
|
||||
</div>
|
||||
</div>`
|
||||
)
|
||||
})
|
||||
|
||||
it('should be able to trigger events', async () => {
|
||||
class App extends Component {
|
||||
count = 0
|
||||
inc() {
|
||||
this.count++
|
||||
}
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
onClick: this.inc
|
||||
},
|
||||
this.count
|
||||
)
|
||||
}
|
||||
}
|
||||
const app = await renderInstance(App)
|
||||
triggerEvent(app.$el, 'click')
|
||||
expect(app.count).toBe(1)
|
||||
await nextTick()
|
||||
expect(serialize(app.$el)).toBe(`<div>1</div>`)
|
||||
})
|
||||
// it('should record ops', async () => {
|
||||
// const store = state({
|
||||
// id: 'test',
|
||||
// text: 'hello'
|
||||
// })
|
||||
|
||||
// class App extends Component {
|
||||
// render() {
|
||||
// return h(
|
||||
// 'div',
|
||||
// {
|
||||
// id: store.id
|
||||
// },
|
||||
// store.text
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
// const root = nodeOps.createElement('div')
|
||||
|
||||
// resetOps()
|
||||
// await render(h(App), root)
|
||||
// const ops = dumpOps()
|
||||
|
||||
// expect(ops.length).toBe(5)
|
||||
|
||||
// expect(ops[0]).toEqual({
|
||||
// type: NodeOpTypes.CREATE,
|
||||
// nodeType: NodeTypes.ELEMENT,
|
||||
// tag: 'div',
|
||||
// targetNode: root.children[0]
|
||||
// })
|
||||
|
||||
// expect(ops[1]).toEqual({
|
||||
// type: NodeOpTypes.PATCH,
|
||||
// targetNode: root.children[0],
|
||||
// propKey: 'id',
|
||||
// propPrevValue: null,
|
||||
// propNextValue: 'test'
|
||||
// })
|
||||
|
||||
// expect(ops[2]).toEqual({
|
||||
// type: NodeOpTypes.CREATE,
|
||||
// nodeType: NodeTypes.TEXT,
|
||||
// text: 'hello',
|
||||
// targetNode: (root.children[0] as TestElement).children[0]
|
||||
// })
|
||||
|
||||
// expect(ops[3]).toEqual({
|
||||
// type: NodeOpTypes.APPEND,
|
||||
// targetNode: (root.children[0] as TestElement).children[0],
|
||||
// parentNode: root.children[0]
|
||||
// })
|
||||
|
||||
// expect(ops[4]).toEqual({
|
||||
// type: NodeOpTypes.APPEND,
|
||||
// targetNode: root.children[0],
|
||||
// parentNode: root
|
||||
// })
|
||||
|
||||
// // test update ops
|
||||
// store.id = 'foo'
|
||||
// store.text = 'bar'
|
||||
// await nextTick()
|
||||
|
||||
// const updateOps = dumpOps()
|
||||
// expect(updateOps.length).toBe(2)
|
||||
|
||||
// expect(updateOps[0]).toEqual({
|
||||
// type: NodeOpTypes.PATCH,
|
||||
// targetNode: root.children[0],
|
||||
// propKey: 'id',
|
||||
// propPrevValue: 'test',
|
||||
// propNextValue: 'foo'
|
||||
// })
|
||||
|
||||
// expect(updateOps[1]).toEqual({
|
||||
// type: NodeOpTypes.SET_TEXT,
|
||||
// targetNode: (root.children[0] as TestElement).children[0],
|
||||
// text: 'bar'
|
||||
// })
|
||||
// })
|
||||
|
||||
// it('should be able to serialize nodes', async () => {
|
||||
// class App extends Component {
|
||||
// render() {
|
||||
// return h(
|
||||
// 'div',
|
||||
// {
|
||||
// id: 'test'
|
||||
// },
|
||||
// [h('span', 'foo'), 'hello']
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
// const root = nodeOps.createElement('div')
|
||||
// await render(h(App), root)
|
||||
// expect(serialize(root)).toEqual(
|
||||
// `<div><div id="test"><span>foo</span>hello</div></div>`
|
||||
// )
|
||||
// expect(serialize(root, 2)).toEqual(
|
||||
// `<div>
|
||||
// <div id="test">
|
||||
// <span>
|
||||
// foo
|
||||
// </span>
|
||||
// hello
|
||||
// </div>
|
||||
// </div>`
|
||||
// )
|
||||
// })
|
||||
|
||||
// it('should be able to trigger events', async () => {
|
||||
// class App extends Component {
|
||||
// count = 0
|
||||
// inc() {
|
||||
// this.count++
|
||||
// }
|
||||
// render() {
|
||||
// return h(
|
||||
// 'div',
|
||||
// {
|
||||
// onClick: this.inc
|
||||
// },
|
||||
// this.count
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
// const app = await renderInstance(App)
|
||||
// triggerEvent(app.$el, 'click')
|
||||
// expect(app.count).toBe(1)
|
||||
// await nextTick()
|
||||
// expect(serialize(app.$el)).toBe(`<div>1</div>`)
|
||||
// })
|
||||
})
|
||||
|
||||
@ -1,36 +1,11 @@
|
||||
import {
|
||||
h,
|
||||
createRenderer,
|
||||
Component,
|
||||
createComponentInstance
|
||||
} from '@vue/runtime-core'
|
||||
import { createRenderer, VNode } from '@vue/runtime-core'
|
||||
import { nodeOps, TestElement } from './nodeOps'
|
||||
import { patchData } from './patchData'
|
||||
import { patchProp } from './patchProp'
|
||||
|
||||
const { render: _render } = createRenderer({
|
||||
nodeOps,
|
||||
patchData
|
||||
})
|
||||
|
||||
type publicRender = (
|
||||
node: {} | null,
|
||||
container: TestElement
|
||||
) => Promise<Component | null>
|
||||
export const render = _render as publicRender
|
||||
|
||||
export function createInstance<T extends Component>(
|
||||
Class: new () => T,
|
||||
props?: any
|
||||
): T {
|
||||
return createComponentInstance(h(Class, props)).$proxy as any
|
||||
}
|
||||
|
||||
export function renderInstance<T extends Component>(
|
||||
Class: new () => T,
|
||||
props?: any
|
||||
): Promise<T> {
|
||||
return render(h(Class, props), nodeOps.createElement('div')) as any
|
||||
}
|
||||
export const render = createRenderer({
|
||||
patchProp,
|
||||
...nodeOps
|
||||
}) as (node: VNode | null, container: TestElement) => VNode
|
||||
|
||||
export { serialize } from './serialize'
|
||||
export { triggerEvent } from './triggerEvent'
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export const enum NodeTypes {
|
||||
TEXT = 'text',
|
||||
ELEMENT = 'element'
|
||||
ELEMENT = 'element',
|
||||
COMMENT = 'comment'
|
||||
}
|
||||
|
||||
export interface TestElement {
|
||||
@ -20,15 +21,21 @@ export interface TestText {
|
||||
text: string
|
||||
}
|
||||
|
||||
export type TestNode = TestElement | TestText
|
||||
export interface TestComment {
|
||||
id: number
|
||||
type: NodeTypes.COMMENT
|
||||
parentNode: TestElement | null
|
||||
text: string
|
||||
}
|
||||
|
||||
export type TestNode = TestElement | TestText | TestComment
|
||||
|
||||
export const enum NodeOpTypes {
|
||||
CREATE = 'create',
|
||||
INSERT = 'insert',
|
||||
APPEND = 'append',
|
||||
REMOVE = 'remove',
|
||||
SET_TEXT = 'setText',
|
||||
CLEAR = 'clearContent',
|
||||
SET_ELEMENT_TEXT = 'setElementText',
|
||||
PATCH = 'patch'
|
||||
}
|
||||
|
||||
@ -39,7 +46,7 @@ export interface NodeOp {
|
||||
text?: string
|
||||
targetNode?: TestNode
|
||||
parentNode?: TestElement
|
||||
refNode?: TestNode
|
||||
refNode?: TestNode | null
|
||||
propKey?: string
|
||||
propPrevValue?: any
|
||||
propNextValue?: any
|
||||
@ -97,6 +104,22 @@ function createText(text: string): TestText {
|
||||
return node
|
||||
}
|
||||
|
||||
function createComment(text: string): TestComment {
|
||||
const node: TestComment = {
|
||||
id: nodeId++,
|
||||
type: NodeTypes.COMMENT,
|
||||
text,
|
||||
parentNode: null
|
||||
}
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.CREATE,
|
||||
nodeType: NodeTypes.COMMENT,
|
||||
targetNode: node,
|
||||
text
|
||||
})
|
||||
return node
|
||||
}
|
||||
|
||||
function setText(node: TestText, text: string) {
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.SET_TEXT,
|
||||
@ -106,40 +129,35 @@ function setText(node: TestText, text: string) {
|
||||
node.text = text
|
||||
}
|
||||
|
||||
function appendChild(parent: TestElement, child: TestNode) {
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.APPEND,
|
||||
targetNode: child,
|
||||
parentNode: parent
|
||||
})
|
||||
if (child.parentNode) {
|
||||
removeChild(child.parentNode, child)
|
||||
}
|
||||
parent.children.push(child)
|
||||
child.parentNode = parent
|
||||
}
|
||||
|
||||
function insertBefore(parent: TestElement, child: TestNode, ref: TestNode) {
|
||||
if (child.parentNode) {
|
||||
removeChild(child.parentNode, child)
|
||||
}
|
||||
const refIndex = parent.children.indexOf(ref)
|
||||
function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
|
||||
let refIndex
|
||||
if (ref != null) {
|
||||
refIndex = parent.children.indexOf(ref)
|
||||
if (refIndex === -1) {
|
||||
console.error('ref: ', ref)
|
||||
console.error('parent: ', parent)
|
||||
throw new Error('ref is not a child of parent')
|
||||
}
|
||||
}
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.INSERT,
|
||||
targetNode: child,
|
||||
parentNode: parent,
|
||||
refNode: ref
|
||||
})
|
||||
remove(child)
|
||||
if (refIndex === undefined) {
|
||||
parent.children.push(child)
|
||||
child.parentNode = parent
|
||||
} else {
|
||||
parent.children.splice(refIndex, 0, child)
|
||||
child.parentNode = parent
|
||||
}
|
||||
}
|
||||
|
||||
function removeChild(parent: TestElement, child: TestNode) {
|
||||
function remove(child: TestNode) {
|
||||
const parent = child.parentNode
|
||||
if (parent != null) {
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.REMOVE,
|
||||
targetNode: child,
|
||||
@ -155,20 +173,18 @@ function removeChild(parent: TestElement, child: TestNode) {
|
||||
}
|
||||
child.parentNode = null
|
||||
}
|
||||
}
|
||||
|
||||
function clearContent(node: TestNode) {
|
||||
function setElementText(el: TestElement, text: string) {
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.CLEAR,
|
||||
targetNode: node
|
||||
type: NodeOpTypes.SET_ELEMENT_TEXT,
|
||||
targetNode: el,
|
||||
text
|
||||
})
|
||||
if (node.type === NodeTypes.ELEMENT) {
|
||||
node.children.forEach(c => {
|
||||
el.children.forEach(c => {
|
||||
c.parentNode = null
|
||||
})
|
||||
node.children = []
|
||||
} else {
|
||||
node.text = ''
|
||||
}
|
||||
el.children = [createText(text)]
|
||||
}
|
||||
|
||||
function parentNode(node: TestNode): TestElement | null {
|
||||
@ -189,16 +205,14 @@ function querySelector() {
|
||||
}
|
||||
|
||||
export const nodeOps = {
|
||||
insert,
|
||||
remove,
|
||||
createElement,
|
||||
createText,
|
||||
createComment,
|
||||
setText,
|
||||
appendChild,
|
||||
insertBefore,
|
||||
removeChild,
|
||||
clearContent,
|
||||
setElementText,
|
||||
parentNode,
|
||||
nextSibling,
|
||||
querySelector
|
||||
}
|
||||
|
||||
export function patchData() {}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { TestElement, logNodeOp, NodeOpTypes } from './nodeOps'
|
||||
import { isOn } from '@vue/shared'
|
||||
|
||||
export function patchData(
|
||||
export function patchProp(
|
||||
el: TestElement,
|
||||
key: string,
|
||||
prevValue: any,
|
||||
nextValue: any
|
||||
nextValue: any,
|
||||
prevValue: any
|
||||
) {
|
||||
logNodeOp({
|
||||
type: NodeOpTypes.PATCH,
|
||||
@ -1,4 +1,10 @@
|
||||
import { TestElement, TestNode, NodeTypes, TestText } from './nodeOps'
|
||||
import {
|
||||
TestElement,
|
||||
TestNode,
|
||||
NodeTypes,
|
||||
TestText,
|
||||
TestComment
|
||||
} from './nodeOps'
|
||||
import { isOn } from '@vue/shared'
|
||||
|
||||
export function serialize(
|
||||
@ -37,7 +43,14 @@ function serializeElement(
|
||||
)
|
||||
}
|
||||
|
||||
function serializeText(node: TestText, indent: number, depth: number): string {
|
||||
function serializeText(
|
||||
node: TestText | TestComment,
|
||||
indent: number,
|
||||
depth: number
|
||||
): string {
|
||||
const padding = indent ? ` `.repeat(indent).repeat(depth) : ``
|
||||
return padding + node.text
|
||||
return (
|
||||
padding +
|
||||
(node.type === NodeTypes.COMMENT ? `<!--${node.text}-->` : node.text)
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user