feat: slot attributes syntax

Author: farnabaz

src/micromark-extension/tokenize-container.ts

@@ -101,10 +101,26 @@ function tokenize (this: TokenizeContext, effects: Effects, ok: State, nok: Stat
   }
 
   function sectionTitle (code: Code): State | undefined {
+    // parse attributes
+    if (code === Codes.openingCurlyBracket) {
+      return effects.check(
+        attributes,
+        (code) => {
+          effects.exit('componentContainerSectionTitle')
+          return effects.attempt(attributes, factorySpace(effects, lineStart, 'linePrefix', 4), nok)(code)
+        },
+        (code) => {
+          effects.consume(code)
+          return sectionTitle
+        }
+      )(code)
+    }
+
     if (markdownLineEnding(code)) {
       effects.exit('componentContainerSectionTitle')
       return factorySpace(effects, lineStart, 'linePrefix', 4)(code)
     }
+
     effects.consume(code)
     return sectionTitle
   }

src/to-markdown.ts

@@ -96,7 +96,7 @@ export default (opts: RemarkMDCOptions = {}) => {
 
     processNode(node as any)
 
-    return `#${(node as any).name}\n${content(node, context)}`.trim()
+    return `#${(node as any).name}${attributes(node, context)}\n${content(node, context)}`.trim()
   }
 
   type NodeTextComponent = Parents & { name: string; rawData: string; attributes: any }

test/__snapshots__/block-component.test.ts.snap

@@ -2033,6 +2033,111 @@ exports[`block-component > section-order-2 1`] = `
 }
 `;
 
+exports[`block-component > slot-attributes 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "attributes": {
+            "key": "value",
+          },
+          "children": [
+            {
+              "children": [
+                {
+                  "position": {
+                    "end": {
+                      "column": 13,
+                      "line": 3,
+                      "offset": 53,
+                    },
+                    "start": {
+                      "column": 1,
+                      "line": 3,
+                      "offset": 41,
+                    },
+                  },
+                  "type": "text",
+                  "value": "slot content",
+                },
+              ],
+              "position": {
+                "end": {
+                  "column": 13,
+                  "line": 3,
+                  "offset": 53,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 3,
+                  "offset": 41,
+                },
+              },
+              "type": "paragraph",
+            },
+          ],
+          "data": {
+            "hName": "component-slot",
+            "hProperties": {
+              "key": "value",
+              "v-slot:slot": "",
+            },
+          },
+          "name": "slot",
+          "position": {
+            "end": {
+              "column": 3,
+              "line": 4,
+              "offset": 56,
+            },
+            "start": {
+              "column": 2,
+              "line": 2,
+              "offset": 23,
+            },
+          },
+          "type": "componentContainerSection",
+        },
+      ],
+      "data": {
+        "hName": "container-component",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "container-component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 4,
+          "offset": 56,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 4,
+      "offset": 56,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > sugar-syntax 1`] = `
 {
   "children": [

test/block-component.test.ts

@@ -315,6 +315,19 @@ describe('block-component', () => {
         expect(ast.children[1].attributes).toEqual({})
         expect(ast.children[0].data.hProperties).toEqual(ast.children[1].data.hProperties)
       }
+    },
+    'slot-attributes': {
+      markdown: [
+        '::container-component',
+        '#slot{key="value"}',
+        'slot content',
+        '::'
+      ].join('\n'),
+      extra (_, ast) {
+        const slot = ast.children[0].children[0]
+        expect(slot.type).toBe('componentContainerSection')
+        expect(slot.attributes).toEqual({ key: 'value' })
+      }
     }
   })
 })