@maizzle/framework 6.0.0-9 → 6.0.0-rc.0

package/src/index.js

@@ -1,49 +0,0 @@
-import serve from './server/index.js'
-import build from './commands/build.js'
-import { render } from './generators/render.js'
-
-import { addAttributes } from './transformers/addAttributes.js'
-import { attributeToStyle } from './transformers/attributeToStyle.js'
-import { addBaseUrl } from './transformers/baseUrl.js'
-import { purge } from './transformers/purge.js'
-import { filters } from './transformers/filters/index.js'
-import { inline } from './transformers/inline.js'
-import { markdown } from './transformers/markdown.js'
-import { minify } from './transformers/minify.js'
-import { useMso } from './transformers/posthtmlMso.js'
-import { prettify } from './transformers/prettify.js'
-import { removeAttributes } from './transformers/removeAttributes.js'
-import { replaceStrings } from './transformers/replaceStrings.js'
-import { safeClassNames } from './transformers/safeClassNames.js'
-import { shorthandCSS } from './transformers/shorthandCss.js'
-import { sixHEX } from './transformers/sixHex.js'
-import { addURLParams } from './transformers/urlParameters.js'
-import { useAttributeSizes } from './transformers/useAttributeSizes.js'
-import { preventWidows } from './transformers/preventWidows.js'
-import { generatePlaintext } from './generators/plaintext.js'
-
-export {
-  build,
-  serve,
-  render,
-  addAttributes,
-  attributeToStyle,
-  addBaseUrl,
-  purge as removeUnusedCSS,
-  purge as purgeCSS,
-  filters,
-  inline as inlineCSS,
-  markdown,
-  minify,
-  useMso,
-  prettify,
-  removeAttributes,
-  replaceStrings,
-  safeClassNames,
-  shorthandCSS,
-  sixHEX,
-  addURLParams,
-  useAttributeSizes,
-  preventWidows,
-  generatePlaintext,
-}

package/src/posthtml/defaultComponentsConfig.js

@@ -1,19 +0,0 @@
-export default {
-  root: './',
-  tag: 'component',
-  fileExtension: ['html'],
-  folders: [
-    'layouts',
-    'emails',
-    'templates',
-    'components',
-    'src/layouts',
-    'src/templates',
-    'src/components'
-  ],
-  expressions: {
-    loopTags: ['each', 'for'],
-    missingLocal: '{local}',
-    strictMode: false,
-  },
-}

package/src/posthtml/defaultConfig.js

@@ -1,14 +0,0 @@
-import { defu as merge } from 'defu'
-
-export function getPosthtmlOptions(userConfigOptions = {}) {
-  return merge(
-    userConfigOptions,
-    {
-      recognizeNoValueAttribute: true,
-      recognizeSelfClosing: true,
-      directives: [
-        { name: '?php', start: '<', end: '>' },
-      ],
-    }
-  )
-}

package/src/posthtml/index.js

