Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Jul 1, 2022
+38 −29
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad903c1
fix(types): use 42781Events interface to type dispatched events
metonym Jul 1, 2022
dfec8b4
fix(types): remove language prop from HighlightAuto 42781Props interface
metonym Jul 1, 2022
e1cd510
refactor(types): reuse Slots interface
metonym Jul 1, 2022
3764515
test: assert packaged types
metonym Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions src/Highlight.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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,
Expand All @@ -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;

Expand Down
18 changes: 5 additions & 13 deletions src/HighlightAuto.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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;

Expand All @@ -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;
Expand Down
12 changes: 5 additions & 7 deletions src/HighlightSvelte.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -16,11 +16,9 @@
langtag?: boolean;
}

interface $$Slots {
default: {
highlighted: HighlightedCode;
};
}
interface $$Slots extends Slots {}

interface $$Events extends Events {}

export let code = undefined;

Expand All @@ -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);
Expand Down
11 changes: 10 additions & 1 deletion tests/SvelteHighlightPackage.test.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down