Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Commit b9b3e02

Browse files
sxzzsxzz
committed
feat(compiler-vapor): extract resolveComponent
Avoid call `resolveComponent` repeatly for the same component
1 parent 1f28ae1 commit b9b3e02

File tree

11 files changed

+60
-21
lines changed

11 files changed

+60
-21
lines changed

‎packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,10 @@ const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
125125
const t1 = _template("<div></div>")
126126
127127
export function render(_ctx) {
128+
const _component_Comp = _resolveComponent("Comp")
128129
const n0 = t0()
129130
const n3 = t1()
130-
const n1 = _createComponent(_resolveComponent("Comp"))
131+
const n1 = _createComponent(_component_Comp)
131132
const n2 = _createTextNode()
132133
_insert([n1, n2], n3)
133134
_renderEffect(() => _setText(n2, _ctx.bar))

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ exports[`compiler: element transform > component > do not resolve component from
44
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
55
66
export function render(_ctx) {
7-
const n0 = _createComponent(_resolveComponent("Example"), null, true)
7+
const _component_Example = _resolveComponent("Example")
8+
const n0 = _createComponent(_component_Example, null, true)
89
return n0
910
}"
1011
`;
@@ -33,7 +34,8 @@ exports[`compiler: element transform > component > import + resolve component 1`
3334
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
3435
3536
export function render(_ctx) {
36-
const n0 = _createComponent(_resolveComponent("Foo"), null, true)
37+
const _component_Foo = _resolveComponent("Foo")
38+
const n0 = _createComponent(_component_Foo, null, true)
3739
return n0
3840
}"
3941
`;
@@ -97,7 +99,8 @@ exports[`compiler: element transform > component > should wrap as function if v-
9799
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
98100
99101
export function render(_ctx) {
100-
const n0 = _createComponent(_resolveComponent("Foo"), [{
102+
const _component_Foo = _resolveComponent("Foo")
103+
const n0 = _createComponent(_component_Foo, [{
101104
onBar: () => $event => (_ctx.handleBar($event))
102105
}], true)
103106
return n0
@@ -108,7 +111,8 @@ exports[`compiler: element transform > component > static props 1`] = `
108111
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
109112
110113
export function render(_ctx) {
111-
const n0 = _createComponent(_resolveComponent("Foo"), [{
114+
const _component_Foo = _resolveComponent("Foo")
115+
const n0 = _createComponent(_component_Foo, [{
112116
id: () => ("foo"),
113117
class: () => ("bar")
114118
}], true)
@@ -120,7 +124,8 @@ exports[`compiler: element transform > component > v-bind="obj" 1`] = `
120124
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
121125
122126
export function render(_ctx) {
123-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj)], true)
127+
const _component_Foo = _resolveComponent("Foo")
128+
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj)], true)
124129
return n0
125130
}"
126131
`;
@@ -129,7 +134,8 @@ exports[`compiler: element transform > component > v-bind="obj" after static pro
129134
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
130135
131136
export function render(_ctx) {
132-
const n0 = _createComponent(_resolveComponent("Foo"), [{
137+
const _component_Foo = _resolveComponent("Foo")
138+
const n0 = _createComponent(_component_Foo, [{
133139
id: () => ("foo")
134140
}, () => (_ctx.obj)], true)
135141
return n0
@@ -140,7 +146,8 @@ exports[`compiler: element transform > component > v-bind="obj" before static pr
140146
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
141147
142148
export function render(_ctx) {
143-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj), {
149+
const _component_Foo = _resolveComponent("Foo")
150+
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj), {
144151
id: () => ("foo")
145152
}], true)
146153
return n0
@@ -151,7 +158,8 @@ exports[`compiler: element transform > component > v-bind="obj" between static p
151158
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
152159
153160
export function render(_ctx) {
154-
const n0 = _createComponent(_resolveComponent("Foo"), [{
161+
const _component_Foo = _resolveComponent("Foo")
162+
const n0 = _createComponent(_component_Foo, [{
155163
id: () => ("foo")
156164
}, () => (_ctx.obj), {
157165
class: () => ("bar")
@@ -165,7 +173,8 @@ exports[`compiler: element transform > component > v-on="obj" 1`] = `
165173
import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
166174
167175
export function render(_ctx) {
168-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_toHandlers(_ctx.obj))], true)
176+
const _component_Foo = _resolveComponent("Foo")
177+
const n0 = _createComponent(_component_Foo, [() => (_toHandlers(_ctx.obj))], true)
169178
return n0
170179
}"
171180
`;

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ exports[`compiler: vModel transform > component > v-model for component should g
44
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
55
66
export function render(_ctx) {
7-
const n0 = _createComponent(_resolveComponent("Comp"), [{
7+
const _component_Comp = _resolveComponent("Comp")
8+
const n0 = _createComponent(_component_Comp, [{
89
modelValue: () => (_ctx.foo),
910
"onUpdate:modelValue": () => $event => (_ctx.foo = $event),
1011
modelModifiers: () => ({ trim: true, "bar-baz": true })
@@ -17,7 +18,8 @@ exports[`compiler: vModel transform > component > v-model for component should w
1718
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
1819
1920
export function render(_ctx) {
20-
const n0 = _createComponent(_resolveComponent("Comp"), [{
21+
const _component_Comp = _resolveComponent("Comp")
22+
const n0 = _createComponent(_component_Comp, [{
2123
modelValue: () => (_ctx.foo),
2224
"onUpdate:modelValue": () => $event => (_ctx.foo = $event)
2325
}], true)
@@ -29,7 +31,8 @@ exports[`compiler: vModel transform > component > v-model with arguments for com
2931
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
3032
3133
export function render(_ctx) {
32-
const n0 = _createComponent(_resolveComponent("Comp"), [{
34+
const _component_Comp = _resolveComponent("Comp")
35+
const n0 = _createComponent(_component_Comp, [{
3336
foo: () => (_ctx.foo),
3437
"onUpdate:foo": () => $event => (_ctx.foo = $event),
3538
fooModifiers: () => ({ trim: true }),
@@ -45,7 +48,8 @@ exports[`compiler: vModel transform > component > v-model with arguments for com
4548
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
4649
4750
export function render(_ctx) {
48-
const n0 = _createComponent(_resolveComponent("Comp"), [{
51+
const _component_Comp = _resolveComponent("Comp")
52+
const n0 = _createComponent(_component_Comp, [{
4953
bar: () => (_ctx.foo),
5054
"onUpdate:bar": () => $event => (_ctx.foo = $event)
5155
}], true)
@@ -57,7 +61,8 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
5761
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
5862
5963
export function render(_ctx) {
60-
const n0 = _createComponent(_resolveComponent("Comp"), [{
64+
const _component_Comp = _resolveComponent("Comp")
65+
const n0 = _createComponent(_component_Comp, [{
6166
[_ctx.foo]: () => (_ctx.foo),
6267
["onUpdate:" + _ctx.foo]: () => $event => (_ctx.foo = $event),
6368
[_ctx.foo + "Modifiers"]: () => ({ trim: true }),
@@ -73,7 +78,8 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
7378
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
7479
7580
export function render(_ctx) {
76-
const n0 = _createComponent(_resolveComponent("Comp"), [{
81+
const _component_Comp = _resolveComponent("Comp")
82+
const n0 = _createComponent(_component_Comp, [{
7783
[_ctx.arg]: () => (_ctx.foo),
7884
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)
7985
}], true)

‎packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ describe('compiler: element transform', () => {
198198
)
199199

200200
expect(code).toMatchSnapshot()
201-
expect(code).contains('_createComponent(_resolveComponent("Foo"), [{')
201+
expect(code).contains('_createComponent(_component_Foo, [{')
202202
expect(code).contains(' id: () => ("foo")')
203203
expect(code).contains(' class: () => ("bar")')
204204
expect(code).contains('}], true)')

‎packages/compiler-vapor/src/generate.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export function generate(
125125
}
126126

127127
push(INDENT_START)
128-
push(...genBlockContent(ir.block, context))
128+
push(...genBlockContent(ir.block, context, true))
129129
push(INDENT_END, NEWLINE)
130130

131131
if (isSetupInlined) {

‎packages/compiler-vapor/src/generators/block.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
INDENT_START,
1111
NEWLINE,
1212
buildCodeFragment,
13+
genCall,
1314
} from './utils'
1415
import type { CodegenContext } from '../generate'
1516
import { genWithDirective } from './directive'
@@ -21,14 +22,15 @@ export function genBlock(
2122
oper: BlockIRNode,
2223
context: CodegenContext,
2324
args: CodeFragment[] = [],
25+
root?: boolean,
2426
customReturns?: (returns: CodeFragment[]) => CodeFragment[],
2527
): CodeFragment[] {
2628
return [
2729
'(',
2830
...args,
2931
') => {',
3032
INDENT_START,
31-
...genBlockContent(oper, context, customReturns),
33+
...genBlockContent(oper, context, root, customReturns),
3234
INDENT_END,
3335
NEWLINE,
3436
'}',
@@ -38,10 +40,23 @@ export function genBlock(
3840
export function genBlockContent(
3941
{ dynamic, effect, operation, returns }: BlockIRNode,
4042
context: CodegenContext,
43+
root?: boolean,
4144
customReturns?: (returns: CodeFragment[]) => CodeFragment[],
4245
): CodeFragment[] {
4346
const [frag, push] = buildCodeFragment()
4447

48+
if (root)
49+
for (const name of context.ir.component) {
50+
push(
51+
NEWLINE,
52+
`const _component_${name} = `,
53+
...genCall(
54+
context.vaporHelper('resolveComponent'),
55+
JSON.stringify(name),
56+
),
57+
)
58+
}
59+
4560
for (const child of dynamic.children) {
4661
push(...genChildren(child, context, child.id!))
4762
}

‎packages/compiler-vapor/src/generators/component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function genCreateComponent(
4040

4141
function genTag() {
4242
if (oper.resolve) {
43-
return genCall(vaporHelper('resolveComponent'), JSON.stringify(oper.tag))
43+
return [`_component_${oper.tag}`]
4444
} else {
4545
return genExpression(
4646
extend(createSimpleExpression(oper.tag, false), { ast: null }),

‎packages/compiler-vapor/src/generators/for.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function genFor(
4242
]
4343

4444
const blockFn = context.withId(
45-
() => genBlock(render, context, ['_block'], blockReturns),
45+
() => genBlock(render, context, ['_block'], false, blockReturns),
4646
idMap,
4747
)
4848

‎packages/compiler-vapor/src/ir.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export interface RootIRNode {
5757
node: RootNode
5858
source: string
5959
template: string[]
60+
component: Set<string>
6061
block: BlockIRNode
6162
}
6263

‎packages/compiler-vapor/src/transform.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ export interface TransformContext<T extends AllNode = AllNode> {
7777
inVOnce: boolean
7878
inVFor: number
7979

80+
component: Set<string>
81+
8082
enterBlock(ir: TransformContext['block'], isVFor?: boolean): () => void
8183
reference(): number
8284
increaseId(): number
@@ -149,6 +151,7 @@ function createRootContext(
149151
inVOnce: false,
150152
inVFor: 0,
151153
comment: [],
154+
component: root.component,
152155

153156
increaseId: () => globalId++,
154157
reference() {
@@ -213,6 +216,7 @@ export function transform(
213216
node: root,
214217
source: root.source,
215218
template: [],
219+
component: new Set(),
216220
block: {
217221
type: IRNodeTypes.BLOCK,
218222
node: root,

0 commit comments

Comments
 (0)