Skip to content

Commit 034ef6c

Browse files
Doctor-wuDoctor-wu
committed
feat(runtime-vapor): tweak resolve logic and add test case
1 parent 00e924d commit 034ef6c

File tree

4 files changed

+112
-272
lines changed

4 files changed

+112
-272
lines changed

‎packages/runtime-vapor/__tests__/helpers/resolveAssets.spec.ts

Lines changed: 97 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -1,216 +1,104 @@
1-
// import {
2-
// type Component,
3-
// type Directive,
4-
// createVaporApp,
5-
// resolveComponent,
6-
// resolveDirective,
7-
// } from '@vue/runtime-vapor'
8-
// import { makeRender } from '../_utils'
1+
import {
2+
type Component,
3+
type Directive,
4+
createVaporApp,
5+
resolveComponent,
6+
resolveDirective,
7+
} from '@vue/runtime-vapor'
8+
import { makeRender } from '../_utils'
99

10-
// const define = makeRender()
10+
const define = makeRender()
1111

1212
describe('resolveAssets', () => {
1313
test('todo', () => {
1414
expect(true).toBeTruthy()
1515
})
16-
// test('should work', () => {
17-
// const FooBar = () => null
18-
// const BarBaz = { mounted: () => null }
19-
// let component1: Component | string
20-
// let component2: Component | string
21-
// let component3: Component | string
22-
// let component4: Component | string
23-
// let directive1: Directive
24-
// let directive2: Directive
25-
// let directive3: Directive
26-
// let directive4: Directive
27-
// const Root = define({
28-
// // comps: {
29-
// // FooBar: FooBar,
30-
// // },
31-
// // dirs: {
32-
// // BarBaz: BarBaz,
33-
// // },
34-
// render() {
35-
// component1 = resolveComponent('FooBar')!
36-
// directive1 = resolveDirective('BarBaz')!
37-
// // camelize
38-
// component2 = resolveComponent('Foo-bar')!
39-
// directive2 = resolveDirective('Bar-baz')!
40-
// // capitalize
41-
// component3 = resolveComponent('fooBar')!
42-
// directive3 = resolveDirective('barBaz')!
43-
// // camelize and capitalize
44-
// component4 = resolveComponent('foo-bar')!
45-
// directive4 = resolveDirective('bar-baz')!
46-
// return []
47-
// },
48-
// })
49-
// const app = createVaporApp(Root)
50-
// const root = document.createElement('div')
51-
// app.mount(root)
52-
// expect(component1!).toBe(FooBar)
53-
// expect(component2!).toBe(FooBar)
54-
// expect(component3!).toBe(FooBar)
55-
// expect(component4!).toBe(FooBar)
56-
// expect(directive1!).toBe(BarBaz)
57-
// expect(directive2!).toBe(BarBaz)
58-
// expect(directive3!).toBe(BarBaz)
59-
// expect(directive4!).toBe(BarBaz)
60-
// })
61-
// test('maybeSelfReference', async () => {
62-
// let component1: Component | string
63-
// let component2: Component | string
64-
// let component3: Component | string
65-
// const Foo = () => null
66-
// const Root = {
67-
// name: 'Root',
68-
// components: {
69-
// Foo,
70-
// Root: Foo,
71-
// },
72-
// setup() {
73-
// return () => {
74-
// component1 = resolveComponent('Root', true)
75-
// component2 = resolveComponent('Foo', true)
76-
// component3 = resolveComponent('Bar', true)
77-
// }
78-
// },
79-
// }
80-
// const app = createApp(Root)
81-
// const root = nodeOps.createElement('div')
82-
// app.mount(root)
83-
// expect(component1!).toMatchObject(Root) // explicit self name reference
84-
// expect(component2!).toBe(Foo) // successful resolve take higher priority
85-
// expect(component3!).toMatchObject(Root) // fallback when resolve fails
86-
// })
87-
// describe('warning', () => {
88-
// test('used outside render() or setup()', () => {
89-
// resolveComponent('foo')
90-
// expect(
91-
// 'resolveComponent can only be used in render() or setup().',
92-
// ).toHaveBeenWarned()
93-
// resolveDirective('foo')
94-
// expect(
95-
// 'resolveDirective can only be used in render() or setup().',
96-
// ).toHaveBeenWarned()
97-
// })
98-
// test('not exist', () => {
99-
// const Root = {
100-
// setup() {
101-
// resolveComponent('foo')
102-
// resolveDirective('bar')
103-
// return () => null
104-
// },
105-
// }
106-
// const app = createApp(Root)
107-
// const root = nodeOps.createElement('div')
108-
// app.mount(root)
109-
// expect('Failed to resolve component: foo').toHaveBeenWarned()
110-
// expect('Failed to resolve directive: bar').toHaveBeenWarned()
111-
// })
112-
// test('resolve dynamic component', () => {
113-
// const dynamicComponents = {
114-
// foo: () => 'foo',
115-
// bar: () => 'bar',
116-
// baz: { render: () => 'baz' },
117-
// }
118-
// let foo, bar, baz // dynamic components
119-
// let dynamicVNode: VNode
120-
// const Child = {
121-
// render(this: any) {
122-
// return this.$slots.default()
123-
// },
124-
// }
125-
// const Root = {
126-
// components: { foo: dynamicComponents.foo },
127-
// setup() {
128-
// return () => {
129-
// foo = resolveDynamicComponent('foo') // <component is="foo"/>
130-
// bar = resolveDynamicComponent(dynamicComponents.bar) // <component :is="bar"/>, function
131-
// dynamicVNode = createVNode(resolveDynamicComponent(null)) // <component :is="null"/>
132-
// return h(Child, () => {
133-
// // check inside child slots
134-
// baz = resolveDynamicComponent(dynamicComponents.baz) // <component :is="baz"/>, object
135-
// })
136-
// }
137-
// },
138-
// }
139-
// const app = createApp(Root)
140-
// const root = nodeOps.createElement('div')
141-
// app.mount(root)
142-
// expect(foo).toBe(dynamicComponents.foo)
143-
// expect(bar).toBe(dynamicComponents.bar)
144-
// expect(baz).toBe(dynamicComponents.baz)
145-
// // should allow explicit falsy type to remove the component
146-
// expect(dynamicVNode!.type).toBe(Comment)
147-
// })
148-
// test('resolve dynamic component should fallback to plain element without warning', () => {
149-
// const Root = {
150-
// setup() {
151-
// return () => {
152-
// return createVNode(resolveDynamicComponent('div') as string, null, {
153-
// default: () => 'hello',
154-
// })
155-
// }
156-
// },
157-
// }
158-
// const app = createApp(Root)
159-
// const root = nodeOps.createElement('div')
160-
// app.mount(root)
161-
// expect(serializeInner(root)).toBe('<div>hello</div>')
162-
// })
163-
// })
164-
// test('resolving from mixins & extends', () => {
165-
// const FooBar = () => null
166-
// const BarBaz = { mounted: () => null }
167-
// let component1: Component | string
168-
// let component2: Component | string
169-
// let component3: Component | string
170-
// let component4: Component | string
171-
// let directive1: Directive
172-
// let directive2: Directive
173-
// let directive3: Directive
174-
// let directive4: Directive
175-
// const Base = {
176-
// components: {
177-
// FooBar: FooBar,
178-
// },
179-
// }
180-
// const Mixin = {
181-
// directives: {
182-
// BarBaz: BarBaz,
183-
// },
184-
// }
185-
// const Root = {
186-
// extends: Base,
187-
// mixins: [Mixin],
188-
// setup() {
189-
// return () => {
190-
// component1 = resolveComponent('FooBar')!
191-
// directive1 = resolveDirective('BarBaz')!
192-
// // camelize
193-
// component2 = resolveComponent('Foo-bar')!
194-
// directive2 = resolveDirective('Bar-baz')!
195-
// // capitalize
196-
// component3 = resolveComponent('fooBar')!
197-
// directive3 = resolveDirective('barBaz')!
198-
// // camelize and capitalize
199-
// component4 = resolveComponent('foo-bar')!
200-
// directive4 = resolveDirective('bar-baz')!
201-
// }
202-
// },
203-
// }
204-
// const app = createApp(Root)
205-
// const root = nodeOps.createElement('div')
206-
// app.mount(root)
207-
// expect(component1!).toBe(FooBar)
208-
// expect(component2!).toBe(FooBar)
209-
// expect(component3!).toBe(FooBar)
210-
// expect(component4!).toBe(FooBar)
211-
// expect(directive1!).toBe(BarBaz)
212-
// expect(directive2!).toBe(BarBaz)
213-
// expect(directive3!).toBe(BarBaz)
214-
// expect(directive4!).toBe(BarBaz)
215-
// })
16+
test('should work', () => {
17+
const FooBar = () => []
18+
const BarBaz = { mounted: () => null }
19+
let component1: Component | string
20+
let component2: Component | string
21+
let component3: Component | string
22+
let component4: Component | string
23+
let directive1: Directive
24+
let directive2: Directive
25+
let directive3: Directive
26+
let directive4: Directive
27+
const Root = define({
28+
render() {
29+
component1 = resolveComponent('FooBar')!
30+
directive1 = resolveDirective('BarBaz')!
31+
// camelize
32+
component2 = resolveComponent('Foo-bar')!
33+
directive2 = resolveDirective('Bar-baz')!
34+
// capitalize
35+
component3 = resolveComponent('fooBar')!
36+
directive3 = resolveDirective('barBaz')!
37+
// camelize and capitalize
38+
component4 = resolveComponent('foo-bar')!
39+
directive4 = resolveDirective('bar-baz')!
40+
return []
41+
},
42+
})
43+
const app = createVaporApp(Root.component)
44+
app.component('FooBar', FooBar)
45+
app.directive('BarBaz', BarBaz)
46+
const root = document.createElement('div')
47+
app.mount(root)
48+
expect(component1!).toBe(FooBar)
49+
expect(component2!).toBe(FooBar)
50+
expect(component3!).toBe(FooBar)
51+
expect(component4!).toBe(FooBar)
52+
expect(directive1!).toBe(BarBaz)
53+
expect(directive2!).toBe(BarBaz)
54+
expect(directive3!).toBe(BarBaz)
55+
expect(directive4!).toBe(BarBaz)
56+
})
57+
test('maybeSelfReference', async () => {
58+
let component1: Component | string
59+
let component2: Component | string
60+
let component3: Component | string
61+
const Foo = () => []
62+
const Root = define({
63+
name: 'Root',
64+
render() {
65+
component1 = resolveComponent('Root', true)
66+
component2 = resolveComponent('Foo', true)
67+
component3 = resolveComponent('Bar', true)
68+
return []
69+
},
70+
})
71+
const app = createVaporApp(Root.component)
72+
app.component('Foo', Foo)
73+
const root = document.createElement('div')
74+
app.mount(root)
75+
expect(component1!).toMatchObject(Root.component) // explicit self name reference
76+
expect(component2!).toBe(Foo) // successful resolve take higher priority
77+
expect(component3!).toMatchObject(Root.component) // fallback when resolve fails
78+
})
79+
describe('warning', () => {
80+
test('used outside render() or setup()', () => {
81+
resolveComponent('foo')
82+
expect(
83+
'[Vue warn]: resolveComponent can only be used in render() or setup().',
84+
).toHaveBeenWarned()
85+
resolveDirective('foo')
86+
expect(
87+
'[Vue warn]: resolveDirective can only be used in render() or setup().',
88+
).toHaveBeenWarned()
89+
})
90+
test('not exist', () => {
91+
const Root = define({
92+
setup() {
93+
resolveComponent('foo')
94+
resolveDirective('bar')
95+
},
96+
})
97+
const app = createVaporApp(Root.component)
98+
const root = document.createElement('div')
99+
app.mount(root)
100+
expect('Failed to resolve component: foo').toHaveBeenWarned()
101+
expect('Failed to resolve directive: bar').toHaveBeenWarned()
102+
})
103+
})
216104
})

