@humanspeak/svelte-markdown 0.5.3

package/LICENSE.md

@@ -0,0 +1,22 @@
+Copyright (c) 2024 Humanspeak, Inc.
+
+Copyright (c) 2020-2024 Pablo Berganza
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,263 @@
+# Svelte Markdown
+
+A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
+
+## Installation
+
+You can install it with
+
+```console
+npm i -S @humanspeak/svelte-markdown
+```
+
+If you use npm or if you prefer yarn
+
+```console
+yarn add @humanspeak/svelte-markdown
+```
+
+If you're using Sapper you might need to install it as a dev dependency.
+
+## Usage
+
+```html
+<script>
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    const source = `
+  # This is a header
+
+This is a paragraph.
+
+* This is a list
+* With two items
+  1. And a sublist
+  2. That is ordered
+    * With another
+    * Sublist inside
+
+| And this is | A table |
+|-------------|---------|
+| With two    | columns |`
+</script>
+
+<SvelteMarkdown {source} />
+```
+
+This would render something like
+
+```html
+<h1>This is a header</h1>
+<p>This is a paragraph.</p>
+<ul>
+    <li>This is a list</li>
+    <li>
+        With two items
+        <ol start="1">
+            <li>And a sublist</li>
+            <li>
+                That is ordered
+                <ul>
+                    <li>With another</li>
+                    <li>Sublist inside</li>
+                </ul>
+            </li>
+        </ol>
+    </li>
+</ul>
+<table>
+    <thead>
+        <tr>
+            <th>And this is</th>
+            <th>A table</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>With two</td>
+            <td>columns</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+## Note
+
+Just like with React Markdown, this package doesn't use `{@html ...}` unless you need to render HTML.
+
+## Props
+
+The SvelteMarkdown component accepts the following props:
+
+-   `source` - _string_ or _array_ The Markdown source to be parsed, or an array of tokens to be rendered directly.
+-   `renderers` - _object (optional)_ An object where the keys represent a node type and the value is a Svelte component. This object will be merged with the default renderers. For now you can check how the default renderers are written in the source code at `src/renderers`.
+-   `options` - _object (optional)_ An object containing [options for Marked](https://marked.js.org/using_advanced#options)
+
+## Renderers
+
+To create custom renderer for an element, you can create a Svelte component with the default props ([you can check them here](https://marked.js.org/using_pro#renderer)), for example:
+
+_`ImageComponent.svelte`_
+
+```svelte
+<script>
+    export let href = ''
+    export let title = undefined
+    export let text = ''
+</script>
+
+<img src={href} {title} alt={text} />
+```
+
+So you can import the component and pass to the `renderers` props:
+
+```svelte
+<script>
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    import ImageComponent from './renderers/ImageComponent.svelte'
+    export let content
+</script>
+
+<SvelteMarkdown source={content} renderers={{ image: ImageComponent }} />
+```
+
+## Rendering From Tokens
+
+For greater flexibility, an array of tokens may be given as `source`, in which case parsing is skipped and the tokens will be rendered directly. This alows you to generate and transform the tokens freely beforehand. Example:
+
+```html
+<script>
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    import { marked } from 'marked'
+
+    const tokens = marked.lexer('this is an **example**')
+
+    marked.walkTokens(tokens, (token) => {
+        if (token.type == 'strong') token.type = 'em'
+        token.raw = token.raw.toUpperCase()
+    })
+</script>
+
+<SvelteMarkdown source="{tokens}" />
+```
+
+This will render the following:
+
+```html
+<p>THIS IS AN <em>EXAMPLE</em></p>
+```
+
+## Events
+
+A `parsed` event will be fired when the final tokens have been calculated, allowing you to access the raw token array if needed for things like generating Table of Contents from headings.
+
+```html
+<script>
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+
+    const source = `# This is a header`
+
+    const handleParsed = async (parsedTokens: Token[] | TokensList) => {
+        console.log('displaying tokens', parsedTokens)
+    }
+</script>
+
+<SvelteMarkdown {source} parsed="{handleParsed}"></SvelteMarkdown>
+```
+
+## Available renderers
+
+These would be the property names expected by the `renderers` option.
+
+-   `text` - Text rendered inside of other elements, such as paragraphs
+-   `paragraph` - Paragraph (`<p>`)
+-   `em` - Emphasis (`<em>`)
+-   `strong` - Strong/bold (`<strong>`)
+-   `hr` - Horizontal rule / thematic break (`<hr>`)
+-   `blockquote` - Block quote (`<blockquote>`)
+-   `del` - Deleted/strike-through (`<del>`)
+-   `link` - Link (`<a>`)
+-   `image` - Image (`<img>`)
+-   `table` - Table (`<table>`)
+-   `tablehead` - Table head (`<thead>`)
+-   `tablebody` - Table body (`<tbody>`)
+-   `tablerow` - Table row (`<tr>`)
+-   `tablecell` - Table cell (`<td>`/`<th>`)
+-   `list` - List (`<ul>`/`<ol>`)
+-   `listitem` - List item (`<li>`)
+-   `heading` - Heading (`<h1>`-`<h6>`)
+-   `codespan` - Inline code (`<code>`)
+-   `code` - Block of code (`<pre><code>`)
+-   `html` - HTML node
+
+### Optional List Renderers
+
+For fine detail styling of lists, it can be useful to differentiate between ordered and un-ordered lists.
+If either key is missing, the default `listitem` will be used. There are two
+optional keys in the `renderers` option which can provide this:
+
+-   `orderedlistitem` - A list item appearing inside an ordered list
+-   `unorderedlistitem` A list item appearing inside an un-ordered list
+
+As an example, if we have an `orderedlistitem`:
+
+```html
+<style>
+    li::marker {
+        color: blue;
+    }
+</style>
+
+<li><slot></slot></li>
+```
+
+Then numbers at the start of ordered list items would be colored blue. Bullets at the start of unordered list items
+would remain the default text color.
+
+### Inline Markdown
+
+To use [inline markdown](https://marked.js.org/using_advanced#inline), you can assign the prop `isInline` to the component.
+
+```html
+<SvelteMarkdown {source} isInline />
+```
+
+## HTML rendering
+
+While the most common flavours of markdown let you use HTML in markdown paragraphs, due to how Svelte handles plain HTML it is currently not possible to do this with this package. A paragraph must be either _all_ HTML or _all_ markdown.
+
+```markdown
+This is a **markdown** paragraph.
+
+<p>This is an <strong>HTML</strong> paragraph</p>
+```
+
+Note that the HTML paragraph must be enclosed within `<p>` tags.
+
+## Developing
+
+Some tests have been added to the `tests` folder. You can clone this repo and create another svelte app and link it to this repo to try modifying it.
+
+You can clone this repo and do the following:
+
+```console
+yarn
+yarn link
+yarn dev
+```
+
+This will watch all changes and make the project linkable. Now on the app you created you can link it with:
+
+```console
+yarn link @humanspeak/svelte-markdown
+```
+
+And then import it like in the example above.
+
+As of now the only external dependency of this project is `marked`.
+
+## Related
+
+-   [ReactMarkdown](https://github.com/remarkjs/react-markdown) - React library to render markdown using React components. Inspiration for this library.
+-   [Svelte](https://svelte.dev) - JavaScript front-end framework.
+-   [Marked](https://marked.js.org/) - Markdown parser
+-   [Original](https://github.com/pablo-abc/svelte-markdown) - Original component

package/dist/Parser.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import Parser from './Parser.svelte'
+    import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js'
+
+    interface Props {
+        type?: string
+        tokens?: Token[] | TokensList
+        header?: Tokens.TableCell[]
+        rows?: Tokens.TableCell[][]
+        ordered?: boolean
+        renderers: Renderers
+    }
+
+    const {
+        type = undefined,
+        tokens = undefined,
+        header = undefined,
+        rows = undefined,
+        ordered = false,
+        renderers,
+        ...rest
+    }: Props & {
+        [key: string]: unknown
+    } = $props()
+</script>
+
+{#if !type}
+    {#if tokens}
+        {#each tokens as token}
+            {@const { text, raw, ...parserRest } = rest}
+            <Parser {...token} {renderers} {...parserRest} />
+        {/each}
+    {/if}
+{:else if type in renderers}
+    {#if type === 'table'}
+        <renderers.table {...rest}>
+            <renderers.tablehead {...rest}>
+                <renderers.tablerow {...rest}>
+                    {#each header ?? [] as headerItem, i}
+                        <renderers.tablecell
+                            header={true}
+                            align={rest.align[i] || 'center'}
+                            {...rest}
+                        >
+                            <Parser tokens={headerItem.tokens} {renderers} />
+                        </renderers.tablecell>
+                    {/each}
+                </renderers.tablerow>
+            </renderers.tablehead>
+            <renderers.tablebody {...rest}>
+                {#each rows ?? [] as row}
+                    <renderers.tablerow {...rest}>
+                        {#each row ?? [] as cells, i}
+                            <renderers.tablecell
+                                header={false}
+                                align={rest.align[i] || 'center'}
+                                {...rest}
+                            >
+                                <Parser tokens={cells.tokens} {renderers} />
+                            </renderers.tablecell>
+                        {/each}
+                    </renderers.tablerow>
+                {/each}
+            </renderers.tablebody>
+        </renderers.table>
+    {:else if type === 'list'}
+        {#if ordered}
+            <renderers.list {ordered} {...rest}>
+                {@const items = rest.items as Props[]}
+                {#each items as item}
+                    {@const SvelteComponent = renderers.orderedlistitem || renderers.listitem}
+                    <SvelteComponent {...item}>
+                        <Parser tokens={item.tokens} {renderers} />
+                    </SvelteComponent>
+                {/each}
+            </renderers.list>
+        {:else}
+            <renderers.list {ordered} {...rest}>
+                {@const items = rest.items as Props[]}
+                {#each items as item}
+                    {@const SvelteComponent_1 = renderers.unorderedlistitem || renderers.listitem}
+                    <SvelteComponent_1 {...item} {...rest}>
+                        <Parser tokens={item.tokens} {renderers} {...rest} />
+                    </SvelteComponent_1>
+                {/each}
+            </renderers.list>
+        {/if}
+    {:else}
+        {@const SvelteComponent_2 = renderers[type]}
+        <SvelteComponent_2 {...rest}>
+            {#if tokens}
+                {@const { text, raw, ...parserRest } = rest}
+                <Parser {tokens} {renderers} {...parserRest} />
+            {:else}
+                {rest.raw}
+            {/if}
+        </SvelteComponent_2>
+    {/if}
+{/if}

package/dist/Parser.svelte.d.ts

@@ -0,0 +1,13 @@
+import Parser from './Parser.svelte';
+import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js';
+declare const Parser: import("svelte").Component<{
+    type?: string;
+    tokens?: Token[] | TokensList;
+    header?: Tokens.TableCell[];
+    rows?: Tokens.TableCell[][];
+    ordered?: boolean;
+    renderers: Renderers;
+} & {
+    [key: string]: unknown;
+}, {}, "">;
+export default Parser;

package/dist/SvelteMarkdown.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import {
+        Lexer,
+        defaultOptions,
+        defaultRenderers,
+        Slugger,
+        type Token,
+        type TokensList,
+        type SvelteMarkdownOptions
+    } from './utils/markdown-parser.js'
+    import Parser from './Parser.svelte'
+
+    interface Props {
+        source: Token[] | string
+        renderers?: object
+        options?: SvelteMarkdownOptions
+        isInline?: boolean
+        parsed?: (tokens: Token[] | TokensList) => void // eslint-disable-line no-unused-vars
+    }
+
+    const {
+        source = [],
+        renderers = {},
+        options = {} as SvelteMarkdownOptions,
+        isInline = false,
+        parsed = () => {},
+        ...rest
+    }: Props & {
+        [key: string]: unknown
+    } = $props()
+    let tokens: Token[] | TokensList | undefined = $state<Token[] | TokensList | undefined>(
+        undefined
+    )
+    let lexer: Lexer | undefined = undefined
+
+    const slugger = source ? new Slugger() : undefined
+    const combinedOptions = { ...defaultOptions, ...options }
+
+    $effect.pre(() => {
+        if (Array.isArray(source)) {
+            tokens = source as Token[]
+        } else {
+            lexer = new Lexer(combinedOptions)
+            tokens = isInline ? lexer.inlineTokens(source as string) : lexer.lex(source as string)
+        }
+    })
+    $effect(() => {
+        if (tokens) parsed($state.snapshot(tokens))
+    })
+
+    const combinedRenderers = {
+        ...defaultRenderers,
+        ...renderers
+    }
+</script>
+
+<Parser
+    {tokens}
+    {...rest}
+    options={combinedOptions}
+    slug={(val: string): string => (slugger ? slugger.slug(val) : '')}
+    renderers={combinedRenderers}
+/>

package/dist/SvelteMarkdown.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Token, type TokensList, type SvelteMarkdownOptions } from './utils/markdown-parser.js';
+declare const SvelteMarkdown: import("svelte").Component<{
+    source: Token[] | string;
+    renderers?: object;
+    options?: SvelteMarkdownOptions;
+    isInline?: boolean;
+    parsed?: (tokens: Token[] | TokensList) => void;
+} & {
+    [key: string]: unknown;
+}, {}, "">;
+export default SvelteMarkdown;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import type { SvelteMarkdownOptions, Token, TokensList } from './utils/markdown-parser.js';
+import SvelteMarkdown from './SvelteMarkdown.svelte';
+export default SvelteMarkdown;
+export type { SvelteMarkdownOptions, Token, TokensList };

package/dist/index.js

@@ -0,0 +1,2 @@
+import SvelteMarkdown from './SvelteMarkdown.svelte';
+export default SvelteMarkdown;

package/dist/renderers/Blockquote.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<blockquote>{@render children?.()}</blockquote>

package/dist/renderers/Blockquote.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Blockquote: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Blockquote;

package/dist/renderers/Br.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<br />{@render children?.()}

package/dist/renderers/Br.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Br: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Br;

package/dist/renderers/Code.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        lang: string
+        text: string
+    }
+    const { lang, text }: Props = $props()
+</script>
+
+<pre class={lang}><code>{text}</code></pre>

package/dist/renderers/Code.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Code: import("svelte").Component<{
+    lang: string;
+    text: string;
+}, {}, "">;
+export default Code;

package/dist/renderers/Codespan.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        raw: string
+    }
+
+    const { raw }: Props = $props()
+</script>
+
+<code>{raw.replace(/`/g, '')}</code>

