fix(to-markdown): parse component props object (#84)

Co-authored-by: Farnabaz <[email protected]>
nuxtlabs · Nov 18, 2024 · 5d44379 · 5d44379
1 parent 74cee31
commit 5d44379
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 10 deletions.
diff --git a/src/to-markdown.ts b/src/to-markdown.ts
@@ -112,8 +112,8 @@ export default (opts: RemarkMDCOptions = {}) => {
       const attrs = Object.entries(fmAttributes)
         .sort(([key1], [key2]) => key1.localeCompare(key2))
         .reduce((acc, [key, value2]) => {
-          // Stringify only JSON objects. `{":key:": "value"}` can be used for binding data to frontmatter.
-          if (key?.startsWith(':') && typeof value2 !== 'string') {
+          // Parse only JSON objects. `{":key:": "value"}` can be used for binding data to frontmatter.
+          if (key?.startsWith(':') && isValidJSON(value2)) {
             try {
               value2 = JSON.parse(value2)
             } catch {

diff --git a/test/__snapshots__/codeblock-props.test.ts.snap b/test/__snapshots__/codeblock-props.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`basic > YamlProps 1`] = `
+exports[`codeblock-props > YamlProps 1`] = `
 {
   "children": [
     {
@@ -61,7 +61,7 @@ key: value",
 }
 `;
 
-exports[`basic > nested-component-yamlProps 1`] = `
+exports[`codeblock-props > nested-component-yamlProps 1`] = `
 {
   "children": [
     {
@@ -245,7 +245,7 @@ key: value",
 }
 `;
 
-exports[`basic > notYamlProps 1`] = `
+exports[`codeblock-props > notYamlProps 1`] = `
 {
   "children": [
     {
@@ -310,7 +310,7 @@ array:
 }
 `;
 
-exports[`basic > notYamlProps2 1`] = `
+exports[`codeblock-props > notYamlProps2 1`] = `
 {
   "children": [
     {
@@ -375,7 +375,7 @@ array:
 }
 `;
 
-exports[`basic > notYamlProps3 1`] = `
+exports[`codeblock-props > notYamlProps3 1`] = `
 {
   "children": [
     {
@@ -440,7 +440,7 @@ array:
 }
 `;
 
-exports[`basic > shouldConvertYamlProps 1`] = `
+exports[`codeblock-props > shouldConvertYamlProps 1`] = `
 {
   "children": [
     {
@@ -500,7 +500,66 @@ key: value
 }
 `;
 
-exports[`basic > yamlProps1 1`] = `
+exports[`codeblock-props > shouldConvertYamlPropsWithoutOption 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {
+          ":array": "["item",{"itemKey":"value"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 92,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 92,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`codeblock-props > yamlProps1 1`] = `
 {
   "children": [
     {

diff --git a/test/codeblock-props.test.ts b/test/codeblock-props.test.ts
@@ -1,7 +1,7 @@
 import { expect, describe } from 'vitest'
 import { runMarkdownTests } from './utils'
 
-describe('basic', () => {
+describe('codeblock-props', () => {
   runMarkdownTests({
     YamlProps: {
       mdcOptions: {
@@ -52,6 +52,10 @@ describe('basic', () => {
       markdown: '::with-frontmatter-yaml\n---\narray:\n  - item\n  - itemKey: value\nkey: value\n---\n::',
       expected: '::with-frontmatter-yaml\n```yaml [props]\narray:\n  - item\n  - itemKey: value\nkey: value\n```\n::'
     },
+    // shouldConvertYamlPropsWithoutOption: {
+    //   markdown: '::with-frontmatter-yaml\n```yaml [props]\narray:\n  - item\n  - itemKey: value\nkey: value\n```\n::',
+    //   expected: '::with-frontmatter-yaml\n---\narray:\n  - item\n  - itemKey: value\nkey: value\n---\n::'
+    // },
     yamlProps1: {
       mdcOptions: {
         experimental: {