Skip to content

Commit 4146340

Browse files
johnsoncodehkjohnsoncodehk
committed
refactor: simplify useSfcTemplateScript.ts 
1 parent cc57bff commit 4146340

File tree

3 files changed

+44
-67
lines changed

3 files changed

+44
-67
lines changed

‎packages/vue-typescript/src/use/useSfcScriptGen.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ export function useSfcScriptGen<T extends 'template' | 'script'>(
1919
scriptRanges: Ref<ReturnType<typeof parseScriptRanges> | undefined>,
2020
scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>,
2121
htmlGen: Ref<ReturnType<typeof templateGen.generate> | undefined>,
22-
sfcStyles: ReturnType<(typeof import('./useSfcStyles'))['useSfcStyles']>['files'],
2322
compilerOptions: VueCompilerOptions,
24-
getCssVBindRanges: (cssEmbeddeFile: EmbeddedFile) => TextRange[],
23+
cssVars: Ref<string[]>,
2524
) {
2625

2726
const codeGen = computed(() =>
@@ -35,12 +34,8 @@ export function useSfcScriptGen<T extends 'template' | 'script'>(
3534
() => htmlGen.value,
3635
() => {
3736
const bindTexts: string[] = [];
38-
for (const style of sfcStyles.value) {
39-
const binds = getCssVBindRanges(style);
40-
for (const cssBind of binds) {
41-
const bindText = style.content.substring(cssBind.start, cssBind.end);
42-
bindTexts.push(bindText);
43-
}
37+
for (const cssVar of cssVars.value) {
38+
bindTexts.push(cssVar);
4439
}
4540
return bindTexts;
4641
},

‎packages/vue-typescript/src/use/useSfcTemplateScript.ts

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { EmbeddedFileSourceMap } from '../utils/sourceMaps';
77
import { SearchTexts } from '../utils/string';
88
import { getSlotsPropertyName, getVueLibraryName, TextRange } from '@volar/vue-code-gen';
99
import { Embedded, EmbeddedFile, Sfc } from '../vueFile';
10-
import { useSfcStyles } from './useSfcStyles';
1110
import { EmbeddedFileMappingData } from '@volar/vue-code-gen';
1211
import * as SourceMaps from '@volar/source-map';
1312
import * as path from 'path';
1413
import { walkInterpolationFragment } from '@volar/vue-code-gen/out/transform';
14+
import { parseCssVars } from '../utils/parseCssVars';
15+
import { parseCssClassNames } from '../utils/parseCssClassNames';
1516

1617
export function useSfcTemplateScript(
1718
ts: typeof import('typescript/lib/tsserverlibrary'),
@@ -21,17 +22,13 @@ export function useSfcTemplateScript(
2122
scriptSetup: Ref<Sfc['scriptSetup']>,
2223
scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>,
2324
styles: Ref<Sfc['styles']>,
24-
styleFiles: ReturnType<typeof useSfcStyles>['files'],
2525
templateData: Ref<{
2626
lang: string,
2727
htmlToTemplate: (start: number, end: number) => { start: number, end: number; } | undefined,
2828
} | undefined>,
2929
sfcTemplateCompileResult: Ref<ReturnType<(typeof import('@volar/vue-code-gen'))['compileSFCTemplate']> | undefined>,
30-
sfcStyles: ReturnType<(typeof import('./useSfcStyles'))['useSfcStyles']>['files'],
3130
scriptLang: Ref<string>,
3231
compilerOptions: VueCompilerOptions,
33-
getCssVBindRanges: (cssEmbeddeFile: EmbeddedFile) => TextRange[],
34-
getCssClasses: (cssEmbeddeFile: EmbeddedFile) => TextRange[],
3532
disableTemplateScript: boolean,
3633
) {
3734
const baseFileName = path.basename(fileName);
@@ -50,34 +47,55 @@ export function useSfcTemplateScript(
5047
return comments.join('\n');
5148
});
5249
const cssModuleClasses = computed(() => {
53-
const result: { style: typeof styleFiles['value'][number], index: number, classNameRanges: TextRange[]; }[] = [];
54-
for (let i = 0; i < styleFiles.value.length; i++) {
55-
const style = styleFiles.value[i];
56-
if (style.data.module) {
50+
const result: { style: typeof styles['value'][number], index: number, classNameRanges: TextRange[]; }[] = [];
51+
for (let i = 0; i < styles.value.length; i++) {
52+
const style = styles.value[i];
53+
if (style.module) {
5754
result.push({
5855
style: style,
5956
index: i,
60-
classNameRanges: getCssClasses(style),
57+
classNameRanges: [...parseCssClassNames(style.content)],
6158
});
6259
}
6360
}
6461
return result;
6562
});
6663
const cssScopedClasses = computed(() => {
67-
const result: { style: typeof styleFiles['value'][number], index: number, classNameRanges: TextRange[]; }[] = [];
64+
const result: { style: typeof styles['value'][number], index: number, classNameRanges: TextRange[]; }[] = [];
6865
const setting = compilerOptions.experimentalResolveStyleCssClasses ?? 'scoped';
69-
for (let i = 0; i < styleFiles.value.length; i++) {
70-
const style = styleFiles.value[i];
71-
if ((setting === 'scoped' && style.data.scoped) || setting === 'always') {
66+
for (let i = 0; i < styles.value.length; i++) {
67+
const style = styles.value[i];
68+
if ((setting === 'scoped' && style.scoped) || setting === 'always') {
7269
result.push({
7370
style: style,
7471
index: i,
75-
classNameRanges: getCssClasses(style),
72+
classNameRanges: [...parseCssClassNames(style.content)],
7673
});
7774
}
7875
}
7976
return result;
8077
});
78+
const cssVars = computed(() => {
79+
const result: { style: typeof styles['value'][number], index: number, ranges: TextRange[]; }[] = [];
80+
for (let i = 0; i < styles.value.length; i++) {
81+
const style = styles.value[i];
82+
result.push({
83+
style: style,
84+
index: i,
85+
ranges: [...parseCssVars(style.content)],
86+
});
87+
}
88+
return result;
89+
});
90+
const cssVarTexts = computed(() => {
91+
const result: string[] = [];
92+
for (const { style, ranges } of cssVars.value) {
93+
for (const range of ranges) {
94+
result.push(style.content.substring(range.start, range.end));
95+
}
96+
}
97+
return result;
98+
})
8199
const templateCodeGens = computed(() => {
82100

83101
if (!templateData.value)
@@ -123,7 +141,7 @@ export function useSfcTemplateScript(
123141
codeGen.addText(`declare var __VLS_ctx: InstanceType<typeof __VLS_component> & {\n`);
124142
/* CSS Module */
125143
for (const cssModule of cssModuleClasses.value) {
126-
codeGen.addText(`${cssModule.style.data.module}: Record<string, string>`);
144+
codeGen.addText(`${cssModule.style.module}: Record<string, string>`);
127145
for (const classNameRange of cssModule.classNameRanges) {
128146
writeCssClassProperty(
129147
cssModule.index,
@@ -242,16 +260,11 @@ export function useSfcTemplateScript(
242260
const emptyLocalVars: Record<string, number> = {};
243261
const identifiers = new Set<string>();
244262

245-
for (let i = 0; i < sfcStyles.value.length; i++) {
246-
247-
const style = sfcStyles.value[i];
248-
const binds = getCssVBindRanges(style);
249-
250-
for (const cssBind of binds) {
251-
const bindText = style.content.substring(cssBind.start, cssBind.end);
263+
for (const cssVar of cssVars.value) {
264+
for (const cssBind of cssVar.ranges) {
252265
walkInterpolationFragment(
253266
ts,
254-
bindText,
267+
cssVar.style.content.substring(cssBind.start, cssBind.end),
255268
(frag, fragOffset, isJustForErrorMapping) => {
256269
if (fragOffset === undefined) {
257270
codeGen.addText(frag);
@@ -266,7 +279,7 @@ export function useSfcTemplateScript(
266279
SourceMaps.Mode.Offset,
267280
{
268281
vueTag: 'style',
269-
vueTagIndex: i,
282+
vueTagIndex: cssVar.index,
270283
capabilities: isJustForErrorMapping ? {
271284
diagnostic: true,
272285
} : {
@@ -409,6 +422,7 @@ export function useSfcTemplateScript(
409422
formatEmbedded,
410423
inlineCssFile,
411424
inlineCssEmbedded,
425+
cssVarTexts,
412426
};
413427

414428
function parseMappingSourceRange(data: EmbeddedFileMappingData, range: SourceMaps.Range) {

‎packages/vue-typescript/src/vueFile.ts

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,9 @@ import { useSfcScriptGen } from './use/useSfcScriptGen';
1313
import { useSfcStyles } from './use/useSfcStyles';
1414
import { useSfcTemplate } from './use/useSfcTemplate';
1515
import { useSfcTemplateScript } from './use/useSfcTemplateScript';
16-
import { parseCssVars } from './utils/parseCssVars';
1716
import { Teleport } from './utils/sourceMaps';
1817
import { SearchTexts } from './utils/string';
1918
import { untrack } from './utils/untrack';
20-
import { parseCssClassNames } from './utils/parseCssClassNames';
2119

2220
import type * as _0 from 'typescript/lib/tsserverlibrary'; // fix TS2742
2321

@@ -105,8 +103,6 @@ export function createVueFile(
105103
components: [],
106104
componentItems: [],
107105
};
108-
const cssVars = new WeakMap<EmbeddedFile, TextRange[]>();
109-
const cssClassNames = new WeakMap<EmbeddedFile, TextRange[]>();
110106

111107
// computeds
112108
const parsedSfc = computed(() => parse(content.value, { sourceMap: false, ignoreEmpty: false }));
@@ -184,14 +180,10 @@ export function createVueFile(
184180
computed(() => sfc.scriptSetup),
185181
computed(() => scriptSetupRanges.value),
186182
computed(() => sfc.styles),
187-
sfcStyles.files,
188183
sfcTemplateCompiled,
189184
sfcTemplateCompileResult,
190-
sfcStyles.files,
191185
scriptLang,
192186
compilerOptions,
193-
getCssVBindRanges,
194-
getCssClassNameRanges,
195187
!!compilerOptions.experimentalDisableTemplateSupport || !(tsHost?.getCompilationSettings().jsx === ts.JsxEmit.Preserve),
196188
);
197189
const sfcScriptForTemplateLs = useSfcScriptGen(
@@ -204,9 +196,8 @@ export function createVueFile(
204196
computed(() => scriptRanges.value),
205197
computed(() => scriptSetupRanges.value),
206198
sfcTemplateScript.templateCodeGens,
207-
computed(() => sfcStyles.files.value),
208199
compilerOptions,
209-
getCssVBindRanges,
200+
sfcTemplateScript.cssVarTexts,
210201
);
211202
const sfcScriptForScriptLs = useSfcScriptGen(
212203
'script',
@@ -218,9 +209,8 @@ export function createVueFile(
218209
computed(() => scriptRanges.value),
219210
computed(() => scriptSetupRanges.value),
220211
sfcTemplateScript.templateCodeGens,
221-
computed(() => sfcStyles.files.value),
222212
compilerOptions,
223-
getCssVBindRanges,
213+
sfcTemplateScript.cssVarTexts,
224214
);
225215
const sfcRefSugarRanges = computed(() => (scriptSetupAst.value ? {
226216
refs: parseRefSugarDeclarationRanges(ts, scriptSetupAst.value, ['$ref', '$computed', '$shallowRef', '$fromRefs']),
@@ -549,28 +539,6 @@ export function createVueFile(
549539

550540
return templateScriptData;
551541
}
552-
function getCssVBindRanges(embeddedFile: EmbeddedFile) {
553-
554-
let binds = cssVars.get(embeddedFile);
555-
556-
if (!binds) {
557-
binds = [...parseCssVars(embeddedFile.content)];
558-
cssVars.set(embeddedFile, binds);
559-
}
560-
561-
return binds;
562-
}
563-
function getCssClassNameRanges(embeddedFile: EmbeddedFile) {
564-
565-
let binds = cssClassNames.get(embeddedFile);
566-
567-
if (!binds) {
568-
binds = [...parseCssClassNames(embeddedFile.content)];
569-
cssClassNames.set(embeddedFile, binds);
570-
}
571-
572-
return binds;
573-
}
574542
}
575543

576544
const validScriptSyntaxs = ['js', 'jsx', 'ts', 'tsx'] as const;

0 commit comments

Comments
 (0)