metonym · metonym · Jul 28, 2024 · Jul 29, 2024
diff --git a/README.md b/README.md
@@ -382,24 +382,6 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 
 `$$restProps` are forwarded to the top-level `pre` element.
 
-#### Dispatched Events
-
-- **on:highlight**: fired after `code` is highlighted
-
-```svelte
-<Highlight
-  language={typescript}
-  {code}
-  on:highlight={(e) => {
-    /**
-     * The highlighted HTML as a string.
-     * @example "<span>...</span>"
-     */
-    console.log(e.detail.highlighted);
-  }}
-/>
-```
-
 ### `LineNumbers`
 
 #### Props
@@ -425,23 +407,6 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 
 `$$restProps` are forwarded to the top-level `pre` element.
 
-#### Dispatched Events
-
-- **on:highlight**: fired after `code` is highlighted
-
-```svelte
-<HighlightSvelte
-  {code}
-  on:highlight={(e) => {
-    /**
-     * The highlighted HTML as a string.
-     * @example "<span>...</span>"
-     */
-    console.log(e.detail.highlighted);
-  }}
-/>
-```
-
 ### `HighlightAuto`
 
 #### Props
@@ -453,29 +418,6 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 
 `$$restProps` are forwarded to the top-level `pre` element.
 
-#### Dispatched Events
-
-- **on:highlight**: fired after `code` is highlighted
-
-```svelte
-<HighlightAuto
-  {code}
-  on:highlight={(e) => {
-    /**
-     * 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);
-  }}
-/>
-```
-
 ## [Supported Languages](SUPPORTED_LANGUAGES.md)
 
 ## [Supported Styles](SUPPORTED_STYLES.md)

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "test:unit": "bun test tests/*.ts",
     "test:e2e": "bunx playwright test",
     "format": "bun --bun prettier --write .  --cache",
+    "upgrade-examples": "bun scripts/upgrade-examples.ts",
     "astro": "astro",
     "playwright": "playwright"
   },

diff --git a/scripts/upgrade-examples.ts b/scripts/upgrade-examples.ts
@@ -0,0 +1,11 @@
+import { $, Glob } from "bun";
+
+const dirs = new Glob("*").scanSync({
+  cwd: "examples",
+  onlyFiles: false,
+  absolute: true,
+});
+
+for await (const dir of dirs) {
+  await $`cd ${dir} && bun install`;
+}
diff --git a/src/Highlight.svelte b/src/Highlight.svelte
@@ -11,18 +11,11 @@
   export let langtag = false;
 
   import hljs from "highlight.js/lib/core";
-  import { createEventDispatcher, afterUpdate } from "svelte";
   import LangTag from "./LangTag.svelte";
 
-  const dispatch = createEventDispatcher();
-
   /** @type {string} */
   let highlighted = "";
 
-  afterUpdate(() => {
-    if (highlighted) dispatch("highlight", { highlighted });
-  });
-
   $: {
     hljs.registerLanguage(language.name, language.register);
     highlighted = hljs.highlight(code, { language: language.name }).value;

diff --git a/src/Highlight.svelte.d.ts b/src/Highlight.svelte.d.ts
@@ -72,16 +72,6 @@ export type HighlightProps = HTMLAttributes<HTMLPreElement> &
     language: LanguageType<string>;
   };
 
