@humanspeak/svelte-markdown 0.6.1 → 0.6.8

package/README.md

@@ -2,6 +2,8 @@
 
 A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
 
+Rewriten for Svelte5 and all the updated goodies that have happened over the last two years. Also moved to Typescript because its the future!
+
 ## Installation
 
 You can install it with
@@ -74,15 +76,16 @@ This would render something like
 
 ## Note
 
-Just like with React Markdown, this package doesn't use `{@html ...}` unless you need to render HTML.
+Just like with React Markdown, this package doesn't use `{@html ...}`. Even if you add HTML tags to the code, all if it is managed by either the defaults or YOU! If you want to spice things up you can! 🥰
 
 ## 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)
+- `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`.
+- `renderes.html` - _object (optional)_ An object where the key represents the HTML tag 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/html`.
+- `options` - _object (optional)_ An object containing [options for Marked](https://marked.js.org/using_advanced#options)
 
 ## Renderers
 
@@ -91,10 +94,14 @@ To create custom renderer for an element, you can create a Svelte component with
 _`ImageComponent.svelte`_
 
 ```svelte
-<script>
-    export let href = ''
-    export let title = undefined
-    export let text = ''
+<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} />
@@ -103,7 +110,7 @@ _`ImageComponent.svelte`_
 So you can import the component and pass to the `renderers` props:
 
 ```svelte
-<script>
+<script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
     import ImageComponent from './renderers/ImageComponent.svelte'
     export let content
@@ -117,7 +124,7 @@ So you can import the component and pass to the `renderers` props:
 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>
+<script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
     import { marked } from 'marked'
 
@@ -143,7 +150,7 @@ This will render the following:
 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>
+<script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
 
     const source = `# This is a header`
@@ -160,26 +167,26 @@ A `parsed` event will be fired when the final tokens have been calculated, allow
 
 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
+- `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
 
@@ -187,8 +194,8 @@ For fine detail styling of lists, it can be useful to differentiate between orde
 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
+- `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`:
 
@@ -245,11 +252,11 @@ 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`.
+As of now the only external dependencys of this project is `marked`, `github-slugger`, `htmlparser2`.
 
 ## 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
