@maizzle/framework 5.0.0-beta.13 → 5.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.15",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -77,6 +77,7 @@
     "posthtml-component": "^1.1.0",
     "posthtml-content": "^2.0.1",
     "posthtml-extra-attributes": "^3.0.0",
+    "posthtml-fetch": "^4.0.0",
     "posthtml-markdownit": "^3.0.1",
     "posthtml-mso": "^3.0.0",
     "posthtml-parser": "^0.12.0",

package/src/commands/build.js

@@ -35,8 +35,6 @@ import {
 
 import { readFileConfig } from '../utils/getConfigByFilePath.js'
 
-import { transformers } from '../transformers/index.js'
-
 /**
  * Compile templates and output to the build directory.
  * Returns a promise containing an object with files output and the config object.
@@ -238,7 +236,6 @@ export default async (config = {}) => {
       await config.afterBuild({
         config,
         files: allOutputFiles,
-        transform: transformers,
       })
     }
 

package/src/posthtml/index.js

@@ -3,12 +3,13 @@ import { defu as merge } from 'defu'
 
 // PostHTML
 import posthtml from 'posthtml'
+import posthtmlFetch from 'posthtml-fetch'
+import envTags from './plugins/envTags.js'
 import components from 'posthtml-component'
 import posthtmlPostcss from 'posthtml-postcss'
 import defaultPosthtmlConfig from './defaultConfig.js'
 import expandLinkTag from './plugins/expandLinkTag.js'
 import envAttributes from './plugins/envAttributes.js'
-import envTags from './plugins/envTags.js'
 
 // PostCSS
 import tailwindcss from 'tailwindcss'
@@ -50,12 +51,29 @@ export async function process(html = '', config = {}) {
     { page: config },
   )
 
+  const fetchPlugin = posthtmlFetch(
+    merge(
+      {
+        expressions: merge(
+          locals,
+          expressionsOptions,
+          {
+            missingLocal: '{local}',
+            strictMode: false,
+          },
+        ),
+      },
+      get(config, 'build.fetch', {})
+    )
+  )
+
   return posthtml([
     ...get(config, 'posthtml.plugins.before', []),
     envTags(config.env),
     envAttributes(config.env),
     expandLinkTag,
     postcssPlugin,
+    fetchPlugin,
     components(
       merge(
         {

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
@@ -63,16 +128,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
@@ -84,7 +151,7 @@ export default async (config = {}) => {
     )
   ].join('|')
 
-  const routePattern = Array.isArray(templateFolders)
+  const routePattern = Array.isArray(getTemplateFolders(config))
     ? `*/:file.(${extensions})`
     : `:file.(${extensions})`
 
@@ -127,7 +194,7 @@ export default async (config = {}) => {
   })
 
   // Error-handling middleware
-  app.use(async (error, req, res, next) => { // eslint-disable-line
+  app.use(async (error, req, res, next) => {
     console.error(error)
 
     const view = await fs.readFile(path.join(__dirname, 'views', 'error.html'), 'utf8')
@@ -145,60 +212,32 @@ export default async (config = {}) => {
    *
    * 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)])
     .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
       }
     })
 
@@ -255,7 +294,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) : ''}`
       )
 
       /**
@@ -302,12 +341,12 @@ export default async (config = {}) => {
       '**/*/',
       ...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)))

package/types/config.d.ts

@@ -62,7 +62,7 @@ export default interface Config {
   /**
    * Configure build settings.
    */
-  build: BuildConfig;
+  build?: BuildConfig;
 
   /**
   Define a string that will be prepended to sources and hrefs in your HTML and CSS.
@@ -98,7 +98,7 @@ export default interface Config {
   /**
    * Configure how CSS is handled.
    */
-  css: {
+  css?: {
     /**
      * Configure CSS inlining.
      */
@@ -184,7 +184,7 @@ export default interface Config {
    * }
    * ```
    */
-  filters: boolean | Record<string, (str: string) => string>;
+  filters?: boolean | Record<string, (str: string) => string>;
 
   /**
    * Define variables outside of the `page` object.
@@ -473,7 +473,7 @@ export default interface Config {
   * }
   * ```
   */
-  beforeCreate: Events['beforeCreate'];
+  beforeCreate?: Events['beforeCreate'];
 
   /**
    * Runs after the Template's config has been computed, but just before it is compiled.
@@ -492,7 +492,7 @@ export default interface Config {
    * }
    * ```
    */
-  beforeRender: Events['beforeRender'];
+  beforeRender?: Events['beforeRender'];
 
   /**
   * Runs after the Template has been compiled, but before any Transformers have been applied.
@@ -511,7 +511,7 @@ export default interface Config {
   * }
   * ```
   */
-  afterRender: Events['afterRender'];
+  afterRender?: Events['afterRender'];
 
   /**
   * Runs after all Transformers have been applied, just before the final HTML is returned.
@@ -530,7 +530,7 @@ export default interface Config {
   * }
   * ```
   */
-  afterTransformers: Events['afterTransformers'];
+  afterTransformers?: Events['afterTransformers'];
 
   /**
   * Runs after all Templates have been compiled and output to disk.
@@ -547,7 +547,7 @@ export default interface Config {
   * }
   * ```
   */
-  afterBuild: Events['afterBuild'];
+  afterBuild?: Events['afterBuild'];
 
   [key: string]: any;
 }

package/types/css/purge.d.ts

@@ -102,7 +102,7 @@ export default interface PurgeCSSConfig {
    * }
    * ```
   */
-  doNotRemoveHTMLCommentsWhoseOpeningTagContains: Opts['doNotRemoveHTMLCommentsWhoseOpeningTagContains'];
+  doNotRemoveHTMLCommentsWhoseOpeningTagContains?: Opts['doNotRemoveHTMLCommentsWhoseOpeningTagContains'];
 
   /**
    * Rename all classes and IDs in both your `<style>` tags and your body HTML elements,