feat: option for max attributes length (#79)

Co-authored-by: Farnabaz <[email protected]>
nuxtlabs · Nov 18, 2024 · 94d9d97 · 94d9d97
1 parent 5d44379
commit 94d9d97
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "dev:prepare": "nuxi prepare playground",
     "generate": "nuxi generate playground",
     "lint": "eslint --ext .js,.ts,.vue .",
+    "test:ui": "pnpm lint && vitest --ui --open=false",
     "test": "vitest run",
     "prepack": "pnpm build",
     "release": "release-it"

diff --git a/src/to-markdown.ts b/src/to-markdown.ts
@@ -100,7 +100,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     const attributesText = attributes(node, context)
     const fmAttributes: Record<string, string> = node.fmAttributes || {}
 
-    if ((value + attributesText).length > 80 || Object.keys(fmAttributes).length > 0 || node.children?.some((child: RootContent) => child.type === 'componentContainerSection')) {
+    if ((value + attributesText).length > (opts?.maxAttributesLength || 80) || Object.keys(fmAttributes).length > 0 || node.children?.some((child: RootContent) => child.type === 'componentContainerSection')) {
       Object.assign(fmAttributes, (node as any).attributes)
     } else {
       value += attributesText

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -6,6 +6,7 @@ interface ComponentHandler {
 
 export interface RemarkMDCOptions {
   components?: ComponentHandler[]
+  maxAttributesLength?: number
   experimental?: {
     autoUnwrap?: boolean
     componentCodeBlockYamlProps?: boolean

diff --git a/test/__snapshots__/block-component.test.ts.snap b/test/__snapshots__/block-component.test.ts.snap
@@ -1,5 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`block-component > component-attributes 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "key": "value",
+      },
+      "children": [],
+      "data": {
+        "hName": "component",
+        "hProperties": {
+          "key": "value",
+        },
+      },
+      "fmAttributes": {},
+      "name": "component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 2,
+          "offset": 27,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 2,
+      "offset": 27,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > component-attributes-array-convert-double-quote 1`] = `
 {
   "children": [
@@ -235,6 +282,100 @@ exports[`block-component > component-attributes-bind-frontmatter 1`] = `
 }
 `;
 
+exports[`block-component > component-attributes-length-80 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+      },
+      "children": [],
+      "data": {
+        "hName": "component",
+        "hProperties": {
+          "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+        },
+      },
+      "fmAttributes": {},
+      "name": "component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 2,
+          "offset": 83,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 2,
+      "offset": 83,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`block-component > component-attributes-length-81 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+      },
+      "children": [],
+      "data": {
+        "hName": "component",
+        "hProperties": {
+          "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+        },
+      },
+      "fmAttributes": {},
+      "name": "component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 2,
+          "offset": 84,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 2,
+      "offset": 84,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > component-attributes-object 1`] = `
 {
   "children": [
@@ -282,6 +423,53 @@ exports[`block-component > component-attributes-object 1`] = `
 }
 `;
 
+exports[`block-component > component-attributes-remove-duplicate 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "key": "value",
+      },
+      "children": [],
+      "data": {
+        "hName": "component",
+        "hProperties": {
+          "key": "value",
+        },
+      },
+      "fmAttributes": {},
+      "name": "component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 2,
+          "offset": 39,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 2,
+      "offset": 39,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > component-hProperties-be-the-same 1`] = `
 {
   "children": [
@@ -362,6 +550,53 @@ items:
 }
 `;
 
+exports[`block-component > component-max-attributes-length-option 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+      },
+      "children": [],
+      "data": {
+        "hName": "component",
+        "hProperties": {
+          "a": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+        },
+      },
+      "fmAttributes": {},
+      "name": "component",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 2,
+          "offset": 103,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 2,
+      "offset": 103,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`block-component > dangling-list 1`] = `
 {
   "children": [

diff --git a/test/block-component.test.ts b/test/block-component.test.ts
@@ -25,6 +25,33 @@ describe('block-component', () => {
       markdown: '::component\n#text\n::',
       expected: '::component\n#text\n::'
     },
+    'component-attributes': {
+      markdown: '::component{key="value"}\n::'
+    },
+    'component-attributes-remove-duplicate': {
+      markdown: '::component{key="value" key="value"}\n::',
+      expected: '::component{key="value"}\n::'
+    },
+    'component-attributes-length-80': {
+      // `::component{a=""}` = 17 characters + 1 because array start at 0
+      markdown: `::component{a="${new Array(80 - 17 + 1).join('a')}"}\n::`
+    },
+    'component-attributes-length-81': {
+      markdown: `::component{a="${new Array(81 - 17 + 1).join('a')}"}\n::`,
+      expected: [
+        '::component',
+        '---',
+        `a: ${new Array(81 - 17 + 1).join('a')}`,
+        '---',
+        '::'
+      ].join('\n')
+    },
+    'component-max-attributes-length-option': {
+      mdcOptions: {
+        maxAttributesLength: 100
+      },
+      markdown: `::component{a="${new Array(100 - 17 + 1).join('a')}"}\n::`
+    },
     frontmatter: {
       markdown: '::with-frontmatter\n---\nkey: value\narray:\n  - item\n  - itemKey: value\n---\n::',
       expected: '::with-frontmatter\n---\narray:\n  - item\n  - itemKey: value\nkey: value\n---\n::'