@maizzle/framework 4.8.8 → 5.0.0-beta.1

package/bin/maizzle

@@ -1,3 +1,5 @@
 #!/usr/bin/env node
 
-require('@maizzle/cli')
+import bootstrap from '@maizzle/cli'
+
+await bootstrap()

package/package.json

@@ -1,13 +1,32 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.8.8",
+  "version": "5.0.0-beta.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
-  "main": "src/index.js",
-  "types": "types/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "types": "./types/index.d.ts"
+    }
+  },
   "bin": {
     "maizzle": "bin/maizzle"
   },
+  "files": [
+    "bin",
+    "src",
+    "types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vitest",
+    "lint": "biome lint ./src ./test",
+    "pretest": "npm run lint",
+    "test": "vitest run --coverage"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/maizzle/framework.git"
@@ -27,70 +46,59 @@
     "email-boilerplate",
     "html-emails"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "lint": "biome lint ./src ./test",
-    "pretest": "npm run lint",
-    "test": "c8 ava"
-  },
-  "files": [
-    "src",
-    "types",
-    "bin"
-  ],
   "dependencies": {
-    "@maizzle/cli": "^1.5.1",
-    "autoprefixer": "^10.4.14",
-    "browser-sync": "^3.0.2",
-    "color-shorthand-hex-to-six-digit": "^3.0.2",
-    "email-comb": "^5.3.1",
+    "@csstools/css-calc": "^1.2.2",
+    "@maizzle/cli": "next",
+    "cheerio": "^1.0.0-rc.12",
+    "chokidar": "^3.6.0",
+    "cli-table3": "^0.6.5",
+    "color-shorthand-hex-to-six-digit": "^5.0.16",
+    "defu": "^6.1.4",
+    "email-comb": "^7.0.21",
+    "express": "^4.19.2",
     "fast-glob": "^3.3.2",
-    "front-matter": "^4.0.0",
-    "fs-extra": "^11.2.0",
-    "html-crush": "^4.0.0",
-    "is-url-superb": "^5.0.0",
+    "gray-matter": "^4.0.3",
+    "html-crush": "^6.0.18",
+    "is-url-superb": "^6.1.0",
+    "istextorbinary": "^9.5.0",
     "juice": "^10.0.0",
-    "lodash": "^4.17.20",
-    "ora": "^5.1.0",
-    "postcss": "^8.4.21",
-    "postcss-import": "^15.0.0",
-    "postcss-merge-longhand": "^6.0.0",
+    "lodash-es": "^4.17.21",
+    "morphdom": "^2.7.2",
+    "ora": "^8.0.1",
+    "pathe": "^1.1.2",
+    "postcss": "^8.4.38",
+    "postcss-custom-properties": "^13.3.10",
+    "postcss-import": "^16.1.0",
+    "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^1.1.0",
-    "posthtml-base-url": "^2.0.2",
+    "posthtml-base-url": "^3.1.2",
     "posthtml-component": "^1.1.0",
-    "posthtml-content": "^1.0.2",
-    "posthtml-extend": "^0.6.0",
-    "posthtml-extra-attributes": "^2.0.0",
-    "posthtml-fetch": "^3.0.0",
-    "posthtml-markdownit": "^1.3.1",
-    "posthtml-match-helper": "^1.0.3",
-    "posthtml-mso": "^2.0.1",
+    "posthtml-content": "^2.0.1",
+    "posthtml-extra-attributes": "^3.0.0",
+    "posthtml-markdownit": "^3.0.1",
+    "posthtml-mso": "^3.0.0",
+    "posthtml-parser": "^0.12.0",
+    "posthtml-postcss": "^1.0.0",
     "posthtml-postcss-merge-longhand": "^3.1.0",
-    "posthtml-safe-class-names": "^3.0.0",
-    "posthtml-url-parameters": "^2.0.0",
+    "posthtml-render": "^3.0.0",
+    "posthtml-safe-class-names": "^4.0.2",
+    "posthtml-url-parameters": "^3.0.0",
     "pretty": "^2.0.0",
-    "query-string": "^7.1.3",
-    "string-remove-widows": "^2.1.0",
-    "string-strip-html": "^8.2.0",
-    "tailwindcss": "^3.2.7"
+    "string-remove-widows": "^4.0.22",
+    "string-strip-html": "^13.4.8",
+    "tailwindcss": "^3.4.4",
+    "ws": "^8.17.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "@types/browser-sync": "^2.29.0",
-    "@types/js-beautify": "^1.14.0",
-    "@types/markdown-it": "^14.0.0",
-    "ava": "^5.2.0",
-    "c8": "^10.0.0"
+    "@types/js-beautify": "^1.14.3",
+    "@types/markdown-it": "^14.1.1",
+    "@vitest/coverage-v8": "^2.0.1",
+    "supertest": "^7.0.0",
+    "vitest": "^2.0.1"
   },
   "engines": {
-    "node": ">=14.0.0"
-  },
-  "ava": {
-    "files": [
-      "test/**/test*.js"
-    ]
+    "node": ">=18.0.0"
   }
 }

