@maizzle/framework 5.0.0-beta.14 → 5.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.14",
+  "version": "5.0.0-beta.16",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -72,23 +72,25 @@
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
-    "posthtml-attrs-parser": "^1.1.0",
+    "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.4",
-    "posthtml-component": "^1.1.0",
-    "posthtml-content": "^2.0.1",
-    "posthtml-extra-attributes": "^3.0.0",
-    "posthtml-markdownit": "^3.0.1",
-    "posthtml-mso": "^3.0.0",
+    "posthtml-component": "^2.0.0",
+    "posthtml-content": "^2.1.0",
+    "posthtml-expressions": "^1.11.4",
+    "posthtml-extra-attributes": "^3.1.0",
+    "posthtml-fetch": "^4.0.0",
+    "posthtml-markdownit": "^3.1.0",
+    "posthtml-mso": "^3.1.0",
     "posthtml-parser": "^0.12.0",
-    "posthtml-postcss": "^1.0.0",
-    "posthtml-postcss-merge-longhand": "^3.1.0",
+    "posthtml-postcss": "^1.0.2",
+    "posthtml-postcss-merge-longhand": "^3.1.2",
     "posthtml-render": "^3.0.0",
-    "posthtml-safe-class-names": "^4.0.2",
-    "posthtml-url-parameters": "^3.0.0",
+    "posthtml-safe-class-names": "^4.1.0",
+    "posthtml-url-parameters": "^3.1.0",
     "pretty": "^2.0.0",
     "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.5",
