Repository: maizzle/framework
Pull request #688 (2022-05-20 09:25:32)

refactor: make prettify transformer opt-in
This PR refactors the `prettify` Transformer so that it runs only when you specifically enable it.

It is considered enabled if you set `prettify: true` or `prettify: { /* non-empty object */ }` in your `config.js`.



Patch:
diff --git a/src/transformers/prettify.js b/src/transformers/prettify.js
index ac87ba3..7106179 100644
--- a/src/transformers/prettify.js
+++ b/src/transformers/prettify.js
@@ -1,13 +1,8 @@
 /* eslint-disable camelcase */
-
 const pretty = require('pretty')
-const {get, merge, isEmpty} = require('lodash')
+const {get, merge, isEmpty, isObject} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'prettify') === false) {
-    return html
-  }
-
   const defaultConfig = {
     space_around_combinator: true, // Preserve space around CSS selector combinators
     newline_between_rules: false, // Remove empty lines between CSS rules
@@ -15,15 +10,18 @@ module.exports = async (html, config = {}, direct = false) => {
     extra_liners: [] // Don't add extra new line before any tag
   }
 
-  config = direct ? config : merge(defaultConfig, get(config, 'prettify', {}))
+  config = direct ? config : get(config, 'prettify')
+
+  // Don't prettify if not explicitly enabled in config
+  if (!config || (isObject(config) && isEmpty(config))) {
+    return html
+  }
 
   if (typeof config === 'boolean' && config) {
     return pretty(html, defaultConfig)
   }
 
-  if (!isEmpty(config)) {
-    return pretty(html, config)
-  }
+  config = merge(defaultConfig, config)
 
-  return html
+  return pretty(html, config)
 }


Test patch:
diff --git a/test/expected/posthtml/component.html b/test/expected/posthtml/component.html
index bffd192..9d1cae5 100644
--- a/test/expected/posthtml/component.html
+++ b/test/expected/posthtml/component.html
@@ -5,7 +5,7 @@ Variable from locals attribute: bar
 
 Variable from page: maizzle-ci
 
-Variable from attribute: Nested component
+  Variable from attribute: Nested component
 
 Variable from locals attribute: bar (nested)
 
diff --git a/test/expected/transformers/atimport-in-style.html b/test/expected/transformers/atimport-in-style.html
index dee26a0..81dde63 100644
--- a/test/expected/transformers/atimport-in-style.html
+++ b/test/expected/transformers/atimport-in-style.html
@@ -1,16 +1,15 @@
 <!doctype html>
 <html>
-<head>
-  <style>
-    div {
-      margin-top: 1px;
-      margin-right: 2px;
-      margin-bottom: 3px;
-      margin-left: 4px;
-    }
-  </style>
-</head>
-<body>
-  <div>test</div>
-</body>
+  <head>
+    <style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
 </html>
diff --git a/test/expected/transformers/preserve-transform-css.html b/test/expected/transformers/preserve-transform-css.html
index ba10a28..5165609 100644
--- a/test/expected/transformers/preserve-transform-css.html
+++ b/test/expected/transformers/preserve-transform-css.html
@@ -1,48 +1,36 @@
 <!doctype html>
 <html>
-<head>
-  <style data-embed="">
-    .block {
-      display: block !important;
-    }
-    .inline {
-      display: inline !important;
-    }
-    .table {
-      display: table !important;
-    }
-    .contents {
-      display: contents !important;
-    }
-    .truncate {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-    .uppercase {
-      text-transform: uppercase !important;
-    }
-    .lowercase {
-      text-transform: lowercase !important;
-    }
-    .capitalize {
-      text-transform: capitalize !important;
-    }
-    div {
-      text-transform: uppercase;
-    }
-    [data-ogsc] .inexistent {
-      color: #ef4444;
-    }
-    div > u + .body .gmail-android-block {
-      display: block !important;
-    }
-    u + #body a {
-      color: inherit;
-    }
-  </style>
-</head>
-<body>
-  <div>test</div>
-</body>
+  <head>
+    <style data-embed="">.block {
+        display: block !important;
+} .inline {
+        display: inline !important;
+} .table {
+        display: table !important;
+} .contents {
+        display: contents !important;
+} .truncate {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+} .uppercase {
+        text-transform: uppercase !important;
+} .lowercase {
+        text-transform: lowercase !important;
+} .capitalize {
+        text-transform: capitalize !important;
+} div {
+        text-transform: uppercase;
+} [data-ogsc] .inexistent {
+        color: #ef4444;
+      } div > u + .body .gmail-android-block {
+        display: block !important;
+      } u + #body a {
+        color: inherit;
+      }
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
 </html>
diff --git a/test/expected/useConfig.html b/test/expected/useConfig.html
index 8e71b50..c4b16b3 100644
--- a/test/expected/useConfig.html
+++ b/test/expected/useConfig.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
-<head>
-  <title>test></title>
-</head>
-<body>
-  <div>build_production</div>
-</body>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>build_production</div>
+  </body>
 </html>
