Build

accuser · accuser · commit 16c2a636870f · 2025-10-16T06:34:50.000Z
diff --git a/dist/components/blockquote/blockquote.svelte b/dist/components/blockquote/blockquote.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <blockquote>
-	{#each children as child}<Node node={child} />{/each}
+	{#each children as child (child)}<Node node={child} />{/each}
 </blockquote>
diff --git a/dist/components/break/break.svelte b/dist/components/break/break.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	let { node }: { node: import('mdast').Break } = $props();
 </script>
 
diff --git a/dist/components/definition/definition.svelte b/dist/components/definition/definition.svelte
@@ -1,3 +1,4 @@
 <script lang="ts">
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	let { node }: { node: import('mdast').Definition } = $props();
 </script>
diff --git a/dist/components/delete/delete.svelte b/dist/components/delete/delete.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <del
-	>{#each children as child}<Node node={child} />{/each}</del
+	>{#each children as child (child)}<Node node={child} />{/each}</del
 >
diff --git a/dist/components/emphasis/emphasis.svelte b/dist/components/emphasis/emphasis.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <em
-	>{#each children as child}<Node node={child} />{/each}</em
+	>{#each children as child (child)}<Node node={child} />{/each}</em
 >
diff --git a/dist/components/footnote-definition/footnote-definition.svelte b/dist/components/footnote-definition/footnote-definition.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import { sanitizeId } from '../../utils/index.js';
 	import { Node } from '@typematter/svelte-unist';
 
 	let { node }: { node: import('mdast').FootnoteDefinition } = $props();
 
 	let { children, identifier, label } = $derived(node);
+
+	let id = $derived(sanitizeId(identifier));
 </script>
 
-<div id="footnote-{identifier}">
+<div id="footnote-{id}">
 	<p>{label}.</p>
-	{#each children as child}<Node node={child} />{/each}
-	<a href="#footnote-ref-{identifier}" aria-label="Back to content">&hookleftarrow;</a>
+	{#each children as child (child)}<Node node={child} />{/each}
+	<a href="#footnote-ref-{id}" aria-label="Back to content">&hookleftarrow;</a>
 </div>
diff --git a/dist/components/footnote-definition/footnote-definition.test.js b/dist/components/footnote-definition/footnote-definition.test.js
@@ -28,30 +28,30 @@ describe('FootnoteDefinition', () => {
     });
     it('renders <div> with `id` attribute', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1')).toBeInTheDocument();
+        expect(document.body.querySelector('div#footnote-id-1')).toBeInTheDocument();
     });
     it('renders <p> in <div>', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 > p')).toBeInTheDocument();
+        expect(document.body.querySelector('div#footnote-id-1 > p')).toBeInTheDocument();
     });
     it('renders <p> in <div> with `label` content', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 > p')).toHaveTextContent('1');
+        expect(document.body.querySelector('div#footnote-id-1 > p')).toHaveTextContent('1');
     });
     it('renders <a> in <div>', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 > a')).toBeInTheDocument();
+        expect(document.body.querySelector('div#footnote-id-1 > a')).toBeInTheDocument();
     });
     it('renders <a> in <div> with `href` attribute', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 > a')).toHaveAttribute('href', '#footnote-ref-1');
+        expect(document.body.querySelector('div#footnote-id-1 > a')).toHaveAttribute('href', '#footnote-ref-id-1');
     });
     it('renders <a> in <div> with `aria-label', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 > a')).toHaveAttribute('aria-label', 'Back to content');
+        expect(document.body.querySelector('div#footnote-id-1 > a')).toHaveAttribute('aria-label', 'Back to content');
     });
     it('renders <a> in <div> with content', ({ props }) => {
         mount(Unist, { props, target: document.body });
-        expect(document.body.querySelector('div#footnote-1 a')).toHaveTextContent('↩');
+        expect(document.body.querySelector('div#footnote-id-1 a')).toHaveTextContent('↩');
     });
 });
diff --git a/dist/components/footnote-reference/footnote-reference.svelte b/dist/components/footnote-reference/footnote-reference.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
+	import { sanitizeId } from '../../utils/index.js';
+
 	let { node }: { node: import('mdast').FootnoteReference } = $props();
 
 	let { identifier, label } = $derived(node);
