c063 1.4.7 → 1.4.9

package/dist/components/CodeBlock.d.ts

@@ -6,6 +6,7 @@ import { CodeBlockProps } from "../types/index";
  * @param props.tokenLines 所有程式碼行的 token 陣列
  * @param props.showLineNumbers 是否顯示行號，預設為 true
  * @param props.lineNumberStyle 行號的自訂樣式
+ * @param props.theme 主題
  * @param rest 其他傳遞給 <pre> 的屬性
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */

package/dist/components/CodeBlock.js

@@ -7,6 +7,7 @@ import { CodeLine } from "./CodeLine";
  * @param props.tokenLines 所有程式碼行的 token 陣列
  * @param props.showLineNumbers 是否顯示行號，預設為 true
  * @param props.lineNumberStyle 行號的自訂樣式
+ * @param props.theme 主題
  * @param rest 其他傳遞給 <pre> 的屬性
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */

package/dist/components/CodeLine.d.ts

@@ -5,6 +5,7 @@ import { CodeLineProps } from "../types/index";
  * @template T 元件渲染類型，例如 <code>、<span> 等
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
+ * @param props.theme 主題
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */

package/dist/components/CodeLine.js

@@ -6,6 +6,7 @@ import { CodeToken } from "./CodeToken";
  * @template T 元件渲染類型，例如 <code>、<span> 等
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
+ * @param props.theme 主題
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
@@ -13,6 +14,6 @@ export const CodeLine = ({ style, tokens, theme, ...rest }) => {
     return (_jsx("code", { ...rest, style: {
             whiteSpace: "pre-wrap",
             ...style,
-        }, children: tokens.map((token, index) => (_jsx(CodeToken, { theme: theme, ...token }, `${token.type}-${index}`))) }));
+        }, children: tokens.map((token, index) => (_jsx(CodeToken, { theme: theme, ...token }, index))) }));
 };
 CodeLine.displayName = "CodeLine";

package/dist/components/CodeToken.d.ts

@@ -7,6 +7,7 @@ import { CodeTokenProps } from "../types/index";
  * @param props.type 語法類型，用於對應不同顏色
  * @param props.style 額外樣式，會與語法顏色合併
  * @param props.children 顯示的程式碼字串
+ * @param props.theme 主題設定
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */

package/dist/components/CodeToken.js

@@ -8,6 +8,7 @@ import { themeMap } from "../libs/index";
  * @param props.type 語法類型，用於對應不同顏色
  * @param props.style 額外樣式，會與語法顏色合併
  * @param props.children 顯示的程式碼字串
+ * @param props.theme 主題設定
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */

package/dist/libs/index.d.ts

@@ -15,4 +15,5 @@ declare const _themeRegistry: {
 };
 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

@@ -28,3 +28,4 @@ const _themeRegistry = {
 export const themes = Object.keys(_themeRegistry);
 // themeMap 保留給外部使用
 export const themeMap = _themeRegistry;
+export const parsableLanguages = ["javascript"];

package/dist/types/index.d.ts

@@ -1,10 +1,9 @@
-import { themes } from "../libs";
+import { parsableLanguages, themes } from "../libs";
 import { AsComponentProps, OverrideProps } from "./common";
 /**
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
  * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
- * 可配合 `codeColoreMap` 指定顯示樣式。s
  *
  * 類型分為以下幾大類：
  *
@@ -48,7 +47,7 @@ export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
      */
     theme?: CodeTheme;
 }>;
-export type CodeTokenBuilder = <T extends React.ElementType>(children: CodeTokenProps<T>["children"], props?: CodeTokenProps<T>) => CodeTokenProps<T>;
+export type CodeTokenBuilder = <T extends React.ElementType = "span">(children: CodeTokenProps<T>["children"], props?: CodeTokenProps<T>) => CodeTokenProps<T>;
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
  */
@@ -114,3 +113,4 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HT
      */
     theme?: CodeTheme;
 }>;
