Add options.printWidth for spaces or line endings between attributes

Author: wooorm

lib/index.js

@@ -25,6 +25,13 @@
  * @property {boolean} [tightSelfClosing=false]
  *   Do not use an extra space when closing self-closing elements: `<img/>`
  *   instead of `<img />`.
+ * @property {number} [printWidth=Infinity]
+ *   Specify the line length that the printer will wrap on.
+ *   This is not a hard maximum width: things will be printed longer and
+ *   shorter.
+ *
+ *   Note: this option is only used for JSX tags currently, and might be moved
+ *   to `mdast-util-to-markdown` in the future.
  */
 
 import {ccount} from 'ccount'
@@ -35,6 +42,7 @@ import {stringifyEntitiesLight} from 'stringify-entities'
 import {containerFlow} from 'mdast-util-to-markdown/lib/util/container-flow.js'
 import {containerPhrasing} from 'mdast-util-to-markdown/lib/util/container-phrasing.js'
 import {indentLines} from 'mdast-util-to-markdown/lib/util/indent-lines.js'
+import {track} from 'mdast-util-to-markdown/lib/util/track.js'
 
 /** @return {FromMarkdownExtension} */
 export function mdxJsxFromMarkdown() {
@@ -366,7 +374,12 @@ export function mdxJsxFromMarkdown() {
  * @returns {ToMarkdownExtension}
  */
 export function mdxJsxToMarkdown(options = {}) {
-  const {quote = '"', quoteSmart, tightSelfClosing} = options
+  const {
+    quote = '"',
+    quoteSmart,
+    tightSelfClosing,
+    printWidth = Number.POSITIVE_INFINITY
+  } = options
   const alternative = quote === '"' ? "'" : '"'
 
   if (quote !== '"' && quote !== "'") {
@@ -397,28 +410,26 @@ export function mdxJsxToMarkdown(options = {}) {
    * @param {MdxJsxFlowElement|MdxJsxTextElement} node
    */
   // eslint-disable-next-line complexity
-  function mdxElement(node, _, context) {
+  function mdxElement(node, _, context, safeOptions) {
+    const tracker = track(safeOptions)
     const selfClosing =
       node.name && (!node.children || node.children.length === 0)
     const exit = context.enter(node.type)
-    let attributeValue = ''
     let index = -1
     /** @type {Array<string>} */
-    const attributes = []
-    /** @type {string} */
-    let result
+    const serializedAttributes = []
+    let value = tracker.move('<' + (node.name || ''))
 
     // None.
     if (node.attributes && node.attributes.length > 0) {
       if (!node.name) {
         throw new Error('Cannot serialize fragment w/ attributes')
       }
 
-      const isMultiFlow =
-        node.type === 'mdxJsxFlowElement' && node.attributes.length > 1
-
       while (++index < node.attributes.length) {
         const attribute = node.attributes[index]
+        /** @type {string} */
+        let result
 
         if (attribute.type === 'mdxJsxExpressionAttribute') {
           result = '{' + (attribute.value || '') + '}'
@@ -428,71 +439,109 @@ export function mdxJsxToMarkdown(options = {}) {
           }
 
           const value = attribute.value
-          let initializer = ''
+          const left = attribute.name
+          /** @type {string} */
+          let right = ''
 
           if (value === undefined || value === null) {
             // Empty.
           } else if (typeof value === 'object') {
-            initializer = '={' + (value.value || '') + '}'
+            right = '{' + (value.value || '') + '}'
           } else {
             // If the alternative is less common than `quote`, switch.
             const appliedQuote =
               quoteSmart && ccount(value, quote) > ccount(value, alternative)
                 ? alternative
                 : quote
-
-            initializer +=
-              '=' +
+            right =
               appliedQuote +
               stringifyEntitiesLight(value, {subset: [appliedQuote]}) +
               appliedQuote
           }
 
-          result = attribute.name + initializer
+          result = left + (right ? '=' : '') + right
         }
 
-        attributes.push((isMultiFlow ? '\n  ' : ' ') + result)
+        serializedAttributes.push(result)
       }
+    }
 
-      attributeValue = attributes.join('') + (isMultiFlow ? '\n' : '')
+    let attributesOnTheirOwnLine = false
+    const attributesOnOneLine = serializedAttributes.join(' ')
+
+    if (
+      // Block:
+      node.type === 'mdxJsxFlowElement' &&
+      // Including a line ending (expressions).
+      (/\r?\n|\r/.test(attributesOnOneLine) ||
+        // Current position (including `<tag`).
+        tracker.current().now.column +
+          // -1 because columns, +1 for ` ` before attributes.
+          // Attributes joined by spaces.
+          attributesOnOneLine.length +
+          // ` />`.
+          (selfClosing ? (tightSelfClosing ? 2 : 3) : 1) >
+          printWidth)
+    ) {
+      attributesOnTheirOwnLine = true
     }
 
-    const value =
-      '<' +
-      (node.name || '') +
-      attributeValue +
-      (selfClosing
-        ? (tightSelfClosing || /[ \n]$/.test(attributeValue) ? '' : ' ') + '/'
-        : '') +
-      '>' +
-      (node.children && node.children.length > 0
-        ? node.type === 'mdxJsxFlowElement'
-          ? '\n' + indent(containerFlow(node, context)) + '\n'
-          : containerPhrasing(node, context, {before: '<', after: '>'})
-        : '') +
-      (selfClosing ? '' : '</' + (node.name || '') + '>')
+    if (attributesOnTheirOwnLine) {
+      value += tracker.move(
+        '\n' + indentLines(serializedAttributes.join('\n'), map)
+      )
+    } else if (attributesOnOneLine) {
+      value += tracker.move(' ' + attributesOnOneLine)
+    }
+
+    if (attributesOnTheirOwnLine) {
+      value += tracker.move('\n')
+    }
+
+    if (selfClosing) {
+      value += tracker.move(
+        (tightSelfClosing || attributesOnTheirOwnLine ? '' : ' ') + '/'
+      )
+    }
+
+    value += tracker.move('>')
+
+    if (node.children && node.children.length > 0) {
+      if (node.type === 'mdxJsxFlowElement') {
+        tracker.shift(2)
+        value += tracker.move('\n')
+        value += tracker.move(
+          indentLines(containerFlow(node, context, tracker.current()), map)
+        )
+        value += tracker.move('\n')
+      } else {
+        value += tracker.move(
+          containerPhrasing(node, context, {
+            ...tracker.current(),
+            before: '<',
+            after: '>'
+          })
+        )
+      }
+    }
+
+    if (!selfClosing) {
+      value += tracker.move('</' + (node.name || '') + '>')
+    }
 
     exit()
     return value
   }
 
+  /** @type {ToMarkdownMap} */
+  function map(line, _, blank) {
+    return (blank ? '' : '  ') + line
+  }
+
   /**
    * @type {ToMarkdownHandle}
    */
   function peekElement() {
     return '<'
   }
-
-  /**
-   * @param {string} value
-   * @returns {string}
-   */
-  function indent(value) {
-    return indentLines(value, map)
-
-    /** @type {ToMarkdownMap} */
-    function map(line, _, blank) {
-      return (blank ? '' : '  ') + line
-    }
-  }
 }

package.json

@@ -39,7 +39,7 @@
     "@types/estree-jsx": "^0.0.1",
     "@types/mdast": "^3.0.0",
     "ccount": "^2.0.0",
-    "mdast-util-to-markdown": "^1.0.0",
+    "mdast-util-to-markdown": "^1.3.0",
     "parse-entities": "^4.0.0",
     "stringify-entities": "^4.0.0",
     "unist-util-remove-position": "^4.0.0",

readme.md

@@ -245,6 +245,14 @@ Use the other quote if that results in less bytes (`boolean`, default: `false`).
 Do not use an extra space when closing self-closing elements: `<img/>` instead
 of `<img />` (`boolean`, default: `false`).
 
+###### `options.printWidth`
+
+Try and wrap syntax as this width (`number`, default: `Infinity`).
+When set to a finite number (say, `80`), the formatter will print attributes on
+separate lines when a tag doesn’t fit on one line.
+The normal behavior is to print attributes with spaces between them instead of
+line endings.
+
 ## Syntax tree
 
 The following interfaces are added to **[mdast][]** by this utility.

test.js

@@ -1572,7 +1572,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x\n  {y}\n  {z}\n/>\n',
+    '<x {y} {z} />\n',
     'should serialize flow jsx w/ `name`, multiple `attributes` w/o `children`'
   )
 
@@ -1941,5 +1941,51 @@ test('mdast -> markdown', (t) => {
     'should support `options.tightSelfClosing`: space when `true`'
   )
 
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [
+          {type: 'mdxJsxAttribute', name: 'y', value: 'aaa'},
+          {type: 'mdxJsxAttribute', name: 'z', value: 'aa'}
+        ],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({printWidth: 20})]}
+    ),
+    '<x y="aaa" z="aa" />\n',
+    'should support attributes on one line up to the given `options.printWidth`'
+  )
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [
+          {type: 'mdxJsxAttribute', name: 'y', value: 'aaa'},
+          {type: 'mdxJsxAttribute', name: 'z', value: 'aaa'}
+        ],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({printWidth: 20})]}
+    ),
+    '<x\n  y="aaa"\n  z="aaa"\n/>\n',
+    'should support attributes on separate lines up to the given `options.printWidth`'
+  )
+  t.deepEqual(
+    toMarkdown(
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'x',
+        attributes: [{type: 'mdxJsxExpressionAttribute', value: '\n  ...a\n'}],
+        children: []
+      },
+      {extensions: [mdxJsxToMarkdown({printWidth: 20})]}
+    ),
+    '<x\n  {\n    ...a\n  }\n/>\n',
+    'should support attributes on separate lines if they contain line endings'
+  )
+
   t.end()
 })