refactor(types): reuse langtag props

metonym · Feb 6, 2024 · 2d8df79 · 2d8df79
1 parent ae875e3
commit 2d8df79
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 129 deletions.
diff --git a/src/Highlight.svelte.d.ts b/src/Highlight.svelte.d.ts
@@ -2,20 +2,7 @@ import type { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { LanguageType } from "./languages";
 
-export type HighlightProps = HTMLAttributes<HTMLPreElement> & {
-  /**
-   * Specify the text to highlight.
-   */
-  code: any;
-
-  /**
-   * Provide the language grammar used to highlight the code.
-   * Import languages from `svelte-highlight/languages/*`.
-   * @example
-   * import typescript from "svelte-highlight/languages/typescript";
-   */
-  language: LanguageType<string>;
-
+export type LangtagProps = {
   /**
    * Set to `true` for the language name to be
    * displayed at the top right of the code block.
@@ -24,6 +11,7 @@ export type HighlightProps = HTMLAttributes<HTMLPreElement> & {
    * - `--langtag-background`
    * - `--langtag-color`
    * - `--langtag-border-radius`
+   * - `--langtag-padding`
    *
    * @default false
    */
@@ -54,6 +42,22 @@ export type HighlightProps = HTMLAttributes<HTMLPreElement> & {
   "--langtag-padding"?: string;
 };
 
+export type HighlightProps = HTMLAttributes<HTMLPreElement> &
+  LangtagProps & {
+    /**
+     * Specify the text to highlight.
+     */
+    code: any;
+
+    /**
+     * Provide the language grammar used to highlight the code.
+     * Import languages from `svelte-highlight/languages/*`.
+     * @example
+     * import typescript from "svelte-highlight/languages/typescript";
+     */
+    language: LanguageType<string>;
+  };
+
 export type HighlightEvents = {
   highlight: CustomEvent<{
     /**

diff --git a/src/HighlightAuto.svelte.d.ts b/src/HighlightAuto.svelte.d.ts
@@ -1,49 +1,14 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { LangtagProps } from "./Highlight.svelte";
 
-export type HighlightAutoProps = HTMLAttributes<HTMLPreElement> & {
-  /**
-   * Specify the text to highlight.
-   */
-  code: any;
-
-  /**
-   * Set to `true` for the language name to be
-   * displayed at the top right of the code block.
-   *
-   * Use style props to customize styles:
-   * - `--langtag-background`
-   * - `--langtag-color`
-   * - `--langtag-border-radius`
-   *
-   * @default false
-   */
-  langtag?: boolean;
-
-  /**
-   * Customize the background color of the langtag.
-   * @default "inherit"
-   */
-  "--langtag-background"?: string;
-
-  /**
-   * Customize the text color of the langtag.
-   * @default "inherit"
-   */
-  "--langtag-color"?: string;
-
-  /**
-   * Customize the border radius of the langtag.
-   * @default 0
-   */
-  "--langtag-border-radius"?: string;
-
-  /**
-   * Customize the padding of the langtag.
-   * @default "1em"
-   */
-  "--langtag-padding"?: string;
-};
+export type HighlightAutoProps = HTMLAttributes<HTMLPreElement> &
+  LangtagProps & {
+    /**
+     * Specify the text to highlight.
+     */
+    code: any;
+  };
 
 export type HighlightAutoEvents = {
   highlight: CustomEvent<{

diff --git a/src/HighlightSvelte.svelte.d.ts b/src/HighlightSvelte.svelte.d.ts
@@ -1,49 +1,14 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { LangtagProps } from "./Highlight.svelte";
 
-export type HighlightSvelteProps = HTMLAttributes<HTMLPreElement> & {
-  /**
-   * Specify the text to highlight.
-   */
-  code: any;
-
-  /**
-   * Set to `true` for the language name to be
-   * displayed at the top right of the code block.
-   *
-   * Use style props to customize styles:
-   * - `--langtag-background`
-   * - `--langtag-color`
-   * - `--langtag-border-radius`
-   *
-   * @default false
-   */
-  langtag?: boolean;
-
-  /**
-   * Customize the background color of the langtag.
-   * @default "inherit"
-   */
-  "--langtag-background"?: string;
-
-  /**
-   * Customize the text color of the langtag.
-   * @default "inherit"
-   */
-  "--langtag-color"?: string;
-
-  /**
-   * Customize the border radius of the langtag.
-   * @default 0
-   */
-  "--langtag-border-radius"?: string;
-
-  /**
-   * Customize the padding of the langtag.
-   * @default "1em"
-   */
-  "--langtag-padding"?: string;
-};
+export type HighlightSvelteProps = HTMLAttributes<HTMLPreElement> &
+  LangtagProps & {
+    /**
+     * Specify the text to highlight.
+     */
+    code: any;
+  };
 
 export type HighlightSvelteEvents = {
   highlight: CustomEvent<{

diff --git a/src/LangTag.svelte.d.ts b/src/LangTag.svelte.d.ts
@@ -1,37 +1,25 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { LangtagProps } from "./Highlight.svelte";
 
-export type LangTagProps = HTMLAttributes<HTMLPreElement> & {
-  /**
-   * Specify the text to highlight.
-   */
-  code: any;
+export type LangTagProps = HTMLAttributes<HTMLPreElement> &
+  LangtagProps & {
+    /**
+     * Specify the text to highlight.
+     */
+    code: any;
 
-  /**
-   * Provide the highlighted code.
-   */
-  highlighted: string;
+    /**
+     * Provide the highlighted code.
+     */
+    highlighted: string;
 
-  /**
-   * Provide the language name.
-   * @default "plaintext"
-   */
-  languageName?: string;
-
-  /**
-   * Set to `true` for the language name to be
-   * displayed at the top right of the code block.
-   *
-   * Use style props to customize styles:
-   * - `--langtag-background`
-   * - `--langtag-color`
-   * - `--langtag-border-radius`
-   * - `--langtag-padding`
-   *
-   * @default false
-   */
-  langtag?: boolean;
-};
+    /**
+     * Provide the language name.
+     * @default "plaintext"
+     */
+    languageName?: string;
+  };
 
 export type LangTagEvents = {};
 

diff --git a/tests/SvelteHighlightPackage.test.svelte b/tests/SvelteHighlightPackage.test.svelte
@@ -47,3 +47,13 @@
     console.log(e.detail.language);
   }}
 />
+
+<Highlight
+  code=""
+  language={javascript}
+  langtag
+  --langtag-background=""
+  --langtag-border-radius=""
+  --langtag-color=""
+  --langtag-padding=""
+/>