fix: list attributes (#49)

packages/svelte-markdown-preprocess/src/marked-svelte.ts

@@ -21,7 +21,7 @@ export const markedSvelte = (): MarkedExtension => ({
         case 4:
         case 5:
         case 6: {
-          return `<Markdown.Heading id="${id}" level={${depth}}>${text}</Markdown.Heading>\n`;
+          return `<Markdown.Heading${createAttributes({ id, level: depth })}>${text}</Markdown.Heading>\n`;
         }
       }
 
@@ -29,13 +29,10 @@ export const markedSvelte = (): MarkedExtension => ({
     },
 
     list({ items, ordered, start }) {
-      const startAttribute = start && start !== 1 ? ` start={${start}}` : '';
-      let output = '';
-      output += `<Markdown.List ordered={${ordered}}${startAttribute}>\n`;
+      let output = `<Markdown.List${createAttributes({ ordered, start: start === 1 ? undefined : start })}>\n`;
       for (const item of items) {
         const content = this.parser.parse(item.tokens);
-        const attributes = [item.task && 'task', item.checked && 'checked'].filter(Boolean);
-        output += `<Markdown.ListItem ${attributes.join(' ')}>${content}</Markdown.ListItem>\n`;
+        output += `<Markdown.ListItem${createAttributes({ task: item.task ? true : undefined, checked: item.checked })}>${content}</Markdown.ListItem>\n`;
       }
       output += `</Markdown.List>\n`;
 

packages/svelte-markdown-preprocess/src/utility.ts

@@ -22,10 +22,30 @@ export const escapeSvelteCode = (text: string) => {
   return escaped;
 };
 
-export const createAttributes = (attributes: Record<string, string | null | undefined>) => {
+export const createAttributes = (attributes: Record<string, string | boolean | number | null | undefined>) => {
   const results = Object.entries(attributes)
-    .filter(([, value]) => !!value)
-    .map(([key, value]) => `${key}="${value}"`);
+    .filter(([, value]) => {
+      if (value === null || value === undefined) {
+        return false;
+      }
+
+      if (typeof value === 'string' && value === '') {
+        return false;
+      }
+
+      return true;
+    })
+    .map(([key, value]) => {
+      if (typeof value === 'number') {
+        return `${key}={${value}}`;
+      }
+
+      if (typeof value === 'boolean') {
+        return value ? `${key}` : `${key}={false}`;
+      }
+
+      return `${key}="${value}"`;
+    });
   if (results.length === 0) {
     return '';
   }

packages/svelte-markdown-preprocess/test/__snapshots__/index.spec.ts.snap

@@ -116,6 +116,20 @@ exports[`markup > should render 'link-shothand.md' correctly 1`] = `
 }
 `;
 
+exports[`markup > should render 'list.md' correctly 1`] = `
+{
+  "code": "<script lang="ts">
+  import { Markdown } from '@immich/ui';
+</script>
+<Markdown.List ordered>
+<Markdown.ListItem>First item</Markdown.ListItem>
+<Markdown.ListItem>Second item</Markdown.ListItem>
+<Markdown.ListItem>Third item</Markdown.ListItem>
+</Markdown.List>
+",
+}
+`;
+
 exports[`markup > should render 'snippets.md' correctly 1`] = `
 {
   "code": "<script lang="ts">

packages/svelte-markdown-preprocess/test/fixtures/list.md

@@ -0,0 +1,3 @@
+1. First item
+2. Second item
+3. Third item