feat(language-service): process references data at runtime to reduce …

…bundle size (#5054)
vuejs · Dec 18, 2024 · ae194a1 · ae194a1
1 parent f03a02f
commit ae194a1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 65 deletions.
diff --git a/.github/workflows/update-html-data.yml b/.github/workflows/update-html-data.yml
@@ -1,6 +1,9 @@
 name: update-html-data
 
 on:
+  push:
+    branches:
+    - 'master'
   workflow_dispatch:
   schedule:
     - cron: '0 0 * * *'

diff --git a/packages/language-service/lib/plugins/data.ts b/packages/language-service/lib/plugins/data.ts
@@ -1,5 +1,7 @@
 import type * as html from 'vscode-html-languageservice';
 
+let locale: { name: string, url: string }[];
+
 export function loadTemplateData(lang: string) {
 
 	lang = lang.toLowerCase();
@@ -37,6 +39,8 @@ export function loadTemplateData(lang: string) {
 		data = require('../../data/template/en.json');
 	}
 
+	resolveReferences(data);
+
 	for (const attr of [...data.globalAttributes ?? []]) {
 		if (!attr.name.startsWith('v-')) {
 			data.globalAttributes?.push(
@@ -67,68 +71,96 @@ export function loadLanguageBlocks(lang: string): html.HTMLDataV1 {
 
 	lang = lang.toLowerCase();
 
+	let data: html.HTMLDataV1;
+
 	if (lang === 'ja') {
-		return require('../../data/language-blocks/ja.json');
+		data = require('../../data/language-blocks/ja.json');
 	}
 	else if (lang === 'fr') {
-		return require('../../data/language-blocks/fr.json');
+		data = require('../../data/language-blocks/fr.json');
 	}
 	else if (lang === 'ko') {
-		return require('../../data/language-blocks/ko.json');
+		data = require('../../data/language-blocks/ko.json');
 	}
 	else if (lang === 'pt-br') {
-		return require('../../data/language-blocks/pt.json');
+		data = require('../../data/language-blocks/pt.json');
 	}
 	else if (lang === 'zh-cn') {
-		return require('../../data/language-blocks/zh-cn.json');
+		data = require('../../data/language-blocks/zh-cn.json');
 	}
 	else if (lang === 'zh-tw') {
-		return require('../../data/language-blocks/zh-hk.json');
+		data = require('../../data/language-blocks/zh-hk.json');
 	}
 	else if (lang === 'it') {
-		return require('../../data/language-blocks/it.json');
+		data = require('../../data/language-blocks/it.json');
 	}
 	else if (lang === 'cs') {
-		return require('../../data/language-blocks/cs.json');
+		data = require('../../data/language-blocks/cs.json');
 	}
 	else if (lang === 'ru') {
-		return require('../../data/language-blocks/ru.json');
+		data = require('../../data/language-blocks/ru.json');
 	}
+	else {
+		data = require('../../data/language-blocks/en.json');
+	}
+
+	resolveReferences(data);
 
-	return require('../../data/language-blocks/en.json');
+	return data;
 }
 
 export function loadModelModifiersData(lang: string): html.HTMLDataV1 {
 
 	lang = lang.toLowerCase();
 
+	let data: html.HTMLDataV1;
+
 	if (lang === 'ja') {
-		return require('../../data/model-modifiers/ja.json');
+		data = require('../../data/model-modifiers/ja.json');
 	}
 	else if (lang === 'fr') {
-		return require('../../data/model-modifiers/fr.json');
+		data = require('../../data/model-modifiers/fr.json');
 	}
 	else if (lang === 'ko') {
-		return require('../../data/model-modifiers/ko.json');
+		data = require('../../data/model-modifiers/ko.json');
 	}
 	else if (lang === 'pt-br') {
-		return require('../../data/model-modifiers/pt.json');
+		data = require('../../data/model-modifiers/pt.json');
 	}
 	else if (lang === 'zh-cn') {
-		return require('../../data/model-modifiers/zh-cn.json');
+		data = require('../../data/model-modifiers/zh-cn.json');
 	}
 	else if (lang === 'zh-tw') {
-		return require('../../data/model-modifiers/zh-hk.json');
+		data = require('../../data/model-modifiers/zh-hk.json');
 	}
 	else if (lang === 'it') {
-		return require('../../data/model-modifiers/it.json');
+		data = require('../../data/model-modifiers/it.json');
 	}
 	else if (lang === 'cs') {
-		return require('../../data/model-modifiers/cs.json');
+		data = require('../../data/model-modifiers/cs.json');
 	}
 	else if (lang === 'ru') {
-		return require('../../data/model-modifiers/ru.json');
+		data = require('../../data/model-modifiers/ru.json');
+	}
+	else {	
+		data = require('../../data/model-modifiers/en.json');
 	}
 
-	return require('../../data/model-modifiers/en.json');
+	resolveReferences(data);
+
+	return data;
+}
+
+function resolveReferences(data: html.HTMLDataV1) {
+	locale ??= require('../../data/locale.json');
+
+	for (const item of [...data.globalAttributes ?? [], ...data.tags ?? []]) {
+		if (typeof item.references === 'string') {
+			const relativeUrl = item.references as string;
+			item.references = locale.map(({ name, url }) => ({
+				name,
+				url: url + relativeUrl
+			}));
+		}
+	}
 }
diff --git a/packages/language-service/scripts/update-html-data.js b/packages/language-service/scripts/update-html-data.js
@@ -84,12 +84,22 @@ const langs = [
 
 for (const lang of langs) {
 	if (lang.supported) {
+		localeWorker(lang);
 		templateWorker(lang);
 		sfcWorker(lang);
 		modelWorker(lang);
 	}
 }
 
+function localeWorker(lang) {
+
+	const data = langs.map(({ name, url }) => ({ name, url }));
+
+	const writePath = path.resolve(__dirname, '../data/locale.json');
+	fs.writeFileSync(writePath, JSON.stringify(data, null, 2));
+	console.log(writePath);
+}
+
 async function sfcWorker(lang) {
 
 	const sfcDoc = await fetchText(lang.repoUrl + 'HEAD/src/api/sfc-spec.md', lang.url);
@@ -115,10 +125,7 @@ async function sfcWorker(lang) {
 			// { name: 'gql' },
 			// { name: 'graphql' },
 		],
-		references: langs.map(lang => ({
-			name: lang.name,
-			url: `${lang.url}api/sfc-spec.html#pre-processors`,
-		})),
+		references: 'api/sfc-spec.html#pre-processors',
 	};
 	/**
 	 * @type {import('vscode-html-languageservice').IAttributeData}
@@ -129,10 +136,7 @@ async function sfcWorker(lang) {
 			kind: 'markdown',
 			value: sfcDoc.split('\n## ')[5].split('\n').slice(1).join('\n').trim(),
 		},
-		references: langs.map(lang => ({
-			name: lang.name,
-			url: `${lang.url}api/sfc-spec.html#src-imports`,
-		})),
+		references: 'api/sfc-spec.html#src-imports',
 	};
 	const languageBlocks = sfcDoc
 		.split('\n## ')[2]
@@ -151,10 +155,7 @@ async function sfcWorker(lang) {
 					kind: 'markdown',
 					value: lines.slice(1).join('\n'),
 				},
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/sfc-spec.html#${normalizeHash(name)}`,
-				})),
+				references: `api/sfc-spec.html#${normalizeHash(name)}`,
 			};
 			if (name === 'template') {
 				data.attributes.push({
@@ -196,10 +197,7 @@ async function sfcWorker(lang) {
 						kind: 'markdown',
 						value: cssFeaturesDoc.split('\n## ')[1].split('\n').slice(1).join('\n').trim(),
 					},
-					references: langs.map(lang => ({
-						name: lang.name,
-						url: `${lang.url}api/sfc-css-features.html#scoped-css`,
-					})),
+					references: 'api/sfc-css-features.html#scoped-css',
 				});
 				data.attributes.push({
 					name: 'module',
@@ -208,10 +206,7 @@ async function sfcWorker(lang) {
 						kind: 'markdown',
 						value: cssFeaturesDoc.split('\n## ')[2].split('\n').slice(1).join('\n').trim(),
 					},
-					references: langs.map(lang => ({
-						name: lang.name,
-						url: `${lang.url}api/sfc-css-features.html#css-modules`,
-					})),
+					references: 'api/sfc-css-features.html#css-modules',
 				});
 			}
 			return data;
@@ -265,10 +260,7 @@ async function modelWorker(lang) {
 					kind: 'markdown',
 					value: lines.slice(1).join('\n').trim(),
 				},
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}guide/essentials/forms.html#${normalizeHash(name)}`,
-				})),
+				references: `guide/essentials/forms.html#${normalizeHash(name)}`,
 			};
 			return data;
 		});
@@ -310,10 +302,7 @@ async function templateWorker(lang) {
 					value: lines.slice(1).join('\n'),
 				},
 				attributes: [],
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/built-in-components.html#${normalizeHash(name)}`,
-				})),
+				references: `api/built-in-components.html#${normalizeHash(name)}`,
 			};
 			return data;
 		});
@@ -333,10 +322,7 @@ async function templateWorker(lang) {
 					value: lines.slice(1).join('\n'),
 				},
 				attributes: [],
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/built-in-special-elements.html#${normalizeHash(name)}`,
-				})),
+				references: `api/built-in-special-elements.html#${normalizeHash(name)}`,
 			};
 			return data;
 		});
@@ -361,10 +347,7 @@ async function templateWorker(lang) {
 					kind: 'markdown',
 					value: lines.slice(1).join('\n').trim(),
 				},
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/built-in-directives.html#${normalizeHash(name)}`,
-				})),
+				references: `api/built-in-directives.html#${normalizeHash(name)}`,
 			};
 			return data;
 		});
@@ -383,10 +366,7 @@ async function templateWorker(lang) {
 					kind: 'markdown',
 					value: lines.slice(1).join('\n').trim(),
 				},
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/built-in-special-attributes.html#${normalizeHash(name)}`,
-				})),
+				references: `api/built-in-special-attributes.html#${normalizeHash(name)}`,
 			};
 			return data;
 		});
@@ -397,18 +377,15 @@ async function templateWorker(lang) {
 			const lines = section.split('\n');
 			const name = 'data-allow-mismatch';
 			/**
-			 * @type {import('vscode-html-languageservice').ITagData}
+			 * @type {import('vscode-html-languageservice').IAttributeData}
 			 */
 			const data = {
 				name,
 				description: {
 					kind: 'markdown',
 					value: lines.slice(1).join('\n'),
 				},
-				references: langs.map(lang => ({
-					name: lang.name,
-					url: `${lang.url}api/ssr.html#${normalizeHash(name)}`,
-				})),
+				references: `api/ssr.html#${normalizeHash(name)}`,
 			};
 			return data;
 		})[0];