c063 1.4.1 → 1.4.2

package/dist/components/CodeBlock.js

@@ -11,7 +11,9 @@ import { CodeLine } from "./CodeLine";
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */
 export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, theme, ...rest }) => {
-    return (_jsx("pre", { ...rest, children: tokenLines.map((line, index) => (_jsxs("div", { style: {
+    return (_jsx("pre", { ...rest, children: tokenLines.map((line, index) => (
+        // eslint-disable-next-line react/react-in-jsx-scope
+        _jsxs("div", { style: {
                 display: "flex",
                 flexWrap: "nowrap",
                 width: "100%",

package/dist/components/CodeToken.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from "react";
-import { loadTheme } from "../utils/theme";
+import { themeMap } from "../libs/index";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
@@ -14,16 +13,8 @@ import { loadTheme } from "../utils/theme";
  */
 export const CodeToken = ({ as, style, children, type, theme, ...rest }) => {
     const Tag = as || "span";
-    const [currTheme, setCurrTheme] = useState(null);
-    useLayoutEffect(() => {
-        if (theme) {
-            loadTheme(theme).then((res) => setCurrTheme(res));
-        }
-    }, [theme]);
-    return (
-    // eslint-disable-next-line react/react-in-jsx-scope
-    _jsx(Tag, { ...rest, style: {
-            color: (currTheme === null || currTheme === void 0 ? void 0 : currTheme[type || "default"]) || undefined,
+    return (_jsx(Tag, { ...rest, style: {
+            color: themeMap[theme || "default-dark-modern"][type || "default"],
             ...style,
         }, children: children }));
 };

package/dist/libs/index.d.ts

@@ -1,2 +1,19 @@
-export declare const themes: readonly ["default-dark-modern", "default-dark", "default-dark-plus", "visual-studio-light", "default-light-plus", "default-light-modern", "github-light", "github-light-default", "github-light-colorblind", "github-dark", "github-dark-default", "github-dark-colorblind"];
+import type { CodeTokenType, CodeTheme } from "../types";
+declare const _themeRegistry: {
+    readonly "default-dark-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "default-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "default-dark-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "visual-studio-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "default-light-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "default-light-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-light-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-light-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-dark-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "github-dark-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+};
+export declare const themes: (keyof typeof _themeRegistry)[];
+export declare const themeMap: Record<CodeTheme, Record<CodeTokenType, React.CSSProperties["color"]>>;
 export declare const parsableLanguages: readonly ["javascript"];
+export {};

package/dist/libs/index.js

@@ -1,15 +1,31 @@
-export const themes = [
-    "default-dark-modern",
-    "default-dark",
-    "default-dark-plus",
-    "visual-studio-light",
-    "default-light-plus",
-    "default-light-modern",
-    "github-light",
-    "github-light-default",
-    "github-light-colorblind",
-    "github-dark",
-    "github-dark-default",
-    "github-dark-colorblind",
-];
+import { map as darkModern } from "./themes/default-dark-modern";
+import { map as dark } from "./themes/default-dark";
+import { map as darkPlus } from "./themes/default-dark-plus";
+import { map as vsLight } from "./themes/visual-studio-light";
+import { map as lightPlus } from "./themes/default-light-plus";
+import { map as lightModern } from "./themes/default-light-modern";
+import { map as ghLight } from "./themes/github-light";
+import { map as ghLightDefault } from "./themes/github-light-default";
+import { map as ghLightBilnd } from "./themes/github-light-colorblind";
+import { map as ghDark } from "./themes/github-dark";
+import { map as ghDarkDefault } from "./themes/github-dark-default";
+import { map as ghDarkBilnd } from "./themes/github-dark-colorblind";
+const _themeRegistry = {
+    "default-dark-modern": darkModern,
+    "default-dark": dark,
+    "default-dark-plus": darkPlus,
+    "visual-studio-light": vsLight,
+    "default-light-plus": lightPlus,
+    "default-light-modern": lightModern,
+    "github-light": ghLight,
+    "github-light-default": ghLightDefault,
+    "github-light-colorblind": ghLightBilnd,
+    "github-dark": ghDark,
+    "github-dark-default": ghDarkDefault,
+    "github-dark-colorblind": ghDarkBilnd,
+};
+// 自動推導主題名稱
+export const themes = Object.keys(_themeRegistry);
+// themeMap 保留給外部使用
+export const themeMap = _themeRegistry;
 export const parsableLanguages = ["javascript"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/CodeBlock.tsx

@@ -20,6 +20,7 @@ export const CodeBlock = <T extends React.ElementType = "span">({
   return (
     <pre {...rest}>
       {tokenLines.map((line, index) => (
+        // eslint-disable-next-line react/react-in-jsx-scope
         <div
           key={index}
           style={{

package/src/components/CodeToken.tsx

@@ -1,6 +1,5 @@
-import { useLayoutEffect, useState } from "react";
-import { CodeTokenProps, CodeTokenType } from "../types/index";
-import { loadTheme } from "../utils/theme";
+import { themeMap } from "../libs/index";
+import { CodeTokenProps } from "../types/index";
 
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
@@ -22,23 +21,12 @@ export const CodeToken = <T extends React.ElementType = "span">({
   ...rest
 }: CodeTokenProps<T>) => {
   const Tag = as || "span";
-  const [currTheme, setCurrTheme] = useState<Record<
-    CodeTokenType,
-    React.CSSProperties["color"]
-  > | null>(null);
-
-  useLayoutEffect(() => {
-    if (theme) {
-      loadTheme(theme).then((res) => setCurrTheme(res));
-    }
-  }, [theme]);
 
   return (
-    // eslint-disable-next-line react/react-in-jsx-scope
     <Tag
       {...rest}
       style={{
-        color: currTheme?.[type || "default"] || undefined,
+        color: themeMap[theme || "default-dark-modern"][type || "default"],
         ...style,
       }}
     >

package/src/libs/index.tsx

@@ -1,16 +1,41 @@
-export const themes = [
-  "default-dark-modern",
-  "default-dark",
-  "default-dark-plus",
-  "visual-studio-light",
-  "default-light-plus",
-  "default-light-modern",
-  "github-light",
-  "github-light-default",
-  "github-light-colorblind",
-  "github-dark",
-  "github-dark-default",
-  "github-dark-colorblind",
-] as const;
+import type { CodeTokenType, CodeTheme } from "../types";
+import { map as darkModern } from "./themes/default-dark-modern";
+import { map as dark } from "./themes/default-dark";
+import { map as darkPlus } from "./themes/default-dark-plus";
+import { map as vsLight } from "./themes/visual-studio-light";
+import { map as lightPlus } from "./themes/default-light-plus";
+import { map as lightModern } from "./themes/default-light-modern";
+import { map as ghLight } from "./themes/github-light";
+import { map as ghLightDefault } from "./themes/github-light-default";
+import { map as ghLightBilnd } from "./themes/github-light-colorblind";
+import { map as ghDark } from "./themes/github-dark";
+import { map as ghDarkDefault } from "./themes/github-dark-default";
+import { map as ghDarkBilnd } from "./themes/github-dark-colorblind";
+
+const _themeRegistry = {
+  "default-dark-modern": darkModern,
+  "default-dark": dark,
+  "default-dark-plus": darkPlus,
+  "visual-studio-light": vsLight,
+  "default-light-plus": lightPlus,
+  "default-light-modern": lightModern,
+  "github-light": ghLight,
+  "github-light-default": ghLightDefault,
+  "github-light-colorblind": ghLightBilnd,
+  "github-dark": ghDark,
+  "github-dark-default": ghDarkDefault,
+  "github-dark-colorblind": ghDarkBilnd,
+} as const;
+
+// 自動推導主題名稱
+export const themes = Object.keys(
+  _themeRegistry
+) as (keyof typeof _themeRegistry)[];
+
+// themeMap 保留給外部使用
+export const themeMap: Record<
+  CodeTheme,
+  Record<CodeTokenType, React.CSSProperties["color"]>
+> = _themeRegistry;
 
 export const parsableLanguages = ["javascript"] as const;

package/src/utils/theme.tsx

@@ -1,8 +0,0 @@
-import { CodeTheme, CodeTokenType } from "../types";
-
-export const loadTheme = async (
-  theme: CodeTheme
-): Promise<Record<CodeTokenType, React.CSSProperties["color"]>> => {
-  const { map } = await import(`../libs/themes/${theme}`);
-  return map;
-};