@@ -1,102 +0,0 @@
-import get from 'lodash-es/get.js'
-import { defu as merge } from 'defu'
-
-// PostHTML
-import posthtml from 'posthtml'
-import posthtmlFetch from 'posthtml-fetch'
-import envTags from './plugins/envTags.js'
-import components from 'posthtml-component'
-import expandLinkTag from './plugins/expandLinkTag.js'
-import envAttributes from './plugins/envAttributes.js'
-import { getPosthtmlOptions } from './defaultConfig.js'
-import combineMediaQueries from './plugins/combineMediaQueries.js'
-import defaultComponentsConfig from './defaultComponentsConfig.js'
-import removeRawStyleAttributes from './plugins/removeRawStyleAttributes.js'
-
-// PostCSS
-import { compileCss } from './plugins/postcss/compileCss.js'
-
-export async function process(html = '', config = {}) {
-  /**
-   * Define PostHTML options by merging user-provided ones
-   * on top of a default configuration.
-   */
-  const posthtmlOptions = getPosthtmlOptions(get(config, 'posthtml.options', {}))
-
-  const componentsUserOptions = get(config, 'components', {})
-
-  const expressionsOptions = merge(
-    get(config, 'expressions', get(config, 'posthtml.expressions', {})),
-    get(componentsUserOptions, 'expressions', {}),
-  )
-
-  const locals = merge(
-    get(config, 'locals', {}),
-    get(expressionsOptions, 'locals', {}),
-    { page: config },
-  )
-
-  const fetchPlugin = posthtmlFetch(
-    merge(
-      {
-        expressions: merge(
-          { locals },
-          expressionsOptions,
-          {
-            missingLocal: '{local}',
-            strictMode: false,
-          },
-        ),
-      },
-      get(config, 'fetch', {})
-    )
-  )
-
-  const componentsConfig = merge(
-    {
-      expressions: merge(
-        { locals },
-        expressionsOptions,
-      )
-    },
-    componentsUserOptions,
-    defaultComponentsConfig
-  )
-
-  // Ensure `fileExtension` is array and  has no duplicates
-  componentsConfig.fileExtension = Array.from(new Set(
-    [].concat(componentsConfig.fileExtension)
-  ))
-
-  const beforePlugins = get(config, 'posthtml.plugins.before', [])
-
-  return posthtml([
-    ...beforePlugins,
-    compileCss(config),
-    fetchPlugin,
-    components(componentsConfig),
-    fetchPlugin,
-    expandLinkTag(),
-    envTags(config.env),
-    envAttributes(config.env),
-    compileCss(config),
-    get(config, 'css.combineMediaQueries') !== false
-      && combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
-    removeRawStyleAttributes(),
-    ...get(
-      config,
-      'posthtml.plugins.after',
-      beforePlugins.length > 0
-        ? []
-        : get(config, 'posthtml.plugins', [])
-    ),
-  ].filter(Boolean))
-    .process(html, posthtmlOptions)
-    .then(result => ({
-      config: merge(config, { page: config }),
-      html: result.html,
-    }))
-    .catch(error => {
-      throw error
-    })
-}

package/src/posthtml/plugins/combineMediaQueries.js