-export type HighlightEvents = {
-  highlight: CustomEvent<{
-    /**
-     * The highlighted HTML as a string.
-     * @example "<span>...</span>"
-     */
-    highlighted: string;
-  }>;
-};
-
 export type HighlightSlots = {
   default: {
     /**
@@ -94,6 +84,6 @@ export type HighlightSlots = {
 
 export default class Highlight extends SvelteComponentTyped<
   HighlightProps,
-  HighlightEvents,
+  {},
   HighlightSlots
 > {}
diff --git a/src/HighlightAuto.svelte b/src/HighlightAuto.svelte
@@ -9,24 +9,13 @@
   export let langtag = false;
 
   import hljs from "highlight.js";
-  import { createEventDispatcher, afterUpdate } from "svelte";
-
-  /**
-   * @typedef {{ highlighted: string; language: string; }} HighlightEventDetail
-   * @type {import("svelte").EventDispatcher<{ highlight: HighlightEventDetail}>}
-   */
-  const dispatch = createEventDispatcher();
 
   /** @type {string} */
   let highlighted = "";
 
   /** @type {string} */
   let language = "";
 
-  afterUpdate(() => {
-    if (highlighted) dispatch("highlight", { highlighted, language });
-  });
-
   $: ({ value: highlighted, language = "" } = hljs.highlightAuto(code));
 </script>
 

diff --git a/src/HighlightAuto.svelte.d.ts b/src/HighlightAuto.svelte.d.ts
@@ -10,22 +10,6 @@ export type HighlightAutoProps = HTMLAttributes<HTMLPreElement> &
     code: any;
   };
 
-export type HighlightAutoEvents = {
-  highlight: CustomEvent<{
-    /**
-     * The highlighted HTML as a string.
-     * @example "<span>...</span>"
-     */
-    highlighted: string;
-
-    /**
-     * The language name inferred by `highlight.js`.
-     * @example "css"
-     */
-    language: string;
-  }>;
-};
-
 export type HighlightAutoSlots = {
   default: {
     /**
@@ -38,6 +22,6 @@ export type HighlightAutoSlots = {
 
 export default class HighlightAuto extends SvelteComponentTyped<
   HighlightAutoProps,
-  HighlightAutoEvents,
+  {},
   HighlightAutoSlots
 > {}
diff --git a/src/HighlightSvelte.svelte b/src/HighlightSvelte.svelte
@@ -12,18 +12,11 @@
   import xml from "highlight.js/lib/languages/xml";
   import javascript from "highlight.js/lib/languages/javascript";
   import css from "highlight.js/lib/languages/css";
-  import { createEventDispatcher, afterUpdate } from "svelte";
-
-  const dispatch = createEventDispatcher();
 
   hljs.registerLanguage("xml", xml);
   hljs.registerLanguage("javascript", javascript);
   hljs.registerLanguage("css", css);
 
-  afterUpdate(() => {
-    if (highlighted) dispatch("highlight", { highlighted });
-  });
-
   $: highlighted = hljs.highlightAuto(code).value;
 </script>
 

diff --git a/src/HighlightSvelte.svelte.d.ts b/src/HighlightSvelte.svelte.d.ts
@@ -10,16 +10,6 @@ export type HighlightSvelteProps = HTMLAttributes<HTMLPreElement> &
     code: any;
   };
 
-export type HighlightSvelteEvents = {
-  highlight: CustomEvent<{
-    /**
-     * The highlighted HTML as a string.
-     * @example "<span>...</span>"
-     */
-    highlighted: string;
-  }>;
-};
-
 export type HighlightSvelteSlots = {
   default: {
     /**
@@ -32,6 +22,6 @@ export type HighlightSvelteSlots = {
 
 export default class HighlightSvelte extends SvelteComponentTyped<
   HighlightSvelteProps,
-  HighlightSvelteEvents,
+  {},
   HighlightSvelteSlots
 > {}
diff --git a/src/LangTag.svelte.d.ts b/src/LangTag.svelte.d.ts
@@ -21,12 +21,4 @@ export type LangTagProps = HTMLAttributes<HTMLPreElement> &
     languageName?: string;
   };
 
-export type LangTagEvents = {};
-
-export type LangTagSlots = {};
-
-export default class LangTag extends SvelteComponentTyped<
-  LangTagProps,
-  LangTagEvents,
-  LangTagSlots
-> {}
+export default class LangTag extends SvelteComponentTyped<LangTagProps> {}
diff --git a/src/LineNumbers.svelte.d.ts b/src/LineNumbers.svelte.d.ts
@@ -74,12 +74,4 @@ export type LineNumbersProps = HTMLAttributes<HTMLPreElement> & {
   "--highlighted-background"?: string;
 };
 
-export type LineNumbersEvents = {};
-
-export type LineNumbersSlots = {};
-
-export default class LineNumbers extends SvelteComponentTyped<
-  LineNumbersProps,
-  LineNumbersEvents,
-  LineNumbersSlots
-> {}
+export default class LineNumbers extends SvelteComponentTyped<LineNumbersProps> {}
diff --git a/tests/SvelteHighlightPackage.test.svelte b/tests/SvelteHighlightPackage.test.svelte
@@ -15,9 +15,6 @@
   class=""
   code=""
   language={javascript || typescript || typescriptDefault || ts}
-  on:highlight={(e) => {
-    console.log(e.detail);
-  }}
   let:highlighted
 >
   {@html highlighted}
@@ -41,12 +38,7 @@
   />
 </Highlight>
 
-<HighlightAuto
-  code=""
-  on:highlight={(e) => {
-    console.log(e.detail.language);
-  }}
-/>
+<HighlightAuto code="" />
 
 <Highlight
   code=""