fix(types): remove language prop type from HighlightAuto (#217)

* fix(types): use 42781Events interface to type dispatched events

* fix(types): remove language prop from HighlightAuto 42781Props interface

* refactor(types): reuse Slots interface

* test: assert packaged types

Author: metonym

src/Highlight.svelte

@@ -8,10 +8,22 @@
     register: LanguageFn;
   }
 
+  export interface Slots {
+    default: {
+      /**
+       * The highlighted code.
+       */
+      highlighted: HighlightedCode;
+    };
+  }
+
   export interface Events {
-    highlight: {
+    highlight: CustomEvent<{
+      /**
+       * The highlighted code.
+       */
       highlighted?: HighlightedCode;
-    };
+    }>;
   }
 </script>
 
@@ -35,11 +47,9 @@
     langtag?: boolean;
   }
 
-  interface $$Slots {
-    default: {
-      highlighted: HighlightedCode;
-    };
-  }
+  interface $$Slots extends Slots {}
+
+  interface $$Events extends Events {}
 
   export let language: Language = {
     name: undefined,
@@ -53,7 +63,7 @@
   import hljs from "highlight.js/lib/core";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher<Events>();
+  const dispatch = createEventDispatcher();
 
   let highlighted: HighlightedCode = undefined;
 

src/HighlightAuto.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import type { HighlightedCode, Language, Events } from "./Highlight.svelte";
+  import type { HighlightedCode, Slots, Events } from "./Highlight.svelte";
 </script>
 
 <script lang="ts">
@@ -9,24 +9,16 @@
      */
     code?: any;
 
-    /**
-     * Provide the language to highlight the code.
-     * Import languages from `svelte-highlight/languages/*`.
-     */
-    language?: Language;
-
     /**
      * Set to `true` for the language name to be
      * displayed at the top right of the code block.
      */
     langtag?: boolean;
   }
 
-  interface $$Slots {
-    default: {
-      highlighted: HighlightedCode;
-    };
-  }
+  interface $$Slots extends Slots {}
+
+  interface $$Events extends Events {}
 
   export let code = undefined;
 
@@ -35,7 +27,7 @@
   import hljs from "highlight.js";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher<Events>();
+  const dispatch = createEventDispatcher();
 
   let highlighted: HighlightedCode = undefined;
   let language = undefined;

src/HighlightSvelte.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import type { HighlightedCode, Events } from "./Highlight.svelte";
+  import type { Slots, Events } from "./Highlight.svelte";
 </script>
 
 <script lang="ts">
@@ -16,11 +16,9 @@
     langtag?: boolean;
   }
 
-  interface $$Slots {
-    default: {
-      highlighted: HighlightedCode;
-    };
-  }
+  interface $$Slots extends Slots {}
+
+  interface $$Events extends Events {}
 
   export let code = undefined;
 
@@ -32,7 +30,7 @@
   import css from "highlight.js/lib/languages/css";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher<Events>();
+  const dispatch = createEventDispatcher();
 
   hljs.registerLanguage("xml", xml);
   hljs.registerLanguage("javascript", javascript);

tests/SvelteHighlightPackage.test.svelte

@@ -7,7 +7,16 @@
   import "../package/styles/3024.css";
 </script>
 
-<Highlight code="" language={javascript || typescript} />
+<Highlight
+  code=""
+  language={javascript || typescript}
+  on:highlight={(e) => {
+    console.log(e.detail);
+  }}
+  let:highlighted
+>
+  {@html highlighted}
+</Highlight>
 
 <svelte:component this={Highlight2} />