fix: convert json attributes to yaml syntax

Author: farnabaz

src/to-markdown.ts

@@ -158,7 +158,7 @@ export default (opts: RemarkMDCOptions = {}) => {
       || attributesEntries.length > 3
       // It is recommended to use yaml for complex attributes
       || attributesEntries.some(([_, value]) => typeof value === 'object')
-      || attributesText.match(/(=['"][\{\[]|\n)/)
+      || attributesText.match(/(=['"][{[]|\n)/) // ='[]' ='{}' ="{}" ="[]"
       || node.children?.some((child: RootContent) => child.type === 'componentContainerSection') // remove: allow using both yaml and inline attributes simentensoly
     ) {
       // add attributes to frontmatter

test/block-component.test.ts

@@ -65,6 +65,14 @@ describe('block-component', () => {
     },
     'jsonScapeAttr': {
       markdown: '::foo{:test=\'{"foo":"I\\\'d love to"}\'}\n::',
+      expected: [
+        '::foo',
+        '---',
+        'test:',
+        '  foo: I\'d love to',
+        '---',
+        '::',
+      ].join('\n'),
       extra: (_md, ast) => {
         expect(ast.children[0].type).toBe('containerComponent')
       },
@@ -271,36 +279,78 @@ describe('block-component', () => {
     },
     'component-attributes-array-of-string': {
       markdown: '::container-component{:items=\'["Nuxt", "Vue"]\'}\n::',
-      // expected: '::container-component{:items="["Nuxt", "Vue"]"}\n::',
+      expected: [
+        '::container-component',
+        '---',
+        'items:',
+        '  - Nuxt',
+        '  - Vue',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '["Nuxt", "Vue"]' })
         expect(ast.children[0].data.hProperties).toEqual({ ':items': '["Nuxt", "Vue"]' })
       },
     },
     'component-attributes-bad-array': {
       markdown: '::container-component{:items="[Nuxt,Vue]"}\n::',
+      expected: [
+        '::container-component',
+        '---',
+        ':items: "[Nuxt,Vue]"',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '[Nuxt,Vue]' })
         expect(ast.children[0].data.hProperties).toEqual({ ':items': '[Nuxt,Vue]' })
       },
     },
     'component-attributes-array-of-number': {
       markdown: '::container-component{:items=\'[1,2,3.5]\'}\n::',
+      expected: [
+        '::container-component',
+        '---',
+        'items:',
+        '  - 1',
+        '  - 2',
+        '  - 3.5',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '[1,2,3.5]' })
         expect(ast.children[0].data.hProperties).toEqual({ ':items': '[1,2,3.5]' })
       },
     },
     'component-attributes-array-convert-double-quote': {
       markdown: '::container-component{:items="[1,2,3.5]"}\n::',
-      expected: '::container-component{:items=\'[1,2,3.5]\'}\n::',
+      expected: [
+        '::container-component',
+        '---',
+        'items:',
+        '  - 1',
+        '  - 2',
+        '  - 3.5',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '[1,2,3.5]' })
         expect(ast.children[0].data.hProperties).toEqual({ ':items': '[1,2,3.5]' })
       },
     },
     'component-attributes-object': {
       markdown: '::container-component{:items=\'{"key": "value"}\'}\n::',
+      expected: [
+        '::container-component',
+        '---',
+        'items:',
+        '  key: value',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '{"key": "value"}' })
         expect(ast.children[0].data.hProperties).toEqual({ ':items': '{"key": "value"}' })
@@ -317,6 +367,21 @@ describe('block-component', () => {
         '---',
         '::',
       ].join('\n'),
+      expected: [
+        '::container-component',
+        '---',
+        'items:',
+        '  key: value',
+        '---',
+        '::',
+        '',
+        '::container-component',
+        '---',
+        'items:',
+        '  key: value',
+        '---',
+        '::',
+      ].join('\n'),
       extra(_, ast) {
         expect(ast.children[0].attributes).toEqual({ ':items': '{"key":"value"}' })
         expect(ast.children[1].attributes).toEqual({})

test/format.test.ts

@@ -230,6 +230,6 @@ attributes:
 ---
 ::`,
       removeFmAttributes: true,
-    }
+    },
   })
 })