c063 1.4.6 → 1.4.8

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/types/index.d.ts

@@ -4,7 +4,6 @@ import { AsComponentProps, OverrideProps } from "./common";
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
  * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
- * 可配合 `codeColoreMap` 指定顯示樣式。s
  *
  * 類型分為以下幾大類：
  *

package/dist/utils/index.d.ts

@@ -29,4 +29,3 @@ declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
 export declare const whiteSpace: (count?: number) => CodeTokenProps<"span">;
 export declare const extractTokenContent: <T extends React.ElementType>(token: CodeTokenProps<T>) => string;
 export default c063;
-export * from "./parser";

package/dist/utils/index.js

@@ -53,4 +53,14 @@ export const extractTokenContent = (token) => {
     return _extract(token.children);
 };
 export default c063;
-export * from "./parser";
+/**
+ * 待實現
+ */
+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.6",
+  "version": "1.4.8",
   "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/types/index.ts

@@ -4,7 +4,6 @@ import { AsComponentProps, OverrideProps } from "./common";
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
  * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
- * 可配合 `codeColoreMap` 指定顯示樣式。s
  *
  * 類型分為以下幾大類：
  *

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` 等），
@@ -65,4 +69,19 @@ export const extractTokenContent = <T extends React.ElementType>(
 };
 
 export default c063;
-export * from "./parser"
+
+
+/**
+ * 待實現
+ */
+const _parseTokens = new Proxy(
+  {},
+  {
+    get: (_, prop: ParsableLanguage) => {
+      const parser = (content: string): CodeTokenProps<"span">[][] => {
+        return [];
+      };
+      return parser;
+    },
+  }
+) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;

package/src/utils/parser.tsx

@@ -1,103 +0,0 @@
-import { parsableLanguages } from "../libs";
-import {
-  CodeTokenProps,
-  CodeTokenType,
-  ParsableLanguage,
-} from "../types/index";
-
-export const isParsableLanguage = (lang: string): lang is ParsableLanguage => {
-  return parsableLanguages.includes(lang as ParsableLanguage);
-};
-
-const regexMap: Record<
-  ParsableLanguage,
-  { type: CodeTokenType; regex: RegExp }[]
-> = {
-  javascript: [
-    { type: "comment", regex: /^\/\/.*/ },
-    { type: "string", regex: /^(['"])(?:\\.|[^\\])*?\1/ },
-    { type: "number", regex: /^\d+(\.\d+)?/ },
-    {
-      type: "keyword1",
-      regex:
-        /^(?:const|let|var|function|class|interface|type|enum|extends|implements|new|this|super)\b/,
-    },
-    {
-      type: "keyword2",
-      regex:
-        /^(?:return|import|from|for|while|as|await|async|export|if|else|switch|case|break|continue)\b/,
-    },
-    {
-      type: "type",
-      regex: /^(?:string|number|boolean|void|any|unknown|never|Record|Array)\b/,
-    },
-    { type: "operator", regex: /^(===|!==|==|!=|<=|>=|=>|<|>|\+|-|\*|\/|=)/ },
-    { type: "constant", regex: /^[A-Z_][A-Z0-9_]*/ },
-    { type: "variable", regex: /^[a-zA-Z_$][a-zA-Z0-9_$]*/ },
-    { type: "default", regex: /^[:;,.?]/ },
-  ],
-};
-// 解析單行 CodeTokenProps
-const _parseTokenLine = (
-  line: string,
-  lang: ParsableLanguage
-): CodeTokenProps<"span">[] => {
-  if (!isParsableLanguage(lang)) return [];
-
-  const result: CodeTokenProps<"span">[] = [];
-  let remaining = line;
-  let bracketDepth = 0;
-
-  const bracketLevels = { "(": 1, "{": 1, "[": 1, ")": -1, "}": -1, "]": -1 };
-  const bracketRegex = /^[\[\]{}()]/;
-  const rules = regexMap[lang];
-
-  outer: while (remaining.length > 0) {
-    const whitespaceMatch = remaining.match(/^\s+/);
-    if (whitespaceMatch) {
-      result.push({ type: "default", children: whitespaceMatch[0] });
-      remaining = remaining.slice(whitespaceMatch[0].length);
-      continue outer;
-    }
-
-    // 括號處理（根據深度標記 brackets1 / 2 / 3）
-    const bracketMatch = remaining.match(bracketRegex);
-    if (bracketMatch) {
-      const bracket = bracketMatch[0];
-      bracketDepth += bracketLevels[bracket as keyof typeof bracketLevels] || 0;
-      const depth = Math.max(1, Math.min(3, Math.abs(bracketDepth)));
-      result.push({
-        type: `brackets${depth}` as CodeTokenType,
-        children: bracket,
-      });
-      remaining = remaining.slice(1);
-      continue outer;
-    }
-
-    // 用 regexMap 中的每個語法規則嘗試匹配
-    for (const { type, regex } of rules) {
-      const match = remaining.match(regex);
-      if (match) {
-        result.push({ type, children: match[0] });
-        remaining = remaining.slice(match[0].length);
-        continue outer;
-      }
-    }
-
-    // 如果沒有任何規則匹配，就當作 default 一個字元
-    result.push({ type: "default", children: remaining[0] });
-    remaining = remaining.slice(1);
-  }
-
-  return result;
-};
-
-const parseTokenLines = new Proxy(
-  {},
-  {
-    get:
-      (_, prop: ParsableLanguage) =>
-      (content: string): CodeTokenProps<"span">[][] =>
-        content.split("\n").map((line) => _parseTokenLine(line, prop)),
-  }
-) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;