@maizzle/framework 4.8.8 → 5.0.0-beta.0

package/src/utils/getConfigByFilePath.js

@@ -0,0 +1,124 @@
+import { resolve } from 'pathe'
+import get from 'lodash/get.js'
+import { defu as merge } from 'defu'
+import { lstat } from 'node:fs/promises'
+import isEmpty from 'lodash-es/isEmpty.js'
+
+/**
+ * Compute the Maizzle config object.
+ *
+ * If a config file path is provided, that file will be read
+ * instead of trying to merge the base and environment configs.
+ *
+ * If an environment is provided, the config object will be
+ * computed based on a base config and the resolved
+ * environment config.
+ *
+ * @param {string} env - The environment name to use.
+ * @param {string} path - The path to the config file to use.
+ * @returns {Promise<object>} The computed config object.
+ */
+export async function readFileConfig(config) {
+  try {
+    /**
+     * If `config` is string, try to read and return
+     * the config object from it.
+     */
+    if (typeof config === 'string' && config) {
+      const { default: resolvedConfig } = await import(`file://${resolve(config)}?d=${Date.now()}`)
+        .catch(() => { throw new Error('Could not read config file') })
+
+      return merge(resolvedConfig, { env: config })
+    }
+
+    /**
+     * Otherwise, default to the Environment config approach,
+     * where we check for config files that follow a
+     * specific naming convention.
+     *
+     * First, we check for a base config file, in this order:
+     */
+    const baseConfigFileNames = [
+      './maizzle.config.js',
+      './maizzle.config.local.js',
+      './config.js',
+      './config.local.js',
+      './maizzle.config.cjs',
+      './maizzle.config.local.cjs',
+      './config.cjs',
+      './config.local.cjs',
+    ]
+
+    const env = get(config, 'env', 'local')
+    let baseConfig = merge({ env }, config)
+    let envConfig = merge({ env }, config)
+
+    const cwd = env === 'maizzle-ci' ? './test/stubs/config' : process.cwd()
+
+    // We load the first base config found
+    for (const module of baseConfigFileNames) {
+      // Check if the file exists, go to next one if not
+      const configFileExists = await lstat(resolve(cwd, module)).catch(() => false)
+
+      if (!configFileExists) {
+        continue
+      }
+
+      // Load the config file
+      try {
+        const { default: baseConfigFile } = await import(`file://${resolve(cwd, module)}?d=${Date.now()}`)
+
+        // Use the first base config found
+        if (!isEmpty(baseConfigFile)) {
+          baseConfig = merge(baseConfigFile, baseConfig)
+          break
+        }
+      } catch (error) {
+        break
+      }
+
+    }
+
+    // Then, we load and compute the first Environment config found
+    if (env !== 'local') {
+      let loaded = false
+      const modulesToTry = [
+        `./maizzle.config.${env}.js`,
+        `./config.${env}.js`,
+        `./maizzle.config.${env}.cjs`,
+        `./config.${env}.cjs`,
+      ]
+
+      for (const module of modulesToTry) {
+        // Check if the file exists, go to next one if not
+        const configFileExists = await lstat(resolve(cwd, module)).catch(() => false)
+
+        if (!configFileExists) {
+          continue
+        }
+
+        // Load the config file
+        try {
+          const { default: envConfigFile } = await import(`file://${resolve(cwd, module)}?d=${Date.now()}`)
+
+          // If it's not an empty object, merge it with the base config
+          if (!isEmpty(envConfigFile)) {
+            envConfig = merge(envConfigFile, envConfig)
+            loaded = true
+            break
+          }
+        } catch (error) {
+          break
+        }
+      }
+
+      if (!loaded) {
+        throw new Error(`Failed to load the \`${env}\` environment config, do you have one of these files in your project root?\n\n${modulesToTry.join('\n')}`)
+      }
+    }
+
+    return merge(envConfig, baseConfig)
+  } catch (error) {
+    throw new Error('Could not compute config')
+  }
+}

package/src/utils/node.js

