c063 1.4.1 → 1.4.3

package/README.md

@@ -1 +1,121 @@
-# c063
+<div align="center">
+  <h1>c063</h1>
+
+<div style="display: flex; justify-content: center">
+<a href="https://www.npmjs.com/package/c063"><img alt="npm version" src="https://img.shields.io/npm/v/c063"></a>
+<a href="./LICENSE"><img alt="license" src="https://img.shields.io/npm/l/c063.svg"></a></div>
+</div>
+
+---
+
+A highly customizable React component library for displaying syntax-highlighted code snippets. Supports multiple languages and themes, making it ideal for documentation, blogs, or educational platforms.
+
+## ✨ Project Overview
+
+**c063** is a syntax highlighting component built with React and TypeScript. It offers flexible theming and a modular architecture that makes it easy for developers to embed code blocks into their applications.
+
+## ⚡️ Features
+
+- ✏️ Display code snippets with syntax highlighting.
+- 🌟 Multiple theme support: GitHub, Visual Studio, Light/Dark, etc.
+- 🔄 Modular design for easy integration and customization.
+- 📖 Perfect for tutorials, blog posts, and educational content.
+
+## 🚀 Installation & Usage
+
+### Installation
+
+```bash
+npm install c063
+```
+
+### Usage Example
+
+```tsx
+import { CodeBlock } from "c063";
+
+const tokens = [
+  [
+    { type: "keyword1", children: "const" },
+    { type: "default", children: " " },
+    { type: "variable", children: "x" },
+    { type: "default", children: " = " },
+    { type: "number", children: "42" },
+  ],
+];
+
+<CodeBlock tokenLines={tokens} theme="github-light" />;
+```
+
+## 📂 Project Structure
+
+```txt
+src
+├── components/         # Component files
+│   ├── CodeBlock.tsx   # Code block container
+│   ├── CodeLine.tsx    # Single line component
+│   ├── CodeToken.tsx   # Individual token component
+├── libs/               # Theme and configuration
+│   └── themes/         # Color themes
+├── types/              # Type definitions
+├── utils/              # Utility functions and parsers
+└── index.ts            # Module export entry
+```
+
+## 🔍 API / Props Reference
+
+### `CodeBlock<T>`
+
+```ts
+interface CodeBlockProps<T extends React.ElementType> {
+  tokenLines: CodeTokenProps<T>[][];
+  showLineNumbers?: boolean; // Default true
+  lineNumberStyle?: React.CSSProperties;
+  theme?: CodeTheme; // e.g. "github-dark"
+}
+```
+
+### `CodeLine<T>`
+
+```ts
+interface CodeLineProps<T extends React.ElementType> {
+  tokens: CodeTokenProps<T>[];
+  theme?: CodeTheme;
+}
+```
+
+### `CodeToken<T>`
+
+```ts
+interface CodeTokenProps<T extends React.ElementType> {
+  type?: CodeTokenType;
+  theme?: CodeTheme;
+  children: React.ReactNode;
+  as?: T; // Custom rendering tag
+}
+```
+
+### Utilities
+
+- `c063.<type>()`: Quickly create tokens, e.g., `c063.keyword1("const")`.
+- `whiteSpace(count)`: Insert a specific number of whitespace tokens.
+
+## ✍️ Contributing
+
+All contributions are welcome, including but not limited to:
+
+- Bug fixes or performance improvements
+- New theme submissions
+- Support for more programming languages
+
+Before submitting a PR, please fork the repository and create a new branch for your changes.
+
+## 📄 License
+
+This project is licensed under the [MIT](./LICENSE) license.
+
+---
+
+Repository:
+
+[https://github.com/fanyuuu2006/c063](https://github.com/fanyuuu2006/c063)

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

@@ -9,6 +9,6 @@ import { CodeLineProps } from "../types/index";
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
 export declare const CodeLine: {
-    <T extends React.ElementType>({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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.3",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,11 +9,11 @@
     "build": "tsc"
   },
   "keywords": [
+    "c063",
+    "code",
     "React",
     "Component",
-    "Code",
     "Language",
-    "Code.js",
     "Fanyu",
     "Syntax Highlighting",
     "Code Display",
@@ -31,7 +31,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fanyuuu2006/fanyu-components.git"
+    "url": "git+https://github.com/fanyuuu2006/c063.git"
   },
   "author": "",
   "license": "MIT",

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/CodeLine.tsx

@@ -9,7 +9,7 @@ import { CodeToken } from "./CodeToken";
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = <T extends React.ElementType>({
+export const CodeLine = <T extends React.ElementType = "span">({
   style,
   tokens,
   theme,

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;
-};