package/src/commands/build.js

@@ -1,27 +1,252 @@
-const ora = require('ora')
-const {get} = require('lodash')
-const Output = require('../generators/output')
-const {clearConsole} = require('../utils/helpers')
+import {
+  readFile,
+  writeFile,
+  copyFile,
+  lstat,
+  mkdir,
+  rm
+} from 'node:fs/promises'
+import path from 'pathe'
+import fg from 'fast-glob'
+import { defu as merge } from 'defu'
 
-const build = async (env = 'local', config = {}) => {
-  const start = new Date()
-  const spinner = ora('Building emails...').start()
+import get from 'lodash/get.js'
+import isEmpty from 'lodash-es/isEmpty.js'
+import { isBinary } from 'istextorbinary'
 
-  const {files, parsed} = await Output.toDisk(env, spinner, config)
+import ora from 'ora'
+import pico from 'picocolors'
+import cliTable from 'cli-table3'
 
-  const elapsedSeconds = (Date.now() - start) / 1000
+import { render } from '../generators/render.js'
+import { formatTime } from '../utils/string.js'
+import { getColorizedFileSize } from '../utils/node.js'
+import { readFileConfig } from '../utils/getConfigByFilePath.js'
+import {
+  generatePlaintext,
+  handlePlaintextTags,
+  writePlaintextFile
+} from '../generators/plaintext.js'
 
-  if (get(config, 'build.command') === 'serve') {
-    if (get(config, 'build.console.clear')) {
-      clearConsole()
+/**
+ * Compile templates and output to the build directory.
+ * Returns a promise containing an object with files output and the config object.
+ *
+ * @param {object|string} config - The Maizzle config object, or path to a config file.
+ * @returns {Promise<object>} The build output, containing the  files and config.
+ */
+export default async (config = {}) => {
+  const spinner = ora()
+
+  try {
+    const startTime = Date.now()
+
+    // Compute config
+    config = await readFileConfig(config).catch(() => { throw new Error('Could not compute config') })
+
+    /**
+     * Support customizing the spinner
+     */
+    const spinnerConfig = get(config, 'build.spinner')
+
+    if (spinnerConfig === false) {
+      // Show only 'Building...' text
+      spinner.isEnabled = false
+    } else {
+      spinner.spinner = get(config, 'build.spinner', 'circleHalves')
     }
 
-    spinner.succeed(`Re-built ${parsed.length} templates in ${elapsedSeconds}s`)
-  } else {
-    spinner.succeed(`Built ${parsed.length} templates in ${elapsedSeconds}s`)
-  }
+    spinner.start('Building...')
 
-  return {files}
-}
+    // Run beforeCreate event
+    if (typeof config.beforeCreate === 'function') {
+      await config.beforeCreate({ config })
+    }
+
+    const buildOutputPath = get(config, 'build.output.path', 'build_local')
+
+    // Remove output directory
+    await rm(buildOutputPath, { recursive: true, force: true })
+
+    const table = new cliTable({
+      head: ['File name', 'File size', 'Build time'].map(item => pico.bold(item)),
+    })
+
+    // Determine paths of templates to build
+    const userFilePaths = get(config, 'build.content', 'src/templates/**/*.html')
+    const templateFolders = Array.isArray(userFilePaths) ? userFilePaths : [userFilePaths]
+    const templatePaths = await fg.glob([...new Set(templateFolders)])
+
+    // If there are no templates to build, throw error
+    if (templatePaths.length === 0) {
+      throw new Error(`No templates found in ${pico.inverse(templateFolders)}`)
+    }
+
+    const baseDirs = templateFolders.filter(p => !p.startsWith('!')).map(p => {
+      const parts = p.split('/')
+      // remove the glob part (e.g., **/*.html):
+      return parts.filter(part => !part.includes('*')).join('/')
+    })
+
+    /**
+     * Check for binary files
+     *
+     * We store paths to binary files in a separate array, because we don't want
+     * to render them. These files will be treated as static files and will
+     * be copied directly to the output directory, just like the
+     * `build.static` folders.
+     */
+    const binaryPaths = await fg.glob([...new Set(baseDirs.map(base => `${base}/**/*.*`))])
+      .then(paths => paths.filter(file => isBinary(file)))
+
+    /**
+     * Render templates
+     *
+     * Render each template and write the output to the output directory,
+     * preserving the relative path.
+     */
+    for await (const templatePath of templatePaths) {
+      const templateBuildStartTime = Date.now()
+
+      // Determine the base directory the template belongs to
+      const baseDir = baseDirs.find(base => templatePath.startsWith(base))
+
+      // Compute the relative path
+      const relativePath = path.relative(baseDir, templatePath)
+
+      /**
+       * Add the current template path to the config
+       *
+       * Can be used in events like `beforeRender` to determine
+       * which template file is being rendered.
+       */
+      config.build.current = {
+        path: path.parse(templatePath),
+        baseDir,
+        relativePath,
+      }
+
+      const html = await readFile(templatePath, 'utf8')
+
+      const rendered = await render(html, config)
+
+      /**
+       * Generate plaintext
+       *
+       * We do this first so that we can remove the <plaintext>
+       * tags from the markup before outputting the file.
+       */
+      const plaintextConfig = get(rendered.config, 'plaintext')
+
+      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)
+          .catch(error => {
+            throw new Error(`Error writing plaintext file: ${error}`)
+          })
+      }
+
+      /**
+       * Determine output path, creating directories if needed
+       *
+       * Prioritize `permalink` path from Front Matter,
+       * fallback to the current template path.
+       *
+       * We do this before generating plaintext, so that
+       * any paths will already have been created.
+       */
+      const outputPathFromConfig = get(rendered.config, 'permalink', path.join(buildOutputPath, relativePath))
+      const parsedOutputPath = path.parse(outputPathFromConfig)
+      const extension = get(rendered.config, 'build.output.extension', parsedOutputPath.ext.slice(1))
+      const outputPath = `${parsedOutputPath.dir}/${parsedOutputPath.name}.${extension}`
 
-module.exports = build
+      const pathExists = await lstat(path.dirname(outputPath)).catch(() => false)
+
+      if (!pathExists) {
+        await mkdir(path.dirname(outputPath), { recursive: true })
+      }
+
+      /**
+       * Write the rendered HTML to disk, creating directories if needed
+       */
+      await writeFile(outputPath, rendered.html)
+
+      /**
+       * Add file to CLI table for build summary logging
+       */
+      if (config.build.summary) {
+        table.push([
+          path.relative(get(rendered.config, 'build.output.path'), outputPath),
+          getColorizedFileSize(rendered.html),
+          formatTime(Date.now() - templateBuildStartTime)
+        ])
+      }
+    }
+
+    /**
+     * Copy static files
+     *
+     * Copy binary files that are alongside templates as well as
+     * files from `build.static`, to the output directory.
+     *
+     * TODO: support an array of objects with source and destination, i.e. static: [{ source: 'src/assets', destination: 'assets' }, ...]
+     */
+
+    // Copy binary files that are alongside templates
+    for await (const binaryPath of binaryPaths) {
+      const relativePath = path.relative(get(config, 'build.current.baseDir'), binaryPath)
+      const outputPath = path.join(get(config, 'build.output.path'), get(config, 'build.static.destination'), relativePath)
+
+      await mkdir(path.dirname(outputPath), { recursive: true })
+      await copyFile(binaryPath, outputPath)
+    }
+
+    // Copy files from `build.static`
+    const staticSourcePaths = await fg.glob([...new Set(get(config, 'build.static.source', []))])
+      .then(paths => paths.filter(file => isBinary(file)))
+
+    if (!isEmpty(staticSourcePaths)) {
+      for await (const staticPath of staticSourcePaths) {
+        const relativePath = path.relative(get(config, 'build.current.baseDir'), staticPath)
+        const outputPath = path.join(get(config, 'build.output.path'), get(config, 'build.static.destination'), relativePath)
+
+        await mkdir(path.dirname(outputPath), { recursive: true })
+        await copyFile(staticPath, outputPath)
+      }
+    }
+
+    const compiledFiles = await fg.glob(path.join(config.build.output.path, '**/*'))
+
+    /**
+     * Run `afterBuild` event
+     */
+    if (typeof config.afterBuild === 'function') {
+      await config.afterBuild({ files: compiledFiles, config, render })
+    }
+
+    /**
+     * Log a build summary if enabled in the config
+     *
+     * Need to first clear the spinner
+     */
+
+    spinner.clear()
+
+    if (config.build.summary) {
+      console.log(table.toString() + '\n')
+    }
+
+    spinner.succeed(`Build completed in ${formatTime(Date.now() - startTime)}`)
+
+    return {
+      files: compiledFiles,
+      config
+    }
+  } catch (error) {
+    spinner.fail('Build failed')
+    throw error
+  }
+}

