theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: update test runtime

Browse Source
This commit is contained in:
Evan You 2019-06-20 21:28:37 +08:00
parent 9c0f820a8e
commit 645c1eceea
7 changed files with 245 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/runtime-dom/src/index.ts
View File

@ -1,10 +1,11 @@
import { createRenderer, VNode } from '@vue/runtime-core' 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 ( export const render = createRenderer({
vnode: VNode | null, patchProp,
container: HTMLElement ...nodeOps
) => VNode }) as (vnode: VNode | null, container: HTMLElement) => VNode
// re-export everything from core // re-export everything from core
// h, Component, observer API, nextTick, flags & types // h, Component, observer API, nextTick, flags & types

8
packages/runtime-dom/src/rendererOptions.ts → packages/runtime-dom/src/nodeOps.ts
View File

@ -1,12 +1,7 @@
import { RendererOptions } from '@vue/runtime-core'
import { patchProp } from './patchProp'
const doc = document const doc = document
const svgNS = 'http://www.w3.org/2000/svg' const svgNS = 'http://www.w3.org/2000/svg'
export const DOMRendererOptions: RendererOptions = { export const nodeOps = {
patchProp,
insert: (child: Node, parent: Node, anchor?: Node) => { insert: (child: Node, parent: Node, anchor?: Node) => {
if (anchor != null) { if (anchor != null) {
parent.insertBefore(child, anchor) parent.insertBefore(child, anchor)
@ -16,7 +11,6 @@ export const DOMRendererOptions: RendererOptions = {
}, },
remove: (child: Node) => { remove: (child: Node) => {
if (!child) debugger
const parent = child.parentNode const parent = child.parentNode
if (parent != null) { if (parent != null) {
parent.removeChild(child) parent.removeChild(child)

280
packages/runtime-test/__tests__/testRuntime.spec.ts
View File

@ -1,36 +1,32 @@
import { import {
h, createVNode as h,
render, render,
Component,
nodeOps, nodeOps,
NodeTypes, NodeTypes,
TestElement, TestElement,
TestText, TestText
dumpOps, // dumpOps,
NodeOpTypes, // NodeOpTypes,
nextTick, // nextTick,
observable, // state,
resetOps, // resetOps,
serialize, // serialize,
renderInstance, // triggerEvent
triggerEvent
} from '../src' } from '../src'
describe('test renderer', () => { describe('test renderer', () => {
it('should work', async () => { it('should work', async () => {
class App extends Component {
render() {
return h(
'div',
{
id: 'test'
},
'hello'
)
}
}
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
await render(h(App), root) render(
h(
'div',
{
id: 'test'
},
'hello'
),
root
)
expect(root.children.length).toBe(1) expect(root.children.length).toBe(1)
@ -44,137 +40,137 @@ describe('test renderer', () => {
expect(text.text).toBe('hello') expect(text.text).toBe('hello')
}) })
it('should record ops', async () => { // it('should record ops', async () => {
const state = observable({ // const store = state({
id: 'test', // id: 'test',
text: 'hello' // text: 'hello'
}) // })
class App extends Component { // class App extends Component {
render() { // render() {
return h( // return h(
'div', // 'div',
{ // {
id: state.id // id: store.id
}, // },
state.text // store.text
) // )
} // }
} // }
const root = nodeOps.createElement('div') // const root = nodeOps.createElement('div')
resetOps() // resetOps()
await render(h(App), root) // await render(h(App), root)
const ops = dumpOps() // const ops = dumpOps()
expect(ops.length).toBe(5) // expect(ops.length).toBe(5)
expect(ops[0]).toEqual({ // expect(ops[0]).toEqual({
type: NodeOpTypes.CREATE, // type: NodeOpTypes.CREATE,
nodeType: NodeTypes.ELEMENT, // nodeType: NodeTypes.ELEMENT,
tag: 'div', // tag: 'div',
targetNode: root.children[0] // targetNode: root.children[0]
}) // })
expect(ops[1]).toEqual({ // expect(ops[1]).toEqual({
type: NodeOpTypes.PATCH, // type: NodeOpTypes.PATCH,
targetNode: root.children[0], // targetNode: root.children[0],
propKey: 'id', // propKey: 'id',
propPrevValue: null, // propPrevValue: null,
propNextValue: 'test' // propNextValue: 'test'
}) // })
expect(ops[2]).toEqual({ // expect(ops[2]).toEqual({
type: NodeOpTypes.CREATE, // type: NodeOpTypes.CREATE,
nodeType: NodeTypes.TEXT, // nodeType: NodeTypes.TEXT,
text: 'hello', // text: 'hello',
targetNode: (root.children[0] as TestElement).children[0] // targetNode: (root.children[0] as TestElement).children[0]
}) // })
expect(ops[3]).toEqual({ // expect(ops[3]).toEqual({
type: NodeOpTypes.APPEND, // type: NodeOpTypes.APPEND,
targetNode: (root.children[0] as TestElement).children[0], // targetNode: (root.children[0] as TestElement).children[0],
parentNode: root.children[0] // parentNode: root.children[0]
}) // })
expect(ops[4]).toEqual({ // expect(ops[4]).toEqual({
type: NodeOpTypes.APPEND, // type: NodeOpTypes.APPEND,
targetNode: root.children[0], // targetNode: root.children[0],
parentNode: root // parentNode: root
}) // })
// test update ops // // test update ops
state.id = 'foo' // store.id = 'foo'
state.text = 'bar' // store.text = 'bar'
await nextTick() // await nextTick()
const updateOps = dumpOps() // const updateOps = dumpOps()
expect(updateOps.length).toBe(2) // expect(updateOps.length).toBe(2)
expect(updateOps[0]).toEqual({ // expect(updateOps[0]).toEqual({
type: NodeOpTypes.PATCH, // type: NodeOpTypes.PATCH,
targetNode: root.children[0], // targetNode: root.children[0],
propKey: 'id', // propKey: 'id',
propPrevValue: 'test', // propPrevValue: 'test',
propNextValue: 'foo' // propNextValue: 'foo'
}) // })
expect(updateOps[1]).toEqual({ // expect(updateOps[1]).toEqual({
type: NodeOpTypes.SET_TEXT, // type: NodeOpTypes.SET_TEXT,
targetNode: (root.children[0] as TestElement).children[0], // targetNode: (root.children[0] as TestElement).children[0],
text: 'bar' // text: 'bar'
}) // })
}) // })
it('should be able to serialize nodes', async () => { // it('should be able to serialize nodes', async () => {
class App extends Component { // class App extends Component {
render() { // render() {
return h( // return h(
'div', // 'div',
{ // {
id: 'test' // id: 'test'
}, // },
[h('span', 'foo'), 'hello'] // [h('span', 'foo'), 'hello']
) // )
} // }
} // }
const root = nodeOps.createElement('div') // const root = nodeOps.createElement('div')
await render(h(App), root) // await render(h(App), root)
expect(serialize(root)).toEqual( // expect(serialize(root)).toEqual(
`<div><div id="test"><span>foo</span>hello</div></div>` // `<div><div id="test"><span>foo</span>hello</div></div>`
) // )
expect(serialize(root, 2)).toEqual( // expect(serialize(root, 2)).toEqual(
`<div> // `<div>
<div id="test"> // <div id="test">
<span> // <span>
foo // foo
</span> // </span>
hello // hello
</div> // </div>
</div>` // </div>`
) // )
}) // })
it('should be able to trigger events', async () => { // it('should be able to trigger events', async () => {
class App extends Component { // class App extends Component {
count = 0 // count = 0
inc() { // inc() {
this.count++ // this.count++
} // }
render() { // render() {
return h( // return h(
'div', // 'div',
{ // {
onClick: this.inc // onClick: this.inc
}, // },
this.count // this.count
) // )
} // }
} // }
const app = await renderInstance(App) // const app = await renderInstance(App)
triggerEvent(app.$el, 'click') // triggerEvent(app.$el, 'click')
expect(app.count).toBe(1) // expect(app.count).toBe(1)
await nextTick() // await nextTick()
expect(serialize(app.$el)).toBe(`<div>1</div>`) // expect(serialize(app.$el)).toBe(`<div>1</div>`)
}) // })
}) })

37
packages/runtime-test/src/index.ts
View File

@ -1,36 +1,11 @@
import { import { createRenderer, VNode } from '@vue/runtime-core'
h,
createRenderer,
Component,
createComponentInstance
} from '@vue/runtime-core'
import { nodeOps, TestElement } from './nodeOps' import { nodeOps, TestElement } from './nodeOps'
import { patchData } from './patchData' import { patchProp } from './patchProp'
const { render: _render } = createRenderer({ export const render = createRenderer({
nodeOps, patchProp,
patchData ...nodeOps
}) }) as (node: VNode | null, container: TestElement) => VNode
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 { serialize } from './serialize' export { serialize } from './serialize'
export { triggerEvent } from './triggerEvent' export { triggerEvent } from './triggerEvent'

136
packages/runtime-test/src/nodeOps.ts
View File

@ -1,6 +1,7 @@
export const enum NodeTypes { export const enum NodeTypes {
TEXT = 'text', TEXT = 'text',
ELEMENT = 'element' ELEMENT = 'element',
COMMENT = 'comment'
} }
export interface TestElement { export interface TestElement {
@ -20,15 +21,21 @@ export interface TestText {
text: string 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 { export const enum NodeOpTypes {
CREATE = 'create', CREATE = 'create',
INSERT = 'insert', INSERT = 'insert',
APPEND = 'append',
REMOVE = 'remove', REMOVE = 'remove',
SET_TEXT = 'setText', SET_TEXT = 'setText',
CLEAR = 'clearContent', SET_ELEMENT_TEXT = 'setElementText',
PATCH = 'patch' PATCH = 'patch'
} }
@ -39,7 +46,7 @@ export interface NodeOp {
text?: string text?: string
targetNode?: TestNode targetNode?: TestNode
parentNode?: TestElement parentNode?: TestElement
refNode?: TestNode refNode?: TestNode | null
propKey?: string propKey?: string
propPrevValue?: any propPrevValue?: any
propNextValue?: any propNextValue?: any
@ -97,6 +104,22 @@ function createText(text: string): TestText {
return node 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) { function setText(node: TestText, text: string) {
logNodeOp({ logNodeOp({
type: NodeOpTypes.SET_TEXT, type: NodeOpTypes.SET_TEXT,
@ -106,28 +129,15 @@ function setText(node: TestText, text: string) {
node.text = text node.text = text
} }
function appendChild(parent: TestElement, child: TestNode) { function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
logNodeOp({ let refIndex
type: NodeOpTypes.APPEND, if (ref != null) {
targetNode: child, refIndex = parent.children.indexOf(ref)
parentNode: parent if (refIndex === -1) {
}) console.error('ref: ', ref)
if (child.parentNode) { console.error('parent: ', parent)
removeChild(child.parentNode, child) throw new Error('ref is not a child of parent')
} }
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)
if (refIndex === -1) {
console.error('ref: ', ref)
console.error('parent: ', parent)
throw new Error('ref is not a child of parent')
} }
logNodeOp({ logNodeOp({
type: NodeOpTypes.INSERT, type: NodeOpTypes.INSERT,
@ -135,42 +145,48 @@ function insertBefore(parent: TestElement, child: TestNode, ref: TestNode) {
parentNode: parent, parentNode: parent,
refNode: ref refNode: ref
}) })
parent.children.splice(refIndex, 0, child) remove(child)
child.parentNode = parent if (refIndex === undefined) {
} parent.children.push(child)
child.parentNode = parent
function removeChild(parent: TestElement, child: TestNode) {
logNodeOp({
type: NodeOpTypes.REMOVE,
targetNode: child,
parentNode: parent
})
const i = parent.children.indexOf(child)
if (i > -1) {
parent.children.splice(i, 1)
} else { } else {
console.error('target: ', child) parent.children.splice(refIndex, 0, child)
console.error('parent: ', parent) child.parentNode = parent
throw Error('target is not a childNode of parent')
} }
child.parentNode = null
} }
function clearContent(node: TestNode) { function remove(child: TestNode) {
logNodeOp({ const parent = child.parentNode
type: NodeOpTypes.CLEAR, if (parent != null) {
targetNode: node logNodeOp({
}) type: NodeOpTypes.REMOVE,
if (node.type === NodeTypes.ELEMENT) { targetNode: child,
node.children.forEach(c => { parentNode: parent
c.parentNode = null
}) })
node.children = [] const i = parent.children.indexOf(child)
} else { if (i > -1) {
node.text = '' parent.children.splice(i, 1)
} else {
console.error('target: ', child)
console.error('parent: ', parent)
throw Error('target is not a childNode of parent')
}
child.parentNode = null
} }
} }
function setElementText(el: TestElement, text: string) {
logNodeOp({
type: NodeOpTypes.SET_ELEMENT_TEXT,
targetNode: el,
text
})
el.children.forEach(c => {
c.parentNode = null
})
el.children = [createText(text)]
}
function parentNode(node: TestNode): TestElement | null { function parentNode(node: TestNode): TestElement | null {
return node.parentNode return node.parentNode
} }
@ -189,16 +205,14 @@ function querySelector() {
} }
export const nodeOps = { export const nodeOps = {
insert,
remove,
createElement, createElement,
createText, createText,
createComment,
setText, setText,
appendChild, setElementText,
insertBefore,
removeChild,
clearContent,
parentNode, parentNode,
nextSibling, nextSibling,
querySelector querySelector
} }
export function patchData() {}

6
packages/runtime-test/src/patchData.ts → packages/runtime-test/src/patchProp.ts
View File

@ -1,11 +1,11 @@
import { TestElement, logNodeOp, NodeOpTypes } from './nodeOps' import { TestElement, logNodeOp, NodeOpTypes } from './nodeOps'
import { isOn } from '@vue/shared' import { isOn } from '@vue/shared'
export function patchData( export function patchProp(
el: TestElement, el: TestElement,
key: string, key: string,
prevValue: any, nextValue: any,
nextValue: any prevValue: any
) { ) {
logNodeOp({ logNodeOp({
type: NodeOpTypes.PATCH, type: NodeOpTypes.PATCH,

19
packages/runtime-test/src/serialize.ts
View File

@ -1,4 +1,10 @@
import { TestElement, TestNode, NodeTypes, TestText } from './nodeOps' import {
TestElement,
TestNode,
NodeTypes,
TestText,
TestComment
} from './nodeOps'
import { isOn } from '@vue/shared' import { isOn } from '@vue/shared'
export function serialize( 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) : `` const padding = indent ? ` `.repeat(indent).repeat(depth) : ``
return padding + node.text return (
padding +
(node.type === NodeTypes.COMMENT ? `<!--${node.text}-->` : node.text)
)
} }