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

wip: cloneVNode + mergeProps

Browse Source
This commit is contained in:
Evan You 2019-08-22 17:12:39 -04:00
parent f3e9848bb2
commit 7bb822c160
3 changed files with 221 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
packages/runtime-core/__tests__/vdomAttrsFallthrough.spec.ts
View File

@ -1,50 +1,59 @@
// using DOM renderer because this case is mostly DOM-specific // using DOM renderer because this case is mostly DOM-specific
import { createVNode as h, render, nextTick, cloneVNode } from '@vue/runtime-dom' import {
createVNode as h,
render,
nextTick,
mergeProps,
ref,
onUpdated
} from '@vue/runtime-dom'
describe('attribute fallthrough', () => { describe('attribute fallthrough', () => {
it('everything should be in props when component has no declared props', async () => { it('everything should be in props when component has no declared props', async () => {
const click = jest.fn() const click = jest.fn()
const childUpdated = jest.fn() const childUpdated = jest.fn()
class Hello extends Component { const Hello = {
count: number = 0 setup() {
inc() { const count = ref(0)
this.count++
click() function inc() {
} count.value++
render() { click()
return h(Child, { }
foo: 1,
id: 'test', return () =>
class: 'c' + this.count, h(Child, {
style: { color: this.count ? 'red' : 'green' }, foo: 1,
onClick: this.inc id: 'test',
}) class: 'c' + count.value,
style: { color: count.value ? 'red' : 'green' },
onClick: inc
})
} }
} }
class Child extends Component<{ [key: string]: any }> { const Child = {
updated() { setup(props: any) {
childUpdated() onUpdated(childUpdated)
} return () =>
render(props: any) {
return cloneVNode(
h( h(
'div', 'div',
{ mergeProps(
class: 'c2', {
style: { fontWeight: 'bold' } class: 'c2',
}, style: { fontWeight: 'bold' }
},
props
),
props.foo props.foo
), )
props
)
} }
} }
const root = document.createElement('div') const root = document.createElement('div')
document.body.appendChild(root) document.body.appendChild(root)
await render(h(Hello), root) render(h(Hello), root)
const node = root.children[0] as HTMLElement const node = root.children[0] as HTMLElement
@ -65,154 +74,154 @@ describe('attribute fallthrough', () => {
expect(node.style.fontWeight).toBe('bold') expect(node.style.fontWeight).toBe('bold')
}) })
it('should separate in attrs when component has declared props', async () => { // it('should separate in attrs when component has declared props', async () => {
const click = jest.fn() // const click = jest.fn()
const childUpdated = jest.fn() // const childUpdated = jest.fn()
class Hello extends Component { // class Hello extends Component {
count = 0 // count = 0
inc() { // inc() {
this.count++ // this.count++
click() // click()
} // }
render() { // render() {
return h(Child, { // return h(Child, {
foo: 123, // foo: 123,
id: 'test', // id: 'test',
class: 'c' + this.count, // class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' }, // style: { color: this.count ? 'red' : 'green' },
onClick: this.inc // onClick: this.inc
}) // })
} // }
} // }
class Child extends Component<{ [key: string]: any; foo: number }> { // class Child extends Component<{ [key: string]: any; foo: number }> {
static props = { // static props = {
foo: Number // foo: Number
} // }
updated() { // updated() {
childUpdated() // childUpdated()
} // }
render() { // render() {
return cloneVNode( // return cloneVNode(
h( // h(
'div', // 'div',
{ // {
class: 'c2', // class: 'c2',
style: { fontWeight: 'bold' } // style: { fontWeight: 'bold' }
}, // },
this.$props.foo // this.$props.foo
), // ),
this.$attrs // this.$attrs
) // )
} // }
} // }
const root = document.createElement('div') // const root = document.createElement('div')
document.body.appendChild(root) // document.body.appendChild(root)
await render(h(Hello), root) // await render(h(Hello), root)
const node = root.children[0] as HTMLElement // const node = root.children[0] as HTMLElement
// with declared props, any parent attr that isn't a prop falls through // // with declared props, any parent attr that isn't a prop falls through
expect(node.getAttribute('id')).toBe('test') // expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c0') // expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green') // expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold') // expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click')) // node.dispatchEvent(new CustomEvent('click'))
expect(click).toHaveBeenCalled() // expect(click).toHaveBeenCalled()
// ...while declared ones remain props // // ...while declared ones remain props
expect(node.hasAttribute('foo')).toBe(false) // expect(node.hasAttribute('foo')).toBe(false)
await nextTick() // await nextTick()
expect(childUpdated).toHaveBeenCalled() // expect(childUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test') // expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c1') // expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red') // expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold') // expect(node.style.fontWeight).toBe('bold')
expect(node.hasAttribute('foo')).toBe(false) // expect(node.hasAttribute('foo')).toBe(false)
}) // })
it('should fallthrough on multi-nested components', async () => { // it('should fallthrough on multi-nested components', async () => {
const click = jest.fn() // const click = jest.fn()
const childUpdated = jest.fn() // const childUpdated = jest.fn()
const grandChildUpdated = jest.fn() // const grandChildUpdated = jest.fn()
class Hello extends Component { // class Hello extends Component {
count = 0 // count = 0
inc() { // inc() {
this.count++ // this.count++
click() // click()
} // }
render() { // render() {
return h(Child, { // return h(Child, {
foo: 1, // foo: 1,
id: 'test', // id: 'test',
class: 'c' + this.count, // class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' }, // style: { color: this.count ? 'red' : 'green' },
onClick: this.inc // onClick: this.inc
}) // })
} // }
} // }
class Child extends Component<{ [key: string]: any; foo: number }> { // class Child extends Component<{ [key: string]: any; foo: number }> {
updated() { // updated() {
childUpdated() // childUpdated()
} // }
render() { // render() {
return h(GrandChild, this.$props) // return h(GrandChild, this.$props)
} // }
} // }
class GrandChild extends Component<{ [key: string]: any; foo: number }> { // class GrandChild extends Component<{ [key: string]: any; foo: number }> {
static props = { // static props = {
foo: Number // foo: Number
} // }
updated() { // updated() {
grandChildUpdated() // grandChildUpdated()
} // }
render(props: any) { // render(props: any) {
return cloneVNode( // return cloneVNode(
h( // h(
'div', // 'div',
{ // {
class: 'c2', // class: 'c2',
style: { fontWeight: 'bold' } // style: { fontWeight: 'bold' }
}, // },
props.foo // props.foo
), // ),
this.$attrs // this.$attrs
) // )
} // }
} // }
const root = document.createElement('div') // const root = document.createElement('div')
document.body.appendChild(root) // document.body.appendChild(root)
await render(h(Hello), root) // await render(h(Hello), root)
const node = root.children[0] as HTMLElement // const node = root.children[0] as HTMLElement
// with declared props, any parent attr that isn't a prop falls through // // with declared props, any parent attr that isn't a prop falls through
expect(node.getAttribute('id')).toBe('test') // expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c0') // expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green') // expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold') // expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click')) // node.dispatchEvent(new CustomEvent('click'))
expect(click).toHaveBeenCalled() // expect(click).toHaveBeenCalled()
// ...while declared ones remain props // // ...while declared ones remain props
expect(node.hasAttribute('foo')).toBe(false) // expect(node.hasAttribute('foo')).toBe(false)
await nextTick() // await nextTick()
expect(childUpdated).toHaveBeenCalled() // expect(childUpdated).toHaveBeenCalled()
expect(grandChildUpdated).toHaveBeenCalled() // expect(grandChildUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test') // expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c1') // expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red') // expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold') // expect(node.style.fontWeight).toBe('bold')
expect(node.hasAttribute('foo')).toBe(false) // expect(node.hasAttribute('foo')).toBe(false)
}) // })
}) })

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

@ -10,10 +10,8 @@ export {
openBlock, openBlock,
createBlock, createBlock,
createVNode, createVNode,
Text, cloneVNode,
Empty, mergeProps
Fragment,
Portal
} from './vnode' } from './vnode'
export { createComponent, getCurrentInstance } from './component' export { createComponent, getCurrentInstance } from './component'
export { createRenderer } from './createRenderer' export { createRenderer } from './createRenderer'
@ -23,6 +21,9 @@ export * from './apiWatch'
export * from './apiLifecycle' export * from './apiLifecycle'
export * from './apiInject' export * from './apiInject'
// Flags // VNode type symbols
export { Text, Empty, Fragment, Portal } from './vnode'
// VNode flags
export { PublicPatchFlags as PatchFlags } from './patchFlags' export { PublicPatchFlags as PatchFlags } from './patchFlags'
export { PublicShapeFlags as ShapeFlags } from './shapeFlags' export { PublicShapeFlags as ShapeFlags } from './shapeFlags'

49
packages/runtime-core/src/vnode.ts
View File

@ -162,9 +162,22 @@ function trackDynamicNode(vnode: VNode) {
} }
} }
export function cloneVNode(vnode: VNode, extraProps?: Data): VNode { export function cloneVNode(vnode: VNode): VNode {
// TODO return {
return vnode type: vnode.type,
props: vnode.props,
key: vnode.key,
ref: vnode.ref,
children: null,
component: null,
el: null,
anchor: null,
target: null,
shapeFlag: vnode.shapeFlag,
patchFlag: vnode.patchFlag,
dynamicProps: vnode.dynamicProps,
dynamicChildren: null
}
} }
export function normalizeVNode(child: VNodeChild): VNode { export function normalizeVNode(child: VNodeChild): VNode {
@ -177,7 +190,7 @@ export function normalizeVNode(child: VNodeChild): VNode {
} else if (typeof child === 'object') { } else if (typeof child === 'object') {
// already vnode, this should be the most common since compiled templates // already vnode, this should be the most common since compiled templates
// always produce all-vnode children arrays // always produce all-vnode children arrays
return child as VNode return child.el === null ? child : cloneVNode(child)
} else { } else {
// primitive types // primitive types
return createVNode(Text, null, child + '') return createVNode(Text, null, child + '')
@ -239,3 +252,31 @@ export function normalizeClass(value: unknown): string {
} }
return res.trim() return res.trim()
} }
const handlersRE = /^on|^vnode/
export function mergeProps(...args: Data[]) {
const ret: Data = {}
for (const key in args[0]) {
ret[key] = args[0][key]
}
for (let i = 1; i < args.length; i++) {
const toMerge = args[i]
for (const key in toMerge) {
if (key === 'class') {
ret.class = normalizeClass([ret.class, toMerge.class])
} else if (key === 'style') {
ret.style = normalizeStyle([ret.style, toMerge.style])
} else if (handlersRE.test(key)) {
// on*, vnode*
const existing = ret[key]
ret[key] = existing
? [].concat(existing as any, toMerge[key] as any)
: toMerge[key]
} else {
ret[key] = toMerge[key]
}
}
}
return ret
}