package/src/commands/serve.js

@@ -1,198 +1,3 @@
-const ora = require('ora')
-const fs = require('fs-extra')
-const path = require('node:path')
+import server from '../server/index.js'
 
-const Config = require('../generators/config')
-const buildToFile = require('../commands/build')
-const renderToString = require('../functions/render')
-
-const {get, merge, isObject} = require('lodash')
-const {clearConsole} = require('../utils/helpers')
-
-/**
- * Initialize Browsersync on-demand
- * https://github.com/maizzle/framework/issues/605
- */
-const browsersync = () => {
-  if (!global.cachedBrowserSync) {
-    const bs = require('browser-sync')
-    global.cachedBrowserSync = bs.create()
-  }
-
-  return global.cachedBrowserSync
-}
-
-const getConfig = async (env = 'local', config = {}) => merge(
-  config,
-  await Config.getMerged(env)
-)
-
-const serve = async (env = 'local', config = {}) => {
-  config = await getConfig(env, merge(config, {
-    build: {
-      command: 'serve'
-    }
-  }))
-
-  const spinner = ora()
-
-  // Build all emails first
-  await buildToFile(env, config)
-
-  // Set some paths to watch
-  let templates = get(config, 'build.templates')
-  templates = Array.isArray(templates) ? templates : [templates]
-
-  const templatePaths = [...new Set(templates.map(config => `${get(config, 'source', 'src')}/**`))]
-  const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
-  const globalPaths = [
-    'src/**',
-    ...new Set(get(config, 'build.browsersync.watch', []))
-  ]
-
-  if (typeof tailwindConfig === 'string') {
-    globalPaths.push(tailwindConfig)
-  }
-
-  // Watch for Template file changes
-  browsersync()
-    .watch(templatePaths)
-    .on('change', async file => {
-      config = await getConfig(env, config)
-
-      if (config.events && typeof config.events.beforeCreate === 'function') {
-        await config.events.beforeCreate(config)
-      }
-
-      // Don't render if file type is not configured
-      // eslint-disable-next-line
-      const filetypes = templates.reduce((acc, template) => {
-        return [...acc, ...get(template, 'filetypes', ['html'])]
-      }, [])
-
-      if (!filetypes.includes(path.extname(file).slice(1))) {
-        return
-      }
-
-      // Clear console if enabled
-      if (get(config, 'build.console.clear')) {
-        clearConsole()
-      }
-
-      // Start the spinner
-      const start = new Date()
-      spinner.start('Building email...')
-
-      // Render the template
-      renderToString(
-        await fs.readFile(file.replace(/\\/g, '/'), 'utf8'),
-        {
-          maizzle: merge(
-            config,
-            {
-              build: {
-                current: {
-                  path: path.parse(file)
-                }
-              }
-            }
-          ),
-          ...config.events
-        }
-      )
-        .then(async ({html, config}) => {
-          // Write the file to disk
-          let source = ''
-          let dest = ''
-          let ext = ''
-
-          if (Array.isArray(config.build.templates)) {
-            const match = config.build.templates.find(template => path.parse(file).dir.includes(path.normalize(template.source)))
-            source = path.normalize(get(match, 'source'))
-            dest = path.normalize(get(match, 'destination.path', 'build_local'))
-            ext = get(match, 'destination.ext', 'html')
-          } else if (isObject(config.build.templates)) {
-            source = path.normalize(get(config, 'build.templates.source'))
-            dest = path.normalize(get(config, 'build.templates.destination.path', 'build_local'))
-            ext = get(config, 'build.templates.destination.ext', 'html')
-          }
-
-          const fileDir = path.parse(file).dir.replace(source, '')
-          const finalDestination = path.join(dest, fileDir, `${path.parse(file).name}.${ext}`)
-
-          await fs.outputFile(config.permalink || finalDestination, html)
-        })
-        .then(() => {
-          browsersync().reload()
-          spinner.succeed(`Compiled in ${(Date.now() - start) / 1000}s [${file}]`)
-        })
-        .catch(error => {
-          throw error
-        })
-    })
-
-  // Watch for changes in all other files
-  browsersync()
-    .watch(globalPaths, {ignored: templatePaths})
-    .on('change', () => buildToFile(env, config)
-      .then(() => browsersync().reload())
-      .catch(error => {
-        throw error
-      })
-    )
-    .on('unlink', () => buildToFile(env, config)
-      .then(() => browsersync().reload())
-      .catch(error => {
-        throw error
-      })
-    )
-
-  // Watch for changes in config files
-  browsersync()
-    .watch('{maizzle.config*,config*}.{js,cjs}')
-    .on('change', async file => {
-      const fileName = path.parse(file).base
-      const match = fileName.match(/\.?config\.(.+?)\./)
-
-      const parsedEnv = match ? match[1] : env || 'local'
-
-      Config
-        .getMerged(parsedEnv)
-        .then(config => buildToFile(parsedEnv, config)
-          .then(() => browsersync().reload())
-          .catch(error => {
-            throw error
-          })
-        )
-    })
-
-  // Browsersync options
-  const baseDir = templates.map(t => t.destination.path)
-
-  // Initialize Browsersync
-  browsersync()
-    .init(
-      merge(
-        {
-          notify: false,
-          open: false,
-          port: 3000,
-          server: {
-            baseDir,
-            directory: true
-          },
-          tunnel: false,
-          ui: {port: 3001},
-          logFileChanges: false,
-          watchOptions: {
-            awaitWriteFinish: {
-              stabilityThreshold: 150,
-              pollInterval: 25
-            }
-          }
-        },
-        get(config, 'build.browsersync', {})
-      ), () => {})
-}
-
-module.exports = serve
+export default server