diff --git a/test/fixtures/posthtml/component.html b/test/fixtures/posthtml/component.html
index 82a4198..008d9ec 100644
--- a/test/fixtures/posthtml/component.html
+++ b/test/fixtures/posthtml/component.html
@@ -5,7 +5,7 @@
     "foo": "bar"
   }'
 >
-  Variable from page: [[ page.env ]]
+Variable from page: [[ page.env ]]
 
   <component
     src="test/stubs/components/component.html"
@@ -14,6 +14,6 @@
       "foo": "bar (nested)"
     }'
   >
-    Variable from page (nested): [[ page.env ]]
+Variable from page (nested): [[ page.env ]]
   </component>
 </component>
diff --git a/test/test-posthtml.js b/test/test-posthtml.js
index 93f98dd..9c8e2fc 100644
--- a/test/test-posthtml.js
+++ b/test/test-posthtml.js
@@ -2,30 +2,36 @@ const test = require('ava')
 const Maizzle = require('../src')
 
 const path = require('path')
-const {readFileSync} = require('fs')
+const fs = require('fs')
 
-const fixture = file => readFileSync(path.join(__dirname, 'fixtures', `${file}.html`), 'utf8')
-const expected = file => readFileSync(path.join(__dirname, 'expected', `${file}.html`), 'utf8')
+const readFile = (dir, filename) => fs.promises
+  .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
+  .then(html => html.trim())
+
+const fixture = file => readFile('fixtures', file)
+const expected = file => readFile('expected', file)
 
 const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
 
 test('layouts', async t => {
-  const source = fixture('posthtml/layout')
+  const source = await fixture('posthtml/layout')
 
   const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
 
-  t.is(html.trim(), expected('posthtml/layout').trim())
+  t.is(html.trim(), await expected('posthtml/layout'))
 })
 
 test('inheritance when extending a template', async t => {
-  let html = await renderString(fixture('posthtml/extend-template'))
+  const source = await fixture('posthtml/extend-template')
+  let html = await renderString(source)
+
   html = html.replace(/[^\S\r\n]+$/gm, '').trim()
 
-  t.is(html, expected('posthtml/extend-template').trim())
+  t.is(html, await expected('posthtml/extend-template'))
 })
 
 test('components', async t => {
-  const source = fixture('posthtml/component')
+  const source = await fixture('posthtml/component')
   const options = {
     maizzle: {
       env: 'maizzle-ci',
@@ -41,11 +47,11 @@ test('components', async t => {
 
   const html = await renderString(source, options)
 
-  t.is(html.trim(), expected('posthtml/component').trim())
+  t.is(html.trim(), await expected('posthtml/component'))
 })
 
 test('fetch component', async t => {
-  const source = fixture('posthtml/fetch')
+  const source = await fixture('posthtml/fetch')
   const options = {
     maizzle: {
       env: 'maizzle-ci',
@@ -62,5 +68,5 @@ test('fetch component', async t => {
   let html = await renderString(source, options)
   html = html.replace(/[^\S\r\n]+$/gm, '')
 
-  t.is(html.trim(), expected('posthtml/fetch').trim())
+  t.is(html.trim(), await expected('posthtml/fetch'))
 })
diff --git a/test/test-todisk.js b/test/test-todisk.js
index cd543d8..ad7f1d6 100644
--- a/test/test-todisk.js
+++ b/test/test-todisk.js
@@ -170,7 +170,7 @@ test('outputs plaintext files', async t => {
 
   t.is(plaintext[0], `${t.context.folder}/plaintext.txt`)
   t.is(plaintextContent, 'Show in HTML\nShow in plaintext')
-  t.is(htmlContent, '<div>Show in HTML</div>\n')
+  t.is(htmlContent, '<div>Show in HTML</div>\n\n')
 })
 
 test('outputs plaintext files (custom path)', async t => {
diff --git a/test/test-transformers.js b/test/test-transformers.js
index 5af9d8a..e31ee49 100644
--- a/test/test-transformers.js
+++ b/test/test-transformers.js
@@ -215,18 +215,23 @@ test('base URL (object)', async t => {
 })
 
 test('prettify', async t => {
+  // `prettify: true`
+  const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
+
+  // With custom object config
   // eslint-disable-next-line
   const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
-  const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
 
-  t.is(html, '<div>\n  <p>test</p>\n</div>')
-  t.is(html2, '<div>\n  <p>test</p>\n</div>')
-})
+  // No config
+  const html3 = await Maizzle.prettify('<div><p>test</p></div>')
 
-test('prettify (disabled)', async t => {
-  const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
+  // Empty object config
+  const html4 = await Maizzle.prettify('<div><p>test</p></div>', {})
 
-  t.is(html, '<div><p>test</p></div>')
+  t.is(html, '<div>\n  <p>test</p>\n</div>')
+  t.is(html2, '<div>\n  <p>test</p>\n</div>')
+  t.is(html3, '<div><p>test</p></div>')
+  t.is(html4, '<div><p>test</p></div>')
 })
 
 test('minify', async t => {