c063 1.0.0 → 1.1.0

package/dist/components/CodeBlock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeLine } from "./CodeLine";
-export const CodeBlock = ({ tokenLines, showLineNumbers, lineNumberStyle, ...rest }) => {
+export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, ...rest }) => {
     return (_jsx("pre", { ...rest, children: tokenLines.map((line, index) => (_jsxs("div", { style: {
                 display: "flex",
                 flexWrap: "nowrap",

package/dist/types/props.d.ts

@@ -1,16 +1,18 @@
-import { AsComponentProps, OverrideProps } from "./common";
-export type CodeTokenType = "keyword-blue" | "keyword-purple" | "string" | "number" | "comment" | "type" | "variable" | "constant" | `brackets-${1 | 2 | 3}` | "operator" | "default";
+import { AsComponentProps, DistributiveOmit, OverrideProps } from "./common";
+export type KeywordColorType = "blue" | "purple";
+export type CodeTokenType = `keyword-${KeywordColorType}` | "string" | "number" | "comment" | "type" | "variable" | "constant" | `brackets-${1 | 2 | 3}` | "operator" | "default";
 /**
  * 單一語法 token 的屬性，用於 <CodeToken /> 元件。
  *
  * @template T HTML 或客製元素，例如 span、a、Link 等
  */
-export type CodeTokenProps<T extends React.ElementType = React.ElementType> = AsComponentProps<T, {
+export type CodeTokenProps<T extends React.ElementType = React.ElementType<React.HTMLAttributes<HTMLElement>>> = AsComponentProps<T, {
     /**
      * 語法 token 的語意類型，用於指定樣式顏色。
      */
     type?: CodeTokenType;
 }>;
+export type CodeTokenBuilder = (children: CodeTokenProps["children"], props: DistributiveOmit<CodeTokenProps, "type">) => CodeTokenProps;
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
  */
@@ -53,7 +55,7 @@ export type CodeBlockProps = OverrideProps<React.HTMLAttributes<HTMLPreElement>,
     tokenLines: CodeTokenProps[][];
     /**
      * 是否顯示行號。
-     * @default false
+     * @default true
      */
     showLineNumbers?: boolean;
     /**

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
-export {};
+import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
+export declare const createToken: Record<CodeTokenType, CodeTokenBuilder>;
+export declare const whiteSpace: (count?: number) => CodeTokenProps;

package/dist/utils/index.js

@@ -1 +1,14 @@
-export {};
+export const createToken = new Proxy({}, {
+    get: (_, prop) => {
+        const builder = (children, props) => ({
+            type: prop,
+            children,
+            ...props,
+        });
+        return builder;
+    },
+});
+export const whiteSpace = (count = 1) => ({
+    type: "default",
+    children: " ".repeat(count),
+});

package/package.json

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

@@ -3,7 +3,7 @@ import { CodeLine } from "./CodeLine";
 
 export const CodeBlock = ({
   tokenLines,
-  showLineNumbers,
+  showLineNumbers = true,
   lineNumberStyle,
   ...rest
 }: CodeBlockProps) => {

package/src/types/props.tsx

@@ -1,8 +1,11 @@
-import { AsComponentProps, OverrideProps } from "./common";
+import { AsComponentProps, DistributiveOmit, OverrideProps } from "./common";
+
+export type KeywordColorType =
+  | "blue" // const, let, function, if, else class type
+  | "purple"; // import, export, from, as ,return
 
 export type CodeTokenType =
-  | "keyword-blue" // const, let, function, if, else class type
-  | "keyword-purple" // import, export, from, as ,return
+  | `keyword-${KeywordColorType}`
   | "string" // string
   | "number" // number
   | "comment" // comment ex: //, /* */, /** */
@@ -18,16 +21,24 @@ export type CodeTokenType =
  *
  * @template T HTML 或客製元素，例如 span、a、Link 等
  */
-export type CodeTokenProps<T extends React.ElementType = React.ElementType> =
-  AsComponentProps<
-    T,
-    {
-      /**
-       * 語法 token 的語意類型，用於指定樣式顏色。
-       */
-      type?: CodeTokenType;
-    }
-  >;
+export type CodeTokenProps<
+  T extends React.ElementType = React.ElementType<
+    React.HTMLAttributes<HTMLElement>
+  >
+> = AsComponentProps<
+  T,
+  {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+  }
+>;
+
+export type CodeTokenBuilder = (
+  children: CodeTokenProps["children"],
+  props: DistributiveOmit<CodeTokenProps, "type">
+) => CodeTokenProps;
 
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
@@ -78,7 +89,7 @@ export type CodeBlockProps = OverrideProps<
 
     /**
      * 是否顯示行號。
-     * @default false
+     * @default true
      */
     showLineNumbers?: boolean;
     /**

package/src/utils/index.ts

@@ -1 +1,20 @@
-export {}
+import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
+
+export const createToken = new Proxy(
+  {},
+  {
+    get: (_, prop: CodeTokenType) => {
+      const builder: CodeTokenBuilder = (children, props?) => ({
+        type: prop,
+        children,
+        ...props,
+      });
+      return builder;
+    },
+  }
+) as Record<CodeTokenType, CodeTokenBuilder>;
+
+export const whiteSpace = (count: number = 1): CodeTokenProps => ({
+  type: "default",
+  children: " ".repeat(count),
+});