@maizzle/framework 5.0.0-beta.23 → 5.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.23",
+  "version": "5.0.0-beta.25",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -48,9 +48,9 @@
     "html-emails"
   ],
   "dependencies": {
-    "@csstools/css-calc": "^1.2.4",
+    "@csstools/css-calc": "^2.0.1",
     "@maizzle/cli": "next",
-    "cheerio": "1.0.0-rc.12",
+    "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
     "cli-table3": "^0.6.5",
     "color-shorthand-hex-to-six-digit": "^5.0.16",
@@ -62,13 +62,13 @@
     "html-crush": "^6.0.18",
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
-    "juice": "^10.0.1",
+    "juice": "^11.0.0",
     "lodash-es": "^4.17.21",
     "morphdom": "^2.7.4",
-    "ora": "^8.0.1",
+    "ora": "^8.1.0",
     "pathe": "^1.1.2",
     "postcss": "^8.4.39",
-    "postcss-custom-properties": "^13.3.12",
+    "postcss-custom-properties": "^14.0.1",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
@@ -90,7 +90,7 @@
     "pretty": "^2.0.0",
     "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.10",
     "ws": "^8.17.0"
   },
   "devDependencies": {
@@ -102,6 +102,6 @@
     "vitest": "^2.0.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.20"
   }
 }

package/src/generators/render.js

@@ -70,7 +70,9 @@ export async function render(html = '', config = {}) {
     })) ?? content
   }
 
-  //  Compile PostHTML
+  /**
+   * Compile PostHTML
+   */
   const compiled = await compilePostHTML(content, templateConfig)
 
   /**
@@ -86,11 +88,10 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterRender(({
       html: compiled.html,
       matter: matterData,
-      config: templateConfig,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
-  // Run Transformers
   /**
    * Run Transformers
    *
@@ -101,10 +102,9 @@ export async function render(html = '', config = {}) {
    * @returns {string} - The transformed HTML
    */
   if (templateConfig.useTransformers !== false) {
-    compiled.html = await useTransformers(compiled.html, templateConfig).then(({ html }) => html)
+    compiled.html = await useTransformers(compiled.html, compiled.config).then(({ html }) => html)
   }
 
-  // Run `afterTransformers` event
   /**
    * Run `afterTransformers` event
    *
@@ -118,12 +118,12 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterTransformers(({
       html: compiled.html,
       matter: matterData,
-      config: templateConfig,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
   return {
-    config: templateConfig,
+    config: compiled.config,
     html: compiled.html,
   }
 }

package/src/posthtml/index.js

@@ -41,7 +41,7 @@ export async function process(html = '', config = {}) {
   const componentsUserOptions = get(config, 'components', {})
 
   const expressionsOptions = merge(
-    get(config, 'build.expressions', get(config, 'posthtml.expressions', {})),
+    get(config, 'expressions', get(config, 'posthtml.expressions', {})),
     get(componentsUserOptions, 'expressions', {}),
   )
 
@@ -94,7 +94,7 @@ export async function process(html = '', config = {}) {
   ])
     .process(html, posthtmlOptions)
     .then(result => ({
-      config,
+      config: merge(config, { page: config }),
       html: result.html,
     }))
     .catch(error => {

package/src/server/index.js

@@ -63,7 +63,7 @@ async function renderUpdatedFile(file, config) {
 
     // beforeCreate event
     if (typeof config.beforeCreate === 'function') {
-      await config.beforeCreate(config)
+      await config.beforeCreate({ config })
     }
 
     // Read the file
@@ -128,7 +128,7 @@ export default async (config = {}) => {
    * Initialize WebSocket server
    * Used to send messages between the server and the browser
    */
-  initWebSockets(wss, { scrollSync: shouldScroll, hmr: useHmr })
+  initWebSockets(wss, { shouldScroll, useHmr })
 
   // Register routes
   templatePaths = await getUpdatedRoutes(app, config)
