@maizzle/framework 5.0.0-beta.2 → 5.0.0-beta.21

package/src/server/index.js

@@ -40,6 +40,71 @@ app.use(hmrRoute)
 
 let viewing = ''
 const spinner = ora()
+let templatePaths = []
+
+function getTemplateFolders(config) {
+  return Array.isArray(get(config, 'build.content'))
+    ? config.build.content
+    : [config.build.content]
+}
+
+async function getTemplatePaths(templateFolders) {
+  return await fg.glob([...new Set(templateFolders)])
+}
+
+async function getUpdatedRoutes(app, config) {
+  return getTemplatePaths(getTemplateFolders(config))
+}
+
+async function renderUpdatedFile(file, config) {
+  try {
+    const startTime = Date.now()
+    spinner.start('Building...')
+
+    // beforeCreate event
+    if (typeof config.beforeCreate === 'function') {
+      await config.beforeCreate(config)
+    }
+
+    // Read the file
+    const fileContent = await fs.readFile(file, 'utf8')
+
+    // Set a `dev` flag on the config
+    config._dev = true
+
+    // Render the file with PostHTML
+    let { html } = await render(fileContent, config)
+
+    // Update console message
+    const shouldReportFileSize = get(config, 'server.reportFileSize', false)
+
+    spinner.succeed(
+      `Done in ${formatTime(Date.now() - startTime)}`
+      + `${pico.gray(` [${path.relative(cwd(), file)}]`)}`
+      + `${shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
+    )
+
+    /**
+     * Inject HMR script
+     */
+    html = injectScript(html, '<script src="/hmr.js"></script>')
+
+    // Notify connected websocket clients about the change
+    wss.clients.forEach(client => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(JSON.stringify({
+          type: 'change',
+          content: html,
+          scrollSync: get(config, 'server.scrollSync', false),
+          hmr: get(config, 'server.hmr', true),
+        }))
+      }
+    })
+  } catch (error) {
+    spinner.fail('Failed to render template.')
+    throw error
+  }
+}
 
 export default async (config = {}) => {
   // Read the Maizzle config file
@@ -47,7 +112,10 @@ export default async (config = {}) => {
 
   /**
    * Dev server settings
-   */
+  */
+  spinner.spinner = get(config, 'server.spinner', 'circleHalves')
+  spinner.start('Starting server...')
+
   const shouldScroll = get(config, 'server.scrollSync', false)
   const useHmr = get(config, 'server.hmr', true)
 
@@ -62,16 +130,18 @@ export default async (config = {}) => {
    */
   initWebSockets(wss, { scrollSync: shouldScroll, hmr: useHmr })
 
-  // Get a list of all template paths
-  const templateFolders = Array.isArray(get(config, 'build.content'))
-    ? config.build.content
-    : [config.build.content]
+  // Register routes
+  templatePaths = await getUpdatedRoutes(app, config)
 
-  const templatePaths = await fg.glob([...new Set(templateFolders)])
-
-  // Set the template paths on the app, we use them in the index view
+  /**
+   * Store template paths on the request object
+   *
+   * We use it in the index view to list all templates.
+   * */
   app.request.templatePaths = templatePaths
 
+  // await updateRoutes(app, config)
+
   /**
    * Create route pattern
    * Only allow files with the following extensions
@@ -83,7 +153,7 @@ export default async (config = {}) => {
     )
   ].join('|')
 
-  const routePattern = Array.isArray(templateFolders)
+  const routePattern = Array.isArray(getTemplateFolders(config))
     ? `*/:file.(${extensions})`
     : `:file.(${extensions})`
 
@@ -125,99 +195,82 @@ export default async (config = {}) => {
     })
   })
 
-  // Error-handling middleware
-  app.use(async (error, req, res, next) => { // eslint-disable-line
-    console.error(error)
-
-    const view = await fs.readFile(path.join(__dirname, 'views', 'error.html'), 'utf8')
-    const { html } = await render(view, {
-      method: req.method,
-      url: req.url,
-      error
-    })
-
-    res.status(500).send(html)
-  })
-
   /**
    * Components watcher
    *
    * Watches for changes in the configured Templates and Components paths
    */
+  let isWatcherReady = false
   chokidar
-    .watch([...templatePaths, ...get(config, 'components.folders', defaultComponentsConfig.folders) ])
+    .watch(
+      [
+        ...templatePaths,
+        ...get(config, 'components.folders', defaultComponentsConfig.folders)
+      ],
+      {
+        ignoreInitial: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 150,
+          pollInterval: 25,
+        },
+      }
+    )
     .on('change', async () => {
-      // Not viewing a component in the browser, no need to rebuild
-      if (!viewing) {
-        return
+      if (viewing) {
+        await renderUpdatedFile(viewing, config)
       }
-
-      try {
-        const startTime = Date.now()
-        spinner.start('Building...')
-
-        // beforeCreate event
-        if (typeof config.beforeCreate === 'function') {
-          await config.beforeCreate(config)
-        }
-
-        // Read the file
-        const fileContent = await fs.readFile(viewing, 'utf8')
-
-        // Set a `dev` flag on the config
-        config._dev = true
-
-        // Render the file with PostHTML
-        let { html } = await render(fileContent, config)
-
-        // Update console message
-        const shouldReportFileSize = get(config, 'server.reportFileSize', false)
-
-        spinner.succeed(
-          `Done in ${formatTime(Date.now() - startTime)}`
-          + `${pico.gray(` [${path.relative(cwd(), viewing)}]`)}`
-          + `${ shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
-        )
-
-        /**
-         * Inject HMR script
-         */
-        html = injectScript(html, '<script src="/hmr.js"></script>')
-
-        // Notify connected websocket clients about the change
-        wss.clients.forEach(client => {
-          if (client.readyState === WebSocket.OPEN) {
-            client.send(JSON.stringify({
-              type: 'change',
-              content: html,
-              scrollSync: get(config, 'server.scrollSync', false),
-              hmr: get(config, 'server.hmr', true),
-            }))
-          }
-        })
-      } catch (error) {
-        spinner.fail('Failed to render template.')
-        throw error
+    })
+    .on('ready', () => {
+      /**
+       * `add` fires immediately when the watcher is created,
+       * so we use this trick to detect new files added
+       * after it has started.
+       */
+      isWatcherReady = true
+    })
+    .on('add', async () => {
+      if (isWatcherReady) {
+        templatePaths = await getUpdatedRoutes(app, config)
+        app.request.templatePaths = templatePaths
+      }
+    })
+    .on('unlink', async () => {
+      if (isWatcherReady) {
+        templatePaths = await getUpdatedRoutes(app, config)
+        app.request.templatePaths = templatePaths
       }
     })
 
   /**
    * Global watcher
    *
-   * Watch for changes in the config file, Tailwind CSS config, and CSS files
+   * Watch for changes in the config files, Tailwind CSS config, CSS files,
+   * configured static assets, and user-defined watch paths.
    */
   const globalWatchedPaths = new Set([
-    'config*.js',
-    'maizzle.config*.js',
-    'tailwind*.config.js',
+    'config*.{js,cjs,ts}',
+    'maizzle.config*.{js,cjs,ts}',
+    'tailwind*.config.{js,ts}',
     '**/*.css',
-    ...get(config, 'server.watch', [])
+    ...get(config, 'build.static.source', []),
+    ...get(config, 'server.watch', []),
   ])
 
   async function globalPathsHandler(file, eventType) {
+    // Update express.static to serve new files
+    if (eventType === 'add') {
+      app.use(express.static(path.dirname(file)))
+    }
+
+    // Stop serving deleted files
+    if (eventType === 'unlink') {
+      app._router.stack = app._router.stack.filter(
+        layer => layer.regexp.source !== path.dirname(file).replace(/\\/g, '/')
+      )
+    }
+
     // Not viewing a component in the browser, no need to rebuild
     if (!viewing) {
-      spinner.info(`file ${eventType}: ${file}`)
       return
     }
 
@@ -254,7 +307,7 @@ export default async (config = {}) => {
       spinner.succeed(
         `Done in ${formatTime(Date.now() - startTime)}`
         + `${pico.gray(` [${path.relative(cwd(), filePath)}]`)}`
-        + `${ shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
+        + `${shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
       )
 
       /**
@@ -274,7 +327,7 @@ export default async (config = {}) => {
         }
       })
     } catch (error) {
-      spinner.fail('Failed to render template.')
+      spinner.fail(`Failed to render template: ${file}`)
       throw error
     }
   }
@@ -286,6 +339,10 @@ export default async (config = {}) => {
         get(config, 'build.output.path', 'build_production'),
       ],
       ignoreInitial: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 150,
+        pollInterval: 25,
+      },
     })
     .on('change', async file => await globalPathsHandler(file, 'change'))
     .on('add', async file => await globalPathsHandler(file, 'add'))
@@ -293,25 +350,33 @@ export default async (config = {}) => {
 
   /**
    * Serve all folders in the cwd as static files
-   *
-   * TODO: change to include build.assets or build.static, which may be outside cwd
    */
   const srcFoldersList = await fg.glob(
     [
       '**/*/',
       ...get(config, 'build.static.source', [])
     ], {
-      onlyFiles: false,
-      ignore: [
-        'node_modules',
-        get(config, 'build.output.path', 'build_*'),
-      ]
-    })
+    onlyFiles: false,
+    ignore: [
+      'node_modules',
+      get(config, 'build.output.path', 'build_*'),
+    ]
+  })
 
   srcFoldersList.forEach(folder => {
     app.use(express.static(path.join(config.cwd, folder)))
   })
 
+  // Error-handling middleware
+  app.use(async (req, res) => {
+    const view = await fs.readFile(path.join(__dirname, 'views', '404.html'), 'utf8')
+    const { html } = await render(view, {
+      url: req.url,
+    })
+
+    res.status(404).send(html)
+  })
+
   /**
    * Start the server
    */
@@ -321,8 +386,6 @@ export default async (config = {}) => {
 
   function startServer(port) {
     const serverStartTime = Date.now()
-    spinner.start('Starting server...')
-
     const server = createServer(app)
 
     /**

package/src/server/views/404.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Template not found</title>
+  <style>
+    html, body {
+      font-family: Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    .container {
+      box-sizing: border-box;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 1;
+      padding: 24px;
+    }
+
+    .error-code {
+      font-size: 25rem;
+      font-weight: 700;
+      color: #f1f5f9;
+      position: fixed;
+      top: -1.5rem;
+      left: -3rem;
+      user-select: none;
+    }
+  </style>
+</head>
+<body>
+  <span class="error-code">404</span>
+
+  <div class="container">
+    <div style="text-align: center;">
+      <h1 style="font-size: 3rem; color: #0F172A; margin: 2.25rem 0">
+        Template Not Found
+      </h1>
+      <p style="margin: 0 0 2.25rem; font-size: 1.25rem; line-height: 1.5; color: #64748B;">
+        The Template you are looking for was not found:
+      </p>
+      <p style="margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #334155;">
+        {{ page.url }}
+      </p>
+    </div>
+  </div>
+
+  <div style="position: fixed; bottom: 0; right: 0; pointer-events: none; user-select: none;">
+    <svg width="883" height="536" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1100" height="536"><path fill="#D9D9D9" d="M0 .955h1100V536H0z"/></mask><g mask="url(#a)" stroke="#94A3B8" stroke-miterlimit="10"><path d="M1056.93 92.587c0-50.03-43.95-90.587-98.168-90.587-54.22 0-98.174 40.557-98.174 90.587v483.125c0 50.029 43.954 90.586 98.174 90.586 54.218 0 98.168-40.557 98.168-90.586V92.587ZM646.241 92.587C646.241 42.556 602.287 2 548.067 2c-54.219 0-98.173 40.557-98.173 90.587v483.125c0 50.029 43.954 90.586 98.173 90.586 54.22 0 98.174-40.557 98.174-90.586V92.587Z"/><path d="M1036.18 148.383c33.41-39.402 25.88-96.336-16.82-127.164C976.657-9.61 914.955-2.66 881.544 36.742L471.586 520.215c-33.411 39.402-25.879 96.336 16.824 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.955-483.473ZM625.093 148.396c33.411-39.403 25.878-96.336-16.824-127.164C565.567-9.597 503.865-2.647 470.454 36.755L60.495 520.228c-33.41 39.402-25.878 96.336 16.825 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.958-483.473Z"/></g></svg>
+  </div>
+</body>
+</html>

package/src/transformers/addAttributes.js

@@ -11,7 +11,7 @@ export default function posthtmlPlugin(attributes = {}) {
       role: 'none'
     },
     img: {
-      alt: ''
+      alt: true,
     }
   }
 

package/src/transformers/comb.js

@@ -37,7 +37,7 @@ const posthtmlPlugin = options => tree => {
 
   const { result: html } = emailComb(render(tree), options)
 
-  return parse(html)
+  return parse(html, posthtmlConfig)
 }
 
 export default posthtmlPlugin

package/src/transformers/core.js

@@ -11,6 +11,18 @@ const posthtmlPlugin = (config = {}) => tree => {
       node.content = ['']
     }
 
+    /**
+     * Custom attributes to prevent inlining CSS from <style> tags
+     */
+    if (
+      node.tag === 'style'
+      && (node.attrs?.['no-inline'] || node.attrs?.embed)
+    ) {
+      node.attrs['no-inline'] = false
+      node.attrs.embed = false
+      node.attrs['data-embed'] = true
+    }
+
     return node
   }
 

package/src/transformers/index.js

@@ -2,12 +2,14 @@ import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
 import { defu as merge } from 'defu'
 
+import core from './core.js'
 import comb from './comb.js'
 import sixHex from './sixHex.js'
 import minify from './minify.js'
 import baseUrl from './baseUrl.js'
 import inlineCSS from './inline.js'
 import prettify from './prettify.js'
+import templateTag from './template.js'
 import filters from './filters/index.js'
 import markdown from 'posthtml-markdownit'
 import posthtmlMso from './posthtmlMso.js'
@@ -20,19 +22,17 @@ import replaceStrings from './replaceStrings.js'
 import attributeToStyle from './attributeToStyle.js'
 import removeAttributes from './removeAttributes.js'
 
-import coreTransformers from './core.js'
-
 import defaultPosthtmlConfig from '../posthtml/defaultConfig.js'
 
 /**
  * Use Maizzle Transformers on an HTML string.
  *
- * Only Transformers that are enabled in the `config` will be used.
+ * Only Transformers that are enabled in the passed
+ * `config` parameter will be used.
  *
  * @param {string} html The HTML content
  * @param {object} config The Maizzle config object
- * @returns {Promise<{ original: string, config: object, html: string }>}
- *   A Promise resolving to an object containing the original HTML, modified HTML, and the config
+ * @returns {Promise<{ html: string }>} A Promise resolving to an object containing the modified HTML
  */
 export async function run(html = '', config = {}) {
   const posthtmlPlugins = []
@@ -45,27 +45,26 @@ export async function run(html = '', config = {}) {
   /**
    * 1. Core transformers
    *
-   * Transformers that are always enabled
+   * Transformers that are always enabled.
    *
    */
-  posthtmlPlugins.push(coreTransformers(config))
+  posthtmlPlugins.push(core(config))
 
   /**
    * 2. Safe class names
    *
    * Rewrite Tailwind CSS class names to email-safe alternatives,
-   * unless explicitly disabled
+   * unless explicitly disabled.
    */
-  if (get(config, 'css.safeClassNames') !== false) {
+  if (get(config, 'css.safe') !== false) {
     posthtmlPlugins.push(
-      safeClassNames(get(config, 'css.safeClassNames', {}))
+      safeClassNames(get(config, 'css.safe', {}))
     )
   }
 
   /**
    * 3. Filters
    *
-   * Apply filters to HTML.
    * Filters are always applied, unless explicitly disabled.
    */
   if (get(config, 'filters') !== false) {
@@ -77,7 +76,7 @@ export async function run(html = '', config = {}) {
   /**
    * 4. Markdown
    *
-   * Convert Markdown to HTML with Markdown-it, unless explicitly disabled
+   * Convert Markdown to HTML with markdown-it, unless explicitly disabled.
    */
   if (get(config, 'markdown') !== false) {
     posthtmlPlugins.push(
@@ -87,7 +86,9 @@ export async function run(html = '', config = {}) {
 
   /**
    * 5. Prevent widow words
-   * Always runs, unless explicitly disabled
+   *
+   * Enabled by default, will prevent widow words in elements
+   * wrapped with a `prevent-widows` attribute.
    */
   if (get(config, 'widowWords') !== false) {
     posthtmlPlugins.push(
@@ -109,7 +110,7 @@ export async function run(html = '', config = {}) {
   /**
    * 7. Inline CSS
    *
-   * Inline CSS into HTML
+   * Inline CSS into HTML.
    */
   if (get(config, 'css.inline')) {
     posthtmlPlugins.push(inlineCSS(
@@ -149,7 +150,7 @@ export async function run(html = '', config = {}) {
   /**
    * 10. Shorthand CSS
    *
-   * Convert longhand CSS properties to shorthand in `style` attributes
+   * Convert longhand CSS properties to shorthand in `style` attributes.
    */
   if (get(config, 'css.shorthand')) {
     posthtmlPlugins.push(
@@ -160,7 +161,7 @@ export async function run(html = '', config = {}) {
   /**
    * 11. Add attributes
    *
-   * Add attributes to HTML tags
+   * Add attributes to HTML tags.
    */
   if (get(config, 'attributes.add') !== false) {
     posthtmlPlugins.push(
@@ -171,33 +172,18 @@ export async function run(html = '', config = {}) {
   /**
    * 12. Base URL
    *
-   * Add a base URL to relative paths
+   * Add a base URL to relative paths.
    */
   if (get(config, 'baseURL', get(config, 'baseUrl'))) {
     posthtmlPlugins.push(
       baseUrl(get(config, 'baseURL', get(config, 'baseUrl', {})))
     )
-  } else {
-    /**
-     * Set baseURL to `build.static.destination` if it's not already set
-     */
-    const destination = get(config, 'build.static.destination', '')
-    if (destination && !config._dev) {
-      posthtmlPlugins.push(
-        baseUrl({
-          url: destination,
-          allTags: true,
-          styleTag: true,
-          inlineCss: true,
-        })
-      )
-    }
   }
 
   /**
    * 13. URL parameters
    *
-   * Add parameters to URLs
+   * Add parameters to URLs.
    */
   if (get(config, 'urlParameters')) {
     posthtmlPlugins.push(
@@ -208,8 +194,7 @@ export async function run(html = '', config = {}) {
   /**
    * 14. Six-digit HEX
    *
-   * Convert three-digit HEX colors to six-digit
-   * Always runs, unless explicitly disabled
+   * Enabled by default, converts three-digit HEX colors to six-digit.
    */
   if (get(config, 'css.sixHex') !== false) {
     posthtmlPlugins.push(
@@ -220,7 +205,7 @@ export async function run(html = '', config = {}) {
   /**
    * 15. PostHTML MSO
    *
-   * Simplify writing MSO conditionals for Outlook
+   * Enabled by default, simplifies writing MSO conditionals for Outlook.
    */
   if (get(config, 'outlook') !== false) {
     posthtmlPlugins.push(
@@ -231,7 +216,7 @@ export async function run(html = '', config = {}) {
   /**
    * 16. Prettify
    *
-   * Pretty-print HTML using js-beautify
+   * Pretty-print HTML using js-beautify.
    */
   if (get(config, 'prettify')) {
     posthtmlPlugins.push(
@@ -242,7 +227,7 @@ export async function run(html = '', config = {}) {
   /**
    * 17. Minify
    *
-   * Minify HTML using html-crush
+   * Minify HTML using html-crush.
    */
   if (get(config, 'minify')) {
     posthtmlPlugins.push(
@@ -251,9 +236,16 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 18. Replace strings
+   * 18. <template> tags
+   *
+   * Replace <template> tags with their content.
+   */
+  posthtmlPlugins.push(templateTag())
+
+  /**
+   * 19. Replace strings
    *
-   * Replace strings through regular expressions
+   * Replace strings through regular expressions.
    */
   if (get(config, 'replaceStrings')) {
     posthtmlPlugins.push(