package/dist/renderers/Codespan.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const Codespan: import("svelte").Component<{
+    raw: string;
+}, {}, "">;
+export default Codespan;

package/dist/renderers/Del.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<del>{@render children?.()}</del>

package/dist/renderers/Del.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Del: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Del;

package/dist/renderers/Em.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+
+    const { children }: Props = $props()
+</script>
+
+<em>{@render children?.()}</em>

package/dist/renderers/Em.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Em: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Em;

package/dist/renderers/Heading.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js'
+
+    interface Props {
+        depth: number
+        raw: string
+        text: string
+        options: SvelteMarkdownOptions
+        slug: (val: string) => string // eslint-disable-line no-unused-vars
+        children?: Snippet
+    }
+
+    const { depth, raw, text, options, slug, children }: Props = $props()
+
+    const id = $derived(options.headerIds ? options.headerPrefix + slug(text) : undefined)
+</script>
+
+{#if depth === 1}
+    <h1 {id}>{@render children?.()}</h1>
+{:else if depth === 2}
+    <h2 {id}>{@render children?.()}</h2>
+{:else if depth === 3}
+    <h3 {id}>{@render children?.()}</h3>
+{:else if depth === 4}
+    <h4 {id}>{@render children?.()}</h4>
+{:else if depth === 5}
+    <h5 {id}>{@render children?.()}</h5>
+{:else if depth === 6}
+    <h6 {id}>{@render children?.()}</h6>
+{:else}
+    {raw}
+{/if}

package/dist/renderers/Heading.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js';
+declare const Heading: import("svelte").Component<{
+    depth: number;
+    raw: string;
+    text: string;
+    options: SvelteMarkdownOptions;
+    slug: (val: string) => string;
+    children?: Snippet;
+}, {}, "">;
+export default Heading;

package/dist/renderers/Hr.svelte

@@ -0,0 +1 @@
+<hr />

package/dist/renderers/Hr.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Hr;
+type Hr = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Hr: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/renderers/Html.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        text: string
+    }
+
+    const { text }: Props = $props()
+</script>
+
+{@html text}

