Skip to content

Commit 3909800

Browse files
edison1105edison1105
committed
chore: Merge branch 'vapor' into edison/fix/vdomCompAttrFallthrough
2 parents 000d4d0 + 68fe37a commit 3909800

3 files changed

Lines changed: 140 additions & 78 deletions

File tree

‎packages/runtime-vapor/__tests__/_utils.ts‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createVaporApp } from '../src'
2-
import type { App } from '@vue/runtime-dom'
1+
import { createVaporApp, vaporInteropPlugin } from '../src'
2+
import { type App, type Component, createApp } from '@vue/runtime-dom'
33
import type { VaporComponent, VaporComponentInstance } from '../src/component'
44
import type { RawProps } from '../src/componentProps'
55

@@ -82,3 +82,56 @@ export function makeRender<C = VaporComponent>(
8282

8383
return define
8484
}
85+
86+
export interface InteropRenderContext {
87+
mount: (container?: string | ParentNode) => InteropRenderContext
88+
render: (
89+
props?: RawProps,
90+
container?: string | ParentNode,
91+
) => InteropRenderContext
92+
host: HTMLElement
93+
html: () => string
94+
}
95+
96+
export function makeInteropRender(): (comp: Component) => InteropRenderContext {
97+
let host: HTMLElement
98+
beforeEach(() => {
99+
host = document.createElement('div')
100+
})
101+
afterEach(() => {
102+
host.remove()
103+
})
104+
105+
function define(comp: Component) {
106+
let app: App
107+
function render(
108+
props: RawProps | undefined = undefined,
109+
container: string | ParentNode = host,
110+
) {
111+
app?.unmount()
112+
app = createApp(comp, props)
113+
app.use(vaporInteropPlugin)
114+
return mount(container)
115+
}
116+
117+
function mount(container: string | ParentNode = host) {
118+
app.mount(container)
119+
return res()
120+
}
121+
122+
function html() {
123+
return host.innerHTML
124+
}
125+
126+
const res = () => ({
127+
host,
128+
mount,
129+
render,
130+
html,
131+
})
132+
133+
return res()
134+
}
135+
136+
return define
137+
}

‎packages/runtime-vapor/__tests__/componentAttrs.spec.ts‎

Lines changed: 1 addition & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
type Ref,
3-
createApp,
4-
defineComponent,
5-
h,
6-
nextTick,
7-
ref,
8-
} from '@vue/runtime-dom'
1+
import { type Ref, nextTick, ref } from '@vue/runtime-dom'
92
import {
103
createComponent,
114
createDynamicComponent,
@@ -17,7 +10,6 @@ import {
1710
setProp,
1811
setStyle,
1912
template,
20-
vaporInteropPlugin,
2113
} from '../src'
2214
import { makeRender } from './_utils'
2315
import { stringifyStyle } from '@vue/shared'
@@ -407,71 +399,4 @@ describe('attribute fallthrough', () => {
407399
const el = host.children[0]
408400
expect(el.classList.length).toBe(0)
409401
})
410-
411-
it('should not fallthrough emit handlers to vdom child', () => {
412-
const VDomChild = defineComponent({
413-
emits: ['click'],
414-
setup(_, { emit }) {
415-
return () => h('button', { onClick: () => emit('click') }, 'click me')
416-
},
417-
})
418-
419-
const fn = vi.fn()
420-
const VaporChild = defineVaporComponent({
421-
emits: ['click'],
422-
setup() {
423-
return createComponent(
424-
VDomChild as any,
425-
{ onClick: () => fn },
426-
null,
427-
true,
428-
)
429-
},
430-
})
431-
432-
const App = {
433-
setup() {
434-
return () => h(VaporChild as any)
435-
},
436-
}
437-
438-
const root = document.createElement('div')
439-
createApp(App).use(vaporInteropPlugin).mount(root)
440-
441-
expect(root.innerHTML).toBe('<button>click me</button>')
442-
const button = root.querySelector('button')!
443-
button.dispatchEvent(new Event('click'))
444-
445-
// fn should be called once
446-
expect(fn).toHaveBeenCalledTimes(1)
447-
})
448-
449-
it('should fallthrough attrs to vdom child', () => {
450-
const VDomChild = defineComponent({
451-
setup() {
452-
return () => h('div')
453-
},
454-
})
455-
456-
const VaporChild = defineVaporComponent({
457-
setup() {
458-
return createComponent(
459-
VDomChild as any,
460-
{ foo: () => 'vapor foo' },
461-
null,
462-
true,
463-
)
464-
},
465-
})
466-
467-
const App = {
468-
setup() {
469-
return () => h(VaporChild as any, { foo: 'foo', bar: 'bar' })
470-
},
471-
}
472-
473-
const root = document.createElement('div')
474-
createApp(App).use(vaporInteropPlugin).mount(root)
475-
expect(root.innerHTML).toBe('<div foo="foo" bar="bar"></div>')
476-
})
477402
})

‎packages/runtime-vapor/__tests__/vdomInterop.spec.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { defineComponent, h } from '@vue/runtime-dom'
2+
import { makeInteropRender } from './_utils'
3+
import { createComponent, defineVaporComponent } from '../src'
4+
5+
const define = makeInteropRender()
6+
7+
describe('vdomInterop', () => {
8+
describe.todo('props', () => {})
9+
10+
describe.todo('emit', () => {})
11+
12+
describe.todo('slots', () => {})
13+
14+
describe.todo('provide', () => {})
15+
16+
describe.todo('inject', () => {})
17+
18+
describe.todo('template ref', () => {})
19+
20+
describe.todo('dynamic component', () => {})
21+
22+
describe('attribute fallthrough', () => {
23+
it('should fallthrough attrs to vdom child', () => {
24+
const VDomChild = defineComponent({
25+
setup() {
26+
return () => h('div')
27+
},
28+
})
29+
30+
const VaporChild = defineVaporComponent({
31+
setup() {
32+
return createComponent(
33+
VDomChild as any,
34+
{ foo: () => 'vapor foo' },
35+
null,
36+
true,
37+
)
38+
},
39+
})
40+
41+
const { html } = define({
42+
setup() {
43+
return () => h(VaporChild as any, { foo: 'foo', bar: 'bar' })
44+
},
45+
}).render()
46+
expect(html()).toBe('<div foo="foo" bar="bar"></div>')
47+
})
48+
49+
it('should not fallthrough emit handlers to vdom child', () => {
50+
const VDomChild = defineComponent({
51+
emits: ['click'],
52+
setup(_, { emit }) {
53+
return () => h('button', { onClick: () => emit('click') }, 'click me')
54+
},
55+
})
56+
57+
const fn = vi.fn()
58+
const VaporChild = defineVaporComponent({
59+
emits: ['click'],
60+
setup() {
61+
return createComponent(
62+
VDomChild as any,
63+
{ onClick: () => fn },
64+
null,
65+
true,
66+
)
67+
},
68+
})
69+
70+
const { host, html } = define({
71+
setup() {
72+
return () => h(VaporChild as any)
73+
},
74+
}).render()
75+
76+
expect(html()).toBe('<button>click me</button>')
77+
const button = host.querySelector('button')!
78+
button.dispatchEvent(new Event('click'))
79+
80+
// fn should be called once
81+
expect(fn).toHaveBeenCalledTimes(1)
82+
})
83+
})
84+
})

0 commit comments

Comments
 (0)