fix: resolve experimental features conflict

Author: farnabaz

src/from-markdown.ts

@@ -12,18 +12,37 @@ import { NON_UNWRAPPABLE_TYPES } from './utils'
 export default (opts: RemarkMDCOptions = {}) => {
   const canContainEols = ['textComponent']
 
+  const experimentalCodeBlockYamlProps = (node: Container) => {
+    if (
+      node.children?.length &&
+      node.children[0].type === 'code' &&
+      node.children[0].lang === 'yaml' &&
+      node.children[0].meta === '[props]'
+    ) {
+      node.rawData = node.children[0].value as string
+      node.mdc = node.mdc || {}
+      node.mdc.codeBlockProps = true
+      node.children!.splice(0, 1)
+    }
+  }
   const experimentalAutoUnwrap = (node: Container) => {
     if (opts.experimental?.autoUnwrap && NON_UNWRAPPABLE_TYPES.includes(node.type)) {
       const nonSlotChildren = (node.children).filter((child: any) => child.type !== 'componentContainerSection')
       if (nonSlotChildren.length === 1 && !NON_UNWRAPPABLE_TYPES.includes(nonSlotChildren[0].type)) {
         const nonSlotChildIndex = node.children.indexOf(nonSlotChildren[0])
 
-        node.children.splice(nonSlotChildIndex, 1, ...(nonSlotChildren[0] as Container).children)
+        node.children.splice(nonSlotChildIndex, 1, ...((nonSlotChildren[0] as Container)?.children || []))
         node.mdc = node.mdc || {}
         node.mdc.unwrapped = nonSlotChildren[0].type
       }
     }
   }
+  const processNode = (node: Container) => {
+    if (opts.experimental?.componentCodeBlockYamlProps) {
+      experimentalCodeBlockYamlProps(node)
+    }
+    experimentalAutoUnwrap(node)
+  }
   const enter = {
     componentContainer: enterContainer,
     componentContainerSection: enterContainerSection,
@@ -109,7 +128,7 @@ export default (opts: RemarkMDCOptions = {}) => {
       container.rawData = dataSection?.rawData
     }
 
-    experimentalAutoUnwrap(container)
+    processNode(container)
 
     container.children = container.children.flatMap((child: any) => {
       if (child.rawData) {
@@ -153,7 +172,7 @@ export default (opts: RemarkMDCOptions = {}) => {
      */
     attemptClosingOpenListSection.call(this, section)
 
-    experimentalAutoUnwrap(section)
+    processNode(section)
 
     this.exit(token)
   }

src/index.ts

@@ -92,19 +92,6 @@ function getNodeData (node: ComponentNode) {
     return data
   }
 
-  if (
-    node.children?.length &&
-    node.children[0].type === 'code' &&
-    node.children[0].lang === 'yaml' &&
-    node.children[0].meta === '[props]'
-  ) {
-    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 {}
 }
 

src/micromark-extension/types.ts

@@ -11,6 +11,7 @@ export type Container = Parent & {
   rawData?: string
   mdc?: {
     unwrapped?: string
+    codeBlockProps?: boolean
   }
 }
 

src/to-markdown.ts

@@ -52,11 +52,14 @@ export default (opts: RemarkMDCOptions = {}) => {
       }
     }
   }
+  const processNode = (node: Container) => {
+    experimentalAutoUnwrap(node)
+  }
 
   function componentContainerSection (node: NodeComponentContainerSection, _: any, context: any) {
     context.indexStack = context.stack
 
-    experimentalAutoUnwrap(node as any)
+    processNode(node as any)
 
     return `#${(node as any).name}\n${content(node, context)}`.trim()
   }
@@ -134,7 +137,7 @@ export default (opts: RemarkMDCOptions = {}) => {
       ...slots
     ]
 
-    experimentalAutoUnwrap(node as any)
+    processNode(node as any)
 
     if ((node.type as string) === 'containerComponent') {
       subvalue = content(node, context)