@maizzle/framework 5.0.0-beta.22 → 5.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.22",
+  "version": "5.0.0-beta.24",
   "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.0",
+    "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/commands/build.js

@@ -221,12 +221,15 @@ export default async (config = {}) => {
       if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
         const posthtmlOptions = get(rendered.config, 'posthtml.options', {})
 
-        const plaintext = await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions))
-        rendered.html = await handlePlaintextTags(rendered.html, posthtmlOptions)
-        await writePlaintextFile(plaintext, rendered.config)
+        await writePlaintextFile(
+          await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions)),
+          rendered.config
+        )
           .catch(error => {
             throw new Error(`Error writing plaintext file: ${error}`)
           })
+
+        rendered.html = await handlePlaintextTags(rendered.html, posthtmlOptions)
       }
 
       /**

package/src/generators/plaintext.js

@@ -154,17 +154,11 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   const plaintextExtension = get(plaintextConfig, 'output.extension', 'txt')
 
   /**
-   * If `plaintext: true` (either from Front Matter or from config)
+   * If `plaintext: true` (either from Front Matter or from config),
+   * output plaintext file in the same location as the HTML file.
    */
   if (plaintextConfig === true) {
-    // If the template has a `permalink` key set in the FM
-    if (typeof config.permalink === 'string') {
-      // Output plaintext at the `permalink` path
-      plaintextOutputPath = config.permalink
-    } else {
-      // Output plaintext at the same directory as the HTML file
-      plaintextOutputPath = get(config, 'build.output.path')
-    }
+    plaintextOutputPath = get(config, 'build.output.path')
   }
 
   /**
@@ -179,12 +173,22 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   // No need to handle if it's an object, since we already set it to that initially
 
   /**
-   * If `plaintextOutputPath` is a file path, output file there
+   * If the template has a `permalink` key set in the FM, always output plaintext file there
+   */
+  if (typeof config.permalink === 'string') {
+    plaintextOutputPath = config.permalink
+  }
+
+  /**
+   * If `plaintextOutputPath` is a file path, output file there.
+   *
+   * The file will be output relative to the project root, and the extension
+   * doesn't matter, it will be replaced with `plaintextExtension`.
    */
   if (path.extname(plaintextOutputPath)) {
     // Ensure the target directory exists
     await lstat(plaintextOutputPath).catch(async () => {
-      await mkdir(plaintextOutputPath, { recursive: true })
+      await mkdir(path.dirname(plaintextOutputPath), { recursive: true })
     })
 
     // Ensure correct extension is used
@@ -193,19 +197,19 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
       path.basename(plaintextOutputPath, path.extname(plaintextOutputPath)) + '.' + plaintextExtension
     )
 
-    console.log('plaintextOutputPath', plaintextOutputPath);
-
     return writeFile(plaintextOutputPath, plaintext)
   }
 
   /**
-   * If `plaintextOutputPath` is a directory path, output file there, using the template's name
+   * If `plaintextOutputPath` is a directory path, output file there using the Template's name.
+   *
+   * The file will be output relative to the `build.output.path` directory.
    */
   const templateFileName = get(config, 'build.current.path.name')
 
   plaintextOutputPath = path.join(
-    path.dirname(plaintextOutputPath),
     get(config, 'build.current.path.dir'),
+    plaintextOutputPath,
     templateFileName + '.' + plaintextExtension
   )
 

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

