diff --git a/README.md b/README.md
index 60332d93..89af2276 100644
--- 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
- {
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
- {
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
- {
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
index b97b3beb..c7dc8d47 100644
--- 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
new file mode 100644
index 00000000..7c7a21c1
--- /dev/null
+++ 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
index 7d5d5688..33466799 100644
--- 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
index e5ae810f..596e67a7 100644
--- a/src/Highlight.svelte.d.ts
+++ b/src/Highlight.svelte.d.ts
@@ -72,16 +72,6 @@ export type HighlightProps = HTMLAttributes &
language: LanguageType;
};
-export type HighlightEvents = {
- highlight: CustomEvent<{
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
index 42bd0827..f424dcce 100644
--- a/src/HighlightAuto.svelte
+++ b/src/HighlightAuto.svelte
@@ -9,13 +9,6 @@
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 = "";
@@ -23,10 +16,6 @@
/** @type {string} */
let language = "";
- afterUpdate(() => {
- if (highlighted) dispatch("highlight", { highlighted, language });
- });
-
$: ({ value: highlighted, language = "" } = hljs.highlightAuto(code));
diff --git a/src/HighlightAuto.svelte.d.ts b/src/HighlightAuto.svelte.d.ts
index f40226e1..c67af11b 100644
--- a/src/HighlightAuto.svelte.d.ts
+++ b/src/HighlightAuto.svelte.d.ts
@@ -10,22 +10,6 @@ export type HighlightAutoProps = HTMLAttributes &
code: any;
};
-export type HighlightAutoEvents = {
- highlight: CustomEvent<{
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
index 74638821..9f2a27b6 100644
--- 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;
diff --git a/src/HighlightSvelte.svelte.d.ts b/src/HighlightSvelte.svelte.d.ts
index 81bec062..f710db7e 100644
--- a/src/HighlightSvelte.svelte.d.ts
+++ b/src/HighlightSvelte.svelte.d.ts
@@ -10,16 +10,6 @@ export type HighlightSvelteProps = HTMLAttributes &
code: any;
};
-export type HighlightSvelteEvents = {
- highlight: CustomEvent<{
- /**
- * The highlighted HTML as a string.
- * @example "..."
- */
- 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
index 397eb801..a0aadf9f 100644
--- a/src/LangTag.svelte.d.ts
+++ b/src/LangTag.svelte.d.ts
@@ -21,12 +21,4 @@ export type LangTagProps = HTMLAttributes &
languageName?: string;
};
-export type LangTagEvents = {};
-
-export type LangTagSlots = {};
-
-export default class LangTag extends SvelteComponentTyped<
- LangTagProps,
- LangTagEvents,
- LangTagSlots
-> {}
+export default class LangTag extends SvelteComponentTyped {}
diff --git a/src/LineNumbers.svelte.d.ts b/src/LineNumbers.svelte.d.ts
index 48b89d88..e6707b5c 100644
--- a/src/LineNumbers.svelte.d.ts
+++ b/src/LineNumbers.svelte.d.ts
@@ -74,12 +74,4 @@ export type LineNumbersProps = HTMLAttributes & {
"--highlighted-background"?: string;
};
-export type LineNumbersEvents = {};
-
-export type LineNumbersSlots = {};
-
-export default class LineNumbers extends SvelteComponentTyped<
- LineNumbersProps,
- LineNumbersEvents,
- LineNumbersSlots
-> {}
+export default class LineNumbers extends SvelteComponentTyped {}
diff --git a/tests/SvelteHighlightPackage.test.svelte b/tests/SvelteHighlightPackage.test.svelte
index 6e58560f..58b9ceb3 100644
--- 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 @@
/>
- {
- console.log(e.detail.language);
- }}
-/>
+