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

refactor(fragments): remove visible anchors for fragments

Browse Source
This commit is contained in:
Evan You
2020-02-26 16:32:06 -05:00
parent 439752822c
commit 11d2fb2594
19 changed files with 95 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/runtime-core/__tests__/rendererFragment.spec.ts
View File

@@ -25,10 +25,11 @@ describe('renderer: fragment', () => {
const root = nodeOps.createElement('div')
render(h(App), root)
expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
expect(serializeInner(root)).toBe(`<div>one</div>two`)
expect(root.children.length).toBe(4)
expect(root.children[0]).toMatchObject({
type: NodeTypes.COMMENT
type: NodeTypes.TEXT,
text: ''
})
expect(root.children[1]).toMatchObject({
type: NodeTypes.ELEMENT,
@@ -43,7 +44,8 @@ describe('renderer: fragment', () => {
text: 'two'
})
expect(root.children[3]).toMatchObject({
type: NodeTypes.COMMENT
type: NodeTypes.TEXT,
text: ''
})
})
@@ -51,7 +53,7 @@ describe('renderer: fragment', () => {
const root = nodeOps.createElement('div')
render(h('div', [h(Fragment, [h('div', 'one'), 'two'])]), root)
const parent = root.children[0] as TestElement
expect(serializeInner(parent)).toBe(`<!----><div>one</div>two<!---->`)
expect(serializeInner(parent)).toBe(`<div>one</div>two`)
})
it('patch fragment children (manual, keyed)', () => {
@@ -60,18 +62,14 @@ describe('renderer: fragment', () => {
h(Fragment, [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]),
root
)
expect(serializeInner(root)).toBe(
`<!----><div>one</div><div>two</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(
h(Fragment, [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]),
root
)
expect(serializeInner(root)).toBe(
`<!----><div>two</div><div>one</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be moving nodes instead of re-creating or patching them
expect(ops).toMatchObject([
@@ -84,15 +82,11 @@ describe('renderer: fragment', () => {
it('patch fragment children (manual, unkeyed)', () => {
const root = nodeOps.createElement('div')
render(h(Fragment, [h('div', 'one'), h('div', 'two')]), root)
expect(serializeInner(root)).toBe(
`<!----><div>one</div><div>two</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(h(Fragment, [h('div', 'two'), h('div', 'one')]), root)
expect(serializeInner(root)).toBe(
`<!----><div>two</div><div>one</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be patching nodes instead of moving or re-creating them
expect(ops).toMatchObject([
@@ -119,7 +113,7 @@ describe('renderer: fragment', () => {
),
root
)
expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
expect(serializeInner(root)).toBe(`<div>one</div>two`)
render(
createVNode(
@@ -134,7 +128,7 @@ describe('renderer: fragment', () => {
),
root
)
expect(serializeInner(root)).toBe(`<!----><div>foo</div>barbaz<!---->`)
expect(serializeInner(root)).toBe(`<div>foo</div>barbaz`)
})
it('patch fragment children (compiler generated, keyed)', () => {
@@ -149,9 +143,7 @@ describe('renderer: fragment', () => {
),
root
)
expect(serializeInner(root)).toBe(
`<!----><div>one</div><div>two</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(
@@ -163,9 +155,7 @@ describe('renderer: fragment', () => {
),
root
)
expect(serializeInner(root)).toBe(
`<!----><div>two</div><div>one</div><!---->`
)
expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be moving nodes instead of re-creating or patching them
expect(ops).toMatchObject([
@@ -188,7 +178,7 @@ describe('renderer: fragment', () => {
root
)
expect(serializeInner(root)).toBe(
`<div><div>outer</div><!----><div>one</div><div>two</div><!----></div>`
`<div><div>outer</div><div>one</div><div>two</div></div>`
)
resetOps()
@@ -203,7 +193,7 @@ describe('renderer: fragment', () => {
root
)
expect(serializeInner(root)).toBe(
`<div><!----><div>two</div><div>one</div><!----><div>outer</div></div>`
`<div><div>two</div><div>one</div><div>outer</div></div>`
)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
@@ -213,10 +203,10 @@ describe('renderer: fragment', () => {
// 2. move entire fragment, including anchors
// not the most efficient move, but this case is super rare
// and optimizing for this special case complicates the algo quite a bit
{ type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } }
{ type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
])
})
@@ -234,7 +224,7 @@ describe('renderer: fragment', () => {
root
)
expect(serializeInner(root)).toBe(
`<!----><div>outer</div><!----><div>one</div><div>two</div><!----><!---->`
`<div>outer</div><div>one</div><div>two</div>`
)
resetOps()
@@ -249,16 +239,16 @@ describe('renderer: fragment', () => {
root
)
expect(serializeInner(root)).toBe(
`<!----><!----><div>two</div><div>one</div><!----><div>outer</div><!---->`
`<div>two</div><div>one</div><div>outer</div>`
)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
expect(ops).toMatchObject([
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } }
{ type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
])
// should properly remove nested fragments