import { createVaporSSRApp, delegateEvents } from '../src'
-import { nextTick, ref } from '@vue/runtime-dom'
-import { VueServerRenderer, compile, runtimeDom } from './_utils'
+import { nextTick, reactive, ref } from '@vue/runtime-dom'
+import { compileScript, parse } from '@vue/compiler-sfc'
+import * as runtimeVapor from '../src'
+import * as runtimeDom from '@vue/runtime-dom'
+import * as VueServerRenderer from '@vue/server-renderer'
+import { isString } from '@vue/shared'
+import type { VaporComponentInstance } from '../src/component'
+
+const formatHtml = (raw: string) => {
+ return raw
+ .replace(/<!--\[/g, '\n<!--[')
+ .replace(/]-->/g, ']-->\n')
+ .replace(/\n{2,}/g, '\n')
+}
+
+const Vue = { ...runtimeDom, ...runtimeVapor }
+
+function compile(
+ sfc: string,
+ data: runtimeDom.Ref<any>,
+ components: Record<string, any> = {},
+ { vapor = true, ssr = false } = {},
+) {
+ if (!sfc.includes(`<script`)) {
+ sfc =
+ `<script vapor>const data = _data; const components = _components;</script>` +
+ sfc
+ }
+ const descriptor = parse(sfc).descriptor
+
+ const script = compileScript(descriptor, {
+ id: 'x',
+ isProd: true,
+ inlineTemplate: true,
+ genDefaultAs: '__sfc__',
+ vapor,
+ templateOptions: {
+ ssr,
+ },
+ })
+
+ const code =
+ script.content
+ .replace(/\bimport {/g, 'const {')
+ .replace(/ as _/g, ': _')
+ .replace(/} from ['"]vue['"]/g, `} = Vue`)
+ .replace(/} from "vue\/server-renderer"/g, '} = VueServerRenderer') +
+ '\nreturn __sfc__'
+
+ return new Function('Vue', 'VueServerRenderer', '_data', '_components', code)(
+ Vue,
+ VueServerRenderer,
+ data,
+ components,
+ )
+}
+
+async function testWithVaporApp(
+ code: string,
+ components?: Record<string, string | { code: string; vapor: boolean }>,
+ data?: any,
+) {
+ return testHydration(code, components, data, {
+ isVaporApp: true,
+ interop: true,
+ })
+}
+
+async function testWithVDOMApp(
+ code: string,
+ components?: Record<string, string | { code: string; vapor: boolean }>,
+ data?: any,
+) {
+ return testHydration(code, components, data, {
+ isVaporApp: false,
+ interop: true,
+ })
+}
+
+function compileVaporComponent(
+ code: string,
+ data: runtimeDom.Ref<any> = ref({}),
+ components?: Record<string, any>,
+ ssr = false,
+) {
+ if (!code.includes(`<script`)) {
+ code = `<template>${code}</template>`
+ }
+ return compile(code, data, components, {
+ vapor: true,
+ ssr,
+ })
+}
+
+async function mountWithHydration(
+ html: string,
+ code: string,
+ data: runtimeDom.Ref<any> = ref({}),
+ components?: Record<string, any>,
+) {
+ const container = document.createElement('div')
+ container.innerHTML = html
+ document.body.appendChild(container)
+
+ const clientComp = compileVaporComponent(code, data, components)
+ const app = createVaporSSRApp(clientComp)
+ app.mount(container)
+
+ return {
+ block: (app._instance! as VaporComponentInstance).block,
+ container,
+ }
+}
async function testHydration(
code: string,
- components: Record<string, string> = {},
+ components: Record<string, string | { code: string; vapor: boolean }> = {},
+ data: any = ref('foo'),
+ { isVaporApp = true, interop = false } = {},
) {
- const data = ref('foo')
const ssrComponents: any = {}
const clientComponents: any = {}
for (const key in components) {
- clientComponents[key] = compile(components[key], data, clientComponents)
- ssrComponents[key] = compile(components[key], data, ssrComponents, {
+ const comp = components[key]
+ const code = isString(comp) ? comp : comp.code
+ const isVaporComp = isString(comp) || !!comp.vapor
+ clientComponents[key] = compile(code, data, clientComponents, {
+ vapor: isVaporComp,
+ ssr: false,
+ })
+ ssrComponents[key] = compile(code, data, ssrComponents, {
+ vapor: isVaporComp,
ssr: true,
})
}
- const serverComp = compile(code, data, ssrComponents, { ssr: true })
+ const serverComp = compile(code, data, ssrComponents, {
+ vapor: isVaporApp,
+ ssr: true,
+ })
const html = await VueServerRenderer.renderToString(
runtimeDom.createSSRApp(serverComp),
)
document.body.appendChild(container)
container.innerHTML = html
- const clientComp = compile(code, data, clientComponents)
- const app = createVaporSSRApp(clientComp)
+ const clientComp = compile(code, data, clientComponents, {
+ vapor: isVaporApp,
+ ssr: false,
+ })
+ let app
+ if (isVaporApp) {
+ app = createVaporSSRApp(clientComp)
+ } else {
+ app = runtimeDom.createSSRApp(clientComp)
+ }
+
+ if (interop) {
+ app.use(runtimeVapor.vaporInteropPlugin)
+ }
+
app.mount(container)
return { data, container }
}
el.dispatchEvent(event)
}
-describe('Vapor Mode hydration', () => {
- delegateEvents('click')
+delegateEvents('click')
- beforeEach(() => {
- document.body.innerHTML = ''
- })
+beforeEach(() => {
+ document.body.innerHTML = ''
+})
- test('root text', async () => {
- const { data, container } = await testHydration(`
+describe('Vapor Mode hydration', () => {
+ describe('text', () => {
+ test('root text', async () => {
+ const { data, container } = await testHydration(`
<template>{{ data }}</template>
`)
- expect(container.innerHTML).toMatchInlineSnapshot(`"foo"`)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"foo"`)
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(`"bar"`)
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"bar"`)
+ })
+
+ test('consecutive text nodes', async () => {
+ const { data, container } = await testHydration(`
+ <template>{{ data }}{{ data }}</template>
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"foofoo"`)
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"barbar"`)
+ })
+
+ test('consecutive text nodes with insertion anchor', async () => {
+ const { data, container } = await testHydration(`
+ <template><span/>{{ data }}{{ data }}<span/></template>
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span>foofoo<span></span><!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span>barbar<span></span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('mixed text nodes', async () => {
+ const { data, container } = await testHydration(`
+ <template>{{ data }}A{{ data }}B{{ data }}</template>
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"fooAfooBfoo"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"barAbarBbar"`,
+ )
+ })
+
+ test('mixed text nodes with insertion anchor', async () => {
+ const { data, container } = await testHydration(`
+ <template><span/>{{ data }}A{{ data }}B{{ data }}<span/></template>
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span>fooAfooBfoo<span></span><!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span>barAbarBbar<span></span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('empty text node', async () => {
+ const data = reactive({ txt: '' })
+ const { container } = await testHydration(
+ `<template><div>{{ data.txt }}</div></template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div></div>"`,
+ )
+
+ data.txt = 'foo'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div>"`,
+ )
+ })
+
+ test('empty text node in slot', async () => {
+ const data = reactive({ txt: '' })
+ const { container } = await testHydration(
+ `<template><components.Child>{{data.txt}}</components.Child></template>`,
+ {
+ Child: `<template><slot/></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><!--]-->
+ "
+ `,
+ )
+
+ data.txt = 'foo'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->foo<!--]-->
+ "
+ `,
+ )
+ })
})
- test('root comment', async () => {
- const { container } = await testHydration(`
+ describe('element', () => {
+ test('root comment', async () => {
+ const { container } = await testHydration(`
<template><!----></template>
`)
- expect(container.innerHTML).toBe('<!---->')
-
expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
- })
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"<!---->"`)
+
expect(`mismatch in <div>`).not.toHaveBeenWarned()
+ })
- test('root with mixed element and text', async () => {
- const { container, data } = await testHydration(`
+ test('root with mixed element and text', async () => {
+ const { container, data } = await testHydration(`
<template> A<span>{{ data }}</span>{{ data }}</template>
`)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<!--[--> A<span>foo</span>foo<!--]-->"`,
- )
-
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<!--[--> A<span>bar</span>bar<!--]-->"`,
- )
- })
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--> A<span>foo</span>foo<!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--> A<span>bar</span>bar<!--]-->
+ "
+ `,
+ )
+ })
- test('empty element', async () => {
- const { container } = await testHydration(`
+ test('empty element', async () => {
+ const { container } = await testHydration(`
<template><div/></template>
`)
- expect(container.innerHTML).toBe('<div></div>')
- expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
- })
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div></div>"`,
+ )
+ expect(`mismatch in <div>`).not.toHaveBeenWarned()
+ })
- test('element with binding and text children', async () => {
- const { container, data } = await testHydration(`
+ test('element with binding and text children', async () => {
+ const { container, data } = await testHydration(`
<template><div :class="data">{{ data }}</div></template>
`)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div class="foo">foo</div>"`,
- )
-
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div class="bar">bar</div>"`,
- )
- })
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+
`"<div class="foo">foo</div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+
`"<div class="bar">bar</div>"`,
+ )
+ })
- test('element with elements children', async () => {
- const { container } = await testHydration(`
+ test('element with elements children', async () => {
+ const { container } = await testHydration(`
<template>
<div>
<span>{{ data }}</span>
</div>
</template>
`)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span>foo</span><span class="foo"></span></div>"`,
- )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+
`"<div><span>foo</span><span class="foo"></span></div>"`,
+ )
- // event handler
- triggerEvent('click', container.querySelector('.foo')!)
+ // event handler
+ triggerEvent('click', container.querySelector('.foo')!)
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span>bar</span><span class="bar"></span></div>"`,
- )
- })
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+
`"<div><span>bar</span><span class="bar"></span></div>"`,
+ )
+ })
- test('basic component', async () => {
- const { container, data } = await testHydration(
- `
- <template><div><span></span><components.Child/></div></template>
+ test('element with ref', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <div ref="data">hi</div>
+ </template>
`,
- { Child: `<template>{{ data }}</template>` },
- )
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span></span>foo</div>"`,
- )
+ {},
+ ref(null),
+ )
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span></span>bar</div>"`,
- )
+ expect(data.value).toBe(container.firstChild)
+ })
})
- test('fragment component', async () => {
- const { container, data } = await testHydration(
- `
+ describe('component', () => {
+ test('basic component', async () => {
+ const { container, data } = await testHydration(
+ `
<template><div><span></span><components.Child/></div></template>
`,
- { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
- )
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span></span><!--[--><div>foo</div>-foo-<!--]--></div>"`,
- )
+ { Child: `<template>{{ data }}</template>` },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo</div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>bar</div>"`,
+ )
+ })
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><span></span><!--[--><div>bar</div>-bar-<!--]--></div>"`,
- )
- })
+ test('fragment component', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span></span><components.Child/></div></template>
+ `,
+ { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ </div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ </div>"
+ `,
+ )
+ })
- test('fragment component with prepend', async () => {
- const { container, data } = await testHydration(
- `
+ test('fragment component with prepend', async () => {
+ const { container, data } = await testHydration(
+ `
<template><div><components.Child/><span></span></div></template>
`,
- { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
- )
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><!--[--><div>foo</div>-foo-<!--]--><span></span></div>"`,
- )
-
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><!--[--><div>bar</div>-bar-<!--]--><span></span></div>"`,
- )
- })
+ { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- test('nested fragment components', async () => {
- const { container, data } = await testHydration(
- `
+ test('nested fragment components', async () => {
+ const { container, data } = await testHydration(
+ `
<template><div><components.Parent/><span></span></div></template>
`,
- {
- Parent: `<template><div/><components.Child/><div/></template>`,
- Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
- },
- )
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><!--[--><div></div><!--[--><div>foo</div>-foo-<!--]--><div></div><!--]--><span></span></div>"`,
- )
-
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"<div><!--[--><div></div><!--[--><div>bar</div>-bar-<!--]--><div></div><!--]--><span></span></div>"`,
- )
- })
+ {
+ Parent: `<template><div/><components.Child/><div/></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div></div>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <div></div><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div></div>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <div></div><!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // problem is the <!> placeholder does not exist in SSR output
- test.todo('component with anchor insertion', async () => {
- const { container, data } = await testHydration(
- `
- <template>
+ test('component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
<div>
<span/>
<components.Child/>
</div>
</template>
`,
- {
- Child: `<template>{{ data }}</template>`,
- },
- )
- expect(container.innerHTML).toMatchInlineSnapshot()
+ {
+ Child: `<template>{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo<span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>bar<span></span></div>"`,
+ )
+ })
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot()
- })
+ test('nested components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><components.Parent/></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>foo</div><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>bar</div><span></span></div>"`,
+ )
+ })
+
+ test('nested components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span></span><components.Parent/><span></span></div></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div><span></span><div>foo</div><span></span></div><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div><span></span><div>bar</div><span></span></div><span></span></div>"`,
+ )
+ })
+
+ test('consecutive components with insertion parent', async () => {
+ const data = reactive({ foo: 'foo', bar: 'bar' })
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <components.Child1/>
+ <components.Child2/>
+ </div>
+ </template>
+ `,
+ {
+ Child1: `<template><span>{{ data.foo }}</span></template>`,
+ Child2: `<template><span>{{ data.bar }}</span></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>foo</span><span>bar</span></div>"`,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>foo1</span><span>bar1</span></div>"`,
+ )
+ })
+
+ test('nested consecutive components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><components.Parent/></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>foo</div><div>foo</div><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>bar</div><div>bar</div><span></span></div>"`,
+ )
+ })
- test.todo('consecutive component with anchor insertion', async () => {
- const { container, data } = await testHydration(
- `<template>
+ test('nested consecutive components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span></span><components.Parent/><span></span></div></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div><span></span><div>foo</div><div>foo</div><span></span></div><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div><span></span><div>bar</div><div>bar</div><span></span></div><span></span></div>"`,
+ )
+ })
+
+ test('mixed component and element with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
<div>
<span/>
<components.Child/>
+ <span/>
<components.Child/>
<span/>
</div>
</template>
`,
- {
- Child: `<template>{{ data }}</template>`,
- },
- )
- expect(container.innerHTML).toMatchInlineSnapshot()
+ {
+ Child: `<template>{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo<span></span>foo<span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>bar<span></span>bar<span></span></div>"`,
+ )
+ })
- data.value = 'bar'
- await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot()
- })
+ test('fragment component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child/>
+ <span/>
+ </div>
+ </template>
+ `,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- test.todo('if')
+ test('nested fragment component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><components.Parent/></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- test.todo('for')
+ test('nested fragment component with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span/><components.Parent/><span/></div></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span><div><span></span>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <span></span></div><span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span><div><span></span>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <span></span></div><span></span></div>"
+ `,
+ )
+ })
- test.todo('slots')
+ test('consecutive fragment components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child/>
+ <components.Child/>
+ <span/>
+ </div>
+ </template>
+ `,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo<!--]-->
+ <!--[--><div>foo</div>-foo<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar<!--]-->
+ <!--[--><div>bar</div>-bar<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // test('element with ref', () => {
- // const el = ref()
- // const { vnode, container } = mountWithHydration('<div></div>', () =>
- // h('div', { ref: el }),
- // )
- // expect(vnode.el).toBe(container.firstChild)
- // expect(el.value).toBe(vnode.el)
- // })
+ test('nested consecutive fragment components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><components.Parent/></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // test('with data-allow-mismatch component when using onServerPrefetch', async () => {
- // const Comp = {
- // template: `
- // <div>Comp2</div>
- // `,
- // }
- // let foo: any
- // const App = {
- // setup() {
- // const flag = ref(true)
- // foo = () => {
- // flag.value = false
- // }
- // onServerPrefetch(() => (flag.value = false))
- // return { flag }
- // },
- // components: {
- // Comp,
- // },
- // template: `
- // <span data-allow-mismatch>
- // <Comp v-if="flag"></Comp>
- // </span>
- // `,
- // }
- // // hydrate
- // const container = document.createElement('div')
- // container.innerHTML = await renderToString(h(App))
- // createSSRApp(App).mount(container)
- // expect(container.innerHTML).toBe(
- // '<span data-allow-mismatch=""><div>Comp2</div></span>',
- // )
- // foo()
- // await nextTick()
- // expect(container.innerHTML).toBe(
- // '<span data-allow-mismatch=""><!--v-if--></span>',
- // )
- // })
+ test('nested consecutive fragment components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span></span><components.Parent/><span></span></div></template>
+ `,
+ {
+ Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span><div><span></span>
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <span></span></div><span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span><div><span></span>
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <span></span></div><span></span></div>"
+ `,
+ )
+ })
- // // compile SSR + client render fn from the same template & hydrate
- // test('full compiler integration', async () => {
- // const mounted: string[] = []
- // const log = vi.fn()
- // const toggle = ref(true)
-
- // const Child = {
- // data() {
- // return {
- // count: 0,
- // text: 'hello',
- // style: {
- // color: 'red',
- // },
- // }
- // },
- // mounted() {
- // mounted.push('child')
- // },
- // template: `
- // <div>
- // <span class="count" :style="style">{{ count }}</span>
- // <button class="inc" @click="count++">inc</button>
- // <button class="change" @click="style.color = 'green'" >change color</button>
- // <button class="emit" @click="$emit('foo')">emit</button>
- // <span class="text">{{ text }}</span>
- // <input v-model="text">
- // </div>
- // `,
- // }
-
- // const App = {
- // setup() {
- // return { toggle }
- // },
- // mounted() {
- // mounted.push('parent')
- // },
- // template: `
- // <div>
- // <span>hello</span>
- // <template v-if="toggle">
- // <Child @foo="log('child')"/>
- // <template v-if="true">
- // <button class="parent-click" @click="log('click')">click me</button>
- // </template>
- // </template>
- // <span>hello</span>
- // </div>`,
- // components: {
- // Child,
- // },
- // methods: {
- // log,
- // },
- // }
-
- // const container = document.createElement('div')
- // // server render
- // container.innerHTML = await renderToString(h(App))
- // // hydrate
- // createSSRApp(App).mount(container)
-
- // // assert interactions
- // // 1. parent button click
- // triggerEvent('click', container.querySelector('.parent-click')!)
- // expect(log).toHaveBeenCalledWith('click')
-
- // // 2. child inc click + text interpolation
- // const count = container.querySelector('.count') as HTMLElement
- // expect(count.textContent).toBe(`0`)
- // triggerEvent('click', container.querySelector('.inc')!)
- // await nextTick()
- // expect(count.textContent).toBe(`1`)
-
- // // 3. child color click + style binding
- // expect(count.style.color).toBe('red')
- // triggerEvent('click', container.querySelector('.change')!)
- // await nextTick()
- // expect(count.style.color).toBe('green')
-
- // // 4. child event emit
- // triggerEvent('click', container.querySelector('.emit')!)
- // expect(log).toHaveBeenCalledWith('child')
-
- // // 5. child v-model
- // const text = container.querySelector('.text')!
- // const input = container.querySelector('input')!
- // expect(text.textContent).toBe('hello')
- // input.value = 'bye'
- // triggerEvent('input', input)
- // await nextTick()
- // expect(text.textContent).toBe('bye')
- // })
+ test('nested consecutive fragment components with root level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ <template><div><span></span><components.Parent/><span></span></div></template>
+ `,
+ {
+ Parent: `<template><components.Child/><components.Child/></template>`,
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[-->
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <!--[--><div>foo</div>-foo-<!--]-->
+ <!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[-->
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <!--[--><div>bar</div>-bar-<!--]-->
+ <!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // test('handle click error in ssr mode', async () => {
- // const App = {
- // setup() {
- // const throwError = () => {
- // throw new Error('Sentry Error')
- // }
- // return { throwError }
- // },
- // template: `
- // <div>
- // <button class="parent-click" @click="throwError">click me</button>
- // </div>`,
- // }
-
- // const container = document.createElement('div')
- // // server render
- // container.innerHTML = await renderToString(h(App))
- // // hydrate
- // const app = createSSRApp(App)
- // const handler = (app.config.errorHandler = vi.fn())
- // app.mount(container)
- // // assert interactions
- // // parent button click
- // triggerEvent('click', container.querySelector('.parent-click')!)
- // expect(handler).toHaveBeenCalled()
- // })
+ test('mixed fragment component and element with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child/>
+ <span/>
+ <components.Child/>
+ <span/>
+ </div>
+ </template>
+ `,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo<!--]-->
+ <span></span>
+ <!--[--><div>foo</div>-foo<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar<!--]-->
+ <span></span>
+ <!--[--><div>bar</div>-bar<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // test('handle blur error in ssr mode', async () => {
- // const App = {
- // setup() {
- // const throwError = () => {
- // throw new Error('Sentry Error')
- // }
- // return { throwError }
- // },
- // template: `
- // <div>
- // <input class="parent-click" @blur="throwError"/>
- // </div>`,
- // }
-
- // const container = document.createElement('div')
- // // server render
- // container.innerHTML = await renderToString(h(App))
- // // hydrate
- // const app = createSSRApp(App)
- // const handler = (app.config.errorHandler = vi.fn())
- // app.mount(container)
- // // assert interactions
- // // parent blur event
- // triggerEvent('blur', container.querySelector('.parent-click')!)
- // expect(handler).toHaveBeenCalled()
- // })
+ test('mixed fragment component and text with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child/>
+ {{ data }}
+ <components.Child/>
+ <span/>
+ </div>
+ </template>
+ `,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>foo</div>-foo<!--]-->
+ foo
+ <!--[--><div>foo</div>-foo<!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>bar</div>-bar<!--]-->
+ bar
+ <!--[--><div>bar</div>-bar<!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
+ })
- // test('async component', async () => {
- // const spy = vi.fn()
- // const Comp = () =>
- // h(
- // 'button',
- // {
- // onClick: spy,
- // },
- // 'hello!',
- // )
-
- // let serverResolve: any
- // let AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // serverResolve = r
- // }),
- // )
+ describe('dynamic component', () => {
+ test('basic dynamic component', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <component :is="components[data]"/>
+ </template>`,
+ {
+ foo: `<template><div>foo</div></template>`,
+ bar: `<template><div>bar</div></template>`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--dynamic-component-->"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>bar</div><!--dynamic-component-->"`,
+ )
+ })
- // const App = {
- // render() {
- // return ['hello', h(AsyncComp), 'world']
- // },
- // }
-
- // // server render
- // const htmlPromise = renderToString(h(App))
- // serverResolve(Comp)
- // const html = await htmlPromise
- // expect(html).toMatchInlineSnapshot(
- // `"<!--[-->hello<button>hello!</button>world<!--]-->"`,
- // )
+ test('dynamic component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <component :is="components[data]"/>
+ <span/>
+ </div>
+ </template>`,
+ {
+ foo: `<template><div>foo</div></template>`,
+ bar: `<template><div>bar</div></template>`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>foo</div><!--dynamic-component--><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>bar</div><!--dynamic-component--><span></span></div>"`,
+ )
+ })
- // // hydration
- // let clientResolve: any
- // AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // clientResolve = r
- // }),
- // )
+ test('consecutive dynamic components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <component :is="components[data]"/>
+ <component :is="components[data]"/>
+ <span/>
+ </div>
+ </template>`,
+ {
+ foo: `<template><div>foo</div></template>`,
+ bar: `<template><div>bar</div></template>`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>foo</div><!--dynamic-component--><div>foo</div><!--dynamic-component--><span></span></div>"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><div>bar</div><!--dynamic-component--><div>bar</div><!--dynamic-component--><span></span></div>"`,
+ )
+ })
- // const container = document.createElement('div')
- // container.innerHTML = html
- // createSSRApp(App).mount(container)
+ test('dynamic component fallback', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <component :is="'button'">
+ <span>{{ data }}</span>
+ </component>
+ </template>`,
+ {},
+ ref('foo'),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<button><span>foo</span></button><!--dynamic-component-->"`,
+ )
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<button><span>bar</span></button><!--dynamic-component-->"`,
+ )
+ })
- // // hydration not complete yet
- // triggerEvent('click', container.querySelector('button')!)
- // expect(spy).not.toHaveBeenCalled()
+ test('in ssr slot vnode fallback', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{ data }}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <component :is="'div'">
+ <slot />
+ </component>
+ </template>`,
+ },
+ ref('foo'),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ </div><!--dynamic-component-->"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>bar</span><!--]-->
+ </div><!--dynamic-component-->"
+ `,
+ )
+ })
+ })
- // // resolve
- // clientResolve(Comp)
- // await new Promise(r => setTimeout(r))
+ describe('if', () => {
+ test('basic toggle - true -> false', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data">foo</div>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+ })
- // // should be hydrated now
- // triggerEvent('click', container.querySelector('button')!)
- // expect(spy).toHaveBeenCalled()
- // })
+ test('basic toggle - false -> true', async () => {
+ const data = ref(false)
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data">foo</div>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+ })
- // test('update async wrapper before resolve', async () => {
- // const Comp = {
- // render() {
- // return h('h1', 'Async component')
- // },
- // }
- // let serverResolve: any
- // let AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // serverResolve = r
- // }),
- // )
+ test('v-if on insertion parent', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data">
+ <components.Child/>
+ </div>
+ </template>`,
+ { Child: `<template>foo</template>` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+ })
- // const toggle = ref(true)
- // const App = {
- // setup() {
- // onMounted(() => {
- // // change state, this makes updateComponent(AsyncComp) execute before
- // // the async component is resolved
- // toggle.value = false
- // })
-
- // return () => {
- // return [toggle.value ? 'hello' : 'world', h(AsyncComp)]
- // }
- // },
- // }
-
- // // server render
- // const htmlPromise = renderToString(h(App))
- // serverResolve(Comp)
- // const html = await htmlPromise
- // expect(html).toMatchInlineSnapshot(
- // `"<!--[-->hello<h1>Async component</h1><!--]-->"`,
- // )
+ test('v-if/else-if/else chain - switch branches', async () => {
+ const data = ref('a')
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data === 'a'">foo</div>
+ <div v-else-if="data === 'b'">bar</div>
+ <div v-else>baz</div>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+
+ data.value = 'b'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>bar</div><!--if--><!--if-->"`,
+ )
+
+ data.value = 'c'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>baz</div><!--if--><!--if-->"`,
+ )
+
+ data.value = 'a'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if-->"`,
+ )
+ })
- // // hydration
- // let clientResolve: any
- // AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // clientResolve = r
- // }),
- // )
+ test('nested if', async () => {
+ const data = reactive({ outer: true, inner: true })
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data.outer">
+ <span>outer</span>
+ <div v-if="data.inner">inner</div>
+ </div>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>outer</span><div>inner</div><!--if--></div><!--if-->"`,
+ )
+
+ data.inner = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>outer</span><!--if--></div><!--if-->"`,
+ )
+
+ data.outer = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+ })
- // const container = document.createElement('div')
- // container.innerHTML = html
- // createSSRApp(App).mount(container)
+ test('on component', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <components.Child v-if="data"/>
+ </template>`,
+ { Child: `<template>foo</template>` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo<!--if-->"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+ })
- // // resolve
- // clientResolve(Comp)
- // await new Promise(r => setTimeout(r))
+ test('consecutive if node', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <components.Child v-if="data"/>
+ </template>`,
+ { Child: `<template><div v-if="data">foo</div></template>` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if--><!--if-->"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div>foo</div><!--if--><!--if-->"`,
+ )
+ })
- // // should be hydrated now
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // expect(container.innerHTML).toMatchInlineSnapshot(
- // `"<!--[-->world<h1>Async component</h1><!--]-->"`,
- // )
- // })
+ test('mixed prepend and insertion anchor', async () => {
+ const data = reactive({
+ show: true,
+ foo: 'foo',
+ bar: 'bar',
+ qux: 'qux',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child/>
+ </template>`,
+ {
+ Child: `<template>
+ <span v-if="data.show">
+ <span v-if="data.show">{{data.foo}}</span>
+ <span v-if="data.show">{{data.bar}}</span>
+ <span>baz</span>
+ <span v-if="data.show">{{data.qux}}</span>
+ <span>quux</span>
+ </span>
+ </template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span><span>foo</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux</span><!--if--><span>quux</span></span><!--if-->"`,
+ )
+
+ data.qux = 'qux1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span><span>foo</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux1</span><!--if--><span>quux</span></span><!--if-->"`,
+ )
+
+ data.foo = 'foo1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span><span>foo1</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux1</span><!--if--><span>quux</span></span><!--if-->"`,
+ )
+ })
- // test('hydrate safely when property used by async setup changed before render', async () => {
- // const toggle = ref(true)
-
- // const AsyncComp = {
- // async setup() {
- // await new Promise<void>(r => setTimeout(r, 10))
- // return () => h('h1', 'Async component')
- // },
- // }
-
- // const AsyncWrapper = {
- // render() {
- // return h(AsyncComp)
- // },
- // }
-
- // const SiblingComp = {
- // setup() {
- // toggle.value = false
- // return () => h('span')
- // },
- // }
-
- // const App = {
- // setup() {
- // return () =>
- // h(
- // Suspense,
- // {},
- // {
- // default: () => [
- // h('main', {}, [
- // h(AsyncWrapper, {
- // prop: toggle.value ? 'hello' : 'world',
- // }),
- // h(SiblingComp),
- // ]),
- // ],
- // },
- // )
- // },
- // }
-
- // // server render
- // const html = await renderToString(h(App))
-
- // expect(html).toMatchInlineSnapshot(
- // `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
- // )
+ test('v-if/else-if/else chain on component - switch branches', async () => {
+ const data = ref('a')
+ const { container } = await testHydration(
+ `<template>
+ <components.Child1 v-if="data === 'a'"/>
+ <components.Child2 v-else-if="data === 'b'"/>
+ <components.Child3 v-else/>
+ </template>`,
+ {
+ Child1: `<template><span>{{data}} child1</span></template>`,
+ Child2: `<template><span>{{data}} child2</span></template>`,
+ Child3: `<template><span>{{data}} child3</span></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span>a child1</span><!--if-->"`,
+ )
+
+ data.value = 'b'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span>b child2</span><!--if--><!--if-->"`,
+ )
+
+ data.value = 'c'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span>c child3</span><!--if--><!--if-->"`,
+ )
+
+ data.value = 'a'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span>a child1</span><!--if-->"`,
+ )
+ })
- // expect(toggle.value).toBe(false)
+ test('on component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child v-if="data"/>
+ <span/>
+ </div>
+ </template>`,
+ { Child: `<template>foo</template>` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo<!--if--><span></span></div>"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><!--if--><span></span></div>"`,
+ )
+ })
- // // hydration
+ test('consecutive component with insertion parent', async () => {
+ const data = reactive({
+ show: true,
+ foo: 'foo',
+ bar: 'bar',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <div v-if="data.show">
+ <components.Child/>
+ <components.Child2/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><span>{{data.foo}}</span></template>`,
+ Child2: `<template><span>{{data.bar}}</span></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>foo</span><span>bar</span></div><!--if-->"`,
+ )
+
+ data.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+
+ data.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>foo</span><span>bar</span></div><!--if-->"`,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span>foo1</span><span>bar1</span></div><!--if-->"`,
+ )
+ })
- // // reset the value
- // toggle.value = true
- // expect(toggle.value).toBe(true)
+ test('on fragment component', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <components.Child v-if="data"/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>true</div>-true-<!--]-->
+ <!--if--></div>"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><!--]-->
+ <!--if--></div>"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><!--]-->
+ <div>true</div>-true-<!--if--></div>"
+ `,
+ )
+ })
- // const container = document.createElement('div')
- // container.innerHTML = html
- // createSSRApp(App).mount(container)
+ test('on fragment component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child v-if="data"/>
+ <span/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>true</div>-true-<!--]-->
+ <!--if--><span></span></div>"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><!--]-->
+ <!--if--><span></span></div>"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div><span></span>
+ <!--[--><!--]-->
+ <div>true</div>-true-<!--if--><span></span></div>"
+ `)
+ })
- // await new Promise(r => setTimeout(r, 10))
+ test('consecutive v-if on fragment component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <components.Child v-if="data"/>
+ <components.Child v-if="data"/>
+ <span/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><div>true</div>-true-<!--]-->
+ <!--if-->
+ <!--[--><div>true</div>-true-<!--]-->
+ <!--if--><span></span></div>"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><!--]-->
+ <!--if-->
+ <!--[--><!--]-->
+ <!--if--><span></span></div>"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div><span></span>
+ <!--[--><!--]-->
+ <div>true</div>-true-<!--if-->
+ <!--[--><!--]-->
+ <div>true</div>-true-<!--if--><span></span></div>"
+ `)
+ })
- // expect(toggle.value).toBe(false)
+ test('on dynamic component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <component :is="components.Child" v-if="data"/>
+ <span/>
+ </div>
+ </template>`,
+ { Child: `<template>foo</template>` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo<!--dynamic-component--><!--if--><span></span></div>"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span><!--if--><span></span></div>"`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div><span></span>foo<!--dynamic-component--><!--if--><span></span></div>"`,
+ )
+ })
+ })
- // // should be hydrated now
- // expect(container.innerHTML).toMatchInlineSnapshot(
- // `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
- // )
- // })
+ describe('for', () => {
+ test('basic v-for', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ </template>`,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ "
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
+ "
+ `,
+ )
+ })
- // test('hydrate safely when property used by deep nested async setup changed before render', async () => {
- // const toggle = ref(true)
-
- // const AsyncComp = {
- // async setup() {
- // await new Promise<void>(r => setTimeout(r, 10))
- // return () => h('h1', 'Async component')
- // },
- // }
-
- // const AsyncWrapper = { render: () => h(AsyncComp) }
- // const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
-
- // const SiblingComp = {
- // setup() {
- // toggle.value = false
- // return () => h('span')
- // },
- // }
-
- // const App = {
- // setup() {
- // return () =>
- // h(
- // Suspense,
- // {},
- // {
- // default: () => [
- // h('main', {}, [
- // h(AsyncWrapperWrapper, {
- // prop: toggle.value ? 'hello' : 'world',
- // }),
- // h(SiblingComp),
- // ]),
- // ],
- // },
- // )
- // },
- // }
-
- // // server render
- // const html = await renderToString(h(App))
-
- // expect(html).toMatchInlineSnapshot(
- // `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
- // )
+ test('empty v-for', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ </template>`,
+ undefined,
+ ref([]),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><!--]-->
+ "
+ `,
+ )
+
+ data.value.push('a')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>a</span><!--]-->
+ "
+ `,
+ )
+ })
- // expect(toggle.value).toBe(false)
+ test('v-for with insertion parent + sibling component', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ </div>
+ <components.Child/>
+ </template>`,
+ {
+ Child: `<template><div>{{data.length}}</div></template>`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><div>
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ </div><div>3</div><!--]-->
+ "
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><div>
+ <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
+ </div><div>4</div><!--]-->
+ "
+ `,
+ )
+ })
- // // hydration
+ test('v-for with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ <span/>
+ </div>
+ </template>`,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value.splice(0, 1)
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>b</span><span>c</span><span>d</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // // reset the value
- // toggle.value = true
- // expect(toggle.value).toBe(true)
+ test('consecutive v-for with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <span/>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ <span v-for="item in data" :key="item">{{ item }}</span>
+ <span/>
+ </div>
+ </template>`,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
+ <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.value.splice(0, 2)
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>c</span><span>d</span><!--]-->
+ <!--[--><span>c</span><span>d</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
- // const container = document.createElement('div')
- // container.innerHTML = html
- // createSSRApp(App).mount(container)
+ test('v-for on component', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <components.Child v-for="item in data" :key="item"/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><div>comp</div></template>`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>comp</div><div>comp</div><div>comp</div><!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>comp</div><div>comp</div><div>comp</div><div>comp</div><!--]-->
+ </div>"
+ `,
+ )
+ })
- // await new Promise(r => setTimeout(r, 10))
+ test('v-for on component with slots', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <components.Child v-for="item in data" :key="item">
+ <span>{{ item }}</span>
+ </components.Child>
+ </div>
+ </template>`,
+ {
+ Child: `<template><slot/></template>`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->
+ <!--[--><span>a</span><!--]-->
+ <!--[--><span>b</span><!--]-->
+ <!--[--><span>c</span><!--]-->
+ <!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->
+ <!--[--><span>a</span><!--]-->
+ <!--[--><span>b</span><!--]-->
+ <!--[--><span>c</span><!--]-->
+ <span>d</span><!--slot--><!--]-->
+ </div>"
+ `,
+ )
+ })
- // expect(toggle.value).toBe(false)
+ test('on fragment component', async () => {
+ const { container, data } = await testHydration(
+ `<template>
+ <div>
+ <components.Child v-for="item in data" :key="item"/>
+ </div>
+ </template>`,
+ {
+ Child: `<template><div>foo</div>-bar-</template>`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <!--[--><div>foo</div>-bar-<!--]-->
+ <div>foo</div>-bar-<!--]-->
+ </div>"
+ `,
+ )
+ })
- // // should be hydrated now
- // expect(container.innerHTML).toMatchInlineSnapshot(
- // `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
- // )
- // })
+ test('on component with non-hydration node', async () => {
+ const data = ref({ show: true, msg: 'foo' })
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <components.Child v-for="item in 2" :key="item"/>
+ </div>
+ </template>`,
+ {
+ Child: `<template>
+ <div>
+ <div>
+ <div v-if="data.show">{{ data.msg }}</div>
+ </div>
+ <span>non-hydration node</span>
+ </div>
+ </template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div>
+ <!--[--><div><div><!--if--></div><span>non-hydration node</span></div><div><div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `)
+
+ data.value.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div>
+ <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `)
+ })
- // // #3787
- // test('unmount async wrapper before load', async () => {
- // let resolve: any
- // const AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // resolve = r
- // }),
- // )
+ test('with non-hydration node', async () => {
+ const data = ref({ show: true, msg: 'foo' })
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <div v-for="item in 2">
+ <div>
+ <div v-if="data.show">{{ data.msg }}</div>
+ </div>
+ <span>non-hydration node</span>
+ </div>
+ </div>
+ </template>`,
+ {},
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `,
+ )
+
+ data.value.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div>
+ <!--[--><div><div><!--if--></div><span>non-hydration node</span></div><div><div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `)
+
+ data.value.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "<div>
+ <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--]-->
+ </div>"
+ `)
+ })
+ })
- // const show = ref(true)
- // const root = document.createElement('div')
- // root.innerHTML = '<div><div>async</div></div>'
+ describe('slots', () => {
+ test('basic slot', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot/></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>foo</span><!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>bar</span><!--]-->
+ "
+ `,
+ )
+ })
- // createSSRApp({
- // render() {
- // return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
- // },
- // }).mount(root)
+ test('named slot', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <components.Child>
+ <template #foo>
+ <span>{{data}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot/><slot name="foo"/></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><!--]-->
+ <!--[--><span>foo</span><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+ })
- // show.value = false
- // await nextTick()
- // expect(root.innerHTML).toBe('<div><div>hi</div></div>')
- // resolve({})
- // })
+ test('named slot with v-if', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <components.Child>
+ <template #foo v-if="data">
+ <span>{{data}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot name="foo"/></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>foo</span><!--]-->
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><!--]-->
+ "
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+ <!--[--><span>true</span><!--]-->
+ "
+ `)
+ })
- // //#12362
- // test('nested async wrapper', async () => {
- // const Toggle = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // r(
- // defineComponent({
- // setup(_, { slots }) {
- // const show = ref(false)
- // onMounted(() => {
- // nextTick(() => {
- // show.value = true
- // })
- // })
- // return () =>
- // withDirectives(
- // h('div', null, [renderSlot(slots, 'default')]),
- // [[vShow, show.value]],
- // )
- // },
- // }) as any,
- // )
- // }),
- // )
+ test('named slot with v-if and v-for', async () => {
+ const data = reactive({
+ show: true,
+ items: ['a', 'b', 'c'],
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <template #foo v-if="data.show">
+ <span v-for="item in data.items" :key="item">{{item}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot name="foo"/></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><span>a</span><span>b</span><span>c</span><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+
+ data.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><!--]-->
+ "
+ `,
+ )
+
+ data.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><span>a</span><span>b</span><span>c</span><!--for--><!--]-->
+ "
+ `,
+ )
+ })
- // const Wrapper = defineAsyncComponent(() => {
- // return new Promise(r => {
- // r(
- // defineComponent({
- // render(this: any) {
- // return renderSlot(this.$slots, 'default')
- // },
- // }) as any,
- // )
- // })
- // })
-
- // const count = ref(0)
- // const fn = vi.fn()
- // const Child = {
- // setup() {
- // onMounted(() => {
- // fn()
- // count.value++
- // })
- // return () => h('div', count.value)
- // },
- // }
-
- // const App = {
- // render() {
- // return h(Toggle, null, {
- // default: () =>
- // h(Wrapper, null, {
- // default: () =>
- // h(Wrapper, null, {
- // default: () => h(Child),
- // }),
- // }),
- // })
- // },
- // }
-
- // const root = document.createElement('div')
- // root.innerHTML = await renderToString(h(App))
- // expect(root.innerHTML).toMatchInlineSnapshot(
- // `"<div style="display:none;"><!--[--><!--[--><!--[--><div>0</div><!--]--><!--]--><!--]--></div>"`,
- // )
+ test('with insertion anchor', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span/>
+ <span>{{data}}</span>
+ <span/>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot/></template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span><span>foo</span><span></span><!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span></span><span>bar</span><span></span><!--]-->
+ "
+ `,
+ )
+ })
- // createSSRApp(App).mount(root)
- // await nextTick()
- // await nextTick()
- // expect(root.innerHTML).toMatchInlineSnapshot(
- // `"<div style=""><!--[--><!--[--><!--[--><div>1</div><!--]--><!--]--><!--]--></div>"`,
- // )
- // expect(fn).toBeCalledTimes(1)
- // })
+ test('with multi level anchor insertion', async () => {
+ const { data, container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span/>
+ <span>{{data}}</span>
+ <span/>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <div/>
+ <div/>
+ <slot/>
+ <div/>
+ </div>
+ </template>`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><div></div><div></div>
+ <!--[--><span></span><span>foo</span><span></span><!--]-->
+ <div></div><!--]-->
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><div></div><div></div>
+ <!--[--><span></span><span>bar</span><span></span><!--]-->
+ <div></div><!--]-->
+ "
+ `,
+ )
+ })
- // test('unmount async wrapper before load (fragment)', async () => {
- // let resolve: any
- // const AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // resolve = r
- // }),
- // )
+ test('mixed slot and text node', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.text}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><div><slot/>{{data.msg}}</div></template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ hi</div>"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ bar</div>"
+ `,
+ )
+ })
- // const show = ref(true)
- // const root = document.createElement('div')
- // root.innerHTML = '<div><!--[-->async<!--]--></div>'
+ test('mixed root slot and text node', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.text}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template>{{data.text}}<slot/>{{data.msg}}</template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->foo
+ <!--[--><span>foo</span><!--]-->
+ hi<!--]-->
+ "
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->foo
+ <!--[--><span>foo</span><!--]-->
+ bar<!--]-->
+ "
+ `,
+ )
+ })
- // createSSRApp({
- // render() {
- // return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
- // },
- // }).mount(root)
+ test('mixed consecutive slot and element', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <template #foo><span>{{data.text}}</span></template>
+ <template #bar><span>bar</span></template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><div><slot name="foo"/><slot name="bar"/><div>{{data.msg}}</div></div></template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <div>hi</div></div>"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <div>bar</div></div>"
+ `,
+ )
+ })
- // show.value = false
- // await nextTick()
- // expect(root.innerHTML).toBe('<div><div>hi</div></div>')
- // resolve({})
- // })
+ test('mixed slot and element', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.text}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><div><slot/><div>{{data.msg}}</div></div></template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ <div>hi</div></div>"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ <div>bar</div></div>"
+ `,
+ )
+ })
- // test('elements with camel-case in svg ', () => {
- // const { vnode, container } = mountWithHydration(
- // '<animateTransform></animateTransform>',
- // () => h('animateTransform'),
- // )
- // expect(vnode.el).toBe(container.firstChild)
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
+ test('mixed slot and component', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg1}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <div>
+ <components.Child2/>
+ <slot/>
+ <components.Child2/>
+ </div>
+ </template>`,
+ Child2: `
+ <template>
+ <div>{{data.msg2}}</div>
+ </template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><div>bar</div>
+ <!--[--><span>foo</span><!--]-->
+ <div>bar</div></div>"
+ `,
+ )
+
+ data.msg2 = 'hello'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><div>hello</div>
+ <!--[--><span>foo</span><!--]-->
+ <div>hello</div></div>"
+ `,
+ )
+ })
- // test('SVG as a mount container', () => {
- // const svgContainer = document.createElement('svg')
- // svgContainer.innerHTML = '<g></g>'
- // const app = createSSRApp({
- // render: () => h('g'),
- // })
-
- // expect(
- // (
- // app.mount(svgContainer).$.subTree as VNode<Node, Element> & {
- // el: Element
- // }
- // ).el instanceof SVGElement,
+ test('mixed slot and fragment component', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg1}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <div>
+ <components.Child2/>
+ <slot/>
+ <components.Child2/>
+ </div>
+ </template>`,
+ Child2: `
+ <template>
+ <div>{{data.msg1}}</div> {{data.msg2}}
+ </template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>foo</div> bar<!--]-->
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><div>foo</div> bar<!--]-->
+ </div>"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div>hello</div> vapor<!--]-->
+ <!--[--><span>hello</span><!--]-->
+ <!--[--><div>hello</div> vapor<!--]-->
+ </div>"
+ `,
+ )
+ })
+
+ test('mixed slot and v-if', async () => {
+ const data = reactive({
+ show: true,
+ msg: 'foo',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <div v-if="data.show">{{data.msg}}</div>
+ <slot/>
+ <div v-if="data.show">{{data.msg}}</div>
+ </template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><div>foo</div><!--if-->
+ <!--[--><span>foo</span><!--]-->
+ <div>foo</div><!--if--><!--]-->
+ "
+ `,
+ )
+
+ data.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><!--if-->
+ <!--[--><span>foo</span><!--]-->
+ <!--if--><!--]-->
+ "
+ `,
+ )
+
+ data.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+ <!--[--><div>foo</div><!--if-->
+ <!--[--><span>foo</span><!--]-->
+ <div>foo</div><!--if--><!--]-->
+ "
+ `)
+ })
+
+ test('mixed slot and v-for', async () => {
+ const data = reactive({
+ items: ['a', 'b', 'c'],
+ msg: 'foo',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg}}</span>
+ </components.Child>
+ </template>`,
+ {
+ Child: `
+ <template>
+ <div v-for="item in data.items" :key="item">{{item}}</div>
+ <slot/>
+ <div v-for="item in data.items" :key="item">{{item}}</div>
+ </template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><div>a</div><div>b</div><div>c</div><!--]-->
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><div>a</div><div>b</div><div>c</div><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+
+ data.items.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--]-->
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+ })
+
+ test('consecutive slots', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg1}}</span>
+ <template #bar>
+ <span>{{data.msg2}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot/><slot name="bar"/></template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[-->
+ <!--[--><span>hello</span><!--]-->
+ <!--[--><span>vapor</span><!--]-->
+ <!--]-->
+ "
+ `,
+ )
+ })
+
+ test('consecutive slots with insertion anchor', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <span>{{data.msg1}}</span>
+ <template #bar>
+ <span>{{data.msg2}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template>
+ <div>
+ <span/>
+ <slot/>
+ <slot name="bar"/>
+ <span/>
+ </div>
+ </template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><span></span>
+ <!--[--><span>hello</span><!--]-->
+ <!--[--><span>vapor</span><!--]-->
+ <span></span></div>"
+ `,
+ )
+ })
+
+ test('consecutive slots prepend', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ msg3: 'baz',
+ })
+
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ <template #foo>
+ <span>{{data.msg1}}</span>
+ </template>
+ <template #bar>
+ <span>{{data.msg2}}</span>
+ </template>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template>
+ <div>
+ <slot name="foo"/>
+ <slot name="bar"/>
+ <div>{{data.msg3}}</div>
+ </div>
+ </template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>foo</span><!--]-->
+ <!--[--><span>bar</span><!--]-->
+ <div>baz</div></div>"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><span>hello</span><!--]-->
+ <!--[--><span>vapor</span><!--]-->
+ <div>baz</div></div>"
+ `,
+ )
+ })
+
+ test('slot fallback', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Child>
+ </components.Child>
+ </template>`,
+ {
+ Child: `<template><slot><span>{{data.foo}}</span></slot></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>foo</span><!--]-->
+ "
+ `,
+ )
+
+ data.foo = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>bar</span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('forwarded slot', async () => {
+ const data = reactive({
+ foo: 'foo',
+ bar: 'bar',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <div>
+ <components.Parent>
+ <span>{{data.foo}}</span>
+ </components.Parent>
+ <div>{{data.bar}}</div>
+ </div>
+ </template>`,
+ {
+ Parent: `<template><div><components.Child><slot/></components.Child></div></template>`,
+ Child: `<template><div><slot/></div></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><div><div>
+ <!--[-->
+ <!--[--><span>foo</span><!--]-->
+ <!--]-->
+ </div></div><div>bar</div></div>"
+ `,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div><div><div>
+ <!--[-->
+ <!--[--><span>foo1</span><!--]-->
+ <!--]-->
+ </div></div><div>bar1</div></div>"
+ `,
+ )
+ })
+
+ test('forwarded slot with fallback', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Parent/>
+ </template>`,
+ {
+ Parent: `<template><components.Child><slot/></components.Child></template>`,
+ Child: `<template><div><slot>{{data.foo}}</slot></div></template>`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->foo<!--]-->
+ </div>"
+ `,
+ )
+
+ data.foo = 'foo1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->foo1<!--]-->
+ </div>"
+ `,
+ )
+ })
+
+ test('forwarded slot with empty content', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `<template>
+ <components.Foo/>
+ </template>`,
+ {
+ Foo: `<template>
+ <components.Bar>
+ <template #foo>
+ <slot name="foo" />
+ </template>
+ </components.Bar>
+ </template>`,
+ Bar: `<template>
+ <components.Baz>
+ <template #foo>
+ <slot name="foo" />
+ </template>
+ </components.Baz>
+ </template>`,
+ Baz: `<template>
+ <components.Qux>
+ <template #foo>
+ <slot name="foo" />
+ </template>
+ </components.Qux>
+ </template>`,
+ Qux: `<template>
+ <div>
+ <slot name="foo" />
+ <div>{{data.foo}}</div>
+ </div>
+ </template>`,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><!--]-->
+ <div>foo</div></div>"
+ `,
+ )
+
+ data.foo = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><!--]-->
+ <div>bar</div></div>"
+ `,
+ )
+ })
+ })
+
+ describe.todo('transition', async () => {
+ test('transition appear', async () => {
+ const { container } = await testHydration(
+ `<template>
+ <transition appear>
+ <div>foo</div>
+ </transition>
+ </template>`,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div style="" class="v-enter-from v-enter-active">foo</div>"`,
+ )
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear work with pre-existing class', async () => {
+ const { container } = await testHydration(
+ `<template>
+ <transition appear>
+ <div class="foo">foo</div>
+ </transition>
+ </template>`,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div class="foo v-enter-from v-enter-active" style="">foo</div>"`,
+ )
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear work with empty content', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `<template>
+ <transition appear>
+ <slot v-if="data"></slot>
+ <span v-else>foo</span>
+ </transition>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--slot--><!--if-->"`,
+ )
+ expect(`mismatch`).not.toHaveBeenWarned()
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<span class="v-enter-from v-enter-active">foo</span><!--if-->"`,
+ )
+ })
+
+ test('transition appear with v-if', async () => {
+ const data = ref(false)
+ const { container } = await testHydration(
+ `<template>
+ <transition appear>
+ <div v-if="data">foo</div>
+ </transition>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<!--if-->"`,
+ )
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear with v-show', async () => {
+ const data = ref(false)
+ const { container } = await testHydration(
+ `<template>
+ <transition appear>
+ <div v-show="data">foo</div>
+ </transition>
+ </template>`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<div style="display:none;" class="v-enter-from v-enter-active v-leave-from v-leave-active">foo</div>"`,
+ )
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear w/ event listener', async () => {
+ const { container } = await testHydration(
+ `<script setup>
+ import { ref } from 'vue'
+ const count = ref(0)
+ </script>
+ <template>
+ <transition appear>
+ <button @click="count++">{{ count }}</button>
+ </transition>
+ </template>`,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<button style="" class="v-enter-from v-enter-active">0</button>"`,
+ )
+
+ triggerEvent('click', container.querySelector('button')!)
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"<button style="" class="v-enter-from v-enter-active">1</button>"`,
+ )
+ })
+ })
+
+ describe('force hydrate prop', async () => {
+ test('force hydrate prop with `.prop` modifier', async () => {
+ const { container } = await mountWithHydration(
+ '<input type="checkbox">',
+ `<input type="checkbox" .indeterminate="true"/>`,
+ )
+ expect((container.firstChild! as any).indeterminate).toBe(true)
+ })
+
+ test('force hydrate input v-model with non-string value bindings', async () => {
+ const { container } = await mountWithHydration(
+ '<input type="checkbox" value="true">',
+ `<input type="checkbox" :true-value="true"/>`,
+ )
+ expect((container.firstChild as any)._trueValue).toBe(true)
+ })
+
+ test('force hydrate checkbox with indeterminate', async () => {
+ const { container } = await mountWithHydration(
+ '<input type="checkbox" indeterminate/>',
+ `<input type="checkbox" :indeterminate="true"/>`,
+ )
+ expect((container.firstChild! as any).indeterminate).toBe(true)
+ })
+
+ test('force hydrate select option with non-string value bindings', async () => {
+ const { container } = await mountWithHydration(
+ '<select><option value="true">ok</option></select>',
+ `<select><option :value="true">ok</option></select>`,
+ )
+ expect((container.firstChild!.firstChild as any)._value).toBe(true)
+ })
+
+ test('force hydrate v-bind with .prop modifiers', async () => {
+ const { container } = await mountWithHydration(
+ '<div .foo="true"/>',
+ `<div v-bind="data"/>`,
+ ref({ '.foo': true }),
+ )
+ expect((container.firstChild! as any).foo).toBe(true)
+ })
+
+ // vapor custom element not implemented yet
+ test.todo('force hydrate custom element with dynamic props', () => {})
+ })
+
+ describe.todo('Suspense')
+})
+
+describe('mismatch handling', () => {
+ test('text node', async () => {
+ const foo = ref('bar')
+ const { container } = await mountWithHydration(`foo`, `{{data}}`, foo)
+ expect(container.textContent).toBe('bar')
+ expect(`Hydration text mismatch`).toHaveBeenWarned()
+ })
+
+ test('element text content', async () => {
+ const data = ref({ textContent: 'bar' })
+ const { container } = await mountWithHydration(
+ `<div>foo</div>`,
+ `<div v-bind="data"></div>`,
+ data,
+ )
+ expect(container.innerHTML).toBe('<div>bar</div>')
+ expect(`Hydration text content mismatch`).toHaveBeenWarned()
+ })
+
+ // test('not enough children', () => {
+ // const { container } = mountWithHydration(`<div></div>`, () =>
+ // h('div', [h('span', 'foo'), h('span', 'bar')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '<div><span>foo</span><span>bar</span></div>',
// )
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
// })
-
- // test('force hydrate prop with `.prop` modifier', () => {
- // const { container } = mountWithHydration('<input type="checkbox">', () =>
- // h('input', {
- // type: 'checkbox',
- // '.indeterminate': true,
- // }),
+ // test('too many children', () => {
+ // const { container } = mountWithHydration(
+ // `<div><span>foo</span><span>bar</span></div>`,
+ // () => h('div', [h('span', 'foo')]),
// )
- // expect((container.firstChild! as any).indeterminate).toBe(true)
+ // expect(container.innerHTML).toBe('<div><span>foo</span></div>')
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
// })
-
- // test('force hydrate input v-model with non-string value bindings', () => {
+ test('complete mismatch', async () => {
+ const data = ref('span')
+ const { container } = await mountWithHydration(
+ `<div>foo</div>`,
+ `<component :is="data">foo</component>`,
+ data,
+ )
+ expect(container.innerHTML).toBe('<span>foo</span><!--dynamic-component-->')
+ expect(`Hydration node mismatch`).toHaveBeenWarned()
+ })
+ // test('fragment mismatch removal', () => {
// const { container } = mountWithHydration(
- // '<input type="checkbox" value="true">',
- // () =>
- // withDirectives(
- // createVNode(
- // 'input',
- // { type: 'checkbox', 'true-value': true },
- // null,
- // PatchFlags.PROPS,
- // ['true-value'],
- // ),
- // [[vModelCheckbox, true]],
- // ),
+ // `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
+ // () => h('div', [h('span', 'replaced')]),
// )
- // expect((container.firstChild as any)._trueValue).toBe(true)
+ // expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
// })
-
- // test('force hydrate checkbox with indeterminate', () => {
+ // test('fragment not enough children', () => {
// const { container } = mountWithHydration(
- // '<input type="checkbox" indeterminate>',
- // () =>
- // createVNode(
- // 'input',
- // { type: 'checkbox', indeterminate: '' },
- // null,
- // PatchFlags.CACHED,
- // ),
+ // `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
+ // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
// )
- // expect((container.firstChild as any).indeterminate).toBe(true)
+ // expect(container.innerHTML).toBe(
+ // '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
+ // )
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
// })
-
- // test('force hydrate select option with non-string value bindings', () => {
+ // test('fragment too many children', () => {
// const { container } = mountWithHydration(
- // '<select><option value="true">ok</option></select>',
- // () =>
- // h('select', [
- // // hoisted because bound value is a constant...
- // createVNode('option', { value: true }, null, -1 /* HOISTED */),
- // ]),
+ // `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
+ // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
// )
- // expect((container.firstChild!.firstChild as any)._value).toBe(true)
+ // expect(container.innerHTML).toBe(
+ // '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
+ // )
+ // // fragment ends early and attempts to hydrate the extra <div>bar</div>
+ // // as 2nd fragment child.
+ // expect(`Hydration text content mismatch`).toHaveBeenWarned()
+ // // excessive children removal
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
// })
-
- // // #7203
- // test('force hydrate custom element with dynamic props', () => {
- // class MyElement extends HTMLElement {
- // foo = ''
- // constructor() {
- // super()
- // }
- // }
- // customElements.define('my-element-7203', MyElement)
-
- // const msg = ref('bar')
- // const container = document.createElement('div')
- // container.innerHTML = '<my-element-7203></my-element-7203>'
- // const app = createSSRApp({
- // render: () => h('my-element-7203', { foo: msg.value }),
- // })
- // app.mount(container)
- // expect((container.firstChild as any).foo).toBe(msg.value)
+ // test('Teleport target has empty children', () => {
+ // const teleportContainer = document.createElement('div')
+ // teleportContainer.id = 'teleport'
+ // document.body.appendChild(teleportContainer)
+ // mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
+ // h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
+ // )
+ // expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
// })
-
- // // #5728
- // test('empty text node in slot', () => {
- // const Comp = {
- // render(this: any) {
- // return renderSlot(this.$slots, 'default', {}, () => [
- // createTextVNode(''),
- // ])
- // },
- // }
- // const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
- // h(Comp),
+ // test('comment mismatch (element)', () => {
+ // const { container } = mountWithHydration(`<div><span></span></div>`, () =>
+ // h('div', [createCommentVNode('hi')]),
// )
- // expect(container.childNodes.length).toBe(3)
- // const text = container.childNodes[1]
- // expect(text.nodeType).toBe(3)
- // expect(vnode.el).toBe(container.childNodes[0])
- // // component => slot fragment => text node
- // expect((vnode as any).component?.subTree.children[0].el).toBe(text)
+ // expect(container.innerHTML).toBe('<div><!--hi--></div>')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
// })
-
- // // #7215
- // test('empty text node', () => {
- // const Comp = {
- // render(this: any) {
- // return h('p', [''])
- // },
- // }
- // const { container } = mountWithHydration('<p></p>', () => h(Comp))
- // expect(container.childNodes.length).toBe(1)
- // const p = container.childNodes[0]
- // expect(p.childNodes.length).toBe(1)
- // const text = p.childNodes[0]
- // expect(text.nodeType).toBe(3)
+ // test('comment mismatch (text)', () => {
+ // const { container } = mountWithHydration(`<div>foobar</div>`, () =>
+ // h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe('<div><!--hi--></div>')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
// })
+ test('class mismatch', async () => {
+ await mountWithHydration(
+ `<div class="foo bar"></div>`,
+ `<div :class="data"></div>`,
+ ref(['foo', 'bar']),
+ )
- // // #11372
- // test('object style value tracking in prod', async () => {
- // __DEV__ = false
- // try {
- // const style = reactive({ color: 'red' })
- // const Comp = {
- // render(this: any) {
- // return (
- // openBlock(),
- // createElementBlock(
- // 'div',
- // {
- // style: normalizeStyle(style),
- // },
- // null,
- // 4 /* STYLE */,
- // )
- // )
- // },
- // }
- // const { container } = mountWithHydration(
- // `<div style="color: red;"></div>`,
- // () => h(Comp),
- // )
- // style.color = 'green'
- // await nextTick()
- // expect(container.innerHTML).toBe(`<div style="color: green;"></div>`)
- // } finally {
- // __DEV__ = true
- // }
- // })
+ await mountWithHydration(
+ `<div class="foo bar"></div>`,
+ `<div :class="data"></div>`,
+ ref({ foo: true, bar: true }),
+ )
- // test('app.unmount()', async () => {
- // const container = document.createElement('DIV')
- // container.innerHTML = '<button></button>'
- // const App = defineComponent({
- // setup(_, { expose }) {
- // const count = ref(0)
-
- // expose({ count })
-
- // return () =>
- // h('button', {
- // onClick: () => count.value++,
- // })
- // },
- // })
-
- // const app = createSSRApp(App)
- // const vm = app.mount(container)
- // await nextTick()
- // expect((container as any)._vnode).toBeDefined()
- // // @ts-expect-error - expose()'d properties are not available on vm type
- // expect(vm.count).toBe(0)
-
- // app.unmount()
- // expect((container as any)._vnode).toBe(null)
- // })
+ await mountWithHydration(
+ `<div class="foo bar"></div>`,
+ `<div :class="data"></div>`,
+ ref('foo bar'),
+ )
+
+ // svg classes
+ await mountWithHydration(
+ `<svg class="foo bar"></svg>`,
+ `<svg :class="data"></svg>`,
+ ref('foo bar'),
+ )
+
+ // class with different order
+ await mountWithHydration(
+ `<div class="foo bar"></div>`,
+ `<div :class="data"></div>`,
+ ref('bar foo'),
+ )
+ expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+
+ // single root mismatch
+ const { container: root } = await mountWithHydration(
+ `<div class="foo bar"></div>`,
+ `<div :class="data"></div>`,
+ ref('baz'),
+ )
+ expect(root.innerHTML).toBe('<div class="foo bar baz"></div>')
+ expect(`Hydration class mismatch`).toHaveBeenWarned()
+
+ // multiple root mismatch
+ const { container } = await mountWithHydration(
+ `<div class="foo bar"></div><span/>`,
+ `<div :class="data"></div><span/>`,
+ ref('foo'),
+ )
+ expect(container.innerHTML).toBe('<div class="foo"></div><span></span>')
+ expect(`Hydration class mismatch`).toHaveBeenWarned()
+ })
+
+ test('style mismatch', async () => {
+ await mountWithHydration(
+ `<div style="color:red;"></div>`,
+ `<div :style="data"></div>`,
+ ref({ color: 'red' }),
+ )
+
+ await mountWithHydration(
+ `<div style="color:red;"></div>`,
+ `<div :style="data"></div>`,
+ ref('color:red;'),
+ )
- // // #6637
- // test('stringified root fragment', () => {
- // mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
- // createStaticVNode(`<div></div>`, 1),
+ // style with different order
+ await mountWithHydration(
+ `<div style="color:red; font-size: 12px;"></div>`,
+ `<div :style="data"></div>`,
+ ref(`font-size: 12px; color:red;`),
+ )
+
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+
+ // single root mismatch
+ const { container: root } = await mountWithHydration(
+ `<div style="color:red;"></div>`,
+ `<div :style="data"></div>`,
+ ref({ color: 'green' }),
+ )
+ expect(root.innerHTML).toBe('<div style="color: green;"></div>')
+ expect(`Hydration style mismatch`).toHaveBeenWarned()
+
+ // multiple root mismatch
+ const { container } = await mountWithHydration(
+ `<div style="color:red;"></div><span/>`,
+ `<div :style="data"></div><span/>`,
+ ref({ color: 'green' }),
+ )
+ expect(container.innerHTML).toBe(
+ '<div style="color: green;"></div><span></span>',
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarned()
+ })
+
+ test('style mismatch when no style attribute is present', async () => {
+ await mountWithHydration(
+ `<div></div>`,
+ `<div :style="data"></div>`,
+ ref({ color: 'red' }),
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ })
+
+ test('style mismatch w/ v-show', async () => {
+ await mountWithHydration(
+ `<div style="color:red;display:none"></div>`,
+ `<div v-show="data" style="color: red;"></div>`,
+ ref(false),
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+
+ // mismatch with single root
+ const { container: root } = await mountWithHydration(
+ `<div style="color:red;"></div>`,
+ `<div v-show="data" style="color: red;"></div>`,
+ ref(false),
+ )
+ expect(root.innerHTML).toBe(
+ '<div style="color: red; display: none;"></div>',
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarned()
+
+ // mismatch with multiple root
+ const { container } = await mountWithHydration(
+ `<div style="color:red;"></div><span/>`,
+ `<div v-show="data.show" :style="data.style"></div><span/>`,
+ ref({ show: false, style: 'color: red' }),
+ )
+ expect(container.innerHTML).toBe(
+ '<div style="color: red; display: none;"></div><span></span>',
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarned()
+ })
+
+ test('attr mismatch', async () => {
+ await mountWithHydration(
+ `<div id="foo"></div>`,
+ `<div :id="data"></div>`,
+ ref('foo'),
+ )
+
+ await mountWithHydration(
+ `<div spellcheck></div>`,
+ `<div :spellcheck="data"></div>`,
+ ref(''),
+ )
+
+ await mountWithHydration(
+ `<div></div>`,
+ `<div :id="data"></div>`,
+ ref(undefined),
+ )
+
+ // boolean
+ await mountWithHydration(
+ `<select multiple></div>`,
+ `<select :multiple="data"></select>`,
+ ref(true),
+ )
+
+ await mountWithHydration(
+ `<select multiple></div>`,
+ `<select :multiple="data"></select>`,
+ ref('multiple'),
+ )
+
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ await mountWithHydration(
+ `<div></div>`,
+ `<div :id="data"></div>`,
+ ref('foo'),
+ )
+ expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
+
+ await mountWithHydration(
+ `<div id="bar"></div>`,
+ `<div :id="data"></div>`,
+ ref('foo'),
+ )
+ expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+ })
+
+ test('attr special case: textarea value', async () => {
+ await mountWithHydration(
+ `<textarea>foo</textarea>`,
+ `<textarea :value="data"></textarea>`,
+ ref('foo'),
+ )
+
+ await mountWithHydration(
+ `<textarea></textarea>`,
+ `<textarea :value="data"></textarea>`,
+ ref(''),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+ await mountWithHydration(
+ `<textarea>foo</textarea>`,
+ `<textarea :value="data"></textarea>`,
+ ref('bar'),
+ )
+ expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+ })
+
+ test('<textarea> with newlines at the beginning', async () => {
+ await mountWithHydration(
+ `<textarea>\nhello</textarea>`,
+ `<textarea :value="data"></textarea>`,
+ ref('\nhello'),
+ )
+
+ await mountWithHydration(
+ `<textarea>\nhello</textarea>`,
+ `<textarea v-text="data"></textarea>`,
+ ref('\nhello'),
+ )
+
+ await mountWithHydration(
+ `<textarea>\nhello</textarea>`,
+ `<textarea v-bind="data"></textarea>`,
+ ref({ textContent: '\nhello' }),
+ )
+ expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('<pre> with newlines at the beginning', async () => {
+ await mountWithHydration(`<pre>\n</pre>`, `<pre>{{data}}</pre>`, ref('\n'))
+
+ await mountWithHydration(
+ `<pre>\n</pre>`,
+ `<pre v-text="data"></pre>`,
+ ref('\n'),
+ )
+
+ await mountWithHydration(
+ `<pre>\n</pre>`,
+ `<pre v-bind="data"></pre>`,
+ ref({ textContent: '\n' }),
+ )
+ expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('boolean attr handling', async () => {
+ await mountWithHydration(
+ `<input />`,
+ `<input :readonly="data" />`,
+ ref(false),
+ )
+
+ await mountWithHydration(
+ `<input readonly />`,
+ `<input :readonly="data" />`,
+ ref(true),
+ )
+
+ await mountWithHydration(
+ `<input readonly="readonly" />`,
+ `<input :readonly="data" />`,
+ ref(true),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('client value is null or undefined', async () => {
+ await mountWithHydration(
+ `<div></div>`,
+ `<div :draggable="data"></div>`,
+ ref(undefined),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ await mountWithHydration(`<input />`, `<input :type="data" />`, ref(null))
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn against object values', async () => {
+ await mountWithHydration(`<input />`, `<input :from="data" />`, ref({}))
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn on falsy bindings of non-property keys', async () => {
+ await mountWithHydration(
+ `<button></button>`,
+ `<button :href="data"></button>`,
+ ref(undefined),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn on non-renderable option values', async () => {
+ await mountWithHydration(
+ `<select><option>hello</option></select>`,
+ `<select><option :value="data">hello</option></select>`,
+ ref(['foo']),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo('should not warn css v-bind', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () => h('div', { style: { color: 'var(--foo)' } })
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo(
+ 'css vars should only be added to expected on component root dom',
+ () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () =>
+ // h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ },
+ )
+
+ test.todo('css vars support fallthrough', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () => h(Child)
+ // },
+ // })
+ // const Child = {
+ // setup() {
+ // return () => h('div', { style: 'padding: 4px' })
+ // },
+ // }
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ // vapor directive does not have a created hook
+ test('should not warn for directives that mutate DOM in created', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = `<div class="test red"></div>`
+ // const vColor: ObjectDirective = {
+ // created(el, binding) {
+ // el.classList.add(binding.value)
+ // },
+ // }
+ // const app = createSSRApp({
+ // setup() {
+ // return () =>
+ // withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo('escape css var name', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // 'foo.bar': 'red',
+ // }))
+ // return () => h(Child)
+ // },
+ // })
+ // const Child = {
+ // setup() {
+ // return () => h('div', { style: 'padding: 4px' })
+ // },
+ // }
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+})
+
+describe('data-allow-mismatch', () => {
+ test('element text content', async () => {
+ const data = ref({ textContent: 'bar' })
+ const { container } = await mountWithHydration(
+ `<div data-allow-mismatch="text">foo</div>`,
+ `<div v-bind="data"></div>`,
+ data,
+ )
+ expect(container.innerHTML).toBe(
+ '<div data-allow-mismatch="text">bar</div>',
+ )
+ expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ })
+ // test('not enough children', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"></div>`,
+ // () => h('div', [h('span', 'foo'), h('span', 'bar')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>',
// )
- // expect(`mismatch`).not.toHaveBeenWarned()
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
// })
-
- // test('transition appear', () => {
- // const { vnode, container } = mountWithHydration(
- // `<template><div>foo</div></template>`,
- // () =>
- // h(
- // Transition,
- // { appear: true },
- // {
- // default: () => h('div', 'foo'),
- // },
- // ),
+ // test('too many children', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
+ // () => h('div', [h('span', 'foo')]),
// )
- // expect(container.firstChild).toMatchInlineSnapshot(`
- // <div
- // class="v-enter-from v-enter-active"
- // >
- // foo
- // </div>
- // `)
- // expect(vnode.el).toBe(container.firstChild)
- // expect(`mismatch`).not.toHaveBeenWarned()
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><span>foo</span></div>',
+ // )
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
// })
-
- // test('transition appear with v-if', () => {
- // const show = false
- // const { vnode, container } = mountWithHydration(
- // `<template><!----></template>`,
- // () =>
- // h(
- // Transition,
- // { appear: true },
- // {
- // default: () => (show ? h('div', 'foo') : createCommentVNode('')),
- // },
- // ),
+ test('complete mismatch', async () => {
+ const { container } = await mountWithHydration(
+ `<div data-allow-mismatch="children"><div>foo</div></div>`,
+ `<div><component :is="data">foo</component></div>`,
+ ref('span'),
+ )
+ expect(container.innerHTML).toBe(
+ '<div data-allow-mismatch="children"><span>foo</span><!--dynamic-component--></div>',
+ )
+ expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ })
+ // test('fragment mismatch removal', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
+ // () => h('div', [h('span', 'replaced')]),
// )
- // expect(container.firstChild).toMatchInlineSnapshot('<!---->')
- // expect(vnode.el).toBe(container.firstChild)
- // expect(`mismatch`).not.toHaveBeenWarned()
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><span>replaced</span></div>',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
// })
-
- // test('transition appear with v-show', () => {
- // const show = false
- // const { vnode, container } = mountWithHydration(
- // `<template><div style="display: none;">foo</div></template>`,
- // () =>
- // h(
- // Transition,
- // { appear: true },
- // {
- // default: () =>
- // withDirectives(createVNode('div', null, 'foo'), [[vShow, show]]),
- // },
- // ),
+ // test('fragment not enough children', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
+ // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
// )
- // expect(container.firstChild).toMatchInlineSnapshot(`
- // <div
- // class="v-enter-from v-enter-active"
- // style="display: none;"
- // >
- // foo
- // </div>
- // `)
- // expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
- // expect(vnode.el).toBe(container.firstChild)
- // expect(`mismatch`).not.toHaveBeenWarned()
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
// })
-
- // test('transition appear w/ event listener', async () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<template><button>0</button></template>`
- // createSSRApp({
- // data() {
- // return {
- // count: 0,
- // }
- // },
- // template: `
- // <Transition appear>
- // <button @click="count++">{{count}}</button>
- // </Transition>
- // `,
- // }).mount(container)
-
- // expect(container.firstChild).toMatchInlineSnapshot(`
- // <button
- // class="v-enter-from v-enter-active"
- // >
- // 0
- // </button>
- // `)
-
- // triggerEvent('click', container.querySelector('button')!)
- // await nextTick()
- // expect(container.firstChild).toMatchInlineSnapshot(`
- // <button
- // class="v-enter-from v-enter-active"
- // >
- // 1
- // </button>
- // `)
+ // test('fragment too many children', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
+ // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>',
+ // )
+ // // fragment ends early and attempts to hydrate the extra <div>bar</div>
+ // // as 2nd fragment child.
+ // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ // // excessive children removal
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
// })
-
- // test('Suspense + transition appear', async () => {
- // const { vnode, container } = mountWithHydration(
- // `<template><div>foo</div></template>`,
- // () =>
- // h(Suspense, {}, () =>
- // h(
- // Transition,
- // { appear: true },
- // {
- // default: () => h('div', 'foo'),
- // },
- // ),
- // ),
+ // test('comment mismatch (element)', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children"><span></span></div>`,
+ // () => h('div', [createCommentVNode('hi')]),
// )
-
- // expect(vnode.el).toBe(container.firstChild)
- // // wait for hydration to finish
- // await new Promise(r => setTimeout(r))
-
- // expect(container.firstChild).toMatchInlineSnapshot(`
- // <div
- // class="v-enter-from v-enter-active"
- // >
- // foo
- // </div>
- // `)
- // await nextTick()
- // expect(vnode.el).toBe(container.firstChild)
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><!--hi--></div>',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
// })
-
- // // #10607
- // test('update component stable slot (prod + optimized mode)', async () => {
- // __DEV__ = false
- // try {
- // const container = document.createElement('div')
- // container.innerHTML = `<template><div show="false"><!--[--><div><div><!----></div></div><div>0</div><!--]--></div></template>`
- // const Comp = {
- // render(this: any) {
- // return (
- // openBlock(),
- // createElementBlock('div', null, [
- // renderSlot(this.$slots, 'default'),
- // ])
- // )
- // },
- // }
- // const show = ref(false)
- // const clicked = ref(false)
-
- // const Wrapper = {
- // setup() {
- // const items = ref<number[]>([])
- // onMounted(() => {
- // items.value = [1]
- // })
- // return () => {
- // return (
- // openBlock(),
- // createBlock(Comp, null, {
- // default: withCtx(() => [
- // createElementVNode('div', null, [
- // createElementVNode('div', null, [
- // clicked.value
- // ? (openBlock(),
- // createElementBlock('div', { key: 0 }, 'foo'))
- // : createCommentVNode('v-if', true),
- // ]),
- // ]),
- // createElementVNode(
- // 'div',
- // null,
- // items.value.length,
- // 1 /* TEXT */,
- // ),
- // ]),
- // _: 1 /* STABLE */,
- // })
- // )
- // }
- // },
- // }
- // createSSRApp({
- // components: { Wrapper },
- // data() {
- // return { show }
- // },
- // template: `<Wrapper :show="show"/>`,
- // }).mount(container)
-
- // await nextTick()
- // expect(container.innerHTML).toBe(
- // `<div show="false"><!--[--><div><div><!----></div></div><div>1</div><!--]--></div>`,
- // )
-
- // show.value = true
- // await nextTick()
- // expect(async () => {
- // clicked.value = true
- // await nextTick()
- // }).not.toThrow("Cannot read properties of null (reading 'insertBefore')")
-
- // await nextTick()
- // expect(container.innerHTML).toBe(
- // `<div show="true"><!--[--><div><div><div>foo</div></div></div><div>1</div><!--]--></div>`,
- // )
- // } catch (e) {
- // throw e
- // } finally {
- // __DEV__ = true
- // }
+ // test('comment mismatch (text)', () => {
+ // const { container } = mountWithHydration(
+ // `<div data-allow-mismatch="children">foobar</div>`,
+ // () => h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '<div data-allow-mismatch="children"><!--hi--></div>',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
// })
+ test('class mismatch', async () => {
+ await mountWithHydration(
+ `<div class="foo bar" data-allow-mismatch="class"></div>`,
+ `<div :class="data"></div>`,
+ ref('foo'),
+ )
+ expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+ })
- // describe('mismatch handling', () => {
- // test('text node', () => {
- // const { container } = mountWithHydration(`foo`, () => 'bar')
- // expect(container.textContent).toBe('bar')
- // expect(`Hydration text mismatch`).toHaveBeenWarned()
- // })
-
- // test('element text content', () => {
- // const { container } = mountWithHydration(`<div>foo</div>`, () =>
- // h('div', 'bar'),
- // )
- // expect(container.innerHTML).toBe('<div>bar</div>')
- // expect(`Hydration text content mismatch`).toHaveBeenWarned()
- // })
-
- // test('not enough children', () => {
- // const { container } = mountWithHydration(`<div></div>`, () =>
- // h('div', [h('span', 'foo'), h('span', 'bar')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div><span>foo</span><span>bar</span></div>',
- // )
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('too many children', () => {
- // const { container } = mountWithHydration(
- // `<div><span>foo</span><span>bar</span></div>`,
- // () => h('div', [h('span', 'foo')]),
- // )
- // expect(container.innerHTML).toBe('<div><span>foo</span></div>')
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('complete mismatch', () => {
- // const { container } = mountWithHydration(
- // `<div><span>foo</span><span>bar</span></div>`,
- // () => h('div', [h('div', 'foo'), h('p', 'bar')]),
- // )
- // expect(container.innerHTML).toBe('<div><div>foo</div><p>bar</p></div>')
- // expect(`Hydration node mismatch`).toHaveBeenWarnedTimes(2)
- // })
-
- // test('fragment mismatch removal', () => {
- // const { container } = mountWithHydration(
- // `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
- // () => h('div', [h('span', 'replaced')]),
- // )
- // expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('fragment not enough children', () => {
- // const { container } = mountWithHydration(
- // `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
- // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
- // )
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('fragment too many children', () => {
- // const { container } = mountWithHydration(
- // `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
- // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
- // )
- // // fragment ends early and attempts to hydrate the extra <div>bar</div>
- // // as 2nd fragment child.
- // expect(`Hydration text content mismatch`).toHaveBeenWarned()
- // // excessive children removal
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('Teleport target has empty children', () => {
- // const teleportContainer = document.createElement('div')
- // teleportContainer.id = 'teleport'
- // document.body.appendChild(teleportContainer)
-
- // mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
- // h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
- // )
- // expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('comment mismatch (element)', () => {
- // const { container } = mountWithHydration(`<div><span></span></div>`, () =>
- // h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe('<div><!--hi--></div>')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('comment mismatch (text)', () => {
- // const { container } = mountWithHydration(`<div>foobar</div>`, () =>
- // h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe('<div><!--hi--></div>')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('class mismatch', () => {
- // mountWithHydration(`<div class="foo bar"></div>`, () =>
- // h('div', { class: ['foo', 'bar'] }),
- // )
- // mountWithHydration(`<div class="foo bar"></div>`, () =>
- // h('div', { class: { foo: true, bar: true } }),
- // )
- // mountWithHydration(`<div class="foo bar"></div>`, () =>
- // h('div', { class: 'foo bar' }),
- // )
- // // SVG classes
- // mountWithHydration(`<svg class="foo bar"></svg>`, () =>
- // h('svg', { class: 'foo bar' }),
- // )
- // // class with different order
- // mountWithHydration(`<div class="foo bar"></div>`, () =>
- // h('div', { class: 'bar foo' }),
- // )
- // expect(`Hydration class mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(`<div class="foo bar"></div>`, () =>
- // h('div', { class: 'foo' }),
- // )
- // expect(`Hydration class mismatch`).toHaveBeenWarned()
- // })
-
- // test('style mismatch', () => {
- // mountWithHydration(`<div style="color:red;"></div>`, () =>
- // h('div', { style: { color: 'red' } }),
- // )
- // mountWithHydration(`<div style="color:red;"></div>`, () =>
- // h('div', { style: `color:red;` }),
- // )
- // mountWithHydration(
- // `<div style="color:red; font-size: 12px;"></div>`,
- // () => h('div', { style: `font-size: 12px; color:red;` }),
- // )
- // mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(`<div style="color:red;"></div>`, () =>
- // h('div', { style: { color: 'green' } }),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('style mismatch when no style attribute is present', () => {
- // mountWithHydration(`<div></div>`, () =>
- // h('div', { style: { color: 'red' } }),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('style mismatch w/ v-show', () => {
- // mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(`<div style="color:red;"></div>`, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('attr mismatch', () => {
- // mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
- // mountWithHydration(`<div spellcheck></div>`, () =>
- // h('div', { spellcheck: '' }),
- // )
- // mountWithHydration(`<div></div>`, () => h('div', { id: undefined }))
- // // boolean
- // mountWithHydration(`<select multiple></div>`, () =>
- // h('select', { multiple: true }),
- // )
- // mountWithHydration(`<select multiple></div>`, () =>
- // h('select', { multiple: 'multiple' }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
- // mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
- // expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
-
- // mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
- // expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
- // })
-
- // test('attr special case: textarea value', () => {
- // mountWithHydration(`<textarea>foo</textarea>`, () =>
- // h('textarea', { value: 'foo' }),
- // )
- // mountWithHydration(`<textarea></textarea>`, () =>
- // h('textarea', { value: '' }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
- // mountWithHydration(`<textarea>foo</textarea>`, () =>
- // h('textarea', { value: 'bar' }),
- // )
- // expect(`Hydration attribute mismatch`).toHaveBeenWarned()
- // })
-
- // // #11873
- // test('<textarea> with newlines at the beginning', async () => {
- // const render = () => h('textarea', null, '\nhello')
- // const html = await renderToString(createSSRApp({ render }))
- // mountWithHydration(html, render)
- // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('<pre> with newlines at the beginning', async () => {
- // const render = () => h('pre', null, '\n')
- // const html = await renderToString(createSSRApp({ render }))
- // mountWithHydration(html, render)
- // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('boolean attr handling', () => {
- // mountWithHydration(`<input />`, () => h('input', { readonly: false }))
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
- // mountWithHydration(`<input readonly />`, () =>
- // h('input', { readonly: true }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
- // mountWithHydration(`<input readonly="readonly" />`, () =>
- // h('input', { readonly: true }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('client value is null or undefined', () => {
- // mountWithHydration(`<div></div>`, () =>
- // h('div', { draggable: undefined }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
- // mountWithHydration(`<input />`, () => h('input', { type: null }))
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('should not warn against object values', () => {
- // mountWithHydration(`<input />`, () => h('input', { from: {} }))
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('should not warn on falsy bindings of non-property keys', () => {
- // mountWithHydration(`<button />`, () => h('button', { href: undefined }))
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('should not warn on non-renderable option values', () => {
- // mountWithHydration(`<select><option>hello</option></select>`, () =>
- // h('select', [h('option', { value: ['foo'] }, 'hello')]),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('should not warn css v-bind', () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
- // const app = createSSRApp({
- // setup() {
- // useCssVars(() => ({
- // foo: 'red',
- // }))
- // return () => h('div', { style: { color: 'var(--foo)' } })
- // },
- // })
- // app.mount(container)
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
-
- // // #10317 - test case from #10325
- // test('css vars should only be added to expected on component root dom', () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
- // const app = createSSRApp({
- // setup() {
- // useCssVars(() => ({
- // foo: 'red',
- // }))
- // return () =>
- // h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
- // },
- // })
- // app.mount(container)
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
-
- // // #11188
- // test('css vars support fallthrough', () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
- // const app = createSSRApp({
- // setup() {
- // useCssVars(() => ({
- // foo: 'red',
- // }))
- // return () => h(Child)
- // },
- // })
- // const Child = {
- // setup() {
- // return () => h('div', { style: 'padding: 4px' })
- // },
- // }
- // app.mount(container)
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
-
- // // #11189
- // test('should not warn for directives that mutate DOM in created', () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<div class="test red"></div>`
- // const vColor: ObjectDirective = {
- // created(el, binding) {
- // el.classList.add(binding.value)
- // },
- // }
- // const app = createSSRApp({
- // setup() {
- // return () =>
- // withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
- // },
- // })
- // app.mount(container)
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('escape css var name', () => {
- // const container = document.createElement('div')
- // container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
- // const app = createSSRApp({
- // setup() {
- // useCssVars(() => ({
- // 'foo.bar': 'red',
- // }))
- // return () => h(Child)
- // },
- // })
- // const Child = {
- // setup() {
- // return () => h('div', { style: 'padding: 4px' })
- // },
- // }
- // app.mount(container)
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
- // })
+ test('style mismatch', async () => {
+ await mountWithHydration(
+ `<div style="color:red;" data-allow-mismatch="style"></div>`,
+ `<div :style="data"></div>`,
+ ref({ color: 'green' }),
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
- // describe('data-allow-mismatch', () => {
- // test('element text content', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="text">foo</div>`,
- // () => h('div', 'bar'),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="text">bar</div>',
- // )
- // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('not enough children', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"></div>`,
- // () => h('div', [h('span', 'foo'), h('span', 'bar')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>',
- // )
- // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('too many children', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
- // () => h('div', [h('span', 'foo')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><span>foo</span></div>',
- // )
- // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('complete mismatch', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
- // () => h('div', [h('div', 'foo'), h('p', 'bar')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><div>foo</div><p>bar</p></div>',
- // )
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('fragment mismatch removal', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
- // () => h('div', [h('span', 'replaced')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><span>replaced</span></div>',
- // )
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('fragment not enough children', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
- // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
- // )
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('fragment too many children', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
- // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>',
- // )
- // // fragment ends early and attempts to hydrate the extra <div>bar</div>
- // // as 2nd fragment child.
- // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
- // // excessive children removal
- // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('comment mismatch (element)', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children"><span></span></div>`,
- // () => h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><!--hi--></div>',
- // )
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('comment mismatch (text)', () => {
- // const { container } = mountWithHydration(
- // `<div data-allow-mismatch="children">foobar</div>`,
- // () => h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe(
- // '<div data-allow-mismatch="children"><!--hi--></div>',
- // )
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('class mismatch', () => {
- // mountWithHydration(
- // `<div class="foo bar" data-allow-mismatch="class"></div>`,
- // () => h('div', { class: 'foo' }),
- // )
- // expect(`Hydration class mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('style mismatch', () => {
- // mountWithHydration(
- // `<div style="color:red;" data-allow-mismatch="style"></div>`,
- // () => h('div', { style: { color: 'green' } }),
- // )
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // })
-
- // test('attr mismatch', () => {
- // mountWithHydration(`<div data-allow-mismatch="attribute"></div>`, () =>
- // h('div', { id: 'foo' }),
- // )
- // mountWithHydration(
- // `<div id="bar" data-allow-mismatch="attribute"></div>`,
- // () => h('div', { id: 'foo' }),
- // )
- // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
- // })
- // })
+ test('attr mismatch', async () => {
+ await mountWithHydration(
+ `<div data-allow-mismatch="attribute"></div>`,
+ `<div :id="data"></div>`,
+ ref('foo'),
+ )
+
+ await mountWithHydration(
+ `<div id="bar" data-allow-mismatch="attribute"></div>`,
+ `<div :id="data"></div>`,
+ ref('foo'),
+ )
+
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+})
+
+describe('VDOM interop', () => {
+ test('basic render vapor component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild/>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template>{{ data }}</template>`,
+ vapor: true,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"true"`)
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"false"`)
+ })
+
+ test('nested components (VDOM -> Vapor -> VDOM)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild/>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template><components.VdomChild/></template>`,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `<script setup>const data = _data;</script>
+ <template>{{ data }}</template>`,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"true"`)
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"false"`)
+ })
+
+ test('nested components (VDOM -> Vapor -> VDOM (with slot fallback))', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild/>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template><components.VdomChild/></template>`,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `<script setup>const data = _data;</script>
+ <template><slot><span>{{data}}</span></slot></template>`,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>true</span><!--]-->
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>false</span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('nested components (VDOM -> Vapor(with slot content) -> VDOM)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild/>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template>
+ <components.VdomChild>
+ <template #default>
+ <span>{{data}} vapor fallback</span>
+ </template>
+ </components.VdomChild>
+ </template>`,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `<script setup>const data = _data;</script>
+ <template><slot><span>vdom fallback</span></slot></template>`,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>true vapor fallback</span><!--]-->
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>false vapor fallback</span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('nested components (VDOM -> Vapor(with slot content) -> Vapor)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild/>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template>
+ <components.VaporChild2>
+ <template #default>
+ <span>{{data}} vapor fallback</span>
+ </template>
+ </components.VaporChild2>
+ </template>`,
+ vapor: true,
+ },
+ VaporChild2: {
+ code: `<template><slot><span>vapor fallback2</span></slot></template>`,
+ vapor: true,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>true vapor fallback</span><!--]-->
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ <!--[--><span>false vapor fallback</span><!--]-->
+ "
+ `,
+ )
+ })
+
+ test('vapor slot render vdom component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `<script setup>const data = _data; const components = _components;</script>
+ <template>
+ <components.VaporChild>
+ <components.VdomChild/>
+ </components.VaporChild>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template><div><slot/></div></template>`,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `<script setup>const data = _data;</script>
+ <template>{{ data }}</template>`,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->true<!--]-->
+ </div>"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[-->false<!--]-->
+ </div>"
+ `,
+ )
+ })
- test.todo('Teleport')
- test.todo('Suspense')
+ test('vapor slot render vdom component (render function)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVaporApp(
+ `<script setup>
+ import { h } from 'vue'
+ const data = _data; const components = _components;
+ const VdomChild = {
+ setup() {
+ return () => h('div', null, [h('div', [String(data.value)])])
+ }
+ }
+ </script>
+ <template>
+ <components.VaporChild>
+ <VdomChild/>
+ </components.VaporChild>
+ </template>`,
+ {
+ VaporChild: {
+ code: `<template><div><slot/></div></template>`,
+ vapor: true,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div>true</div></div><!--]-->
+ </div>"
+ `,
+ )
+
+ expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "<div>
+ <!--[--><div><div>false</div></div><!--]-->
+ </div>"
+ `,
+ )
+ })
})
projects / thirdparty / vuejs / core.git / commitdiff
