feat(frontend): use fine-grained bundle of shiki

5 files changed, 99 insertions, 2 deletions

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index 0a9a2e5..36ccae1 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { codeToHtml } from "shiki";
+import { codeToHtml } from "../../shiki.bundle";
 
 type Props = {
 	code: string;
diff --git a/frontend/app/shiki.bundle.ts b/frontend/app/shiki.bundle.ts
new file mode 100644
index 0000000..1d03de3
--- /dev/null
+++ b/frontend/app/shiki.bundle.ts
@@ -0,0 +1,58 @@
+/* Generate by @shikijs/codegen */
+import type {
+  DynamicImportLanguageRegistration,
+  DynamicImportThemeRegistration,
+  HighlighterGeneric,
+} from '@shikijs/types'
+import {
+  createSingletonShorthands,
+  createdBundledHighlighter,
+} from '@shikijs/core'
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
+
+type BundledLanguage = 'php'
+type BundledTheme = 'github-light'
+type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>
+
+const bundledLanguages = {
+  php: () => import('@shikijs/langs/php'),
+} as Record<BundledLanguage, DynamicImportLanguageRegistration>
+
+const bundledThemes = {
+  'github-light': () => import('@shikijs/themes/github-light'),
+} as Record<BundledTheme, DynamicImportThemeRegistration>
+
+const createHighlighter = /* @__PURE__ */ createdBundledHighlighter<
+  BundledLanguage,
+  BundledTheme
+>({
+  langs: bundledLanguages,
+  themes: bundledThemes,
+  engine: () => createJavaScriptRegexEngine(),
+})
+
+const {
+  codeToHtml,
+  codeToHast,
+  codeToTokensBase,
+  codeToTokens,
+  codeToTokensWithThemes,
+  getSingletonHighlighter,
+  getLastGrammarState,
+} = /* @__PURE__ */ createSingletonShorthands<BundledLanguage, BundledTheme>(
+  createHighlighter,
+)
+
+export {
+  bundledLanguages,
+  bundledThemes,
+  codeToHast,
+  codeToHtml,
+  codeToTokens,
+  codeToTokensBase,
+  codeToTokensWithThemes,
+  createHighlighter,
+  getLastGrammarState,
+  getSingletonHighlighter,
+}
+export type { BundledLanguage, BundledTheme, Highlighter }
diff --git a/frontend/biome.json b/frontend/biome.json
index 34ae968..54c8856 100644
--- a/frontend/biome.json
+++ b/frontend/biome.json
@@ -7,7 +7,12 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"ignore": ["./.cache", "./build", "./app/api/schema.d.ts"]
+		"ignore": [
+			"./.cache",
+			"./build",
+			"./app/api/schema.d.ts",
+			"./app/shiki.bundle.ts"
+		]
 	},
 	"formatter": {
 		"enabled": true,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7bf15b3..d11f775 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -40,6 +40,7 @@
 				"eslint-plugin-react": "^7.37.4",
 				"eslint-plugin-react-hooks": "^4.6.2",
 				"openapi-typescript": "^7.6.1",
+				"shiki-codegen": "^3.1.0",
 				"tailwindcss": "^4.0.12",
 				"typescript": "^5.8.2",
 				"vite": "^6.1.1",
@@ -11889,6 +11890,37 @@
 				"@types/hast": "^3.0.4"
 			}
 		},
+		"node_modules/shiki-codegen": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/shiki-codegen/-/shiki-codegen-3.1.0.tgz",
+			"integrity": "sha512-BWEZgaDZKk/ktT+ZPWWXel9hl2VLsB8y3vzRbMufd+nsDIyfpZSsUmQGBVPI/FSsmeOFQeTKDakWQt24hQTUFw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cac": "^6.7.14",
+				"prettier": "^3.5.2",
+				"shiki": "3.1.0"
+			},
+			"bin": {
+				"shiki-codegen": "bin.mjs"
+			}
+		},
+		"node_modules/shiki-codegen/node_modules/prettier": {
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+			"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"prettier": "bin/prettier.cjs"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
 		"node_modules/shiki/node_modules/@types/hast": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8dc65f0..eb046c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
 		"check:ts": "tsc",
 		"dev": "remix vite:dev",
 		"openapi-typescript": "openapi-typescript --output ./app/api/schema.d.ts ../openapi/api-server.yaml",
+		"shiki-codegen": "shiki-codegen --langs php --themes github-light --engine javascript ./app/shiki.bundle.ts",
 		"start": "remix-serve ./build/server/index.js"
 	},
 	"dependencies": {
@@ -48,6 +49,7 @@
 		"eslint-plugin-react": "^7.37.4",
 		"eslint-plugin-react-hooks": "^4.6.2",
 		"openapi-typescript": "^7.6.1",
+		"shiki-codegen": "^3.1.0",
 		"tailwindcss": "^4.0.12",
 		"typescript": "^5.8.2",
 		"vite": "^6.1.1",