package/dist/renderers/Html.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const Html: import("svelte").Component<{
+    text: string;
+}, {}, "">;
+export default Html;

package/dist/renderers/Image.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    interface Props {
+        href?: string
+        title?: string
+        text?: string
+    }
+
+    const { href = '', title = undefined, text = '' }: Props = $props()
+</script>
+
+<img src={href} {title} alt={text} />

package/dist/renderers/Image.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Image: import("svelte").Component<{
+    href?: string;
+    title?: string;
+    text?: string;
+}, {}, "">;
+export default Image;

package/dist/renderers/Link.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        href?: string
+        title?: string
+        children?: Snippet
+    }
+    const { href = '', title = undefined, children }: Props = $props()
+</script>
+
+<a {href} {title}>{@render children?.()}</a>

package/dist/renderers/Link.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+declare const Link: import("svelte").Component<{
+    href?: string;
+    title?: string;
+    children?: Snippet;
+}, {}, "">;
+export default Link;

package/dist/renderers/List.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        ordered?: boolean
+        start?: number
+        children?: Snippet
+    }
+
+    const { ordered = false, start = 1, children }: Props = $props()
+</script>
+
+{#if ordered}
+    <ol {start}>{@render children?.()}</ol>
+{:else}
+    <ul>{@render children?.()}</ul>
+{/if}

package/dist/renderers/List.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+declare const List: import("svelte").Component<{
+    ordered?: boolean;
+    start?: number;
+    children?: Snippet;
+}, {}, "">;
+export default List;

package/dist/renderers/ListItem.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<li>{@render children?.()}</li>

package/dist/renderers/ListItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const ListItem: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default ListItem;

package/dist/renderers/Paragraph.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<p>{@render children?.()}</p>

package/dist/renderers/Paragraph.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Paragraph: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Paragraph;

package/dist/renderers/Strong.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<strong>{@render children?.()}</strong>

package/dist/renderers/Strong.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Strong: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Strong;

package/dist/renderers/Table.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<table>{@render children?.()}</table>

package/dist/renderers/Table.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const Table: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Table;

package/dist/renderers/TableBody.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<tbody>{@render children?.()}</tbody>

package/dist/renderers/TableBody.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const TableBody: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default TableBody;

package/dist/renderers/TableCell.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        header: boolean
+        align: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined
+        children?: Snippet
+    }
+
+    const { header, align, children }: Props = $props()
+</script>
+
+{#if header}
+    <th {align}>{@render children?.()}</th>
+{:else}
+    <td {align}>{@render children?.()}</td>
+{/if}

package/dist/renderers/TableCell.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+declare const TableCell: import("svelte").Component<{
+    header: boolean;
+    align: "left" | "center" | "right" | "justify" | "char" | null | undefined;
+    children?: Snippet;
+}, {}, "">;
+export default TableCell;

package/dist/renderers/TableHead.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<thead>{@render children?.()}</thead>

package/dist/renderers/TableHead.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const TableHead: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default TableHead;

package/dist/renderers/TableRow.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+    const { children }: Props = $props()
+</script>
+
+<tr>{@render children?.()}</tr>

package/dist/renderers/TableRow.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const TableRow: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default TableRow;

package/dist/renderers/Text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { type Snippet } from 'svelte'
+
+    interface Props {
+        children?: Snippet
+    }
+
+    const { children }: Props = $props()
+</script>
+
+{@render children?.()}

package/dist/renderers/Text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type Snippet } from 'svelte';
+declare const Text: import("svelte").Component<{
+    children?: Snippet;
+}, {}, "">;
+export default Text;

