@maizzle/framework 4.8.7 → 5.0.0-beta.0

package/src/transformers/prettify.js

@@ -1,8 +1,10 @@
-/* eslint-disable camelcase */
-const pretty = require('pretty')
-const {get, merge, isEmpty, isObject} = require('lodash')
+import pretty from 'pretty'
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
+const posthtmlPlugin = (options = {}) => tree => {
   const defaultConfig = {
     space_around_combinator: true, // Preserve space around CSS selector combinators
     newline_between_rules: false, // Remove empty lines between CSS rules
@@ -10,18 +12,17 @@ module.exports = async (html, config = {}, direct = false) => {
     extra_liners: [] // Don't add extra new line before any tag
   }
 
-  config = direct ? config : get(config, 'prettify')
+  const config = merge(options, defaultConfig)
 
-  // Don't prettify if not explicitly enabled in config
-  if (!config || (isObject(config) && isEmpty(config))) {
-    return html
-  }
-
-  if (typeof config === 'boolean' && config) {
-    return pretty(html, defaultConfig)
-  }
+  return pretty(render(tree), config)
+}
 
-  config = merge(defaultConfig, config)
+export default posthtmlPlugin
 
-  return pretty(html, config)
+export async function prettify(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/preventWidows.js

@@ -1,22 +1,13 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const {removeWidows} = require('string-remove-widows')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { removeWidows } from 'string-remove-widows'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}) => {
-  if (isEmpty(config)) {
-    return removeWidows(html).res
-  }
-
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  return posthtml([removeWidowsPlugin(config)]).process(html, posthtmlOptions).then(result => result.html)
-}
-
-const removeWidowsPlugin = options => tree => {
-  const {attrName = 'prevent-widows', ...removeWidowsOptions} = get(options, 'widowWords', options)
-
-  removeWidowsOptions.minWordCount = removeWidowsOptions.minWordCount || 3
+const posthtmlPlugin = (options = {}) => tree => {
+  options = merge(options, {
+    minWordCount: 3,
+    attrName: 'prevent-widows'
+  })
 
   // Ignore defaults
   const mappings = [
@@ -58,20 +49,19 @@ const removeWidowsPlugin = options => tree => {
     }
   ]
 
-  if (Array.isArray(removeWidowsOptions.ignore)) {
-    removeWidowsOptions.ignore.forEach(pair => mappings.push(pair))
+  if (Array.isArray(options.ignore)) {
+    options.ignore.forEach(pair => mappings.push(pair))
   }
 
-  if (typeof removeWidowsOptions.ignore !== 'string') {
-    removeWidowsOptions.ignore = mappings
+  if (typeof options.ignore !== 'string') {
+    options.ignore = mappings
   }
 
   const process = node => {
-    if (node.attrs && Object.keys(node.attrs).includes(attrName)) {
-      const widowsRemovedString = removeWidows(tree.render(node.content), removeWidowsOptions).res
-
+    if (node.attrs && Object.keys(node.attrs).includes(options.attrName)) {
+      const widowsRemovedString = removeWidows(tree.render(node.content), options).res
       node.content = tree.render(tree.parser(widowsRemovedString))
-      node.attrs[attrName] = false
+      delete node.attrs[options.attrName]
     }
 
     return node
@@ -79,3 +69,19 @@ const removeWidowsPlugin = options => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function preventWidows(html = '', options = {}, posthtmlOptions = {}) {
+  // Apply only to elements that contain the `prevent-widows` attribute
+  if (options.withAttributes) {
+    return posthtml([
+      posthtmlPlugin(options)
+    ])
+      .process(html, merge(posthtmlOptions, posthtmlConfig))
+      .then(result => result.html)
+  }
+
+  // Apply to all elements
+  return removeWidows(html, options).res
+}

package/src/transformers/removeAttributes.js

@@ -1,19 +1,7 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  attributes.push('style', 'class')
-
-  html = await posthtml([
-    removeAttributes(attributes, posthtmlOptions)
-  ]).process(html, posthtmlOptions).then(result => result.html)
-
-  return html
-}
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
 /**
  * Remove empty attributes with PostHTML
@@ -26,7 +14,9 @@ module.exports = async (html, config = {}, direct = false) => {
  *
  * Condition 3: same as 2, but for regular expressions
  */
-const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
+const posthtmlPlugin = (attributes = [], posthtmlOptions = {}) => tree => {
+  attributes.push('style', 'class')
+
   const process = node => {
     const normalizedAttrs = attributes.map(attribute => {
       return {
@@ -54,3 +44,13 @@ const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function removeAttributes(html = '', attributes = [], posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(attributes, merge(posthtmlOptions, posthtmlConfig))
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/replaceStrings.js

@@ -1,14 +1,35 @@
-const {get, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const replacements = direct ? config : get(config, 'replaceStrings', {})
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import isEmpty from 'lodash-es/isEmpty.js'
+import { parser as parse } from 'posthtml-parser'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
+const posthtmlPlugin = (replacements = {}) => tree => {
   if (!isEmpty(replacements)) {
-    Object.entries(replacements).forEach(([k, v]) => {
-      const regex = new RegExp(k, 'gi')
-      html = html.replace(regex, v)
-    })
+    const regexes = Object.entries(replacements).map(([k, v]) => [new RegExp(k, 'gi'), v])
+    const patterns = new RegExp(Object.keys(replacements).join('|'), 'gi')
+
+    return parse(
+      render(tree).replace(patterns, matched => {
+        for (const [regex, replacement] of regexes) {
+          if (regex.test(matched)) {
+            return replacement
+          }
+        }
+      })
+    )
   }
 
-  return html
+  return tree
+}
+
+export default posthtmlPlugin
+
+export async function replaceStrings(html = '', replacements = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(replacements)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/safeClassNames.js

@@ -1,29 +1,29 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const safeClassNames = require('posthtml-safe-class-names')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+import posthtmlSafeClassNames from 'posthtml-safe-class-names'
 
-module.exports = async (html, config = {}, direct = false) => {
-  /*
-   * Don't run when:
-   * - `config` is falsy or empty
-   * - developing locally and `safeClassNames` is not explicitly `true`
-   * - `safeClassNames` is explicitly `false`
-   */
-  if (
-    !config
-    || isEmpty(config)
-    || (get(config, 'env') === 'local' && get(config, 'safeClassNames') !== true)
-    || get(config, 'safeClassNames') === false
-  ) {
-    return html
+export default function posthtmlPlugin(options = {}) {
+  // If options is boolean, convert to object
+  if (typeof options === 'boolean') {
+    options = {}
   }
 
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  const replacements = direct ? config : get(config, 'safeClassNames', {
-    '{': '{',
-    '}': '}'
-  })
+  // Default options
+  options = merge({
+    replacements: {
+      '{': '{',
+      '}': '}'
+    }
+  }, options)
 
-  return posthtml([safeClassNames({replacements})]).process(html, posthtmlOptions).then(result => result.html)
+  return posthtmlSafeClassNames(options)
+}
+
+export async function safeClassNames(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/shorthandCss.js

@@ -0,0 +1,22 @@
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+import posthtmlMergeLonghand from 'posthtml-postcss-merge-longhand'
+
+export default function posthtmlPlugin(options = {}) {
+  if (Array.isArray(options.tags)) {
+    return posthtmlMergeLonghand({
+      tags: options.tags,
+    })
+  }
+
+  return posthtmlMergeLonghand()
+}
+
+export async function shorthandCSS(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/sixHex.js

@@ -1,19 +1,9 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const {conv} = require('color-shorthand-hex-to-six-digit')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { conv } from 'color-shorthand-hex-to-six-digit'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}) => {
-  if (get(config, 'sixHex') === false) {
-    return html
-  }
-
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  return posthtml([sixHex()]).process(html, posthtmlOptions).then(result => result.html)
-}
-
-const sixHex = () => tree => {
+const posthtmlPlugin = () => tree => {
   const targets = new Set(['bgcolor', 'color'])
 
   const process = node => {
@@ -30,3 +20,13 @@ const sixHex = () => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function sixHEX(html = '', posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin()
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/urlParameters.js

@@ -1,20 +1,22 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const urlParams = require('posthtml-url-parameters')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import urlParameters from 'posthtml-url-parameters'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
-  const urlParameters = direct ? config : get(config, 'urlParameters', {})
+export default function posthtmlPlugin(options = {}) {
+  const { _options, ...parameters } = options
+  const tags = get(_options, 'tags', ['a'])
+  const strict = get(_options, 'strict', true)
+  const qs = get(_options, 'qs', { encode: false })
 
-  if (!isEmpty(urlParameters)) {
-    const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-    const {_options, ...parameters} = urlParameters
-    const tags = get(_options, 'tags', ['a'])
-    const strict = get(_options, 'strict', true)
-    const qs = get(_options, 'qs', {encode: false})
-
-    return posthtml([urlParams({parameters, tags, qs, strict})]).process(html, posthtmlOptions).then(result => result.html)
-  }
+  return urlParameters({ parameters, tags, qs, strict })
+}
 
-  return html
+export async function addURLParams(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/useAttributeSizes.js

@@ -0,0 +1,65 @@
+import postcss from 'postcss'
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+
+const posthtmlPlugin = (mappings = {}) => tree => {
+  if (!Object.keys(mappings).length) {
+    return tree
+  }
+
+  // Normalize tags in mappings by lowercasing them
+  for (const key in mappings) {
+    if (Array.isArray(mappings[key])) {
+      mappings[key] = mappings[key].map(value => value.toLowerCase())
+    }
+  }
+
+  const process = node => {
+    // Check if the node is defined in mappings
+    if (
+      get(mappings, 'width', []).includes(node.tag)
+      || get(mappings, 'height', []).includes(node.tag)
+    ) {
+      // Check if the node has an inline CSS property equal to one of the keys in mappings
+      if (node.attrs.style) {
+        const { root } = postcss().process(`${node.attrs.style}`, { from: undefined })
+
+        root.walkDecls(decl => {
+          if (mappings.width.includes(node.tag) && decl.prop === 'width') {
+            // Set its value as an attribute on the node; the attribute name is the key in mappings
+            node.attrs.width = decl.value.replace('px', '')
+            // Remove the inline CSS property from the declaration
+            decl.remove()
+          }
+
+          if (mappings.height.includes(node.tag) && decl.prop === 'height') {
+            // Set its value as an attribute on the node; the attribute name is the key in mappings
+            node.attrs.height = decl.value.replace('px', '')
+            // Remove the inline CSS property from the declaration
+            decl.remove()
+          }
+        })
+
+        // Set the remaining inline CSS as the `style` attribute on the node
+        // If there are no remaining declarations, remove the `style` attribute
+        node.attrs.style = root.toString().trim() || false
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}
+
+export default posthtmlPlugin
+
+export async function useAttributeSizes(html = '', mappings = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(mappings)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

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 }
+}