@@ -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)
@@ -140,7 +140,7 @@ export default async (config = {}) => {
    * */
   app.request.templatePaths = templatePaths
 
-  // await updateRoutes(app, config)
+  app.request.maizzleConfig = config
 
   /**
    * Create route pattern

package/src/server/routes/index.js

@@ -7,27 +7,65 @@ import { fileURLToPath } from 'node:url'
 import expressions from 'posthtml-expressions'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-route.get(['/', '/index.html'], async (req, res) => {
-  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
+function groupFilesByDirectories(globs, files) {
+  const result = {}
+  let current = {}
 
-  // Group by `dir`
-  const groupedByDir = {}
+  globs.forEach(glob => {
+    const rootPath = glob.split(/[\*\!\{\}]/)[0].replace(/\/+$/, '')
 
-  req.templatePaths
-    .map(t => path.parse(t))
-    .forEach(file => {
-      if (!groupedByDir[file.dir]) {
-        groupedByDir[file.dir] = []
-      }
+    files.forEach(file => {
+      if (file.startsWith(rootPath)) {
+        const relativePath = file.slice(rootPath.length + 1)
+        const parts = relativePath.split('/')
+        current = result[rootPath] = result[rootPath] || {}
+
+        for (let i = 0; i < parts.length - 1; i++) {
+          current = current[parts[i]] = current[parts[i]] || {}
+        }
 
-      file.href = [file.dir.replace(file.root, ''), file.base].join('/')
-      groupedByDir[file.dir].push(file)
+        const fileName = parts[parts.length - 1]
+        current[fileName] = {
+          name: fileName,
+          href: file,
+        }
+      }
     })
+  })
+
+  return result
+}
+
+function flattenPaths(paths, parentPath = '', currentDepth = 0) {
+  const flatArray = []
+
+  for (const [key, value] of Object.entries(paths)) {
+    const fullPath = parentPath ? `${parentPath}/${key}` : key
+
+    if (value && typeof value === 'object' && !value.name) {
+      // If it's a folder, add it with the current depth and recurse into its contents
+      flatArray.push({ name: key, path: fullPath, depth: currentDepth, type: 'folder' })
+      flatArray.push(...flattenPaths(value, fullPath, currentDepth + 1))
+    } else if (value && typeof value === 'object' && value.name) {
+      // If it's a file, add it with the current depth
+      flatArray.push({ name: value.name, href: value.href, path: fullPath, depth: currentDepth, type: 'file' })
+    }
+  }
+
+  return flatArray
+}
+
+route.get(['/', '/index.html'], async (req, res) => {
+  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
+
+  const content = new Set(req.maizzleConfig.build.content)
+
+  const groupedByDir = groupFilesByDirectories(content, req.templatePaths)
 
   const { html } = await posthtml()
     .use(expressions({
       locals: {
-        templates: groupedByDir
+        paths: flattenPaths(groupedByDir)
       }
     }))
     .process(view)

package/src/server/views/index.html

@@ -4,21 +4,144 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Maizzle | Templates</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" media="screen">
+  <style>
+    body {
+      padding: 7rem 6.25rem;
+    }
+
+    @media (max-width: 425px) {
+      body {
+        padding: 3rem 1.5rem;
+      }
+    }
+
+    /* General styling */
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      font-family: Inter, Arial, Helvetica, sans-serif;
+    }
+
+    /* Folder styling */
+    li > strong {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+      color: #0F172A;
+    }
+
+    li.folder.root {
+      padding-bottom: 1.5rem;
+      padding-top: 3rem;
+    }
+
+    li.folder.root:first-child {
+      padding-top: 0 !important;
+    }
+
+    li.folder.nested {
+      padding-top: 1.5rem;
+    }
+
+    li.folder.nested > strong {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 600;
+    }
+
+    li > strong > span {
+      color: #94A3B8;
+    }
+
+    /* File styling */
+    li > a {
+      color: #4f46e5;
+      text-decoration: none;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+
+    li > a:hover {
+      text-decoration: underline;
+    }
+
+    /* Indentation based on depth */
+    li {
+      padding-left: 1.5rem;
+    }
+
+    li.folder.nested {
+      padding-top: 2.25rem;
+      padding-bottom: 0.625rem;
+      border-left: 1px solid #64748B;
+    }
+
+    li.folder.root {
+      padding-top: 3rem;
+      border: none;
+    }
+
+    li.file {
+      border-left: 1px solid #64748B;
+    }
+
+    li.file.nested {
+      line-height: 2.25rem;
+    }
+
+    li.file.nested a {
+      padding-bottom: 0.75rem;
+      margin-left: -1.5rem;
+      padding-left: 1.5rem;
+      border-left: 1px solid #cbd5e1;
+    }
+
+    li.file.nested:last-child a {
+      padding-bottom: 0;
+    }
+
+    .insignia {
+      width: 64rem;
+      position: fixed;
+      z-index: -1;
+      right: -3rem;
+      bottom: 0;
+    }
+
+    @media (max-width: 425px) {
+      .insignia {
+        width: 100%;
+      }
+    }
+  </style>
 </head>
 <body>
-  <each loop="items, index in templates">
-    <div>
-      <h2>{{ index }}</h2>
-      <ul>
-        <each loop="item in items">
-          <li>
-            <a href="{{ item.href }}">
-              {{ item.base }}
-            </a>
-          </li>
-        </each>
-      </ul>
-    </div>
-  </each>
+  <ul>
+    <each loop="item in paths">
+      <if condition="item.type === 'folder'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="folder {{ item.depth > 0 ? 'nested' : 'root' }}"
+        >
+          <strong>{{{ item.name }}}</strong>
+        </li>
+      </if>
+      <if condition="item.type === 'file'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="file {{ item.depth > 1 ? 'nested' : '' }}"
+        >
+          <a href="{{ item.href }}">
+            {{ item.name }}
+          </a>
+        </li>
+      </if>
+    </each>
+  </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>
 </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/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/css/inline.d.ts

@@ -85,6 +85,8 @@ export default interface InlineCSSConfig {
    * Prefer HTML `width` and `height` attributes over inline CSS.
    * The inline CSS `width` and `height` will be removed.
    *
+   * Applies to elements set in `widthElements` and `heightElements`.
+   *
    * @example
    * ```
    * export default {