Merge branch 'main' into fix/parseComponentPropsObject

.github/workflows/ci.yml

@@ -13,15 +13,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '18'
-      - uses: pnpm/[email protected]
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 8
+          node-version: '20'
+      - run: corepack enable
       - run: pnpm install
       - run: pnpm dev:prepare
       - run: pnpm lint

package.json

@@ -20,7 +20,7 @@
     "dev:prepare": "nuxi prepare playground",
     "generate": "nuxi generate playground",
     "lint": "eslint --ext .js,.ts,.vue .",
-    "test": "pnpm lint && vitest run",
+    "test": "vitest run",
     "prepack": "pnpm build",
     "release": "release-it"
   },
@@ -74,5 +74,6 @@
     "hooks": {
       "after:bump": "npx changelogen@latest --no-commit --no-tag --output --r $(node -p \"require('./package.json').version\")"
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/from-markdown.ts

@@ -12,18 +12,39 @@ import { NON_UNWRAPPABLE_TYPES } from './utils'
 export default (opts: RemarkMDCOptions = {}) => {
   const canContainEols = ['textComponent']
 
+  const experimentalCodeBlockYamlProps = (node: Container) => {
+    const firstSection = node.children[0] as Container
+    if (
+      firstSection &&
+      firstSection.children?.length &&
+      firstSection.children[0].type === 'code' &&
+      firstSection.children[0].lang === 'yaml' &&
+      firstSection.children[0].meta === '[props]'
+    ) {
+      node.rawData = firstSection.children[0].value as string
+      node.mdc = node.mdc || {}
+      node.mdc.codeBlockProps = true
+      firstSection.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 +130,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 +174,7 @@ export default (opts: RemarkMDCOptions = {}) => {
      */
     attemptClosingOpenListSection.call(this, section)
 
-    experimentalAutoUnwrap(section)
+    processNode(section)
 
     this.exit(token)
   }

src/index.ts

@@ -31,7 +31,7 @@ interface ComponentNode extends Node {
   children?: ChildrenNode[]
 }
 
-export default <Plugin<Array<RemarkMDCOptions>>> function (opts: RemarkMDCOptions = {}) {
+export default <Plugin<Array<RemarkMDCOptions>>> function remarkMDC (opts: RemarkMDCOptions = {}) {
   const data: Record<string, any> = this.data()
 
   add('micromarkExtensions', syntax())
@@ -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)

src/utils.ts

@@ -2,5 +2,6 @@ export const NON_UNWRAPPABLE_TYPES = [
   'componentContainerSection',
   'componentContainerDataSection',
   'containerComponent',
-  'leafComponent'
+  'leafComponent',
+  'table'
 ]

test/__snapshots__/basic.test.ts.snap

@@ -282,6 +282,25 @@ exports[`basic > link 1`] = `
 }
 `;
 
+exports[`basic > remarkPluginName 1`] = `
+{
+  "children": [],
+  "position": {
+    "end": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`basic > simple 1`] = `
 {
   "children": [