+    "tailwindcss": "^3.4.7",
     "ws": "^8.17.0"
   },
   "devDependencies": {

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/build.d.ts

@@ -1,5 +1,5 @@
 import type { SpinnerName } from 'cli-spinners';
-import type ExpressionsConfig from './expressions';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface BuildConfig {
   /**
@@ -19,9 +19,9 @@ export default interface BuildConfig {
   content?: string[];
 
   /**
-  Configure expressions.
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
   */
-  expressions?: ExpressionsConfig;
+  expressions?: PostHTMLExpressions;
 
   /**
    * Define the output path for compiled Templates, and what file extension they should use.

package/types/config.d.ts

@@ -8,11 +8,11 @@ import type PurgeCSSConfig from './css/purge';
 import type PlaintextConfig from './plaintext';
 import type CSSInlineConfig from './css/inline';
 import type { SpinnerName } from 'cli-spinners';
-import type ComponentsConfig from './components';
 import type WidowWordsConfig from './widowWords';
 import type { CoreBeautifyOptions } from 'js-beautify';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
+import type { PostHTMLComponents } from 'posthtml-component';
 
 import type { Config as TailwindConfig } from 'tailwindcss';
 
@@ -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.
@@ -93,12 +93,12 @@ export default interface Config {
   /**
    * Configure components.
    */
-  components?: ComponentsConfig;
+  components?: PostHTMLComponents;
 
   /**
    * 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,

package/types/posthtml.d.ts

@@ -1,5 +1,5 @@
 import type { Directive } from 'posthtml-parser';
-import type ExpressionsConfig from './expressions';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export interface PostHTMLOptions {
   /**
@@ -128,9 +128,9 @@ export interface PostHTMLOptions {
 
 export default interface PostHTMLConfig {
   /**
-  Configure expressions.
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
   */
-  expressions?: ExpressionsConfig;
+  expressions?: PostHTMLExpressions;
 
   /**
   Configure PostHTML options.

package/types/components.d.ts

@@ -1,195 +0,0 @@
-import type ExpressionsConfig from './expressions';
-import type { Options as PostHTMLParserOptions } from 'posthtml-parser';
-
-interface AnyObject {
-  [key: string]: string | AnyObject;
-}
-
-export default interface ComponentsConfig {
-  /**
-   * Root path where to look for folders containing component files.
-   *
-   * @default './'
-   */
-  root?: string;
-
-  /**
-   * Paths where to look for component files. Must be relative to `root`.
-   *
-   * @default ['src/components', 'src/layouts', 'src/templates']
-   */
-  folders?: string[];
-
-  /**
-   * Prefix to use for component tags.
-   *
-   * @default 'x-'
-   */
-  tagPrefix?: string;
-
-  /**
-   * Tag name to be used in HTML when using a component.
-   *
-   * @default 'component'
-   */
-  tag?: string;
-
-  /**
-   * Attribute name to be used when referencing a component via its path.
-   *
-   * @default 'src'
-   */
-  attribute?: string;
-
-  /**
-   * File extension that component files must use.
-   * Any other files will be ignored and not be made available as components.
-   *
-   * @default 'html'
-   */
-  fileExtension?: string;
-
-  /**
-   * Name of the tag that will be replaced with the content that is passed to the component.
-   *
-   * @default 'yield'
-   */
-  yield?: string;
-
-  /**
-  * Name of the slot tag, where the content will be injected.
-  *
-  * @default 'slot'
-  */
-  slot?: string;
-
-  /**
-   * Name of the fill tag, where the content to be injected is defined.
-   *
-   * @default 'fill'
-   */
-  fill?: string;
-
-  /**
-   * String to use as a separator between the slot tag and its name.
-   *
-   * @default ':'
-   */
-  slotSeparator?: string;
-
-  /**
-   * Tag name for pushing content to a stack.
-   *
-   * @default 'push'
-   */
-  push?: string;
-
-  /**
-   * Tag name for popping (rendering) content from a stack.
-   *
-   * @default 'stack'
-   */
-  stack?: string;
-
-  /**
-   * Name of the props attribute to use in the `<script>` tag of a component.
-   *
-   * @default 'props'
-   */
-  propsScriptAttribute?: string;
-
-  /**
-   * Name of the object that will be used to store the props of a component.
-   *
-   * @default 'props'
-   */
-  propsContext?: string;
-
-  /**
-   * Name of the attribute that will be used to pass props to a component as JSON.
-   *
-   * @default 'locals'
-   */
-  propsAttribute?: string;
-
-  /**
-   * Name of the key to use when retrieving props passed to a slot via `$slots.slotName.props`.
-   *
-   * @default 'props'
-   */
-  propsSlot?: string;
-
-  /**
-   * Configure [`posthtml-parser`](https://github.com/posthtml/posthtml-parser).
-   *
-   * @default
-   * {
-   *  recognizeNoValueAttribute: true,
-   *  recognizeSelfClosing: true
-   * }
-   */
-  parserOptions?: PostHTMLParserOptions;
-
-  /**
-   * Configure [`posthtml-expressions`](https://github.com/posthtml/posthtml-expressions).
-   *
-   * @default
-   * {
-   *   strictMode: false,
-   *   missingLocal: '{local}',
-   *   locals: {
-   *     page: config, // the computed Maizzle config object
-   *   }
-   * }
-   */
-  expressions?: ExpressionsConfig;
-
-  /**
-   * PostHTML plugins to apply to each parsed component.
-   *
-   * @default []
-   */
-  plugins?: Array<() => void>;
-
-  /**
-   * Extra rules for the PostHTML plugin that is used by components to parse attributes.
-   *
-   * @default {}
-   */
-  attrsParserRules?: Record<string, AnyObject>;
-
-  /**
-   * In strict mode, an error will be thrown if a component cannot be rendered.
-   *
-   * @default true
-   */
-  strict?: boolean;
-
-  /**
-   * Utility methods to be passed to `<script props>` in a component.
-   *
-   * @default {merge: _.mergeWith, template: _.template}
-   */
-  utilities?: Record<string, unknown>;
-
-  /**
-   * Define additional attributes that should be preserved for specific HTML elements.
-   *
-   * @default {}
-   */
-  elementAttributes?: Record<string, void>;
-
-  /**
-   * Attributes that should be preserved on all elements in components.
-   *
-   * @default ['data-*']
-   */
-  safelistAttributes?: string[];
-
-  /**
-   * Attributes that should be removed from all elements in components.
-   *
-   * @default []
-   */
-  blacklistAttributes?: string[];
-}

package/types/expressions.d.ts

@@ -1,100 +0,0 @@
-export default interface ExpressionsConfig {
-  /**
-  Define the starting and ending delimiters used for expressions.
-
-  @default ['{{', '}}']
-  */
-  delimiters?: string[];
-
-  /**
-  Define the starting and ending delimiters used for unescaped expressions.
-
-  @default ['{{{', '}}}']
-  */
-  unescapeDelimiters?: string[];
-
-  /**
-  Object containing data that will be available under the `page` object.
-
-  @default {}
-  */
-  locals?: Record<string, unknown>;
-
-  /**
-  Attribute name for `<script>` tags that contain locals.
-
-  @default 'locals'
-  */
-  localsAttr?: string;
-
-  /**
-  Whether to remove `<script>` tags that contain locals.
-
-  @default false
-  */
-  removeScriptLocals?: boolean;
-
-  /**
-  Tag names to be used for if/else statements.
-
-  @default ['if', 'elseif', 'else']
-  */
-  conditionalTags?: string[];
-
-  /**
-  Tag names to be used for switch statements.
-
-  @default ['switch', 'case', 'default']
-  */
-  switchTags?: string[];
-
-  /**
-  Tag names to be used for loops.
-
-  @default ['each', 'for']
-  */
-  loopTags?: string[];
-
-  /**
-  Tag names to be used for scopes.
-
-  @default ['scope']
-  */
-  scopeTags?: string[];
-
-  /**
-  Name of tag inside of which expression parsing is disabled.
-
-  @default 'raw'
-  */
-  ignoredTag?: string;
-
-  /**
-  Enabling strict mode will throw an error if an expression cannot be evaluated.
-
-  @default false
-  */
-  strictMode?: boolean;
-
-  /**
-  What to render when referencing a value that is not defined in `locals`.
-
-  By default, the string 'undefined' will be output.
-
-  @default undefined
-
-  @example
-
-  ```
-  // Output empty string if value is not defined
-  missingLocal: ''
-
-  // Output original reference if value is not defined
-  missingLocal: '{local}'
-
-  // Output custom string if value is not defined
-  missingLocal: 'ERR_NO_VALUE: {local}'
-  ```
-  */
-  missingLocal?: string;
-}