@maizzle/framework 5.0.0-beta.17 → 5.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.17",
+  "version": "5.0.0-beta.19",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/src/generators/render.js

@@ -60,8 +60,6 @@ export async function render(html = '', config = {}) {
    * @param {string} options.html - The HTML to be transformed
    * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.posthtml - The PostHTML compiler
-   * @param {Object} options.transform - The transformers object
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.beforeRender === 'function') {
@@ -69,7 +67,6 @@ export async function render(html = '', config = {}) {
       html: content,
       matter: matterData,
       config: templateConfig,
-      posthtml: compilePostHTML,
     })) ?? content
   }
 
@@ -83,8 +80,6 @@ export async function render(html = '', config = {}) {
    * @param {string} options.html - The HTML to be transformed
    * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.posthtml - The PostHTML compiler
-   * @param {Object} options.transform - The transformers object
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.afterRender === 'function') {
@@ -92,7 +87,6 @@ export async function render(html = '', config = {}) {
       html: compiled.html,
       matter: matterData,
       config: templateConfig,
-      posthtml: compilePostHTML,
     })) ?? compiled.html
   }
 
@@ -118,8 +112,6 @@ export async function render(html = '', config = {}) {
    * @param {string} options.html - The HTML to be transformed
    * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.posthtml - The PostHTML compiler
-   * @param {Object} options.transform - The transformers object
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.afterTransformers === 'function') {
@@ -127,7 +119,6 @@ export async function render(html = '', config = {}) {
       html: compiled.html,
       matter: matterData,
       config: templateConfig,
-      posthtml: compilePostHTML,
     })) ?? compiled.html
   }
 

package/src/posthtml/index.js

@@ -55,7 +55,7 @@ export async function process(html = '', config = {}) {
     merge(
       {
         expressions: merge(
-          locals,
+          { locals },
           expressionsOptions,
           {
             missingLocal: '{local}',
@@ -77,9 +77,10 @@ export async function process(html = '', config = {}) {
     components(
       merge(
         {
-          expressions: {
-            locals,
-          }
+          expressions: merge(
+            { locals },
+            expressionsOptions,
+          )
         },
         componentsUserOptions,
         defaultComponentsConfig

package/src/server/index.js

@@ -112,10 +112,12 @@ 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)
-  spinner.spinner = get(config, 'server.spinner', 'circleHalves')
 
   // Add static assets root prefix so user doesn't have to
   if (!config.baseURL) {
@@ -193,20 +195,6 @@ export default async (config = {}) => {
     })
   })
 
-  // Error-handling middleware
-  app.use(async (error, req, res, next) => {
-    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
    *
@@ -214,7 +202,19 @@ export default async (config = {}) => {
    */
   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 () => {
       if (viewing) {
         await renderUpdatedFile(viewing, config)
@@ -244,20 +244,33 @@ export default async (config = {}) => {
   /**
    * 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
     }
 
@@ -314,7 +327,7 @@ export default async (config = {}) => {
         }
       })
     } catch (error) {
-      spinner.fail('Failed to render template.')
+      spinner.fail(`Failed to render template: ${file}`)
       throw error
     }
   }
@@ -326,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'))
@@ -333,8 +350,6 @@ 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(
     [
@@ -352,6 +367,16 @@ export default async (config = {}) => {
     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
    */
@@ -361,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/index.js

@@ -178,21 +178,6 @@ export async function run(html = '', config = {}) {
     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,
-        })
-      )
-    }
   }
 
   /**

package/src/transformers/replaceStrings.js

@@ -15,9 +15,11 @@ const posthtmlPlugin = (replacements = {}) => tree => {
       render(tree).replace(patterns, matched => {
         for (const [regex, replacement] of regexes) {
           if (regex.test(matched)) {
-            return replacement
+            return matched.replace(regex, replacement)
           }
         }
+
+        return matched
       }),
       defaultPostHTMLConfig
     )

package/types/build.d.ts

@@ -116,4 +116,31 @@ export default interface BuildConfig {
    * ```
    */
   summary?: boolean;
+
+  /**
+   * Information about the Template currently being compiled.
+   *
+   * @example
+   *
+   * ```
+   * {
+      path: {
+        root: 'build_production',
+        dir: 'build_production',
+        base: 'transactional.html',
+        ext: '.html',
+        name: 'transactional'
+      }
+    }
+    * ```
+   */
+  current?: {
+    path?: {
+      root: string;
+      dir: string;
+      base: string;
+      ext: string;
+      name: string;
+    };
+  };
 }

package/types/events.d.ts

@@ -1,7 +1,5 @@
 import type Config from "./config";
 
-type PostHTMLType = (html: string, config: Config) => { html: string; config: Config };
-
 export default interface Events {
   /**
   * Runs after the Environment config has been computed, but before Templates are processed.
@@ -57,13 +55,6 @@ export default interface Events {
      * This is the Environment config merged with the Template's Front Matter.
      */
     config: Config;
-    /**
-     * A function to process an HTML string with PostHTML.
-     *
-     * @param {string} html The HTML string to process.
-     * @param {Config} config The Maizzle config object.
-     */
-    posthtml: PostHTMLType;
   }) => string | Promise<string>;
 
   /**
@@ -98,13 +89,6 @@ export default interface Events {
      * This is the Environment config merged with the Template's Front Matter.
      */
     config: Config;
-    /**
-    * A function to process an HTML string with PostHTML.
-    *
-    * @param {string} html The HTML string to process.
-    * @param {Config} config The Maizzle config object.
-    */
-    posthtml: PostHTMLType;
   }) => string | Promise<string>;
 
   /**
@@ -139,13 +123,6 @@ export default interface Events {
      * This is the Environment config merged with the Template's Front Matter.
      */
     config: Config;
-    /**
-    * A function to process an HTML string with PostHTML.
-    *
-    * @param {string} html The HTML string to process.
-    * @param {Config} config The Maizzle config object.
-    */
-    posthtml: PostHTMLType;
   }) => string | Promise<string>;
 
   /**