enhance(frontend): shiki v1に移行 (#13138)

* enhance(frontend): shiki v1に移行

* optimize chunks, エラーを握りつぶす

* wasmを分離

* バンドルサイズの警告の最小値を650kBに引き上げ

* optimize

1 files changed, 15 insertions, 13 deletions

diff --git a/packages/frontend/src/scripts/code-highlighter.ts b/packages/frontend/src/scripts/code-highlighter.ts
index 957669122e..bc05ec94d5 100644
--- a/packages/frontend/src/scripts/code-highlighter.ts
+++ b/packages/frontend/src/scripts/code-highlighter.ts
@@ -1,7 +1,6 @@
-import { setWasm, setCDN, Highlighter, getHighlighter as _getHighlighter } from 'shiki';
-
-setWasm('/assets/shiki/dist/onig.wasm');
-setCDN('/assets/shiki/');
+import { getHighlighterCore, loadWasm } from 'shiki/core';
+import darkPlus from 'shiki/themes/dark-plus.mjs';
+import type { Highlighter, LanguageRegistration } from 'shiki';
 
 let _highlighter: Highlighter | null = null;
 
@@ -13,16 +12,19 @@ export async function getHighlighter(): Promise<Highlighter> {
 }
 
 export async function initHighlighter() {
-	const highlighter = await _getHighlighter({
-		theme: 'dark-plus',
-		langs: ['js'],
-	});
+	const aiScriptGrammar = await import('aiscript-vscode/aiscript/syntaxes/aiscript.tmLanguage.json');
+
+	await loadWasm(import('shiki/onig.wasm?init'));
 
-	await highlighter.loadLanguage({
-		path: 'languages/aiscript.tmLanguage.json',
-		id: 'aiscript',
-		scopeName: 'source.aiscript',
-		aliases: ['is', 'ais'],
+	const highlighter = await getHighlighterCore({
+		themes: [darkPlus],
+		langs: [
+			import('shiki/langs/javascript.mjs'),
+			{
+				aliases: ['is', 'ais'],
+				...aiScriptGrammar.default,
+			} as unknown as LanguageRegistration,
+		],
 	});
 
 	_highlighter = highlighter;