Add options.quoteSmart for attribute values

Related to: GH-3.

Author: wooorm

lib/index.js

@@ -19,8 +19,12 @@
  *
  * @typedef ToMarkdownOptions
  * @property {'"'|"'"} [quote='"']
+ *   Preferred quote to use around attribute values.
+ * @property {boolean} [quoteSmart=false]
+ *   Use the other quote if that results in less bytes.
  */
 
+import {ccount} from 'ccount'
 import {parseEntities} from 'parse-entities'
 import {stringifyPosition} from 'unist-util-stringify-position'
 import {VFileMessage} from 'vfile-message'
@@ -359,7 +363,8 @@ export function mdxJsxFromMarkdown() {
  * @returns {ToMarkdownExtension}
  */
 export function mdxJsxToMarkdown(options = {}) {
-  const {quote = '"'} = options
+  const {quote = '"', quoteSmart} = options
+  const alternative = quote === '"' ? "'" : '"'
 
   if (quote !== '"' && quote !== "'") {
     throw new Error(
@@ -419,16 +424,28 @@ export function mdxJsxToMarkdown(options = {}) {
             throw new Error('Cannot serialize attribute w/o name')
           }
 
-          result =
-            attribute.name +
-            (attribute.value === undefined || attribute.value === null
-              ? ''
-              : '=' +
-                (typeof attribute.value === 'object'
-                  ? '{' + (attribute.value.value || '') + '}'
-                  : quote +
-                    stringifyEntitiesLight(attribute.value, {subset: [quote]}) +
-                    quote))
+          const value = attribute.value
+          let initializer = ''
+
+          if (value === undefined || value === null) {
+            // Empty.
+          } else if (typeof value === 'object') {
+            initializer = '={' + (value.value || '') + '}'
+          } else {
+            // If the alternative is less common than `quote`, switch.
+            const appliedQuote =
+              quoteSmart && ccount(value, quote) > ccount(value, alternative)
+                ? alternative
+                : quote
+
+            initializer +=
+              '=' +
+              appliedQuote +
+              stringifyEntitiesLight(value, {subset: [appliedQuote]}) +
+              appliedQuote
+          }
+
+          result = attribute.name + initializer
         }
 
         attributes.push((isMultiFlow ? '\n  ' : ' ') + result)

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@types/estree-jsx": "^0.0.1",
     "@types/mdast": "^3.0.0",
+    "ccount": "^2.0.0",
     "mdast-util-to-markdown": "^1.0.0",
     "parse-entities": "^4.0.0",
     "stringify-entities": "^4.0.0",

readme.md

@@ -236,7 +236,11 @@ Configuration (optional).
 
 ###### `options.quote`
 
-Quote to use around attribute values (`'"'` or `"'"`, default: `'"'`).
+Preferred quote to use around attribute values (`'"'` or `"'"`, default: `'"'`).
+
+###### `options.quoteSmart`
+
+Use the other quote if that results in less bytes (`boolean`, default: `false`).
 
 ## Syntax tree
 

test.js

@@ -1867,5 +1867,61 @@ test('mdast -> markdown', (t) => {
     'should crash on an unclosed text jsx (agnostic)'
   )
 
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [{type: 'mdxJsxAttribute', name: 'y', value: 'z'}],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
+    ),
+    '<x y="z"/>\n',
+    'should support `options.quoteSmart`: prefer `quote` w/o quotes'
+  )
+
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [{type: 'mdxJsxAttribute', name: 'y', value: 'z"a\'b'}],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
+    ),
+    '<x y="z&#x22;a\'b"/>\n',
+    'should support `options.quoteSmart`: prefer `quote` w/ equal quotes'
+  )
+
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [{type: 'mdxJsxAttribute', name: 'y', value: 'z"a\'b"c'}],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
+    ),
+    '<x y=\'z"a&#x27;b"c\'/>\n',
+    'should support `options.quoteSmart`: use alternative w/ more preferred quotes'
+  )
+
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [{type: 'mdxJsxAttribute', name: 'y', value: "z\"a'b'c"}],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
+    ),
+    '<x y="z&#x22;a\'b\'c"/>\n',
+    'should support `options.quoteSmart`: use quote w/ more alternative quotes'
+  )
+
   t.end()
 })