Skip to content

Commit

Permalink
fix(language-core): reduce unnecessary props mapping (#4284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnsoncodehk
johnsoncodehk authored Apr 22, 2024
1 parent d1f8b12 commit 946598c
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 29 deletions.
8 changes: 4 additions & 4 deletions packages/language-core/lib/codegen/template/element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export function* generateElement(
}
else {
yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
yield* generateElementProps(options, ctx, node, props, 'navigationOnly');
yield* generateElementProps(options, ctx, node, props, false);
yield `}))${endOfLine}`;
}

Expand Down Expand Up @@ -146,15 +146,15 @@ export function* generateElement(
startTagOffset + tag.length,
ctx.codeFeatures.verification,
`{`,
...generateElementProps(options, ctx, node, props, 'normal', propsFailedExps),
...generateElementProps(options, ctx, node, props, true, propsFailedExps),
`}`,
);
yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${endOfLine}`;
}
else {
// without strictTemplates, this only for instacne type
yield `const ${var_componentInstance} = ${var_functionalComponent}({`;
yield* generateElementProps(options, ctx, node, props, 'navigationOnly');
yield* generateElementProps(options, ctx, node, props, false);
yield `}, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${endOfLine}`;
// and this for props type-checking
yield `({} as (props: __VLS_FunctionalComponentProps<typeof ${var_originalComponent}, typeof ${var_componentInstance}> & Record<string, unknown>) => void)(`;
Expand All @@ -163,7 +163,7 @@ export function* generateElement(
startTagOffset + tag.length,
ctx.codeFeatures.verification,
`{`,
...generateElementProps(options, ctx, node, props, 'normal', propsFailedExps),
...generateElementProps(options, ctx, node, props, true, propsFailedExps),
`}`,
);
yield `)${endOfLine}`;
Expand Down
58 changes: 35 additions & 23 deletions packages/language-core/lib/codegen/template/elementProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,19 @@ import type { TemplateCodegenContext } from './context';
import type { TemplateCodegenOptions } from './index';
import { generateInterpolation } from './interpolation';
import { generateObjectProperty } from './objectProperty';
import { toString } from '@volar/language-core';

export function* generateElementProps(
options: TemplateCodegenOptions,
ctx: TemplateCodegenContext,
node: CompilerDOM.ElementNode,
props: CompilerDOM.ElementNode['props'],
mode: 'normal' | 'navigationOnly',
enableCodeFeatures: boolean,
propsFailedExps?: CompilerDOM.SimpleExpressionNode[],
): Generator<Code> {

let styleAttrNum = 0;
let classAttrNum = 0;
let defaultCodeFeatures: VueCodeInformation = ctx.codeFeatures.all;
let attrCodeFeatures: VueCodeInformation = ctx.codeFeatures.withoutHighlightAndCompletion;

const canCamelize = node.tagType === CompilerDOM.ElementTypes.COMPONENT;

Expand All @@ -37,11 +36,6 @@ export function* generateElementProps(
classAttrNum++;
}

if (mode === 'navigationOnly') {
defaultCodeFeatures = ctx.codeFeatures.navigation;
attrCodeFeatures = ctx.codeFeatures.navigation;
}

yield `...{ `;
for (const prop of props) {
if (
Expand Down Expand Up @@ -90,7 +84,7 @@ export function* generateElementProps(
&& hyphenateAttr(propName) === propName
&& !options.vueCompilerOptions.htmlAttributes.some(pattern => minimatch(propName!, pattern));

yield* wrapWith(
const codes = wrapWith(
prop.loc.start.offset,
prop.loc.end.offset,
ctx.codeFeatures.verification,
Expand All @@ -103,15 +97,15 @@ export function* generateElementProps(
: prop.loc.start.offset,
prop.arg
? {
...attrCodeFeatures,
navigation: attrCodeFeatures.navigation
...ctx.codeFeatures.withoutHighlightAndCompletion,
navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
? {
resolveRenameNewName: camelize,
resolveRenameEditText: shouldCamelize ? hyphenateAttr : undefined,
}
: false,
}
: attrCodeFeatures,
: ctx.codeFeatures.withoutHighlightAndCompletion,
(prop.loc as any).name_2 ?? ((prop.loc as any).name_2 = {}),
shouldCamelize,
),
Expand All @@ -120,12 +114,18 @@ export function* generateElementProps(
options,
ctx,
prop.exp,
attrCodeFeatures,
ctx.codeFeatures.withoutHighlightAndCompletion,
prop.arg?.loc.start.offset === prop.exp?.loc.start.offset,
mode === 'normal',
enableCodeFeatures,
),
`)`,
);
if (!enableCodeFeatures) {
yield toString([...codes]);
}
else {
yield* codes;
}
yield `, `;
}
else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
Expand All @@ -151,8 +151,8 @@ export function* generateElementProps(
&& hyphenateAttr(prop.name) === prop.name
&& !options.vueCompilerOptions.htmlAttributes.some(pattern => minimatch(prop.name, pattern));

yield* conditionWrapWith(
mode === 'normal',
const codes = conditionWrapWith(
enableCodeFeatures,
prop.loc.start.offset,
prop.loc.end.offset,
ctx.codeFeatures.verification,
Expand All @@ -163,26 +163,32 @@ export function* generateElementProps(
prop.loc.start.offset,
shouldCamelize
? {
...attrCodeFeatures,
navigation: attrCodeFeatures.navigation
...ctx.codeFeatures.withoutHighlightAndCompletion,
navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
? {
resolveRenameNewName: camelize,
resolveRenameEditText: hyphenateAttr,
}
: false,
}
: attrCodeFeatures,
: ctx.codeFeatures.withoutHighlightAndCompletion,
(prop.loc as any).name_1 ?? ((prop.loc as any).name_1 = {}),
shouldCamelize,
),
`: (`,
...(
prop.value
? generateAttrValue(prop.value, defaultCodeFeatures)
? generateAttrValue(prop.value, ctx.codeFeatures.all)
: [`true`]
),
`)`,
);
if (!enableCodeFeatures) {
yield toString([...codes]);
}
else {
yield* codes;
}
yield `, `;
}
else if (
Expand All @@ -191,8 +197,8 @@ export function* generateElementProps(
&& !prop.arg
&& prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
) {
yield* conditionWrapWith(
mode === 'normal',
const codes = conditionWrapWith(
enableCodeFeatures,
prop.exp.loc.start.offset,
prop.exp.loc.end.offset,
ctx.codeFeatures.verification,
Expand All @@ -203,11 +209,17 @@ export function* generateElementProps(
prop.exp.content,
prop.exp.loc,
prop.exp.loc.start.offset,
defaultCodeFeatures,
ctx.codeFeatures.all,
'(',
')',
),
);
if (!enableCodeFeatures) {
yield toString([...codes]);
}
else {
yield* codes;
}
yield `, `;
}
else {
Expand Down
4 changes: 2 additions & 2 deletions packages/language-core/lib/codegen/template/slotOutlet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,15 @@ export function* generateSlotOutlet(
startTagOffset + node.tag.length,
ctx.codeFeatures.verification,
`{${newLine}`,
...generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), 'normal'),
...generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), true),
`}`,
);
yield `)${endOfLine}`;
return;
}
else {
yield `var ${varSlot} = {${newLine}`;
yield* generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), 'normal');
yield* generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
yield `}${endOfLine}`;
}

Expand Down

0 comments on commit 946598c

Please sign in to comment.