package/dist/renderers/index.d.ts

@@ -0,0 +1,21 @@
+export { default as Blockquote } from './Blockquote.svelte';
+export { default as Br } from './Br.svelte';
+export { default as Code } from './Code.svelte';
+export { default as Codespan } from './Codespan.svelte';
+export { default as Del } from './Del.svelte';
+export { default as Em } from './Em.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Hr } from './Hr.svelte';
+export { default as Html } from './Html.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
+export { default as Paragraph } from './Paragraph.svelte';
+export { default as Strong } from './Strong.svelte';
+export { default as Table } from './Table.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as Text } from './Text.svelte';

package/dist/renderers/index.js

@@ -0,0 +1,21 @@
+export { default as Blockquote } from './Blockquote.svelte';
+export { default as Br } from './Br.svelte';
+export { default as Code } from './Code.svelte';
+export { default as Codespan } from './Codespan.svelte';
+export { default as Del } from './Del.svelte';
+export { default as Em } from './Em.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Hr } from './Hr.svelte';
+export { default as Html } from './Html.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
+export { default as Paragraph } from './Paragraph.svelte';
+export { default as Strong } from './Strong.svelte';
+export { default as Table } from './Table.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as Text } from './Text.svelte';

package/dist/utils/markdown-parser.d.ts