‎packages/runtime-vapor/src/apiCreateVaporApp.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ export function createVaporApp(
6767
validateComponentName(name, context.config)
6868
}
6969
if (!component) {
70-
return context.comps[name]
70+
return context.components[name]
7171
}
72-
if (__DEV__ && context.comps[name]) {
72+
if (__DEV__ && context.components[name]) {
7373
warn(`Component "${name}" has already been registered in target app.`)
7474
}
75-
context.comps[name] = component
75+
context.components[name] = component
7676
return app
7777
},
7878

@@ -82,12 +82,12 @@ export function createVaporApp(
8282
}
8383

8484
if (!directive) {
85-
return context.dirs[name] as any
85+
return context.directives[name] as any
8686
}
87-
if (__DEV__ && context.dirs[name]) {
87+
if (__DEV__ && context.directives[name]) {
8888
warn(`Directive "${name}" has already been registered in target app.`)
8989
}
90-
context.dirs[name] = directive
90+
context.directives[name] = directive
9191
return app
9292
},
9393

@@ -156,8 +156,8 @@ export function createAppContext(): AppContext {
156156
globalProperties: {},
157157
},
158158
provides: Object.create(null),
159-
comps: {},
160-
dirs: {},
159+
components: {},
160+
directives: {},
161161
}
162162
}
163163

@@ -227,12 +227,12 @@ export interface AppContext {
227227
* Resolved component registry, only for components with mixins or extends
228228
* @internal
229229
*/
230-
comps: Record<string, Component>
230+
components: Record<string, Component>
231231
/**
232232
* Resolved directive registry, only for components with mixins or extends
233233
* @internal
234234
*/
235-
dirs: Record<string, Directive>
235+
directives: Record<string, Directive>
236236
}
237237

238238
/**

0 commit comments

Comments
 (0)