+
+	let id = $derived(sanitizeId(identifier));
 </script>
 
 <sup
-	><a id="footnote-ref-{identifier}" href="#footnote-{identifier}" aria-describedby="footnote-label"
-		>{label}</a
+	><a id="footnote-ref-{id}" href="#footnote-{id}" aria-describedby="footnote-label">{label}</a
 	></sup
 >
diff --git a/dist/components/heading/heading.svelte b/dist/components/heading/heading.svelte
@@ -9,5 +9,5 @@
 </script>
 
 <svelte:element this={tag}
-	>{#each children as child}<Node node={child} />{/each}</svelte:element
+	>{#each children as child (child)}<Node node={child} />{/each}</svelte:element
 >
diff --git a/dist/components/heading/heading.test.js b/dist/components/heading/heading.test.js
@@ -12,7 +12,7 @@ describe('Heading', () => {
             props: {
                 ast: u('heading', { depth }, [u('text', { value: 'Hello, World!' })]),
                 components: { heading: Heading }
-            },
+            }
         });
         it(`renders <h${depth}>`, ({ props }) => {
             mount(Unist, { props, target: document.body });
diff --git a/dist/components/html/html.svelte b/dist/components/html/html.svelte
@@ -4,4 +4,5 @@
 	let { value } = $derived(node);
 </script>
 
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 {@html value}
diff --git a/dist/components/image-reference/image-reference.test.js b/dist/components/image-reference/image-reference.test.js
@@ -25,7 +25,8 @@ describe('ImageReference', () => {
                 alt: 'Example',
                 identifier: 'example',
                 referenceType: 'full'
-            }), components: { imageReference: ImageReference }
+            }),
+            components: { imageReference: ImageReference }
         }
     });
     it('renders <img>', ({ props }) => {
diff --git a/dist/components/link-reference/link-reference.svelte b/dist/components/link-reference/link-reference.svelte
@@ -10,6 +10,7 @@
 	let { url, title } = $derived(getDefinition?.(identifier) ?? { url: '#', title: undefined });
 </script>
 
+<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 <a href={url} {title}
-	>{#each children as child}<Node node={child} />{/each}</a
+	>{#each children as child (child)}<Node node={child} />{/each}</a
 >
diff --git a/dist/components/link/link.svelte b/dist/components/link/link.svelte
@@ -6,6 +6,7 @@
 	let { children, title, url } = $derived(node);
 </script>
 
+<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 <a href={url} {title}
-	>{#each children as child}<Node node={child} />{/each}</a
+	>{#each children as child (child)}<Node node={child} />{/each}</a
 >
diff --git a/dist/components/list-item/list-item.svelte b/dist/components/list-item/list-item.svelte
@@ -2,9 +2,13 @@
 	import { Node } from '@typematter/svelte-unist';
 
 	let { node }: { node: import('mdast').ListItem } = $props();
-	let { children } = $derived(node);
+
+	let { checked, children, spread } = $derived(node);
 </script>
 
-<li>
-	{#each children as child}<Node node={child} />{/each}
+<li class:spread>
+	{#if checked !== null && checked !== undefined}
+		<input type="checkbox" disabled {checked} />
+	{/if}
+	{#each children as child (child)}<Node node={child} />{/each}
 </li>
diff --git a/dist/components/list-item/list-item.test.js b/dist/components/list-item/list-item.test.js
@@ -1,9 +1,12 @@
 import { Unist } from '@typematter/svelte-unist';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
-import { describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import ListItem from './list-item.svelte';
 describe('ListItem', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('listItem', [u('paragraph', [u('text', { value: 'Hello, World!' })])]),
@@ -18,4 +21,72 @@ describe('ListItem', () => {
         mount(Unist, { props, target: document.body });
         expect(document.body.querySelector('li')).toHaveTextContent('Hello, World!');
     });
+    describe('when `checked` is true', () => {
+        const taskIt = test.extend({
+            props: {
+                ast: u('listItem', { checked: true }, [
+                    u('paragraph', [u('text', { value: 'Done task' })])
+                ]),
+                components: { listItem: ListItem }
+            }
+        });
+        taskIt('renders checkbox input', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+        });
+        taskIt('renders checked checkbox', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).toBeChecked();
+        });
+        taskIt('renders disabled checkbox', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).toBeDisabled();
+        });
+    });
+    describe('when `checked` is false', () => {
+        const taskIt = test.extend({
+            props: {
+                ast: u('listItem', { checked: false }, [
+                    u('paragraph', [u('text', { value: 'Todo task' })])
+                ]),
+                components: { listItem: ListItem }
+            }
+        });
+        taskIt('renders checkbox input', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+        });
+        taskIt('renders unchecked checkbox', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).not.toBeChecked();
+        });
+    });
+    describe('when `checked` is null', () => {
+        const taskIt = test.extend({
+            props: {
+                ast: u('listItem', { checked: null }, [
+                    u('paragraph', [u('text', { value: 'Regular item' })])
+                ]),
+                components: { listItem: ListItem }
+            }
+        });
+        taskIt('does not render checkbox input', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('input[type="checkbox"]')).not.toBeInTheDocument();
+        });
+    });
+    describe('when `spread` is true', () => {
+        const spreadIt = test.extend({
+            props: {
+                ast: u('listItem', { spread: true }, [
+                    u('paragraph', [u('text', { value: 'Spread item' })])
+                ]),
+                components: { listItem: ListItem }
+            }
+        });
+        spreadIt('renders <li> with spread class', ({ props }) => {
+            mount(Unist, { props, target: document.body });
+            expect(document.body.querySelector('li')).toHaveClass('spread');
+        });
+    });
 });