+- [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

@@ -1,7 +1,13 @@
 <script lang="ts">
     import Parser from './Parser.svelte'
     import Html from './renderers/html/index.js'
-    import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js'
+    import type {
+        Renderers,
+        Token,
+        TokensList,
+        Tokens,
+        RendererComponent
+    } from './utils/markdown-parser.js'
 
     interface Props {
         type?: string
@@ -28,7 +34,7 @@
 {#if !type}
     {#if tokens}
         {#each tokens as token}
-            {@const { text, raw, ...parserRest } = rest}
+            {@const { text: _text, raw: _raw, ...parserRest } = rest}
             <Parser {...token} {renderers} {...parserRest} />
         {/each}
     {/if}
@@ -40,10 +46,9 @@
                     {#each header ?? [] as headerItem, i}
                         <renderers.tablecell
                             header={true}
-                            align={rest.align[i] || 'center'}
+                            align={(rest.align as string[])[i] || 'center'}
                             {...rest}
                         >
-                            {rest.align[i]}
                             <Parser tokens={headerItem.tokens} {renderers} />
                         </renderers.tablecell>
                     {/each}
@@ -55,7 +60,7 @@
                         {#each row ?? [] as cells, i}
                             <renderers.tablecell
                                 header={false}
-                                align={rest.align[i] ?? 'center'}
+                                align={(rest.align as string[])[i] ?? 'center'}
                                 {...rest}
                             >
                                 <Parser tokens={cells.tokens} {renderers} />
@@ -107,10 +112,10 @@
             />
         {/if}
     {:else}
-        {@const GeneralComponent = renderers[type]}
+        {@const GeneralComponent = renderers[type as keyof Renderers] as RendererComponent}
         <GeneralComponent {...rest}>
             {#if tokens}
-                {@const { text, raw, ...parserRest } = rest}
+                {@const { text: _text, raw: _raw, ...parserRest } = rest}
                 <Parser {tokens} {renderers} {...parserRest} />
             {:else}
                 {rest.raw}

package/dist/SvelteMarkdown.svelte

@@ -14,7 +14,7 @@
 
     interface Props {
         source: Token[] | string
-        renderers?: Renderers
+        renderers?: Partial<Renderers>
         options?: SvelteMarkdownOptions
         isInline?: boolean
         parsed?: (tokens: Token[] | TokensList) => void // eslint-disable-line no-unused-vars
@@ -30,15 +30,17 @@
     }: Props & {
         [key: string]: unknown
     } = $props()
-    let tokens: Token[] | TokensList | undefined = $state<Token[] | TokensList | undefined>(
-        undefined
-    )
-    let lexer: Lexer | undefined = undefined
+    let tokens: Token[] | undefined
+    let previousSource = $state<string | Token[] | undefined>(undefined)
+    let lexer: Lexer
 
     const slugger = source ? new Slugger() : undefined
     const combinedOptions = { ...defaultOptions, ...options }
 
     $effect.pre(() => {
+        if (source === previousSource) return
+        previousSource = source
+
         if (Array.isArray(source)) {
             tokens = shrinkHtmlTokens(source) as Token[]
         } else {
@@ -48,8 +50,10 @@
             )
         }
     })
+
     $effect(() => {
-        if (tokens) parsed($state.snapshot(tokens))
+        if (!tokens) return
+        parsed($state.snapshot(tokens))
     })
 
     const combinedRenderers = {
@@ -60,8 +64,6 @@
             ...renderers.html
         }
     }
-
-    // $inspect(tokens)
 </script>
 
 <Parser

package/dist/SvelteMarkdown.svelte.d.ts

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

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Blockquote: import("svelte").Component<Props, {}, "">;
 type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Br: import("svelte").Component<Props, {}, "">;
 type Br = ReturnType<typeof Br>;
 export default Br;

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

@@ -1,7 +1,7 @@
-type Props = {
+interface Props {
     lang: string;
     text: string;
-};
+}
 declare const Code: import("svelte").Component<Props, {}, "">;
 type Code = ReturnType<typeof Code>;
 export default Code;

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

@@ -1,6 +1,6 @@
-type Props = {
+interface Props {
     raw: string;
-};
+}
 declare const Codespan: import("svelte").Component<Props, {}, "">;
 type Codespan = ReturnType<typeof Codespan>;
 export default Codespan;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Del: import("svelte").Component<Props, {}, "">;
 type Del = ReturnType<typeof Del>;
 export default Del;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Em: import("svelte").Component<Props, {}, "">;
 type Em = ReturnType<typeof Em>;
 export default Em;

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

@@ -1,13 +1,13 @@
-type Props = {
+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;
     children?: Snippet;
-};
-import type { Snippet } from 'svelte';
-import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js';
+}
 declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

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

@@ -1,8 +1,8 @@
-type Props = {
+interface Props {
     href?: string;
     title?: string;
     text?: string;
-};
+}
 declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;
 export default Image;

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

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

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

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

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const ListItem: import("svelte").Component<Props, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Paragraph: import("svelte").Component<Props, {}, "">;
 type Paragraph = ReturnType<typeof Paragraph>;
 export default Paragraph;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Strong: import("svelte").Component<Props, {}, "">;
 type Strong = ReturnType<typeof Strong>;
 export default Strong;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;
 export default Table;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const TableBody: import("svelte").Component<Props, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

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

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

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const TableHead: import("svelte").Component<Props, {}, "">;
 type TableHead = ReturnType<typeof TableHead>;
 export default TableHead;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

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

@@ -1,7 +1,7 @@
-type Props = {
-    children?: Snippet;
-};
 import { type Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/renderers/html/A.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Abbr.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Address.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Article.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Aside.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Audio.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/B.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Bdi.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Bdo.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Blockquote.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Button.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Canvas.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Cite.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()