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); - }} -/> +