@@ -0,0 +1,68 @@
+import os from 'node:os'
+import gm from 'gray-matter'
+import pico from 'picocolors'
+import { humanFileSize } from './string.js'
+
+// Return a local IP address
+export function getLocalIP() {
+  const interfaces = os.networkInterfaces()
+
+  for (const iface in interfaces) {
+    const ifaceInfo = interfaces[iface]
+
+    for (const alias of ifaceInfo) {
+      if (alias.family === 'IPv4' && !alias.internal) {
+        return alias.address
+      }
+    }
+  }
+
+  return '127.0.0.1' // Default to localhost if no suitable IP is found
+}
+
+/**
+ * Return the file size of a string
+ *
+ * @param {string} string The HTML string to calculate the file size of
+ * @returns {number} The file size in bytes, a floating-point number
+ * */
+export function getFileSize(string) {
+  const blob = new Blob([string], { type: 'text/html' })
+
+  return blob.size.toFixed(2)
+}
+
+/**
+ * Color-code a formatted file size string depending on the size
+ *
+ * 0-49 KB: green
+ * 50-102 KB: yellow
+ * >102 KB: red
+ *
+ * @param {string} string The HTML string to calculate the file size of
+ * @returns {string} The formatted, color-coded file size
+ * */
+export function getColorizedFileSize(string) {
+  const size = getFileSize(string)
+  const formattedSize = humanFileSize(size)
+
+  if (size / 1024 < 50) {
+    return formattedSize
+  }
+
+  if (size / 1024 < 102) {
+    return pico.yellow(formattedSize)
+  }
+
+  return pico.red(formattedSize)
+}
+
+export function parseFrontMatter(html) {
+  /**
+   * Need to pass empty options object to gray-matter
+   * in order to disable caching.
+   * https://github.com/jonschlinkert/gray-matter/issues/43
+   */
+  const { content, data, matter, stringify } = gm(html, {})
+  return { content, data, matter, stringify }
+}

package/src/utils/string.js

@@ -0,0 +1,117 @@
+/**
+ * Inject a script into HTML by "prepending" it to the first available closing
+ * tag from a list of candidates.
+ *
+ * @param {string} html The HTML content
+ * @param {string} script The script to inject
+ * @returns {string} The modified HTML
+ */
+export function injectScript(html = '', script = '') {
+  if (html.includes('</head>')) {
+    return html.replace('</head>', `${script}</head>`)
+  }
+
+  if (html.includes('</title>')) {
+    return html.replace('</title>', `</title>${script}`)
+  }
+
+  if (html.includes('</body>')) {
+    return html.replace('</body>', `${script}</body>`)
+  }
+
+  if (html.includes('</html>')) {
+    return html.replace('</html>', `${script}</html>`)
+  }
+
+  if (html.includes('<!doctype html>')) {
+    return html.replace('<!doctype html>', `<!doctype html>${script}`)
+  }
+
+  return script + html
+}
+
+/**
+ * Find the common prefix among an array of strings.
+ *
+ * @param {string[]} strings Array of strings
+ * @returns {string} Common prefix
+ * @throws {TypeError} If the input is not an array
+ */
+export function findCommonPrefix(strings) {
+  // Must be an array
+  if (!Array.isArray(strings)) {
+    throw new TypeError('findCommonPrefix expects an array')
+  }
+
+  const sortedStrings = strings.slice().sort()
+  const first = sortedStrings[0]
+  const last = sortedStrings[sortedStrings.length - 1]
+  let i = 0
+
+  while (i < first.length && first.charAt(i) === last.charAt(i)) {
+    i++
+  }
+
+  return first.substring(0, i)
+}
+
+export function formatMs(milliseconds) {
+  const date = new Date(milliseconds);
+
+  const hours = date.getUTCHours();
+  const minutes = date.getUTCMinutes();
+  const seconds = date.getUTCSeconds();
+  const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+  return formattedTime;
+}
+
+/**
+ * Format milliseconds as human-readable text.
+ *
+ * @param {number} ms Number of milliseconds.
+ * @returns {string} Formatted string.
+ */
+export function formatTime(ms) {
+  if (ms < 1000) {
+    return `${ms} ms`
+  }
+
+  if (ms < 60000) { // Less than 1 minute
+    const seconds = ms / 1000
+    return `${seconds.toFixed(2)} s`
+  }
+
+  const minutes = ms / 60000
+  return `${minutes.toFixed(2)} min`
+}
+
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param {number} bytes Number of bytes.
+ * @param {boolean} si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param {number} dp Number of decimal places to display.
+ *
+ * @return {string} Formatted string.
+ */
+export function humanFileSize(bytes, si=false, dp=2) {
+  const threshold = si ? 1000 : 1024
+
+  if (Math.abs(bytes) < threshold) {
+    return bytes + ' B'
+  }
+
+  const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  let u = -1
+  const r = 10**dp
+
+  do {
+    bytes /= threshold
+    ++u
+  } while (Math.round(Math.abs(bytes) * r) / r >= threshold && u < units.length - 1)
+
+
+  return bytes.toFixed(dp) + ' ' + units[u]
+}

