feat(highlight-auto): include language in "on:highlight" event deta…

…il (#252)

* feat(highlight-auto): include `language` in "on:highlight" event detail

* fix: `highlighted` in `e.detail` should be a string

README.md

@@ -355,7 +355,11 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
   language={typescript}
   {code}
   on:highlight={(e) => {
-    console.log(e.detail.highlighted); // "<span>...</span>"
+    /**
+     * The highlighted HTML as a string.
+     * @example "<span>...</span>"
+     */
+    console.log(e.detail.highlighted);
   }}
 />
 ```
@@ -391,7 +395,11 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 <HighlightSvelte
   {code}
   on:highlight={(e) => {
-    console.log(e.detail.highlighted); // "<span>...</span>"
+    /**
+     * The highlighted HTML as a string.
+     * @example "<span>...</span>"
+     */
+    console.log(e.detail.highlighted);
   }}
 />
 ```
@@ -415,7 +423,17 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 <HighlightAuto
   {code}
   on:highlight={(e) => {
-    console.log(e.detail.highlighted); // "<span>...</span>"
+    /**
+     * The highlighted HTML as a string.
+     * @example "<span>...</span>"
+     */
+    console.log(e.detail.highlighted);
+
+    /**
+     * The inferred language name
+     * @example "css"
+     */
+    console.log(e.detail.language);
   }}
 />
 ```

src/Highlight.svelte

@@ -1,8 +1,6 @@
 <script context="module" lang="ts">
   import type { LanguageFn } from "highlight.js";
 
-  export type HighlightedCode = undefined | string;
-
   export interface Language {
     name?: string;
     register: LanguageFn;
@@ -11,18 +9,20 @@
   export interface Slots {
     default: {
       /**
-       * The highlighted code.
+       * The highlighted HTML as a string.
+       * @example "<span>...</span>"
        */
-      highlighted: HighlightedCode;
+      highlighted: string;
     };
   }
 
   export interface Events {
     highlight: CustomEvent<{
       /**
-       * The highlighted code.
+       * The highlighted HTML as a string.
+       * @example "<span>...</span>"
        */
-      highlighted?: HighlightedCode;
+      highlighted: string;
     }>;
   }
 </script>
@@ -88,7 +88,7 @@
 
   const dispatch = createEventDispatcher();
 
-  let highlighted: HighlightedCode = undefined;
+  let highlighted = "";
 
   afterUpdate(() => {
     if (highlighted) dispatch("highlight", { highlighted });

src/HighlightAuto.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import type { HighlightedCode, Slots, Events } from "./Highlight.svelte";
+  import type { Slots } from "./Highlight.svelte";
 </script>
 
 <script lang="ts">
@@ -42,7 +42,21 @@
 
   interface $$Slots extends Slots {}
 
-  interface $$Events extends Events {}
+  interface $$Events {
+    highlight: CustomEvent<{
+      /**
+       * The highlighted HTML as a string.
+       * @example "<span>...</span>"
+       */
+      highlighted: string;
+
+      /**
+       * The inferred language name.
+       * @example "css"
+       */
+      language?: string;
+    }>;
+  }
 
   export let code;
 
@@ -53,11 +67,11 @@
 
   const dispatch = createEventDispatcher();
 
-  let highlighted: HighlightedCode = undefined;
+  let highlighted = "";
   let language = undefined;
 
   afterUpdate(() => {
-    if (highlighted) dispatch("highlight", { highlighted });
+    if (highlighted) dispatch("highlight", { highlighted, language });
   });
 
   $: ({ value: highlighted, language } = hljs.highlightAuto(code));

tests/SvelteHighlight.test.svelte

@@ -12,6 +12,7 @@
 
   let toggled = true;
   let highlighted = "";
+  let language = "";
 
   $: code = "const add = (a: number, b: number) => a + b;";
   $: codeSvelte = "<button on:click>Click me</button>";
@@ -39,8 +40,13 @@
   id="highlight-auto-css"
   code={`body {\n  padding: 0;\n  color: red;\n}`}
   langtag={true}
+  on:highlight={(e) => {
+    language = e.detail.language;
+  }}
 />
 
+<div id="inferred-language">{language}</div>
+
 <Highlight
   language={toggled ? javascript : typescript}
   {code}

tests/SvelteHighlight.test.ts

@@ -47,6 +47,9 @@ describe("SvelteHighlight", () => {
           <span class=\\"hljs-attribute\\">color</span>: red;
         }</code></pre>"
       `);
+    expect(target.querySelector("#inferred-language")?.innerHTML).toEqual(
+      "css"
+    );
 
     await userEvent.click(target.querySelector("button")!);