c063 1.1.6 → 1.2.0

package/dist/components/CodeBlock.d.ts

@@ -1,5 +1,5 @@
 import { CodeBlockProps } from "../types/props";
 export declare const CodeBlock: {
-    ({ tokenLines, showLineNumbers, lineNumberStyle, ...rest }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ tokenLines, showLineNumbers, lineNumberStyle, ...rest }: CodeBlockProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/CodeLine.d.ts

@@ -1,5 +1,5 @@
 import { CodeLineProps } from "../types/props";
 export declare const CodeLine: {
-    ({ style, tokens, ...rest }: CodeLineProps): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ style, tokens, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/common.d.ts

@@ -3,7 +3,7 @@ export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K
 /** 用於重載同名屬性（用於覆蓋類型 T 中與類型 P 相同名稱的屬性，並保留其餘屬性*/
 export type OverrideProps<T, P> = DistributiveOmit<T, keyof P> & P;
 /** 支援元件型別 (可複寫屬性)*/
-export type AsComponentProps<As extends React.ElementType, PermanentProps extends object = {}> = OverrideProps<React.ComponentPropsWithRef<As>, PermanentProps> & {
+export type AsComponentProps<T extends React.ElementType, P = {}> = OverrideProps<React.ComponentPropsWithRef<T>, P> & {
     /** 指定用於渲染的 React 元件（可為任意元件*/
-    as?: As;
+    as?: T;
 };

package/dist/types/props.d.ts

@@ -1,4 +1,4 @@
-import { AsComponentProps, DistributiveOmit, OverrideProps } from "./common";
+import { AsComponentProps, 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";
 /**
@@ -6,17 +6,17 @@ export type CodeTokenType = `keyword-${KeywordColorType}` | "string" | "number"
  *
  * @template T HTML 或客製元素，例如 span、a、Link 等
  */
-export type CodeTokenProps<T extends React.ElementType = React.ElementType> = AsComponentProps<T, {
+export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
     /**
      * 語法 token 的語意類型，用於指定樣式顏色。
      */
     type?: CodeTokenType;
 }>;
-export type CodeTokenBuilder<T extends React.ElementType> = (children: CodeTokenProps<T>["children"] extends undefined ? React.ReactNode : CodeTokenProps<T>["children"], props?: DistributiveOmit<CodeTokenProps<T>, "type">) => CodeTokenProps<T>;
+export type CodeTokenBuilder = <T extends React.ElementType>(children: CodeTokenProps<T>["children"], props?: CodeTokenProps<T>) => CodeTokenProps<T>;
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
  */
-export type CodeLineProps = OverrideProps<React.HTMLAttributes<HTMLElement>, {
+export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
     /**
      * 該行所包含的語法 token。
      *
@@ -30,9 +30,9 @@ export type CodeLineProps = OverrideProps<React.HTMLAttributes<HTMLElement>, {
      * ]} />
      * ```
      */
-    tokens: CodeTokenProps[];
+    tokens: CodeTokenProps<T>[];
 }>;
-export type CodeBlockProps = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
+export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
     /**
      * 所有程式碼行的 token 陣列。
      *
@@ -52,7 +52,7 @@ export type CodeBlockProps = OverrideProps<React.HTMLAttributes<HTMLPreElement>,
      * ]} />
      * ```
      */
-    tokenLines: CodeTokenProps[][];
+    tokenLines: CodeTokenProps<T>[][];
     /**
      * 是否顯示行號。
      * @default true

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -1,10 +1,12 @@
 export const createToken = new Proxy({}, {
     get: (_, prop) => {
-        const builder = (children, props) => ({
-            type: prop,
-            children,
-            ...props,
-        });
+        const builder = (children, props) => {
+            return {
+                children,
+                type: prop,
+                ...props,
+            };
+        };
         return builder;
     },
 });

package/package.json

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

@@ -1,12 +1,12 @@
 import { CodeBlockProps } from "../types/props";
 import { CodeLine } from "./CodeLine";
 
-export const CodeBlock = ({
+export const CodeBlock = <T extends React.ElementType = "span">({
   tokenLines,
   showLineNumbers = true,
   lineNumberStyle,
   ...rest
-}: CodeBlockProps) => {
+}: CodeBlockProps<T>) => {
   return (
     <pre {...rest}>
       {tokenLines.map((line, index) => (

package/src/components/CodeLine.tsx

@@ -1,7 +1,11 @@
 import { CodeLineProps } from "../types/props";
 import { CodeToken } from "./CodeToken";
 
-export const CodeLine = ({ style, tokens, ...rest }: CodeLineProps) => {
+export const CodeLine = <T extends React.ElementType>({
+  style,
+  tokens,
+  ...rest
+}: CodeLineProps<T>) => {
   return (
     <code
       {...rest}

package/src/types/common.tsx

@@ -8,9 +8,9 @@ export type OverrideProps<T, P> = DistributiveOmit<T, keyof P> & P;
 
 /** 支援元件型別 (可複寫屬性)*/
 export type AsComponentProps<
-  As extends React.ElementType,
-  PermanentProps extends object = {}
-> = OverrideProps<React.ComponentPropsWithRef<As>, PermanentProps> & {
+  T extends React.ElementType,
+  P = {}
+> = OverrideProps<React.ComponentPropsWithRef<T>, P> & {
   /** 指定用於渲染的 React 元件（可為任意元件*/
-  as?: As;
+  as?: T;
 };

package/src/types/props.tsx

@@ -21,28 +21,25 @@ 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> = AsComponentProps<
+  T,
+  {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+  }
+>;
 
-export type CodeTokenBuilder<T extends React.ElementType> = (
-  children: CodeTokenProps<T>["children"] extends undefined
-    ? React.ReactNode
-    : CodeTokenProps<T>["children"],
-  props?: DistributiveOmit<CodeTokenProps<T>, "type">
+export type CodeTokenBuilder = <T extends React.ElementType>(
+  children: CodeTokenProps<T>["children"],
+  props?: CodeTokenProps<T>
 ) => CodeTokenProps<T>;
 
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
  */
-export type CodeLineProps = OverrideProps<
+export type CodeLineProps<T extends React.ElementType> = OverrideProps<
   React.HTMLAttributes<HTMLElement>,
   {
     /**
@@ -58,11 +55,11 @@ export type CodeLineProps = OverrideProps<
      * ]} />
      * ```
      */
-    tokens: CodeTokenProps[];
+    tokens: CodeTokenProps<T>[];
   }
 >;
 
-export type CodeBlockProps = OverrideProps<
+export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
   React.HTMLAttributes<HTMLPreElement>,
   {
     /**
@@ -84,7 +81,7 @@ export type CodeBlockProps = OverrideProps<
      * ]} />
      * ```
      */
-    tokenLines: CodeTokenProps[][];
+    tokenLines: CodeTokenProps<T>[][];
 
     /**
      * 是否顯示行號。

package/src/utils/index.ts

@@ -4,20 +4,22 @@ export const createToken = new Proxy(
   {},
   {
     get: (_, prop: CodeTokenType) => {
-      const builder: CodeTokenBuilder<React.ElementType> = (
-        children,
-        props?
-      ) => ({
-        type: prop,
-        children,
-        ...props,
-      });
+      const builder = <T extends React.ElementType = "span">(
+        children: React.ReactNode,
+        props: CodeTokenProps<T>
+      ) => {
+        return {
+          children,
+          type: prop,
+          ...props,
+        };
+      };
       return builder;
     },
   }
-) as Record<CodeTokenType, CodeTokenBuilder<React.ElementType>>;
+) as Record<CodeTokenType, CodeTokenBuilder>;
 
-export const whiteSpace = (count: number = 1): CodeTokenProps => ({
+export const whiteSpace = (count: number = 1): CodeTokenProps<"span"> => ({
   type: "default",
   children: " ".repeat(count),
 });