@@ -0,0 +1,27 @@
+export { default as Slugger } from 'github-slugger';
+export { Lexer, type Token, type Tokens, type TokensList } from 'marked';
+import type { Component } from 'svelte';
+export interface Renderers {
+    [key: string]: Component<any> | null;
+}
+export declare const defaultRenderers: Renderers;
+export type SvelteMarkdownOptions = {
+    baseUrl: string | null;
+    breaks: boolean;
+    gfm: boolean;
+    headerIds: boolean;
+    headerPrefix: string;
+    highlight: null;
+    langPrefix: string;
+    mangle: boolean;
+    pedantic: boolean;
+    renderer: null;
+    sanitize: boolean;
+    sanitizer: null;
+    silent: boolean;
+    smartLists: boolean;
+    smartypants: boolean;
+    tokenizer: null;
+    xhtml: boolean;
+};
+export declare const defaultOptions: SvelteMarkdownOptions;

package/dist/utils/markdown-parser.js

@@ -0,0 +1,47 @@
+export { default as Slugger } from 'github-slugger';
+export { Lexer } from 'marked';
+import { Blockquote, Br, Code, Codespan, Del, Em, Heading, Hr, Html, Image, Link, List, ListItem, Paragraph, Strong, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../renderers/index.js';
+export const defaultRenderers = {
+    heading: Heading,
+    paragraph: Paragraph,
+    text: Text,
+    image: Image,
+    link: Link,
+    em: Em,
+    strong: Strong,
+    codespan: Codespan,
+    del: Del,
+    table: Table,
+    tablehead: TableHead,
+    tablebody: TableBody,
+    tablerow: TableRow,
+    tablecell: TableCell,
+    list: List,
+    orderedlistitem: null,
+    unorderedlistitem: null,
+    listitem: ListItem,
+    hr: Hr,
+    html: Html,
+    blockquote: Blockquote,
+    code: Code,
+    br: Br
+};
+export const defaultOptions = {
+    baseUrl: null,
+    breaks: false,
+    gfm: true,
+    headerIds: true,
+    headerPrefix: '',
+    highlight: null,
+    langPrefix: 'language-',
+    mangle: true,
+    pedantic: false,
+    renderer: null,
+    sanitize: false,
+    sanitizer: null,
+    silent: false,
+    smartLists: false,
+    smartypants: false,
+    tokenizer: null,
+    xhtml: false
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+    "name": "@humanspeak/svelte-markdown",
+    "description": "A markdown renderer for Svelte",
+    "version": "0.5.3",
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build && npm run package",
+        "preview": "vite preview",
+        "package": "svelte-kit sync && svelte-package && publint",
+        "prepublishOnly": "npm run package",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "test": "vitest run --coverage",
+        "test:only": "vitest run",
+        "test:watch": "vitest",
+        "lint": "prettier --check . && eslint .",
+        "lint:fix": "npm run format && eslint . --fix",
+        "format": "prettier --write ."
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/humanspeak/svelte-markdown.git"
+    },
+    "author": "Humanspeak, Inc.",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/humanspeak/svelte-markdown/issues"
+    },
+    "homepage": "https://github.com/humanspeak/svelte-markdown",
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "svelte": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        }
+    },
+    "peerDependencies": {
+        "svelte": "^5.0.0"
+    },
+    "dependencies": {
+        "marked": "^14.1.3"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "^9.13.0",
+        "@sveltejs/kit": "^2.7.3",
+        "@sveltejs/package": "^2.3.7",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
+        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/svelte": "^5.2.4",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/node": "^22.8.4",
+        "@typescript-eslint/eslint-plugin": "^8.12.2",
+        "@typescript-eslint/parser": "^8.12.2",
+        "@vitest/coverage-v8": "^2.1.4",
+        "eslint": "^9.13.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-svelte": "^2.46.0",
+        "github-slugger": "^2.0.0",
+        "globals": "^15.11.0",
+        "jsdom": "^25.0.1",
+        "prettier": "^3.3.3",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier-plugin-svelte": "^3.2.7",
+        "prettier-plugin-tailwindcss": "^0.6.8",
+        "publint": "^0.2.12",
+        "svelte": "^5.1.4",
+        "svelte-check": "^4.0.5",
+        "typescript": "^5.6.3",
+        "@sveltejs/adapter-auto": "^3.3.1",
+        "vite": "^5.4.10",
+        "vitest": "^2.1.4"
+    },
+    "overrides": {
+        "@sveltejs/kit": {
+            "cookie": "^0.7.0"
+        }
+    }
+}