fix: Parse binding component AST to markdown (#68)

Co-authored-by: Farnabaz <[email protected]>
nuxtlabs · Nov 28, 2023 · e776b04 · e776b04
1 parent bd3f4c4
commit e776b04
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 3 deletions.
diff --git a/src/to-markdown.ts b/src/to-markdown.ts
@@ -61,7 +61,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     return `#${(node as any).name}\n${content(node, context)}`.trim()
   }
 
-  type NodeTextComponent = Parents & { name: string; rawData: string }
+  type NodeTextComponent = Parents & { name: string; rawData: string; attributes: any }
   function textComponent (node: NodeTextComponent, _: any, context: any) {
     let value
     context.indexStack = context.stack
@@ -73,9 +73,9 @@ export default (opts: RemarkMDCOptions = {}) => {
       value = `[${content(node, context)}]${attributes(node, context)}`
     } else if (node.name === 'binding') {
       // Handle binding syntax
-      const attrs = (node as any).attributes || {}
+      const attrs = node.attributes || {}
       value = attrs.defaultValue
-        ? `{{ ${attrs.value} || ${JSON.stringify(attrs.defaultValue)} }}`
+        ? `{{ ${attrs.value} || '${attrs.defaultValue}' }}`
         : `{{ ${attrs.value} }}`
     } else {
       value = ':' + (node.name || '') + label(node, context) + attributes(node, context)

diff --git a/test/__snapshots__/inline-component.test.ts.snap b/test/__snapshots__/inline-component.test.ts.snap
@@ -1,5 +1,135 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`inline-component > binding 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "attributes": {
+            "defaultValue": undefined,
+            "value": "$doc.variable",
+          },
+          "data": {
+            "hName": "binding",
+            "hProperties": {
+              ":defaultValue": undefined,
+              "value": "$doc.variable",
+            },
+          },
+          "fmAttributes": {},
+          "name": "binding",
+          "position": {
+            "end": {
+              "column": 18,
+              "line": 1,
+              "offset": 17,
+            },
+            "start": {
+              "column": 3,
+              "line": 1,
+              "offset": 2,
+            },
+          },
+          "type": "textComponent",
+        },
+      ],
+      "position": {
+        "end": {
+          "column": 20,
+          "line": 1,
+          "offset": 19,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "paragraph",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 20,
+      "line": 1,
+      "offset": 19,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`inline-component > bindingWithDefault 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "attributes": {
+            "defaultValue": "mdc",
+            "value": "$doc.variable",
+          },
+          "data": {
+            "hName": "binding",
+            "hProperties": {
+              "defaultValue": "mdc",
+              "value": "$doc.variable",
+            },
+          },
+          "fmAttributes": {},
+          "name": "binding",
+          "position": {
+            "end": {
+              "column": 27,
+              "line": 1,
+              "offset": 26,
+            },
+            "start": {
+              "column": 3,
+              "line": 1,
+              "offset": 2,
+            },
+          },
+          "type": "textComponent",
+        },
+      ],
+      "position": {
+        "end": {
+          "column": 29,
+          "line": 1,
+          "offset": 28,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "paragraph",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 29,
+      "line": 1,
+      "offset": 28,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`inline-component > empty 1`] = `
 {
   "children": [

diff --git a/test/inline-component.test.ts b/test/inline-component.test.ts
@@ -21,6 +21,12 @@ describe('inline-component', () => {
     },
     underlined: {
       markdown: '**:component[text]{.class}**'
+    },
+    binding: {
+      markdown: '{{ $doc.variable }}'
+    },
+    bindingWithDefault: {
+      markdown: "{{ $doc.variable || 'mdc' }}"
     }
   })
 })