+export type ParsableLanguage = (typeof parsableLanguages)[number];

package/dist/utils/index.js

@@ -53,3 +53,14 @@ export const extractTokenContent = (token) => {
     return _extract(token.children);
 };
 export default c063;
+/**
+ * 待實現
+ */
+const _parseTokens = new Proxy({}, {
+    get: (_, prop) => {
+        const parser = (content) => {
+            return [];
+        };
+        return parser;
+    },
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "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

@@ -7,6 +7,7 @@ import { CodeLine } from "./CodeLine";
  * @param props.tokenLines 所有程式碼行的 token 陣列
  * @param props.showLineNumbers 是否顯示行號，預設為 true
  * @param props.lineNumberStyle 行號的自訂樣式
+ * @param props.theme 主題
  * @param rest 其他傳遞給 <pre> 的屬性
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */

package/src/components/CodeLine.tsx

@@ -6,6 +6,7 @@ import { CodeToken } from "./CodeToken";
  * @template T 元件渲染類型，例如 <code>、<span> 等
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
+ * @param props.theme 主題 
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
@@ -24,7 +25,7 @@ export const CodeLine = <T extends React.ElementType = "span">({
       }}
     >
       {tokens.map((token, index) => (
-        <CodeToken key={`${token.type}-${index}`} theme={theme} {...token} />
+        <CodeToken key={index} theme={theme} {...token} />
       ))}
     </code>
   );

package/src/components/CodeToken.tsx

@@ -9,6 +9,7 @@ import { CodeTokenProps } from "../types/index";
  * @param props.type 語法類型，用於對應不同顏色
  * @param props.style 額外樣式，會與語法顏色合併
  * @param props.children 顯示的程式碼字串
+ * @param props.theme 主題設定
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */

package/src/libs/index.tsx

@@ -37,3 +37,5 @@ export const themeMap: Record<
   CodeTheme,
   Record<CodeTokenType, React.CSSProperties["color"]>
 > = _themeRegistry;
+
+export const parsableLanguages = ["javascript"] as const;

package/src/types/index.ts

@@ -1,10 +1,9 @@
-import { themes } from "../libs";
+import { parsableLanguages, themes } from "../libs";
 import { AsComponentProps, OverrideProps } from "./common";
 /**
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
  * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
- * 可配合 `codeColoreMap` 指定顯示樣式。s
  *
  * 類型分為以下幾大類：
  *
@@ -65,7 +64,7 @@ export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<
   }
 >;
 
-export type CodeTokenBuilder = <T extends React.ElementType>(
+export type CodeTokenBuilder = <T extends React.ElementType = "span">(
   children: CodeTokenProps<T>["children"],
   props?: CodeTokenProps<T>
 ) => CodeTokenProps<T>;
@@ -143,3 +142,5 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
     theme?: CodeTheme;
   }
 >;
+
+export type ParsableLanguage = (typeof parsableLanguages)[number];

package/src/utils/index.tsx

@@ -1,6 +1,10 @@
 import React from "react";
-import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
-
+import {
+  CodeTokenBuilder,
+  CodeTokenProps,
+  CodeTokenType,
+  ParsableLanguage,
+} from "../types";
 
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
@@ -32,7 +36,7 @@ const c063 = new Proxy(
           ...props,
         };
       };
-      return builder as CodeTokenBuilder;
+      return builder;
     },
   }
 ) as Record<CodeTokenType, CodeTokenBuilder>;
@@ -64,4 +68,19 @@ export const extractTokenContent = <T extends React.ElementType>(
   return _extract(token.children);
 };
 
-export default c063;
+export default c063;
+
+/**
+ * 待實現
+ */
+const _parseTokens = new Proxy(
+  {},
+  {
+    get: (_, prop: ParsableLanguage) => {
+      const parser = (content: string): CodeTokenProps<"span">[][] => {
+        return [];
+      };
+      return parser;
+    },
+  }
+) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;