c063 1.4.4 → 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/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.4",
+  "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/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/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;`
-// );