c063 1.4.3 → 1.4.5

package/README.md

@@ -1,4 +1,7 @@
 <div align="center">
+    <picture>
+      <img alt="icon" src="./public/icon.png" height="128">
+    </picture>
   <h1>c063</h1>
 
 <div style="display: flex; justify-content: center">

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export * from './types';
-export * from './components';
-import c063, { whiteSpace } from './utils';
+export * from "./types";
+export * from "./components";
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export { whiteSpace };
+export { whiteSpace, extractTokenContent };

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from './types';
-export * from './components';
-import c063, { whiteSpace } from './utils';
+export * from "./types";
+export * from "./components";
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export { whiteSpace };
+export { whiteSpace, extractTokenContent };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
@@ -26,4 +27,5 @@ declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export declare const whiteSpace: (count?: number) => CodeTokenProps<"span">;
+export declare const extractTokenContent: <T extends React.ElementType>(token: CodeTokenProps<T>) => string;
 export default c063;

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
  * 透過 Proxy 生成對應的 `CodeTokenBuilder`。
@@ -36,4 +37,19 @@ const c063 = new Proxy({}, {
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export const whiteSpace = (count = 1) => c063.default(" ".repeat(count));
+export const extractTokenContent = (token) => {
+    const _extract = (children) => {
+        if (typeof children === "string")
+            return children;
+        if (typeof children === "number")
+            return children.toString();
+        if (Array.isArray(children))
+            return children.map(_extract).join("");
+        if (React.isValidElement(children)) {
+            return _extract(children.props.children);
+        }
+        return ""; // 如果 children 是 null 或 undefined，則返回空字串
+    };
+    return _extract(token.children);
+};
 export default c063;

package/dist/utils/parser.js

@@ -2,25 +2,75 @@ import { parsableLanguages } from "../libs";
 const isParsableLanguage = (lang) => {
     return parsableLanguages.includes(lang);
 };
+const regexMap = {
+    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: /^[:;,.?]/ },
+    ],
+};
+const bracketLevels = { "(": 1, "{": 1, "[": 1, ")": -1, "}": -1, "]": -1 };
 // 解析單行 CodeTokenProps
 const _parseTokenLine = (line, lang) => {
     if (!isParsableLanguage(lang))
         return [];
     const result = [];
-    // 這邊放對應語言的解析邏輯或呼叫外部 parser
-    // 目前先用預設行全文字 token
-    result.push({ type: "default", children: line });
+    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] || 0;
+            const depth = Math.max(1, Math.min(3, Math.abs(bracketDepth)));
+            result.push({
+                type: `brackets${depth}`,
+                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) => (content) => content.split("\n").map((line) => _parseTokenLine(line, prop)),
 });
-// parseTokenLines.javascript(
-//   `const FanYu = {
-//   name: '范余振富',
-//   nickname: '飯魚',
-//   age: 19, // <-點看看🤫
-//   hobbies: ['寫程式', '繪畫'],
-//   skills: ['TypeScript', 'React', 'Python'],
-// } as const;`
-// );

package/package.json

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

package/src/index.ts

@@ -1,8 +1,6 @@
-export * from './types';
-export * from './components';
+export * from "./types";
+export * from "./components";
 
-import c063, { whiteSpace }from './utils';
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export {
-    whiteSpace
-}
+export { whiteSpace, extractTokenContent };

package/src/types/index.ts

@@ -32,7 +32,7 @@ export type CodeTokenType =
   | "type" // 類型定義：type、interface、enum
   | "variable" // 變數名、函式名、類別名等識別符號
   | "constant" // 常數值：例如 enum 值、靜態屬性
-  | `brackets${1 | 2 | 3}` // 括號配對，多層不同樣式：(), [], {}
+  | `brackets${1 | 2 | 3}` // 括號，多層巢狀不同樣式：{[()]}
   | "operator" // 運算符號：=、+、*、===、<、>= 等
   | "default"; // 其他符號：, ; . ? ! 等
 

package/src/utils/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
@@ -46,4 +47,19 @@ const c063 = new Proxy(
 export const whiteSpace = (count: number = 1): CodeTokenProps<"span"> =>
   c063.default(" ".repeat(count));
 
+export const extractTokenContent = <T extends React.ElementType>(
+  token: CodeTokenProps<T>
+): string => {
+  const _extract = (children: React.ReactNode): string => {
+    if (typeof children === "string") return children;
+    if (typeof children === "number") return children.toString();
+    if (Array.isArray(children)) return children.map(_extract).join("");
+    if (React.isValidElement(children)) {
+      return _extract((children as React.JSX.Element).props.children);
+    }
+    return ""; // 如果 children 是 null 或 undefined，則返回空字串
+  };
+  return _extract(token.children);
+};
+
 export default c063;

package/src/utils/parser.tsx

@@ -1,22 +1,98 @@
 import { parsableLanguages } from "../libs";
-import { CodeTokenProps, ParsableLanguage } from "../types/index";
+import {
+  CodeTokenProps,
+  CodeTokenType,
+  ParsableLanguage,
+} from "../types/index";
 
 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: /^[:;,.?]/ },
+  ],
+};
+const bracketLevels = { "(": 1, "{": 1, "[": 1, ")": -1, "}": -1, "]": -1 };
 // 解析單行 CodeTokenProps
 const _parseTokenLine = (
   line: string,
   lang: ParsableLanguage
 ): CodeTokenProps<"span">[] => {
   if (!isParsableLanguage(lang)) return [];
+
   const result: CodeTokenProps<"span">[] = [];
-  // 這邊放對應語言的解析邏輯或呼叫外部 parser
-  // 目前先用預設行全文字 token
-  result.push({ type: "default", children: line });
+  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(
   {},
   {
@@ -26,13 +102,3 @@ const parseTokenLines = new Proxy(
         content.split("\n").map((line) => _parseTokenLine(line, prop)),
   }
 ) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;
-
-// parseTokenLines.javascript(
-//   `const FanYu = {
-//   name: '范余振富',
-//   nickname: '飯魚',
-//   age: 19, // <-點看看🤫
-//   hobbies: ['寫程式', '繪畫'],
-//   skills: ['TypeScript', 'React', 'Python'],
-// } as const;`
-// );