feat(parse): handle slot attributes (#189)

Author: larbish

packages/comark/SPEC/COMARK/component-slot-with-multiple-attrs.md

@@ -0,0 +1,51 @@
+## Input
+
+```md
+::comp
+#header{unwrap="p" preset="title"}
+Title
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "comp",
+      {},
+      [
+        "template",
+        {
+          "name": "header",
+          "unwrap": "p",
+          "preset": "title"
+        },
+        "Title"
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<comp>
+  <template name="header" unwrap="p" preset="title">
+    Title
+  </template>
+</comp>
+```
+
+## Markdown
+
+```md
+::comp
+#header{unwrap="p" preset="title"}
+Title
+::
+```

packages/comark/SPEC/COMARK/component-slots-with-attrs.md

@@ -0,0 +1,67 @@
+## Input
+
+```md
+::feature
+#title{unwrap="p"}
+Visual Editor
+
+#description{unwrap="p"}
+Edit without code.
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "feature",
+      {},
+      [
+        "template",
+        {
+          "name": "title",
+          "unwrap": "p"
+        },
+        "Visual Editor"
+      ],
+      [
+        "template",
+        {
+          "name": "description",
+          "unwrap": "p"
+        },
+        "Edit without code."
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<feature>
+  <template name="title" unwrap="p">
+    Visual Editor
+  </template>
+  <template name="description" unwrap="p">
+    Edit without code.
+  </template>
+</feature>
+```
+
+## Markdown
+
+```md
+::feature
+#title{unwrap="p"}
+Visual Editor
+
+#description{unwrap="p"}
+Edit without code.
+::
+```

packages/comark/src/internal/parse/token-processor.ts

@@ -449,6 +449,7 @@ function processBlockChildrenWithSlots(
   const nodes: ComarkNode[] = []
   let i = startIndex
   let currentSlotName: string | null = null
+  let currentSlotAttrs: Record<string, unknown> = {}
   let currentSlotChildren: ComarkNode[] = []
 
   while (i < tokens.length && tokens[i].type !== closeType) {
@@ -469,22 +470,31 @@ function processBlockChildrenWithSlots(
     // Check for slot marker: #slotname creates mdc_block_slot tokens
     if (token.type === 'mdc_block_slot') {
       // Extract slot name from token.attrs
-      // The attrs array contains [["#slotname", ""]] for open, and null/empty for close
+      // The attrs array contains [["#slotname", ""], ...props] for open, and null/empty for close
       if (token.attrs && Array.isArray(token.attrs) && token.attrs.length > 0) {
         const firstAttr = token.attrs[0]
         if (Array.isArray(firstAttr) && firstAttr.length > 0) {
           const slotKey = firstAttr[0] as string
           // Remove the # prefix to get the slot name
           if (slotKey.startsWith('#')) {
             const slotName = slotKey.substring(1)
+            const slotAttrs = processAttributes(token.attrs.slice(1))
 
             // Save previous slot if any
             if (currentSlotName !== null && currentSlotChildren.length > 0) {
-              nodes.push(['template', { name: currentSlotName }, ...currentSlotChildren] as ComarkNode)
+              nodes.push([
+                'template',
+                {
+                  name: currentSlotName,
+                  ...currentSlotAttrs,
+                },
+                ...currentSlotChildren,
+              ] as ComarkNode)
               currentSlotChildren = []
             }
 
             currentSlotName = slotName
+            currentSlotAttrs = slotAttrs
             i++
             continue
           }
@@ -513,7 +523,14 @@ function processBlockChildrenWithSlots(
 
   // Save last slot if any
   if (currentSlotName !== null && currentSlotChildren.length > 0) {
-    nodes.push(['template', { name: currentSlotName }, ...currentSlotChildren] as ComarkNode)
+    nodes.push([
+      'template',
+      {
+        name: currentSlotName,
+        ...currentSlotAttrs,
+      },
+      ...currentSlotChildren,
+    ] as ComarkNode)
   }
 
   return { nodes, nextIndex: i }

packages/comark/src/internal/stringify/handlers/template.ts

@@ -1,5 +1,6 @@
 import type { State } from 'comark/render'
 import type { ComarkElement, ComarkNode } from 'comark'
+import { comarkAttributes } from '../attributes.ts'
 
 // slot template
 export async function template(node: ComarkElement, state: State, parent?: ComarkElement) {
@@ -18,5 +19,8 @@ export async function template(node: ComarkElement, state: State, parent?: Comar
     }
   }
 
-  return `#${attrs.name}\n${content}` + state.context.blockSeparator
+  const { name: _name, $: _$, ...rest } = attrs
+  const extraAttrs = comarkAttributes(rest)
+
+  return `#${attrs.name}${extraAttrs}\n${content}` + state.context.blockSeparator
 }