package/types/build.d.ts

@@ -1,74 +1,134 @@
-import type LayoutsConfig from './layouts';
-import type PostHTMLConfig from './posthtml';
-import type TailwindConfig from './tailwind';
-import type TemplatesConfig from './templates';
-import type ComponentsConfig from './components';
-import type {Options as BrowserSyncConfig} from 'browser-sync';
+import ComponentsConfig from './components';
+import type { SpinnerName } from 'cli-spinners';
 
 export default interface BuildConfig {
   /**
-  Templates configuration.
-  */
-  templates: TemplatesConfig;
-
-  /**
-  Tailwind CSS configuration.
-  */
-  tailwind?: TailwindConfig;
-
-  /**
-  [DEPRECATED] Layouts configuration.
-  */
-  layouts?: LayoutsConfig;
-
-  /**
-  Components configuration.
-  */
+   * Components configuration.
+   */
   components?: ComponentsConfig;
 
   /**
-  PostHTML configuration.
-  */
-  posthtml?: PostHTMLConfig;
+   * Directory where Maizzle should look for Templates to compile.
+   *
+   * @default ['src/templates/**\/*.html']
+   *
+   * @example
+   * ```
+   * export default {
+   *   build: {
+   *     files: ['src/templates/**\/*.html']
+   *   }
+   * }
+   * ```
+   */
+  files?: string | string[];
 
   /**
-  Configure PostCSS
+   * Define the output path for compiled Templates, and what file extension they should use.
+   *
+   * @example
+   * ```
+   * export default {
+   *   build: {
+   *     output: {
+   *       path: 'build_production',
+   *       extension: 'html'
+   *     }
+   *   }
+   * }
+   * ```
    */
-  postcss?: {
+  output?: {
     /**
-    Additional PostCSS plugins that you would like to use.
-
-    @default []
-
-    @example
-    ```
-    const examplePlugin = require('postcss-example-plugin')
-    module.exports = {
-      build: {
-        postcss: {
-          plugins: [
-            examplePlugin()
-          ]
-        }
-      }
-    }
-    ```
-    */
-    plugins?: any[];
+     * Directory where Maizzle should output compiled Templates.
+     *
+     * @default 'build_{env}'
+     */
+    path?: string;
+    /**
+     * File extension to be used for compiled Templates.
+     *
+     * @default 'html'
+     */
+    extension: string;
   };
 
   /**
-  Browsersync configuration.
-
-  When you run the `maizzle serve` command, Maizzle uses [Browsersync](https://browsersync.io/)
-  to start a local development server and open a directory listing of your emails in your default browser.
-  */
-  browsersync?: BrowserSyncConfig;
+   * Source and destination directories for static files.
+   *
+   * @example
+   * ```
+   * export default {
+   *   build: {
+   *     static: {
+   *       source: ['src/images/**\/*.*'],
+   *       destination: 'images'
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  static?: {
+    /**
+     * Array of paths where Maizzle should look for static files.
+     *
+     * @default undefined
+     */
+    source?: string[];
+    /**
+     * Directory where static files should be copied to,
+     * relative to the `build.output` path.
+     *
+     * @default undefined
+     */
+    destination?: string;
+  } | {
+    /**
+     * An array of objects specifying source and destination directories for static files.
+     */
+    static: Array<{
+      /**
+       * Array of paths where Maizzle should look for static files.
+       */
+      source: string[];
+      /**
+       * Directory where static files should be copied to,
+       * relative to the `build.output` path.
+       */
+      destination: string;
+    }>;
+  };
 
   /**
-  Configure how build errors are handled when developing with the Maizzle CLI.
+   * Type of spinner to show in the console.
+   *
+   * @default 'dots'
+   *
+   * @example
+   * ```
+   * export default {
+   *   build: {
+   *     spinner: 'bounce'
+   *   }
+   * }
+   * ```
+   */
+  spinner?: SpinnerName;
 
-  @default undefined
-  */
-  fail?: 'silent' | 'verbose';
+  /**
+   * Show a summary of files that were compiled, along with their
+   * size and the time it took to compile them.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * export default {
+   *   build: {
+   *     summary: true
+   *   }
+   * }
+   * ```
+   */
+  summary?: boolean;
 }