Change style to prefer spacious self-closing tags

This switches the serialization style from `<x/>` to `<x />`, as the
latter is more in line with popular JSX use.
The former behavior can be used by passing `tightSelfClosing: true`.

Author: wooorm

lib/index.js

@@ -22,7 +22,7 @@
  *   Preferred quote to use around attribute values.
  * @property {boolean} [quoteSmart=false]
  *   Use the other quote if that results in less bytes.
- * @property {boolean} [tightSelfClosing=true]
+ * @property {boolean} [tightSelfClosing=false]
  *   Do not use an extra space when closing self-closing elements: `<img/>`
  *   instead of `<img />`.
  */
@@ -366,7 +366,7 @@ export function mdxJsxFromMarkdown() {
  * @returns {ToMarkdownExtension}
  */
 export function mdxJsxToMarkdown(options = {}) {
-  const {quote = '"', quoteSmart, tightSelfClosing = true} = options
+  const {quote = '"', quoteSmart, tightSelfClosing} = options
   const alternative = quote === '"' ? "'" : '"'
 
   if (quote !== '"' && quote !== "'") {

readme.md

@@ -200,7 +200,7 @@ console.log(out)
   *   a list
 </Box>
 
-<MyComponent {...props}/>
+<MyComponent {...props} />
 
 <abbr title="Hypertext Markup Language">HTML</abbr> is a lovely language.
 ```
@@ -245,7 +245,7 @@ Use the other quote if that results in less bytes (`boolean`, default: `false`).
 ###### `options.tightSelfClosing`
 
 Do not use an extra space when closing self-closing elements: `<img/>` instead
-of `<img />` (`boolean`, default: `true`).
+of `<img />` (`boolean`, default: `false`).
 
 ## Syntax tree
 

test.js

@@ -1485,7 +1485,7 @@ test('mdast -> markdown', (t) => {
       {type: 'mdxJsxFlowElement', name: 'x'},
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x/>\n',
+    '<x />\n',
     'should serialize flow jsx w/ `name` w/o `attributes`, `children`'
   )
 
@@ -1541,7 +1541,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x {y}/>\n',
+    '<x {y} />\n',
     'should serialize flow jsx w/ `name`, `attributes` w/o `children`'
   )
 
@@ -1586,7 +1586,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x {...{y: "z"}}/>\n',
+    '<x {...{y: "z"}} />\n',
     'should serialize expression attributes'
   )
 
@@ -1602,7 +1602,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x {}/>\n',
+    '<x {} />\n',
     'should serialize expression attributes w/o `value`'
   )
 
@@ -1634,7 +1634,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x y/>\n',
+    '<x y />\n',
     'should serialize boolean attributes'
   )
 
@@ -1648,7 +1648,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x y="z"/>\n',
+    '<x y="z" />\n',
     'should serialize value attributes'
   )
 
@@ -1668,7 +1668,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x y={z}/>\n',
+    '<x y={z} />\n',
     'should serialize value expression attributes'
   )
 
@@ -1688,7 +1688,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x y={}/>\n',
+    '<x y={} />\n',
     'should serialize value expression attributes w/o `value`'
   )
 
@@ -1705,7 +1705,7 @@ test('mdast -> markdown', (t) => {
       {type: 'mdxJsxTextElement', name: 'x'},
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x/>\n',
+    '<x />\n',
     'should serialize text jsx w/ `name` w/o `attributes`, `children`'
   )
 
@@ -1736,7 +1736,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown()]}
     ),
-    '<x y="z" a/>\n',
+    '<x y="z" a />\n',
     'should serialize text jsx w/ attributes'
   )
 
@@ -1846,7 +1846,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown({quote: "'"})]}
     ),
-    "<x y='z'/>\n",
+    "<x y='z' />\n",
     'should support `options.quote` to quote attribute values'
   )
 
@@ -1877,7 +1877,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
     ),
-    '<x y="z"/>\n',
+    '<x y="z" />\n',
     'should support `options.quoteSmart`: prefer `quote` w/o quotes'
   )
 
@@ -1891,7 +1891,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
     ),
-    '<x y="z&#x22;a\'b"/>\n',
+    '<x y="z&#x22;a\'b" />\n',
     'should support `options.quoteSmart`: prefer `quote` w/ equal quotes'
   )
 
@@ -1905,7 +1905,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
     ),
-    '<x y=\'z"a&#x27;b"c\'/>\n',
+    '<x y=\'z"a&#x27;b"c\' />\n',
     'should support `options.quoteSmart`: use alternative w/ more preferred quotes'
   )
 
@@ -1919,7 +1919,7 @@ test('mdast -> markdown', (t) => {
       },
       {extensions: [mdxJsxToMarkdown({quoteSmart: true})]}
     ),
-    '<x y="z&#x22;a\'b\'c"/>\n',
+    '<x y="z&#x22;a\'b\'c" />\n',
     'should support `options.quoteSmart`: use quote w/ more alternative quotes'
   )