Use yaml [props] + own test file

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' }}

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) {

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))

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
   }
 

src/types.d.ts

@@ -8,6 +8,6 @@ export interface RemarkMDCOptions {
   components?: ComponentHandler[]
   experimental?: {
     autoUnwrap?: boolean
-    componentCodeBlockProps?: boolean
+    componentCodeBlockYamlProps?: boolean
   }
 }