diff --git a/dist/components/list/list.svelte b/dist/components/list/list.svelte
@@ -8,6 +8,6 @@
 	let tag = $derived(ordered === true ? ('ol' as const) : ('ul' as const));
 </script>
 
-<svelte:element this={tag} class:spread {start}
-	>{#each children as child}<Node node={child} />{/each}</svelte:element
+<svelte:element this={tag} class:spread start={ordered ? start : undefined}
+	>{#each children as child (child)}<Node node={child} />{/each}</svelte:element
 >
diff --git a/dist/components/paragraph/paragraph.svelte b/dist/components/paragraph/paragraph.svelte
@@ -6,5 +6,5 @@
 </script>
 
 <p>
-	{#each children as child}<Node node={child} />{/each}
+	{#each children as child (child)}<Node node={child} />{/each}
 </p>
diff --git a/dist/components/paragraph/paragraph.test.js b/dist/components/paragraph/paragraph.test.js
@@ -1,9 +1,13 @@
 import { Unist } from '@typematter/svelte-unist';
+import { beforeEach } from 'node:test';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
 import { describe, expect, test } from 'vitest';
 import Paragraph from './paragraph.svelte';
 describe('Paragraph', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('paragraph', [u('text', { value: 'Hello, World!' })]),
diff --git a/dist/components/root/root.svelte b/dist/components/root/root.svelte
@@ -6,4 +6,4 @@
 	let { children } = $derived(node);
 </script>
 
-{#each children as child}<Node node={child} />{/each}
+{#each children as child (child)}<Node node={child} />{/each}
diff --git a/dist/components/root/root.test.js b/dist/components/root/root.test.js
@@ -1,9 +1,12 @@
 import { Unist } from '@typematter/svelte-unist';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
-import { describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import Root from './root.svelte';
 describe('Root', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('root', [u('paragraph', [u('text', { value: 'Hello, World!' })])]),
diff --git a/dist/components/strong/strong.svelte b/dist/components/strong/strong.svelte
@@ -6,5 +6,5 @@
 </script>
 
 <strong
-	>{#each children as child}<Node node={child} />{/each}</strong
+	>{#each children as child (child)}<Node node={child} />{/each}</strong
 >
diff --git a/dist/components/strong/strong.test.js b/dist/components/strong/strong.test.js
@@ -1,9 +1,12 @@
 import { Unist } from '@typematter/svelte-unist';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
-import { describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import Strong from './strong.svelte';
 describe('Strong', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('strong', [u('text', { value: 'Hello, World!' })]),
diff --git a/dist/components/table-cell/table-cell.svelte b/dist/components/table-cell/table-cell.svelte
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 	import { Node } from '@typematter/svelte-unist';
-	import type { TableCell } from 'mdast';
 
 	let { node }: { node: import('mdast').TableCell } = $props();
 
@@ -18,5 +17,5 @@
 </script>
 
 <td {align}
-	>{#each children as child}<Node node={child} />{/each}</td
+	>{#each children as child (child)}<Node node={child} />{/each}</td
 >
diff --git a/dist/components/table-cell/table-cell.svelte.d.ts b/dist/components/table-cell/table-cell.svelte.d.ts
@@ -3,7 +3,6 @@ declare module 'mdast' {
         align?: AlignType | null;
     }
 }
-import type { TableCell } from 'mdast';
 type $$ComponentProps = {
     node: import('mdast').TableCell;
 };
diff --git a/dist/components/table-cell/table-cell.test.js b/dist/components/table-cell/table-cell.test.js
@@ -1,9 +1,12 @@
 import { Unist } from '@typematter/svelte-unist';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
-import { describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import TableCell from './table-cell.svelte';
 describe('TableCell', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('tableCell', [u('text', { value: 'Hello, World!' })]),
diff --git a/dist/components/table-row/table-row.svelte b/dist/components/table-row/table-row.svelte
@@ -24,5 +24,5 @@
 </script>
 
 <tr
-	>{#each columns as column}<Node node={column} />{/each}</tr
+	>{#each columns as column (column)}<Node node={column} />{/each}</tr
 >
diff --git a/dist/components/table/table.svelte b/dist/components/table/table.svelte
@@ -21,7 +21,7 @@
 	{/if}
 	{#if rows.length}
 		<tbody>
-			{#each rows as row}<Node node={row} />{/each}
+			{#each rows as row (row)}<Node node={row} />{/each}
 		</tbody>
 	{/if}
 </table>
diff --git a/dist/components/table/table.test.js b/dist/components/table/table.test.js
@@ -1,9 +1,12 @@
 import { Unist } from '@typematter/svelte-unist';
 import { mount } from 'svelte';
 import { u } from 'unist-builder';
-import { describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import Table from './table.svelte';
 describe('Table', () => {
+    beforeEach(() => {
+        document.body = document.createElement('body');
+    });
     const it = test.extend({
         props: {
             ast: u('table', [u('tableRow', [u('tableCell', [u('text', { value: 'Hello, World!' })])])]),
diff --git a/dist/components/text/text.test.js b/dist/components/text/text.test.js
diff --git a/dist/components/thematic-break/thematic-break.svelte b/dist/components/thematic-break/thematic-break.svelte
diff --git a/dist/components/yaml/yaml.svelte b/dist/components/yaml/yaml.svelte
diff --git a/dist/utils/index.d.ts b/dist/utils/index.d.ts
diff --git a/dist/utils/index.js b/dist/utils/index.js
diff --git a/dist/utils/sanitize-id.d.ts b/dist/utils/sanitize-id.d.ts
diff --git a/dist/utils/sanitize-id.js b/dist/utils/sanitize-id.js
diff --git a/dist/utils/sanitize-id.test.d.ts b/dist/utils/sanitize-id.test.d.ts
diff --git a/dist/utils/sanitize-id.test.js b/dist/utils/sanitize-id.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<script lang="ts">`
	`2`	`+ // eslint-disable-next-line @typescript-eslint/no-unused-vars`
`2`	`3`	`let { node }: { node: import('mdast').Break } = $props();`
`3`	`4`	`</script>`
`4`	`5`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@`
`7`	`7`	`</script>`
`8`	`8`
`9`	`9`	`<del`
`10`		`- >{#each children as child}<Node node={child} />{/each}</del`
	`10`	`+ >{#each children as child (child)}<Node node={child} />{/each}</del`
`11`	`11`	`>`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@`
`7`	`7`	`</script>`
`8`	`8`
`9`	`9`	`<em`
`10`		`- >{#each children as child}<Node node={child} />{/each}</em`
	`10`	`+ >{#each children as child (child)}<Node node={child} />{/each}</em`
`11`	`11`	`>`
Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,5 @@`
`9`	`9`	`</script>`
`10`	`10`
`11`	`11`	`<svelte:element this={tag}`
`12`		`- >{#each children as child}<Node node={child} />{/each}</svelte:element`
	`12`	`+ >{#each children as child (child)}<Node node={child} />{/each}</svelte:element`
`13`	`13`	`>`