From dbaccb4b9d71c0cf01e0e18a990582c91612fd6a Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Fri, 17 Nov 2023 00:31:41 +0100
Subject: [PATCH 1/4] Parse and compile with componentCodeBlockProps

---
 playground/pages/index.vue                    |  11 +-
 src/frontmatter.ts                            |  32 +-
 src/index.ts                                  |  23 +-
 src/to-markdown.ts                            |   5 +-
 src/types.d.ts                                |   1 +
 .../block-component.test.ts.snap              | 306 ++++++++++++++++++
 test/block-component.test.ts                  |  67 ++++
 7 files changed, 430 insertions(+), 15 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 79d8c41c..413acf6f 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
-    <label for="">
-      <input v-model="mdcOptions.experimental.autoUnwrap" type="checkbox"> auto unwrap
+    <label for="autoUnwrap">
+      <input id="autoUnwrap" v-model="mdcOptions.experimental.autoUnwrap" type="checkbox"> auto unwrap
+    </label>
+    <label for="componentCodeBlockProps">
+      <input id="componentCodeBlockProps" v-model="mdcOptions.experimental.componentCodeBlockProps" type="checkbox">
+      Component props code block style
     </label>
     <div class="flex">
       <textarea v-model="markdown" class="flex-1" />
@@ -12,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const mdcOptions = ref({ experimental: { autoUnwrap: true } })
+const mdcOptions = ref({ experimental: { autoUnwrap: true, componentCodeBlockProps: false } })
 const markdown = ref(`# Hello World
 
 {{ $doc.name || 'Nuxt' }}
@@ -69,6 +73,7 @@ const md = useMarkdownGenerator(ast, mdcOptions)
   display: flex;
   width: 100%;
 }
+
 .flex-1 {
   flex: 1;
   height: calc(100vh - 40px);
diff --git a/src/frontmatter.ts b/src/frontmatter.ts
index 40e07794..98006082 100644
--- a/src/frontmatter.ts
+++ b/src/frontmatter.ts
@@ -1,7 +1,8 @@
 import yaml from 'js-yaml'
 import flat from 'flat'
 
-const FRONTMATTER_DELIMITER = '---'
+const FRONTMATTER_DELIMITER_DEFAULT = '---'
+const FRONTMATTER_DELIMITER_CODEBLOCK_STYLE = '```yaml'
 
 export function stringifyFrontMatter (data: any, content = '') {
   // flatten frontmatter data
@@ -17,17 +18,38 @@ export function stringifyFrontMatter (data: any, content = '') {
   }
 
   return [
-    FRONTMATTER_DELIMITER,
+    FRONTMATTER_DELIMITER_DEFAULT,
     yaml.dump(data, { lineWidth: -1 }).trim(),
-    FRONTMATTER_DELIMITER,
+    FRONTMATTER_DELIMITER_DEFAULT,
+    content
+  ].join('\n')
+}
+
+export function stringifyCodeBlockProps (data: any, content = '') {
+  // flatten frontmatter data
+  // convert `parent: { child: ... }` into flat keys `parent.child`
+  data = flat.flatten(data, {
+    // preserve arrays and their contents as is and do not walk through arrays
+    // flatten array will be like `parent.0.child` and `parent.1.child` with is not readable
+    safe: true
+  })
+
+  if (!Object.keys(data).length) {
+    return ''
+  }
+
+  return [
+    FRONTMATTER_DELIMITER_CODEBLOCK_STYLE,
+    yaml.dump(data, { lineWidth: -1 }).trim(),
+    '```',
     content
   ].join('\n')
 }
 
 export function parseFrontMatter (content: string) {
   let data: any = {}
-  if (content.startsWith(FRONTMATTER_DELIMITER)) {
-    const idx = content.indexOf('\n' + FRONTMATTER_DELIMITER)
+  if (content.startsWith(FRONTMATTER_DELIMITER_DEFAULT)) {
+    const idx = content.indexOf('\n' + FRONTMATTER_DELIMITER_DEFAULT)
     if (idx !== -1) {
       const frontmatter = content.slice(4, idx)
       if (frontmatter) {
diff --git a/src/index.ts b/src/index.ts
index 9c71e4c1..beac5117 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,11 +17,17 @@ declare module 'unist' {
   }
 }
 
+interface ChildrenNode extends Node {
+  value?: unknown
+  lang?: string
+}
+
 interface ComponentNode extends Node {
   name?: string
   attributes?: Record<string, any>
   fmAttributes?: Record<string, any>
   rawData?: string
+  children?: ChildrenNode[];
 }
 
 export default <Plugin<Array<RemarkMDCOptions>>> function (opts: RemarkMDCOptions = {}) {
@@ -79,14 +85,21 @@ function bindNode (node: ComponentNode) {
 }
 
 function getNodeData (node: ComponentNode) {
-  if (!node.rawData) {
-    return {}
+  if (node.rawData) {
+    const yaml = node.rawData.replace(/\s-+$/, '')
+    const { data } = parseFrontMatter(toFrontMatter(yaml))
+    return data
   }
 
-  const yaml = node.rawData.replace(/\s-+$/, '')
-  const { data } = parseFrontMatter(toFrontMatter(yaml))
+  if (node.children?.length && node.children[0].type === 'code' && node.children[0].lang === 'yaml') {
+    const yaml = node.children[0].value as string
+    const { data } = parseFrontMatter(toFrontMatter(yaml))
+    node.rawData = yaml + '\n---'
+    node.children!.splice(0, 1)
+    return data
+  }
 
-  return data
+  return {}
 }
 
 function bindData (data: Record<string, any>) {
diff --git a/src/to-markdown.ts b/src/to-markdown.ts
index 743f6872..924043e6 100644
--- a/src/to-markdown.ts
+++ b/src/to-markdown.ts
@@ -7,7 +7,7 @@ import { stringifyEntitiesLight } from 'stringify-entities'
 import { type Parents } from 'mdast-util-to-markdown/lib/types'
 import { type State, type Info, type Unsafe, defaultHandlers } from 'mdast-util-to-markdown'
 import { containerFlow, containerPhrasing, checkQuote } from './mdast-util-to-markdown'
-import { stringifyFrontMatter } from './frontmatter'
+import { stringifyFrontMatter, stringifyCodeBlockProps } from './frontmatter'
 import type { RemarkMDCOptions } from './types'
 import { NON_UNWRAPABLE_TYPES } from './utils'
 import { Container } from './micromark-extension/types'
@@ -91,7 +91,8 @@ export default (opts: RemarkMDCOptions = {}) => {
 
     // Convert attributes to YAML FrontMatter format
     if (node.fmAttributes && Object.keys(node.fmAttributes).length > 0) {
-      value += '\n' + stringifyFrontMatter(node.fmAttributes).trim()
+      const fm = opts?.experimental?.componentCodeBlockProps ? stringifyCodeBlockProps(node.fmAttributes) : stringifyFrontMatter(node.fmAttributes)
+      value += '\n' + fm.trim()
     }
 
     // Move default slot's children to the beginning of the content
diff --git a/src/types.d.ts b/src/types.d.ts
index 409287ec..50d01495 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -8,5 +8,6 @@ export interface RemarkMDCOptions {
   components?: ComponentHanlder[]
   experimental?: {
     autoUnwrap?: boolean
+    componentCodeBlockProps?: boolean
   }
 }
diff --git a/test/__snapshots__/block-component.test.ts.snap b/test/__snapshots__/block-component.test.ts.snap
index b67344bc..ced483e5 100644
--- a/test/__snapshots__/block-component.test.ts.snap
+++ b/test/__snapshots__/block-component.test.ts.snap
@@ -466,6 +466,132 @@ array:
 }
 `;
 
+exports[`block-component > frontmatterYaml 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 79,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "key: value
+array:
+  - item
+  - itemKey: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 79,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`block-component > frontmatterYaml1 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+        "key2": {
+          "subkey": "value",
+          "subkey2": "value",
+        },
+      },
+      "name": "with-frontmatter",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 11,
+          "offset": 118,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "key: value
+key2:
+  subkey: value
+  subkey2: value
+array:
+  - item
+  - itemKey: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 11,
+      "offset": 118,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > ignore-code-fence 1`] = `
 {
   "children": [
@@ -809,6 +935,186 @@ array:
 }
 `;
 
+exports[`block-component > nested-component-yaml 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "children": [
+            {
+              "position": {
+                "end": {
+                  "column": 13,
+                  "line": 8,
+                  "offset": 110,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 8,
+                  "offset": 98,
+                },
+              },
+              "type": "text",
+              "value": "Default slot",
+            },
+          ],
+          "position": {
+            "end": {
+              "column": 13,
+              "line": 8,
+              "offset": 110,
+            },
+            "start": {
+              "column": 1,
+              "line": 8,
+              "offset": 98,
+            },
+          },
+          "type": "paragraph",
+        },
+        {
+          "attributes": {},
+          "children": [
+            {
+              "children": [
+                {
+                  "position": {
+                    "end": {
+                      "column": 21,
+                      "line": 11,
+                      "offset": 148,
+                    },
+                    "start": {
+                      "column": 1,
+                      "line": 11,
+                      "offset": 128,
+                    },
+                  },
+                  "type": "text",
+                  "value": "Secondary slot value",
+                },
+              ],
+              "position": {
+                "end": {
+                  "column": 21,
+                  "line": 11,
+                  "offset": 148,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 11,
+                  "offset": 128,
+                },
+              },
+              "type": "paragraph",
+            },
+            {
+              "attributes": {},
+              "children": [],
+              "data": {
+                "hName": "hello",
+                "hProperties": {
+                  "key": "value",
+                },
+              },
+              "fmAttributes": {
+                "key": "value",
+              },
+              "name": "hello",
+              "position": {
+                "end": {
+                  "column": 6,
+                  "line": 17,
+                  "offset": 195,
+                },
+                "start": {
+                  "column": 3,
+                  "line": 13,
+                  "offset": 152,
+                },
+              },
+              "rawData": "key: value
+---",
+              "type": "containerComponent",
+            },
+          ],
+          "data": {
+            "hName": "component-slot",
+            "hProperties": {
+              "v-slot:secondary-slot": "",
+            },
+          },
+          "name": "secondary-slot",
+          "position": {
+            "end": {
+              "column": 3,
+              "line": 18,
+              "offset": 198,
+            },
+            "start": {
+              "column": 2,
+              "line": 10,
+              "offset": 113,
+            },
+          },
+          "type": "componentContainerSection",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-and-nested-component",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-and-nested-component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 18,
+          "offset": 198,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "key: value
+array:
+  - item
+  - itemKey: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 18,
+      "offset": 198,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > section-order 1`] = `
 {
   "children": [
diff --git a/test/block-component.test.ts b/test/block-component.test.ts
index 913c8d4c..fda18dc0 100644
--- a/test/block-component.test.ts
+++ b/test/block-component.test.ts
@@ -45,6 +45,73 @@ describe('block-component', () => {
         '::'
       ].join('\n')
     },
+    frontmatterYaml: {
+      markdown: '::with-frontmatter\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockProps: true
+        }
+      }
+    },
+    frontmatterYaml1: {
+      markdown: [
+        '::with-frontmatter',
+        '```yaml',
+        'key: value',
+        'key2:',
+        '  subkey: value',
+        '  subkey2: value',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        '```',
+        '::'
+      ].join('\n'),
+      expected: [
+        '::with-frontmatter',
+        '```yaml',
+        'key: value',
+        'key2.subkey: value',
+        'key2.subkey2: value',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        '```',
+        '::'
+      ].join('\n'),
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockProps: true
+        }
+      }
+    },
+    'nested-component-yaml': {
+      markdown: [
+        '::with-frontmatter-and-nested-component',
+        '```yaml',
+        'key: value',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        '```',
+        'Default slot',
+        '',
+        '#secondary-slot',
+        'Secondary slot value',
+        '',
+        '  :::hello',
+        '  ```yaml',
+        '  key: value',
+        '  ```',
+        '  :::',
+        '::'
+      ].join('\n'),
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockProps: true
+        }
+      }
+    },
     'nested-component': {
       markdown: [
         '::with-frontmatter-and-nested-component',

From d813eeb157955c5471045d7c6b6332226746fbf6 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Sun, 18 Feb 2024 00:56:56 +0100
Subject: [PATCH 2/4] Prevent codeBlock used as slot like CodeGroup

---
 src/index.ts                                  |   8 +-
 .../block-component.test.ts.snap              | 110 ++++++++++++++----
 test/block-component.test.ts                  |  16 ++-
 3 files changed, 105 insertions(+), 29 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index beac5117..59232d3c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ declare module 'unist' {
 interface ChildrenNode extends Node {
   value?: unknown
   lang?: string
+  meta?: string
 }
 
 interface ComponentNode extends Node {
@@ -91,7 +92,12 @@ function getNodeData (node: ComponentNode) {
     return data
   }
 
-  if (node.children?.length && node.children[0].type === 'code' && node.children[0].lang === 'yaml') {
+  if (
+    node.children?.length &&
+    node.children[0].type === 'code' &&
+    node.children[0].lang === 'yaml' &&
+    node.children[0].meta === null
+  ) {
     const yaml = node.children[0].value as string
     const { data } = parseFrontMatter(toFrontMatter(yaml))
     node.rawData = yaml + '\n---'
diff --git a/test/__snapshots__/block-component.test.ts.snap b/test/__snapshots__/block-component.test.ts.snap
index ced483e5..6f668e44 100644
--- a/test/__snapshots__/block-component.test.ts.snap
+++ b/test/__snapshots__/block-component.test.ts.snap
@@ -473,7 +473,7 @@ exports[`block-component > frontmatterYaml 1`] = `
       "attributes": {},
       "children": [],
       "data": {
-        "hName": "with-frontmatter",
+        "hName": "with-frontmatter-yaml",
         "hProperties": {
           ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
           "key": "value",
@@ -488,12 +488,12 @@ exports[`block-component > frontmatterYaml 1`] = `
         ],
         "key": "value",
       },
-      "name": "with-frontmatter",
+      "name": "with-frontmatter-yaml",
       "position": {
         "end": {
           "column": 3,
           "line": 8,
-          "offset": 79,
+          "offset": 84,
         },
         "start": {
           "column": 1,
@@ -513,7 +513,7 @@ array:
     "end": {
       "column": 3,
       "line": 8,
-      "offset": 79,
+      "offset": 84,
     },
     "start": {
       "column": 1,
@@ -532,7 +532,7 @@ exports[`block-component > frontmatterYaml1 1`] = `
       "attributes": {},
       "children": [],
       "data": {
-        "hName": "with-frontmatter",
+        "hName": "with-frontmatter-yaml1",
         "hProperties": {
           ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
           ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
@@ -552,12 +552,12 @@ exports[`block-component > frontmatterYaml1 1`] = `
           "subkey2": "value",
         },
       },
-      "name": "with-frontmatter",
+      "name": "with-frontmatter-yaml1",
       "position": {
         "end": {
           "column": 3,
           "line": 11,
-          "offset": 118,
+          "offset": 124,
         },
         "start": {
           "column": 1,
@@ -580,7 +580,69 @@ array:
     "end": {
       "column": 3,
       "line": 11,
-      "offset": 118,
+      "offset": 124,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`block-component > frontmatterYamlOnly 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml",
+          "meta": "[yaml]",
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 4,
+              "offset": 52,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "yaml code",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-only",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-only",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 5,
+          "offset": 55,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 5,
+      "offset": 55,
     },
     "start": {
       "column": 1,
@@ -948,12 +1010,12 @@ exports[`block-component > nested-component-yaml 1`] = `
                 "end": {
                   "column": 13,
                   "line": 8,
-                  "offset": 110,
+                  "offset": 115,
                 },
                 "start": {
                   "column": 1,
                   "line": 8,
-                  "offset": 98,
+                  "offset": 103,
                 },
               },
               "type": "text",
@@ -964,12 +1026,12 @@ exports[`block-component > nested-component-yaml 1`] = `
             "end": {
               "column": 13,
               "line": 8,
-              "offset": 110,
+              "offset": 115,
             },
             "start": {
               "column": 1,
               "line": 8,
-              "offset": 98,
+              "offset": 103,
             },
           },
           "type": "paragraph",
@@ -984,12 +1046,12 @@ exports[`block-component > nested-component-yaml 1`] = `
                     "end": {
                       "column": 21,
                       "line": 11,
-                      "offset": 148,
+                      "offset": 153,
                     },
                     "start": {
                       "column": 1,
                       "line": 11,
-                      "offset": 128,
+                      "offset": 133,
                     },
                   },
                   "type": "text",
@@ -1000,12 +1062,12 @@ exports[`block-component > nested-component-yaml 1`] = `
                 "end": {
                   "column": 21,
                   "line": 11,
-                  "offset": 148,
+                  "offset": 153,
                 },
                 "start": {
                   "column": 1,
                   "line": 11,
-                  "offset": 128,
+                  "offset": 133,
                 },
               },
               "type": "paragraph",
@@ -1027,12 +1089,12 @@ exports[`block-component > nested-component-yaml 1`] = `
                 "end": {
                   "column": 6,
                   "line": 17,
-                  "offset": 195,
+                  "offset": 200,
                 },
                 "start": {
                   "column": 3,
                   "line": 13,
-                  "offset": 152,
+                  "offset": 157,
                 },
               },
               "rawData": "key: value
@@ -1051,19 +1113,19 @@ exports[`block-component > nested-component-yaml 1`] = `
             "end": {
               "column": 3,
               "line": 18,
-              "offset": 198,
+              "offset": 203,
             },
             "start": {
               "column": 2,
               "line": 10,
-              "offset": 113,
+              "offset": 118,
             },
           },
           "type": "componentContainerSection",
         },
       ],
       "data": {
-        "hName": "with-frontmatter-and-nested-component",
+        "hName": "with-frontmatter-and-nested-component-yaml",
         "hProperties": {
           ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
           "key": "value",
@@ -1078,12 +1140,12 @@ exports[`block-component > nested-component-yaml 1`] = `
         ],
         "key": "value",
       },
-      "name": "with-frontmatter-and-nested-component",
+      "name": "with-frontmatter-and-nested-component-yaml",
       "position": {
         "end": {
           "column": 3,
           "line": 18,
-          "offset": 198,
+          "offset": 203,
         },
         "start": {
           "column": 1,
@@ -1103,7 +1165,7 @@ array:
     "end": {
       "column": 3,
       "line": 18,
-      "offset": 198,
+      "offset": 203,
     },
     "start": {
       "column": 1,
diff --git a/test/block-component.test.ts b/test/block-component.test.ts
index fda18dc0..faeb4d9b 100644
--- a/test/block-component.test.ts
+++ b/test/block-component.test.ts
@@ -46,7 +46,7 @@ describe('block-component', () => {
       ].join('\n')
     },
     frontmatterYaml: {
-      markdown: '::with-frontmatter\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
+      markdown: '::with-frontmatter-yaml\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
       mdcOptions: {
         experimental: {
           componentCodeBlockProps: true
@@ -55,7 +55,7 @@ describe('block-component', () => {
     },
     frontmatterYaml1: {
       markdown: [
-        '::with-frontmatter',
+        '::with-frontmatter-yaml1',
         '```yaml',
         'key: value',
         'key2:',
@@ -68,7 +68,7 @@ describe('block-component', () => {
         '::'
       ].join('\n'),
       expected: [
-        '::with-frontmatter',
+        '::with-frontmatter-yaml1',
         '```yaml',
         'key: value',
         'key2.subkey: value',
@@ -87,7 +87,7 @@ describe('block-component', () => {
     },
     'nested-component-yaml': {
       markdown: [
-        '::with-frontmatter-and-nested-component',
+        '::with-frontmatter-and-nested-component-yaml',
         '```yaml',
         'key: value',
         'array:',
@@ -112,6 +112,14 @@ describe('block-component', () => {
         }
       }
     },
+    frontmatterYamlOnly: {
+      markdown: '::with-frontmatter-only\n```yaml [yaml]\nyaml code\n```\n::',
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockProps: true
+        }
+      }
+    },
     'nested-component': {
       markdown: [
         '::with-frontmatter-and-nested-component',

From b1dcb73d6e3af047a76d4a65067f0d86ae2ba8db Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Thu, 16 May 2024 05:26:41 +0200
Subject: [PATCH 3/4] Use yaml [props] + own test file

---
 playground/pages/index.vue                    |   6 +-
 src/frontmatter.ts                            |   2 +-
 src/index.ts                                  |   4 +-
 src/to-markdown.ts                            |  24 +-
 src/types.d.ts                                |   2 +-
 .../block-component.test.ts.snap              | 368 ------------
 .../codeblock-props.test.ts.snap              | 562 ++++++++++++++++++
 test/block-component.test.ts                  |  75 ---
 test/codeblock-props.test.ts                  | 120 ++++
 9 files changed, 701 insertions(+), 462 deletions(-)
 create mode 100644 test/__snapshots__/codeblock-props.test.ts.snap
 create mode 100644 test/codeblock-props.test.ts

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 39c89779..5bc7d652 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -3,8 +3,8 @@
     <label for="autoUnwrap">
       <input id="autoUnwrap" v-model="mdcOptions.experimental.autoUnwrap" type="checkbox"> auto unwrap
     </label>
-    <label for="componentCodeBlockProps">
-      <input id="componentCodeBlockProps" v-model="mdcOptions.experimental.componentCodeBlockProps" type="checkbox">
+    <label for="componentCodeBlockYamlProps">
+      <input id="componentCodeBlockYamlProps" v-model="mdcOptions.experimental.componentCodeBlockYamlProps" type="checkbox">
       Component props code block style
     </label>
     <div class="flex">
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const mdcOptions = ref({ experimental: { autoUnwrap: true, componentCodeBlockProps: false } })
+const mdcOptions = ref({ experimental: { autoUnwrap: true, componentCodeBlockYamlProps: false } })
 const markdown = ref(`# Hello World
 
 {{ $doc.name || 'Nuxt' }}
diff --git a/src/frontmatter.ts b/src/frontmatter.ts
index 7269be13..9325ae20 100644
--- a/src/frontmatter.ts
+++ b/src/frontmatter.ts
@@ -2,7 +2,7 @@ import yaml from 'js-yaml'
 import * as flat from 'flat'
 
 const FRONTMATTER_DELIMITER_DEFAULT = '---'
-const FRONTMATTER_DELIMITER_CODEBLOCK_STYLE = '```yaml'
+const FRONTMATTER_DELIMITER_CODEBLOCK_STYLE = '```yaml [props]'
 
 export function stringifyFrontMatter (data: any, content = '') {
   if (!Object.keys(data).length) {
diff --git a/src/index.ts b/src/index.ts
index 0e4e5b25..6efbca60 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -28,7 +28,7 @@ interface ComponentNode extends Node {
   attributes?: Record<string, any>
   fmAttributes?: Record<string, any>
   rawData?: string
-  children?: ChildrenNode[];
+  children?: ChildrenNode[]
 }
 
 export default <Plugin<Array<RemarkMDCOptions>>> function (opts: RemarkMDCOptions = {}) {
@@ -96,7 +96,7 @@ function getNodeData (node: ComponentNode) {
     node.children?.length &&
     node.children[0].type === 'code' &&
     node.children[0].lang === 'yaml' &&
-    node.children[0].meta === null
+    node.children[0].meta === '[props]'
   ) {
     const yaml = node.children[0].value as string
     const { data } = parseFrontMatter(toFrontMatter(yaml))
diff --git a/src/to-markdown.ts b/src/to-markdown.ts
index 74c88e09..679bf4ba 100644
--- a/src/to-markdown.ts
+++ b/src/to-markdown.ts
@@ -7,7 +7,7 @@ import { stringifyEntitiesLight } from 'stringify-entities'
 import type { Parents, RootContent } from 'mdast'
 import { type State, type Info, type Unsafe, defaultHandlers } from 'mdast-util-to-markdown'
 import { containerFlow, containerPhrasing, checkQuote, inlineContainerFlow } from './mdast-util-to-markdown'
-import { stringifyFrontMatter } from './frontmatter'
+import { stringifyFrontMatter, stringifyCodeBlockProps } from './frontmatter'
 import type { RemarkMDCOptions } from './types'
 import { NON_UNWRAPPABLE_TYPES } from './utils'
 import { type Container } from './micromark-extension/types'
@@ -18,7 +18,7 @@ const shortcut = /^[^\t\n\r "#'.<=>`}]+$/
 const baseFence = 2
 
 // import { defaultHandlers } from 'mdast-util-to-markdown/lib/util/compile-pattern'
-function compilePattern(pattern: Unsafe) {
+function compilePattern (pattern: Unsafe) {
   if (!pattern._compiled) {
     const before =
       (pattern.atBreak ? '[\\r\\n][\\t ]*' : '') +
@@ -53,7 +53,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     }
   }
 
-  function componentContainerSection(node: NodeComponentContainerSection, _: any, context: any) {
+  function componentContainerSection (node: NodeComponentContainerSection, _: any, context: any) {
     context.indexStack = context.stack
 
     experimentalAutoUnwrap(node as any)
@@ -62,7 +62,7 @@ export default (opts: RemarkMDCOptions = {}) => {
   }
 
   type NodeTextComponent = Parents & { name: string; rawData: string; attributes: any }
-  function textComponent(node: NodeTextComponent, _: any, context: any) {
+  function textComponent (node: NodeTextComponent, _: any, context: any) {
     let value
     context.indexStack = context.stack
 
@@ -87,7 +87,7 @@ export default (opts: RemarkMDCOptions = {}) => {
 
   type NodeContainerComponent = Parents & { name: string; fmAttributes?: Record<string, any> }
   let nest = 0
-  function containerComponent(node: NodeContainerComponent, _: any, context: any) {
+  function containerComponent (node: NodeContainerComponent, _: any, context: any) {
     context.indexStack = context.stack
     const prefix = ':'.repeat(baseFence + nest)
     nest += 1
@@ -120,7 +120,7 @@ export default (opts: RemarkMDCOptions = {}) => {
           acc[key] = value2
           return acc
         }, {} as Record<string, any>)
-      const fm = opts?.experimental?.componentCodeBlockProps ? stringifyCodeBlockProps(node.fmAttributes) : stringifyFrontMatter(attrs)
+      const fm = opts?.experimental?.componentCodeBlockYamlProps ? stringifyCodeBlockProps(attrs) : stringifyFrontMatter(attrs)
       value += '\n' + fm.trim()
     }
 
@@ -152,11 +152,11 @@ export default (opts: RemarkMDCOptions = {}) => {
     return value
   }
 
-  containerComponent.peek = function peekComponent() {
+  containerComponent.peek = function peekComponent () {
     return ':'
   }
 
-  function label(node: Parents, context: State) {
+  function label (node: Parents, context: State) {
     let label: any = node
 
     if ((node.type as string) === 'containerComponent') {
@@ -172,7 +172,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     return value ? '[' + value + ']' : ''
   }
 
-  function attributes(node: any, context: State) {
+  function attributes (node: any, context: State) {
     const quote = checkQuote(context)
     const subset = (node.type as string) === 'textComponent' ? [quote] : [quote, '\n', '\r']
     const attrs = Object.fromEntries(
@@ -228,17 +228,17 @@ export default (opts: RemarkMDCOptions = {}) => {
 
     return values.length ? '{' + values.join(' ') + '}' : ''
 
-    function quoted(key: string, value: string) {
+    function quoted (key: string, value: string) {
       return key + '=' + quote + stringifyEntitiesLight(value, { subset }) + quote
     }
   }
 
-  function content(node: any, context: State) {
+  function content (node: any, context: State) {
     const content = inlineComponentLabel(node) ? Object.assign({}, node, { children: node.children.slice(1) }) : node
     return node.type === 'textComponent' ? inlineContainerFlow(content, context) : containerFlow(content, context)
   }
 
-  function inlineComponentLabel(node: any) {
+  function inlineComponentLabel (node: any) {
     return node.children && node.children[0] && node.children[0].data && node.children[0].data.componentLabel
   }
 
diff --git a/src/types.d.ts b/src/types.d.ts
index 74379369..444d6fd8 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -8,6 +8,6 @@ export interface RemarkMDCOptions {
   components?: ComponentHandler[]
   experimental?: {
     autoUnwrap?: boolean
-    componentCodeBlockProps?: boolean
+    componentCodeBlockYamlProps?: boolean
   }
 }
diff --git a/test/__snapshots__/block-component.test.ts.snap b/test/__snapshots__/block-component.test.ts.snap
index 050a67e3..c4bf81b4 100644
--- a/test/__snapshots__/block-component.test.ts.snap
+++ b/test/__snapshots__/block-component.test.ts.snap
@@ -466,194 +466,6 @@ array:
 }
 `;
 
-exports[`block-component > frontmatterYaml 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": 84,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 8,
-      "offset": 84,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
-exports[`block-component > frontmatterYaml1 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [],
-      "data": {
-        "hName": "with-frontmatter-yaml1",
-        "hProperties": {
-          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
-          ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
-          "key": "value",
-        },
-      },
-      "fmAttributes": {
-        "array": [
-          "item",
-          {
-            "itemKey": "value",
-          },
-        ],
-        "key": "value",
-        "key2": {
-          "subkey": "value",
-          "subkey2": "value",
-        },
-      },
-      "name": "with-frontmatter-yaml1",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 11,
-          "offset": 124,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-key2:
-  subkey: value
-  subkey2: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 11,
-      "offset": 124,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
-exports[`block-component > frontmatterYamlOnly 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [
-        {
-          "lang": "yaml",
-          "meta": "[yaml]",
-          "position": {
-            "end": {
-              "column": 4,
-              "line": 4,
-              "offset": 52,
-            },
-            "start": {
-              "column": 1,
-              "line": 2,
-              "offset": 24,
-            },
-          },
-          "type": "code",
-          "value": "yaml code",
-        },
-      ],
-      "data": {
-        "hName": "with-frontmatter-only",
-        "hProperties": {},
-      },
-      "fmAttributes": {},
-      "name": "with-frontmatter-only",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 5,
-          "offset": 55,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 5,
-      "offset": 55,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
 exports[`block-component > ignore-code-fence 1`] = `
 {
   "children": [
@@ -997,186 +809,6 @@ array:
 }
 `;
 
-exports[`block-component > nested-component-yaml 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [
-        {
-          "children": [
-            {
-              "position": {
-                "end": {
-                  "column": 13,
-                  "line": 8,
-                  "offset": 115,
-                },
-                "start": {
-                  "column": 1,
-                  "line": 8,
-                  "offset": 103,
-                },
-              },
-              "type": "text",
-              "value": "Default slot",
-            },
-          ],
-          "position": {
-            "end": {
-              "column": 13,
-              "line": 8,
-              "offset": 115,
-            },
-            "start": {
-              "column": 1,
-              "line": 8,
-              "offset": 103,
-            },
-          },
-          "type": "paragraph",
-        },
-        {
-          "attributes": {},
-          "children": [
-            {
-              "children": [
-                {
-                  "position": {
-                    "end": {
-                      "column": 21,
-                      "line": 11,
-                      "offset": 153,
-                    },
-                    "start": {
-                      "column": 1,
-                      "line": 11,
-                      "offset": 133,
-                    },
-                  },
-                  "type": "text",
-                  "value": "Secondary slot value",
-                },
-              ],
-              "position": {
-                "end": {
-                  "column": 21,
-                  "line": 11,
-                  "offset": 153,
-                },
-                "start": {
-                  "column": 1,
-                  "line": 11,
-                  "offset": 133,
-                },
-              },
-              "type": "paragraph",
-            },
-            {
-              "attributes": {},
-              "children": [],
-              "data": {
-                "hName": "hello",
-                "hProperties": {
-                  "key": "value",
-                },
-              },
-              "fmAttributes": {
-                "key": "value",
-              },
-              "name": "hello",
-              "position": {
-                "end": {
-                  "column": 6,
-                  "line": 17,
-                  "offset": 200,
-                },
-                "start": {
-                  "column": 3,
-                  "line": 13,
-                  "offset": 157,
-                },
-              },
-              "rawData": "key: value
----",
-              "type": "containerComponent",
-            },
-          ],
-          "data": {
-            "hName": "component-slot",
-            "hProperties": {
-              "v-slot:secondary-slot": "",
-            },
-          },
-          "name": "secondary-slot",
-          "position": {
-            "end": {
-              "column": 3,
-              "line": 18,
-              "offset": 203,
-            },
-            "start": {
-              "column": 2,
-              "line": 10,
-              "offset": 118,
-            },
-          },
-          "type": "componentContainerSection",
-        },
-      ],
-      "data": {
-        "hName": "with-frontmatter-and-nested-component-yaml",
-        "hProperties": {
-          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
-          "key": "value",
-        },
-      },
-      "fmAttributes": {
-        "array": [
-          "item",
-          {
-            "itemKey": "value",
-          },
-        ],
-        "key": "value",
-      },
-      "name": "with-frontmatter-and-nested-component-yaml",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 18,
-          "offset": 203,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 18,
-      "offset": 203,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
 exports[`block-component > section-order 1`] = `
 {
   "children": [
diff --git a/test/__snapshots__/codeblock-props.test.ts.snap b/test/__snapshots__/codeblock-props.test.ts.snap
new file mode 100644
index 00000000..c00c3c04
--- /dev/null
+++ b/test/__snapshots__/codeblock-props.test.ts.snap
@@ -0,0 +1,562 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic > YamlProps 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[`basic > nested-component-yamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "children": [
+            {
+              "position": {
+                "end": {
+                  "column": 13,
+                  "line": 8,
+                  "offset": 123,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 8,
+                  "offset": 111,
+                },
+              },
+              "type": "text",
+              "value": "Default slot",
+            },
+          ],
+          "position": {
+            "end": {
+              "column": 13,
+              "line": 8,
+              "offset": 123,
+            },
+            "start": {
+              "column": 1,
+              "line": 8,
+              "offset": 111,
+            },
+          },
+          "type": "paragraph",
+        },
+        {
+          "attributes": {},
+          "children": [
+            {
+              "children": [
+                {
+                  "position": {
+                    "end": {
+                      "column": 21,
+                      "line": 11,
+                      "offset": 161,
+                    },
+                    "start": {
+                      "column": 1,
+                      "line": 11,
+                      "offset": 141,
+                    },
+                  },
+                  "type": "text",
+                  "value": "Secondary slot value",
+                },
+              ],
+              "position": {
+                "end": {
+                  "column": 21,
+                  "line": 11,
+                  "offset": 161,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 11,
+                  "offset": 141,
+                },
+              },
+              "type": "paragraph",
+            },
+            {
+              "attributes": {},
+              "children": [],
+              "data": {
+                "hName": "hello",
+                "hProperties": {
+                  "key": "value",
+                },
+              },
+              "fmAttributes": {
+                "key": "value",
+              },
+              "name": "hello",
+              "position": {
+                "end": {
+                  "column": 6,
+                  "line": 17,
+                  "offset": 216,
+                },
+                "start": {
+                  "column": 3,
+                  "line": 13,
+                  "offset": 165,
+                },
+              },
+              "rawData": "key: value
+---",
+              "type": "containerComponent",
+            },
+          ],
+          "data": {
+            "hName": "component-slot",
+            "hProperties": {
+              "v-slot:secondary-slot": "",
+            },
+          },
+          "name": "secondary-slot",
+          "position": {
+            "end": {
+              "column": 3,
+              "line": 18,
+              "offset": 219,
+            },
+            "start": {
+              "column": 2,
+              "line": 10,
+              "offset": 126,
+            },
+          },
+          "type": "componentContainerSection",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-and-nested-component-yaml",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-and-nested-component-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 18,
+          "offset": 219,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 18,
+      "offset": 219,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml",
+          "meta": null,
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 81,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 84,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 84,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps2 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml[props]",
+          "meta": null,
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 88,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 91,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 91,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps3 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml",
+          "meta": "[yaml]",
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 88,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 91,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 91,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > shouldConvertYamlProps 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": 80,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "
+array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 80,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > yamlProps1 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter-yaml1",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+        "key2": {
+          "subkey": "value",
+          "subkey2": "value",
+        },
+      },
+      "name": "with-frontmatter-yaml1",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 11,
+          "offset": 132,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "key: value
+key2:
+  subkey: value
+  subkey2: value
+array:
+  - item
+  - itemKey: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 11,
+      "offset": 132,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
diff --git a/test/block-component.test.ts b/test/block-component.test.ts
index 192b46ca..6442c090 100644
--- a/test/block-component.test.ts
+++ b/test/block-component.test.ts
@@ -47,81 +47,6 @@ describe('block-component', () => {
         '::'
       ].join('\n')
     },
-    frontmatterYaml: {
-      markdown: '::with-frontmatter-yaml\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    frontmatterYaml1: {
-      markdown: [
-        '::with-frontmatter-yaml1',
-        '```yaml',
-        'key: value',
-        'key2:',
-        '  subkey: value',
-        '  subkey2: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        '::'
-      ].join('\n'),
-      expected: [
-        '::with-frontmatter-yaml1',
-        '```yaml',
-        'key: value',
-        'key2.subkey: value',
-        'key2.subkey2: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        '::'
-      ].join('\n'),
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    'nested-component-yaml': {
-      markdown: [
-        '::with-frontmatter-and-nested-component-yaml',
-        '```yaml',
-        'key: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        'Default slot',
-        '',
-        '#secondary-slot',
-        'Secondary slot value',
-        '',
-        '  :::hello',
-        '  ```yaml',
-        '  key: value',
-        '  ```',
-        '  :::',
-        '::'
-      ].join('\n'),
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    frontmatterYamlOnly: {
-      markdown: '::with-frontmatter-only\n```yaml [yaml]\nyaml code\n```\n::',
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
     'nested-component': {
       markdown: [
         '::with-frontmatter-and-nested-component',
diff --git a/test/codeblock-props.test.ts b/test/codeblock-props.test.ts
new file mode 100644
index 00000000..c89f1fcb
--- /dev/null
+++ b/test/codeblock-props.test.ts
@@ -0,0 +1,120 @@
+import { expect, describe } from 'vitest'
+import { runMarkdownTests } from './utils'
+
+describe('basic', () => {
+  runMarkdownTests({
+    YamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml [props]\narray:\n  - item\n  - itemKey: value\nkey: value\n```\n::',
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({ array: ['item', { itemKey: 'value' }], key: 'value' })
+      }
+    },
+    notYamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({})
+      }
+    },
+    notYamlProps2: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml[props]\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::'
+    },
+    notYamlProps3: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml [yaml]\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::'
+    },
+    shouldConvertYamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      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::'
+    },
+    yamlProps1: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: [
+        '::with-frontmatter-yaml1',
+        '```yaml [props]',
+        'key: value',
+        'key2:',
+        '  subkey: value',
+        '  subkey2: value',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        '```',
+        '::'
+      ].join('\n'),
+      expected: [
+        '::with-frontmatter-yaml1',
+        '```yaml [props]',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        'key: value',
+        'key2.subkey: value',
+        'key2.subkey2: value',
+        '```',
+        '::'
+      ].join('\n')
+    },
+    'nested-component-yamlProps': {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: [
+        '::with-frontmatter-and-nested-component-yaml',
+        '```yaml [props]',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        'key: value',
+        '```',
+        'Default slot',
+        '',
+        '#secondary-slot',
+        'Secondary slot value',
+        '',
+        '  :::hello',
+        '  ```yaml [props]',
+        '  key: value',
+        '  ```',
+        '  :::',
+        '::'
+      ].join('\n'),
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({ array: ['item', { itemKey: 'value' }], key: 'value' })
+        expect(ast.children[0].children[1].children[1].fmAttributes).toEqual({ key: 'value' })
+      }
+    }
+  })
+})

From 0d6dd420065a04ed6480413eff1ee0559a1caa59 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Thu, 16 May 2024 05:33:28 +0200
Subject: [PATCH 4/4] Stringify with the same frontmatter flatten behavior

---
 src/frontmatter.ts           | 10 ++--------
 test/codeblock-props.test.ts |  5 +++--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/frontmatter.ts b/src/frontmatter.ts
index 9325ae20..340e557e 100644
--- a/src/frontmatter.ts
+++ b/src/frontmatter.ts
@@ -20,18 +20,12 @@ export function stringifyFrontMatter (data: any, content = '') {
 }
 
 export function stringifyCodeBlockProps (data: any, content = '') {
-  // flatten frontmatter data
-  // convert `parent: { child: ... }` into flat keys `parent.child`
-  data = flat.flatten(data, {
-    // preserve arrays and their contents as is and do not walk through arrays
-    // flatten array will be like `parent.0.child` and `parent.1.child` with is not readable
-    safe: true
-  })
-
   if (!Object.keys(data).length) {
     return ''
   }
 
+  data = flat.unflatten(data || {}, {})
+
   return [
     FRONTMATTER_DELIMITER_CODEBLOCK_STYLE,
     yaml.dump(data, { lineWidth: -1 }).trim(),
diff --git a/test/codeblock-props.test.ts b/test/codeblock-props.test.ts
index c89f1fcb..cd52da44 100644
--- a/test/codeblock-props.test.ts
+++ b/test/codeblock-props.test.ts
@@ -78,8 +78,9 @@ describe('basic', () => {
         '  - item',
         '  - itemKey: value',
         'key: value',
-        'key2.subkey: value',
-        'key2.subkey2: value',
+        'key2:',
+        '  subkey: value',
+        '  subkey2: value',
         '```',
         '::'
       ].join('\n')