@@ -1,42 +0,0 @@
-import postcss from 'postcss'
-import sortMediaQueries from 'postcss-sort-media-queries'
-
-const plugin = (options = {}) => tree => {
-  const process = node => {
-    // Check if this is a style tag with content
-    if (node && node.tag === 'style' && node.content && Array.isArray(node.content)) {
-      // Get the CSS content from the style tag
-      const cssContent = node.content.join('')
-
-      if (cssContent.trim()) {
-        try {
-          // Create PostCSS processor for combining and sorting media queries
-          const processor = postcss([
-            sortMediaQueries({
-              sort: options.sort || 'mobile-first',
-              ...options
-            })
-          ])
-
-          // Process CSS synchronously
-          const result = processor.process(cssContent, {
-            from: undefined,
-            to: undefined
-          })
-
-          // Replace the content with processed CSS
-          node.content = [result.css]
-        } catch (error) {
-          // If processing fails, leave the content unchanged
-          console.warn('Failed to process media queries:', error.message)
-        }
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
-
-export default plugin

package/src/posthtml/plugins/envAttributes.js

@@ -1,32 +0,0 @@
-const plugin = (env => tree => {
-  const process = node => {
-    // Return the original node if no environment is set
-    if (!env) {
-      return node
-    }
-
-    if (node?.attrs) {
-      for (const attr in node.attrs) {
-        const suffix = `-${env}`
-
-        // Find attributes on this node that have this suffix
-        if (attr.endsWith(suffix)) {
-          const key = attr.slice(0, -suffix.length)
-          const value = node.attrs[attr]
-
-          // Change the attribute without the suffix to have the value of the suffixed attribute
-          node.attrs[key] = value
-
-          // Remove the attribute with the suffix
-          node.attrs[attr] = false
-        }
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-})
-
-export default plugin

package/src/posthtml/plugins/envTags.js

@@ -1,33 +0,0 @@
-const plugin = (env => tree => {
-  const process = node => {
-    env = env || 'local'
-
-    // Return the original node if it doesn't have a tag
-    if (!node?.tag) {
-      return node
-    }
-
-    const tagEnv = node.tag.split(':').pop()
-
-    // Tag targets current env, remove it and return its content
-    if (node.tag === `env:${env}`) {
-      node.tag = false
-    }
-
-    // Tag doesn't target current env, remove it completely
-    if (
-      typeof node.tag === 'string'
-      && node.tag.startsWith('env:')
-      && tagEnv !== env
-    ) {
-      node.content = []
-      node.tag = false
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-})
-
-export default plugin

package/src/posthtml/plugins/expandLinkTag.js

@@ -1,59 +0,0 @@
-const targets = new Set(['expand', 'inline'])
-
-const expandLinkPlugin = () => tree => {
-  return new Promise((resolve, reject) => {
-    const isNode = typeof process !== 'undefined' && process.versions?.node
-
-    const loadFile = async href => {
-      if (isNode) {
-        const { readFile } = await import('node:fs/promises')
-        return await readFile(href, 'utf8')
-      }
-
-      const res = await fetch(href)
-
-      if (!res.ok) {
-        throw new Error(`Failed to fetch ${href}: ${res.statusText}`)
-      }
-
-      return await res.text()
-    }
-
-    const promises = []
-
-    try {
-      tree.walk(node => {
-        if (node?.attrs && ![...targets].some(attr => attr in node.attrs)) {
-          for (const attr of targets) {
-            node.attrs[attr] = false
-          }
-          return node
-        }
-
-        if (
-          node?.tag === 'link' &&
-          node.attrs?.href &&
-          node.attrs.rel === 'stylesheet'
-        ) {
-          const promise = loadFile(node.attrs.href).then(content => {
-            node.tag = 'style'
-            node.attrs = {}
-            node.content = [content]
-          })
-
-          promises.push(promise)
-        }
-
-        return node
-      })
-
-      Promise.all(promises)
-        .then(() => resolve(tree))
-        .catch(reject)
-    } catch (err) {
-      reject(err)
-    }
-  })
-}
-
-export default expandLinkPlugin

package/src/posthtml/plugins/postcss/compileCss.js

@@ -1,125 +0,0 @@
-import postcss from 'postcss'
-import get from 'lodash-es/get.js'
-import { defu as merge } from 'defu'
-import { transform } from 'lightningcss'
-import tailwindcss from '@tailwindcss/postcss'
-import postcssSafeParser from 'postcss-safe-parser'
-import customProperties from 'postcss-custom-properties'
-
-const attributes = new Set([
-  'raw',
-  'plain',
-  'as-is',
-  'uncompiled',
-  'unprocessed',
-])
-
-// export attributes
-export const validAttributeNames = attributes
-
-/**
- * PostHTML plugin to process Tailwind CSS within style tags.
- *
- * This plugin processes CSS content in `<style>` tags and
- * compiles it with PostCSS. Tags marked with attribute
- * names found in `attributes` will be skipped.
- */
-export function compileCss(config = {}) {
-  return tree => {
-    return new Promise((resolve, reject) => {
-      const stylePromises = []
-
-      tree.walk(node => {
-        if (node && node.tag === 'style' && node.content) {
-          if (node.attrs && Object.keys(node.attrs).some(attr => attributes.has(attr))) {
-            return node
-          }
-
-          const css = Array.isArray(node.content)
-            ? node.content.join('')
-            : node.content
-
-          const promise = processCss(css, config)
-            .then(processedCss => {
-              node.content = [processedCss]
-            })
-            .catch(error => {
-              console.warn('Error processing CSS in style tag:', error.message)
-            })
-
-          stylePromises.push(promise)
-        }
-
-        return node
-      })
-
-      Promise.all(stylePromises)
-        .then(() => resolve(tree))
-        .catch(reject)
-    })
-  }
-}
-
-async function processCss(css, config) {
-  /**
-   * PostCSS pipeline. Plugins defined and added here
-   * will apply to all `<style>` tags in the HTML,
-   * unless marked to be excluded.
-   */
-  const resolveCSSProps = merge(get(config, 'css.resolveProps', {}), {preseve: false})
-
-  let lightningCssOptions = get(config, 'css.lightning')
-  if (lightningCssOptions !== false) {
-    lightningCssOptions = merge(
-      lightningCssOptions,
-      {
-        targets: {
-          ie: 1,
-        },
-      }
-    )
-  }
-
-  try {
-    const result = await postcss([
-      tailwindcss(get(config, 'css.tailwind', {})),
-      customProperties(resolveCSSProps),
-      ...get(config, 'postcss.plugins', []),
-    ]).process(css, merge(
-      get(config, 'postcss.options', {}),
-      {
-        from: config.cwd || './',
-        parser: postcssSafeParser
-      }
-    ))
-
-    /**
-     * Lightning CSS processing
-     *
-     * We use this to lower the modern Tailwind CSS 4 syntax
-     * to be more email-friendly.
-     */
-
-    if (result.css?.trim() && lightningCssOptions !== false) {
-      try {
-        const { code } = transform(
-          merge(
-            lightningCssOptions,
-            {
-              code: Buffer.from(result.css)
-            }
-          )
-        )
-
-        return code.toString()
-      } catch (error) {
-        console.warn('Failed to lower syntax with Lightning CSS:', error.message)
-      }
-    }
-
-    return result.css
-  } catch (error) {
-    console.warn('Error compiling CSS:', error.message)
-    return css
-  }
-}

package/src/posthtml/plugins/removeRawStyleAttributes.js

@@ -1,30 +0,0 @@
-import { validAttributeNames } from './postcss/compileCss.js'
-
-/**
- * Remove specific attributes from `<style>` tags in PostHTML.
- *
- * Use to clean up <style> tag attributes after proccessing
- * has taken place. A "raw" attribute is used to indicate
- * that the content should not be compiled.
- * @returns {Function} PostHTML plugin
- */
-const plugin = () => tree => {
-  const process = node => {
-    if (node && node.tag === 'style') {
-      if (node.attrs && Object.keys(node.attrs).some(attr => validAttributeNames.has(attr))) {
-        // Remove the attribute
-        for (const attr of Object.keys(node.attrs)) {
-          if (validAttributeNames.has(attr)) {
-            delete node.attrs[attr]
-          }
-        }
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
-
-export default plugin

package/src/server/client.js

@@ -1,182 +0,0 @@
-// biome-ignore lint: need it globally
-var lastKnownScrollPosition = 0
-
-function connectWebSocket() {
-  if (!('WebSocket' in window)) {
-    // Force reload if WebSocket is not supported
-    window.location.reload()
-  }
-
-  const { hostname, port } = window.location
-  const socket = new WebSocket(`ws://${hostname}:${port}`)
-
-  /**
-   * Synchronized scrolling
-   * Sends the scroll position to the server
-   */
-  function handleScroll() {
-    socket.send(JSON.stringify({
-      type: 'scroll',
-      position: window.scrollY
-    }))
-  }
-
-  function scrollHandler() {
-    lastKnownScrollPosition = window.scrollY
-    requestAnimationFrame(handleScroll)
-  }
-
-  window.addEventListener('scroll', scrollHandler)
-
-  socket.addEventListener('message', async event => {
-    const data = JSON.parse(event.data)
-
-    if (data.type === 'scroll' && data.scrollSync === true) {
-      window.scrollTo(0, data.position)
-    }
-
-    if (data.type === 'change') {
-      if (data.hmr === true) {
-        // Use morphdom to update the existing DOM with the new content
-        morphdom(document.documentElement, data.content, {
-          childrenOnly: true,
-          onBeforeElUpdated(fromEl, toEl) {
-            // Speed-up trick from morphdom docs - https://dom.spec.whatwg.org/#concept-node-equals
-            if (fromEl.isEqualNode(toEl)) {
-              return false
-            }
-
-            return true
-          },
-          onElUpdated(el) {
-            // Handle broken images updates, like incorrect file paths
-            if (el.tagName === 'IMG' && !el.complete) {
-              const img = new Image()
-              img.src = el.src
-              el.src = ''
-
-              img.onload = () => {
-                el.src = img.src
-              }
-            }
-          },
-        })
-      } else {
-        // Reload the page
-        window.location.reload()
-      }
-
-      /**
-       * Fix for attributes not being updated on <html> tag
-       * Borrowed from https://github.com/11ty/eleventy-dev-server/
-       */
-      const parser = new DOMParser()
-      const parsed = parser.parseFromString(data.content, 'text/html')
-      const parsedDoc = parsed.documentElement
-      const newAttrs = parsedDoc.getAttributeNames()
-      const docEl = document.documentElement
-
-      // Remove old attributes
-      const removedAttrs = docEl.getAttributeNames().filter(name => !newAttrs.includes(name))
-      for (const attr of removedAttrs) {
-        docEl.removeAttribute(attr)
-      }
-
-      // Add new attributes
-      for (const attr of newAttrs) {
-        docEl.setAttribute(attr, parsedDoc.getAttribute(attr))
-      }
-    }
-
-    if (['add', 'unlink'].includes(data.type)) {
-      if (data.hmr === true) {
-        const randomNumber = Math.floor(Math.random() * 10 ** 16).toString().padStart(16, '0')
-
-        /**
-         * Cache busting for images
-         *
-         * Appends a `?v=` cache-busting parameter to image sources
-         * every time a file is added or removed. This forces the
-         * browser to re-download the image and immediately
-         * reflect the changes through HMR.
-         */
-
-        // For all elements with `src` attributes
-        const srcElements = document.querySelectorAll('[src]')
-
-        srcElements.forEach(el => {
-          // Update the value of 'v' parameter if it already exists
-          if (el.src.includes('?')) {
-            el.src = el.src.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`)
-          } else {
-            // Add 'v' parameter
-            el.src += `?v=${randomNumber}`
-          }
-        })
-
-        // For `background` attributes
-        const htmlBgElements = document.querySelectorAll('[background]')
-
-        htmlBgElements.forEach(el => {
-          const bgValue = el.getAttribute('background')
-          if (bgValue) {
-            // Update the value of 'v' parameter if it already exists
-            if (bgValue.includes('?')) {
-              el.setAttribute('background', bgValue.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`))
-            } else {
-              // Add 'v' parameter
-              el.setAttribute('background', `${bgValue}?v=${randomNumber}`)
-            }
-          }
-        })
-
-        // For inline CSS `background` properties
-        const styleElements = document.querySelectorAll('[style]')
-
-        styleElements.forEach(el => {
-          const styleAttribute = el.getAttribute('style')
-          if (styleAttribute) {
-            const urlPattern = /(url\(["']?)(.*?)(["']?\))/g
-            // Replace URLs in style attribute with cache-busting parameter
-            const updatedStyleAttribute = styleAttribute.replace(urlPattern, (_match, p1, p2, p3) => {
-              // Update the value of 'v' parameter if it already exists
-              if (p2.includes('?')) {
-                  return `${p1}${p2.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`)}${p3}`
-              }
-
-              // Add 'v' parameter
-              return `${p1}${p2}?v=${randomNumber}${p3}`
-            })
-
-            // Update style attribute
-            el.setAttribute('style', updatedStyleAttribute)
-          }
-        })
-      } else {
-        // Reload the page
-        window.location.reload()
-      }
-    }
-  })
-
-  socket.addEventListener('close', () => {
-    window.removeEventListener('scroll', scrollHandler)
-
-    // debug only:
-    console.log('WebSocket connection closed. Reconnecting...')
-
-    // Reconnect after a short delay
-    setTimeout(() => {
-      connectWebSocket()
-    }, 1000)
-  })
-
-  // Handle connection opened
-  socket.addEventListener('open', _event => {
-    console.log('WebSocket connection opened')
-  })
-
-  return socket
-}
-
-connectWebSocket()