@@ -164,11 +164,11 @@ export default async (config = {}) => {
     app.get(routePattern, async (req, res, next) => {
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       try {
-        const filePath = templatePaths.find(t => t.endsWith(req.url.slice(1)))
+        const filePath = templatePaths.find(t => t.endsWith(decodeURI(req.url.slice(1))))
 
         // Set the file being viewed
         viewing = filePath
@@ -288,7 +288,7 @@ export default async (config = {}) => {
 
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        await config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       // Read the file

package/src/server/routes/index.js

@@ -27,7 +27,7 @@ function groupFilesByDirectories(globs, files) {
         const fileName = parts[parts.length - 1]
         current[fileName] = {
           name: fileName,
-          href: file,
+          href: encodeURI(file),
         }
       }
     })

package/src/server/views/index.html

@@ -79,6 +79,11 @@
       border-left: 1px solid #64748B;
     }
 
+    li.folder.nested > strong {
+      cursor: pointer;
+      display: block;
+    }
+
     li.folder.root {
       padding-top: 3rem;
       border: none;
@@ -92,6 +97,15 @@
       line-height: 2.25rem;
     }
 
+    li.file.nested.collapsed {
+      display: none;
+    }
+
+    li.file.nested.collapsed + .folder.nested {
+      padding-top: 0;
+    }
+
+
     li.file.nested a {
       padding-bottom: 0.75rem;
       margin-left: -1.5rem;
@@ -143,5 +157,16 @@
   </ul>
 
   <svg fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993 483" class="insignia"><mask id="a" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="993" height="483"><path fill="#D9D9D9" d="M0 0h993v483H0z"></path></mask><g mask="url(#a)" stroke="#e2e8f0" stroke-miterlimit="10"><path d="M954.124 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816ZM583.379 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816Z"></path><path d="M935.39 132.185c30.161-35.57 23.362-86.965-15.187-114.795S825.954-4.165 795.794 31.404L425.713 467.848c-30.161 35.57-23.361 86.965 15.187 114.795 38.549 27.829 94.249 21.555 124.41-14.014l370.08-436.444ZM564.288 132.196c30.161-35.569 23.362-86.964-15.187-114.794S454.852-4.154 424.692 31.416L54.611 467.86c-30.16 35.569-23.361 86.965 15.187 114.794 38.549 27.83 94.249 21.556 124.41-14.013l370.08-436.445Z"></path></g></svg>
+  <script>
+    document.querySelectorAll('.folder.nested').forEach(folder => {
+      folder.addEventListener('click', function() {
+        let nextElement = this.nextElementSibling;
+        while (nextElement && nextElement.classList.contains('file') && nextElement.classList.contains('nested')) {
+          nextElement.classList.toggle('collapsed');
+          nextElement = nextElement.nextElementSibling;
+        }
+      });
+    });
+  </script>
 </body>
 </html>

package/src/transformers/inline.js

@@ -2,11 +2,11 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
+import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
 import { calc } from '@csstools/css-calc'
 import isEmpty from 'lodash-es/isEmpty.js'
-import * as cheerio from 'cheerio/lib/slim'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
@@ -47,7 +47,12 @@ export async function inline(html = '', options = {}) {
     })
   }
 
-  const $ = cheerio.load(html, { decodeEntities: false, _useHtmlParser2: true })
+  const $ = cheerio.load(html, {
+    xml: {
+      decodeEntities: false,
+      xmlMode: false,
+    }
+  })
 
   // Add a `data-embed` attribute to style tags that have the embed attribute
   $('style[embed]').each((i, el) => {

package/src/transformers/markdown.js

@@ -3,17 +3,26 @@ import { defu as merge } from 'defu'
 import md from 'posthtml-markdownit'
 import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-export async function markdown(html = '', options = {}, posthtmlOptions = {}) {
+export async function markdown(input = '', options = {}, posthtmlOptions = {}) {
   /**
-   * Automatically wrap in <md> tag, unless manual mode is enabled
-   * With manual mode, user must wrap the markdown content in a <md> tag
+   * If no input is provided, return an empty string.
+   */
+  if (!input) {
+    return ''
+  }
+
+  /**
+   * Automatically wrap in <md> tag, unless manual mode is enabled.
+   *
+   * With manual mode, user must wrap the input in a <md> tag.
+   *
    * https://github.com/posthtml/posthtml-markdownit#usage
    */
-  html = options.manual ? html : `<md>${html}</md>`
+  input = options.manual ? input : `<md>${input}</md>`
 
   return posthtml([
     md(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(input, merge(posthtmlOptions, posthtmlConfig))
     .then(result => result.html)
 }

package/src/transformers/prettify.js

@@ -2,6 +2,7 @@ import pretty from 'pretty'
 import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
 import { render } from 'posthtml-render'
+import { parser as parse } from 'posthtml-parser'
 import posthtmlConfig from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (options = {}) => tree => {
@@ -14,7 +15,7 @@ const posthtmlPlugin = (options = {}) => tree => {
 
   const config = merge(options, defaultConfig)
 
-  return pretty(render(tree), config)
+  return parse(pretty(render(tree), config), posthtmlConfig)
 }
 
 export default posthtmlPlugin

package/src/transformers/template.js

@@ -1,19 +1,19 @@
-const posthtmlPlugin = (() => tree => {
+const posthtmlPlugin = () => tree => {
   const process = node => {
     // Return the original node if it doesn't have a tag
     if (!node.tag) {
       return node
     }
 
-    // Preserve <template> tags marked as such
-    if (node.tag === 'template' && node.attrs?.preserve) {
-      node.attrs.preserve = false
+    if (node.tag === 'template') {
+      // Preserve <template> tags marked as such
+      if ('attrs' in node && 'preserve' in node.attrs) {
+        node.attrs.preserve = false
 
-      return node
-    }
+        return node
+      }
 
-    // Replace <template> tags with their content
-    if (node.tag === 'template') {
+      // Remove the <template> tag
       node.tag = false
     }
 
@@ -21,6 +21,6 @@ const posthtmlPlugin = (() => tree => {
   }
 
   return tree.walk(process)
-})
+}
 
 export default posthtmlPlugin

package/types/build.d.ts

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

package/types/config.d.ts

@@ -13,9 +13,9 @@ import type { CoreBeautifyOptions } from 'js-beautify';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
 import type { PostHTMLFetchConfig } from 'posthtml-fetch';
-import type { PostHTMLComponents } from 'posthtml-component';
-
 import type { Config as TailwindConfig } from 'tailwindcss';
+import type { PostHTMLComponents } from 'posthtml-component';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface Config {
   /**
@@ -170,6 +170,11 @@ export default interface Config {
     tailwind?: TailwindConfig;
   }
 
+  /**
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
+  */
+  expressions?: PostHTMLExpressions;
+
   /**
    * Configure the [`<fetch>`](https://maizzle.com/docs/tags#fetch) tag.
    */
@@ -370,11 +375,11 @@ export default interface Config {
     hmr?: boolean;
 
     /**
-     * Enable synchronized scrolling across devices.
+     * Enable synchronized scrolling across browser tabs.
      *
      * @default false
      */
-    syncScroll?: boolean;
+    scrollSync?: boolean;
 
     /**
      * Paths to watch for changes.

package/types/index.d.ts

@@ -37,10 +37,11 @@ declare namespace MaizzleFramework {
    *
    * @param {string} input The Markdown string to compile.
    * @param {MarkdownConfig} [options] A configuration object for the Markdown compiler.
-   * @returns {string} The compiled HTML string.
-   * @see https://maizzle.com/docs/transformers/markdown
+   * @param {PostHTMLConfig} [posthtmlOptions] A configuration object for PostHTML.
+   * @returns {Promise<string>} The compiled HTML string.
+   * @see https://maizzle.com/docs/markdown#api
    */
-  function markdown(input: string, options?: MarkdownConfig): string;
+  function markdown(input: string, options?: MarkdownConfig, posthtmlOptions?: PostHTMLConfig): Promise<string>;
 
   /**
    * Prevent widow words inside a tag by adding a `&nbsp;` between its last two words.