npm - @maizzle/framework - Versions diffs - 4.8.7 → 5.0.0-beta.0 - Mend

@maizzle/framework 4.8.7 → 5.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/bin/maizzle +3 -1
package/package.json +65 -58
package/src/commands/build.js +244 -19
package/src/commands/serve.js +2 -197
package/src/generators/plaintext.js +192 -91
package/src/generators/render.js +128 -0
package/src/index.js +46 -14
package/src/{generators/posthtml → posthtml}/defaultComponentsConfig.js +6 -4
package/src/{generators/posthtml → posthtml}/defaultConfig.js +1 -1
package/src/posthtml/index.js +74 -0
package/src/posthtml/plugins/expandLinkTag.js +36 -0
package/src/server/client.js +181 -0
package/src/server/index.js +383 -0
package/src/server/routes/hmr.js +24 -0
package/src/server/routes/index.js +38 -0
package/src/server/views/error.html +83 -0
package/src/server/views/index.html +24 -0
package/src/server/websockets.js +27 -0
package/src/transformers/addAttributes.js +30 -0
package/src/transformers/attributeToStyle.js +30 -36
package/src/transformers/baseUrl.js +52 -23
package/src/transformers/comb.js +51 -0
package/src/transformers/core.js +20 -0
package/src/transformers/filters/defaultFilters.js +90 -70
package/src/transformers/filters/index.js +14 -78
package/src/transformers/index.js +268 -63
package/src/transformers/inline.js +240 -0
package/src/transformers/markdown.js +13 -14
package/src/transformers/minify.js +21 -16
package/src/transformers/posthtmlMso.js +13 -8
package/src/transformers/prettify.js +16 -15
package/src/transformers/preventWidows.js +32 -26
package/src/transformers/removeAttributes.js +17 -17
package/src/transformers/replaceStrings.js +30 -9
package/src/transformers/safeClassNames.js +24 -24
package/src/transformers/shorthandCss.js +22 -0
package/src/transformers/sixHex.js +15 -15
package/src/transformers/urlParameters.js +18 -16
package/src/transformers/useAttributeSizes.js +65 -0
package/src/utils/getConfigByFilePath.js +124 -0
package/src/utils/node.js +68 -0
package/src/utils/string.js +117 -0
package/types/build.d.ts +117 -57
package/types/components.d.ts +130 -112
package/types/config.d.ts +454 -242
package/types/css/inline.d.ts +234 -0
package/types/css/purge.d.ts +125 -0
package/types/events.d.ts +5 -105
package/types/index.d.ts +148 -116
package/types/markdown.d.ts +20 -18
package/types/minify.d.ts +122 -120
package/types/plaintext.d.ts +46 -52
package/types/posthtml.d.ts +103 -136
package/types/render.d.ts +0 -117
package/types/urlParameters.d.ts +21 -20
package/types/widowWords.d.ts +9 -7
package/src/functions/plaintext.js +0 -5
package/src/functions/render.js +0 -5
package/src/generators/config.js +0 -52
package/src/generators/output/index.js +0 -4
package/src/generators/output/to-disk.js +0 -254
package/src/generators/output/to-string.js +0 -73
package/src/generators/postcss.js +0 -23
package/src/generators/posthtml/index.js +0 -75
package/src/generators/tailwindcss.js +0 -157
package/src/transformers/extraAttributes.js +0 -33
package/src/transformers/inlineCss.js +0 -42
package/src/transformers/removeInlineBackgroundColor.js +0 -56
package/src/transformers/removeInlineSizes.js +0 -43
package/src/transformers/removeInlinedSelectors.js +0 -100
package/src/transformers/removeUnusedCss.js +0 -48
package/src/transformers/shorthandInlineCSS.js +0 -26
package/src/utils/helpers.js +0 -13
package/types/baseUrl.d.ts +0 -79
package/types/fetch.d.ts +0 -143
package/types/inlineCss.d.ts +0 -207
package/types/layouts.d.ts +0 -39
package/types/removeUnusedCss.d.ts +0 -115
package/types/tailwind.d.ts +0 -22
package/types/templates.d.ts +0 -181

package/src/server/views/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Maizzle | Templates</title>
+</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>
+</body>
+</html>

package/src/server/websockets.js ADDED Viewed

@@ -0,0 +1,27 @@
+import WebSocket from 'ws'
+export function initWebSockets(wss, options = {}) {
+  options.shouldScroll = options.shouldScroll || false
+  options.useHmr = options.useHmr || true
+  wss.on('connection', ws => {
+    // Handle incoming messages from the client
+    ws.on('message', message => {
+      const parsedMessage = JSON.parse(message)
+      /**
+       * Broadcast message back to all connected clients
+       * We use it to send the scroll position back so other clients can follow
+       */
+      wss.clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(JSON.stringify({
+            ...parsedMessage,
+            scrollSync: options.shouldScroll,
+            hmr: options.useHmr
+          }))
+        }
+      })
+    })
+  })
+}

package/src/transformers/addAttributes.js ADDED Viewed

@@ -0,0 +1,30 @@
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+import addAttributesPlugin from 'posthtml-extra-attributes'
+export default function posthtmlPlugin(attributes = {}) {
+  const defaultAttributes = {
+    table: {
+      cellpadding: 0,
+      cellspacing: 0,
+      role: 'none'
+    },
+    img: {
+      alt: ''
+    }
+  }
+  // User-defined attributes take precedence
+  attributes = merge(attributes, defaultAttributes)
+  return addAttributesPlugin({ attributes })
+}
+export async function addAttributes(html = '', attributes = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(attributes)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/attributeToStyle.js CHANGED Viewed

@@ -1,44 +1,28 @@
-const {
-  get,
-  merge,
-  forEach,
-  intersection,
-  keys,
-  isEmpty
-} = require('lodash')
-const posthtml = require('posthtml')
-const parseAttrs = require('posthtml-attrs-parser')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  const attributes = get(config, 'inlineCSS.attributeToStyle', false)
-  if (typeof attributes === 'boolean' && attributes) {
-    return posthtml([attributesToStyle()]).process(html, posthtmlOptions).then(result => result.html)
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import keys from 'lodash-es/keys.js'
+import forEach from 'lodash-es/forEach.js'
+import parseAttrs from 'posthtml-attrs-parser'
+import intersection from 'lodash-es/intersection.js'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+const posthtmlPlugin = (attributes = []) => tree => {
+  if (!Array.isArray(attributes)) {
+    return tree
   }
-  if (Array.isArray(attributes) && !isEmpty(attributes)) {
-    return posthtml([attributesToStyle({attributes})]).process(html, posthtmlOptions).then(result => result.html)
+  if (attributes.length === 0) {
+    return tree
   }
-  if (direct) {
-    return posthtml([
-      attributesToStyle({
-        attributes: Array.isArray(config) ? config : []
-      })
-    ]).process(html, posthtmlOptions).then(result => result.html)
-  }
-  return html
-}
-const attributesToStyle = (options = {}) => tree => {
-  options.attributes = options.attributes || ['width', 'height', 'bgcolor', 'background', 'align', 'valign']
   const process = node => {
+    if (!node.attrs) {
+      return node
+    }
     const nodeAttributes = parseAttrs(node.attrs)
-    const matches = intersection(keys(nodeAttributes), options.attributes)
+    const matches = intersection(keys(nodeAttributes), attributes)
     const nodeStyle = get(node.attrs, 'style')
     const cssToInline = []
@@ -87,7 +71,7 @@ const attributesToStyle = (options = {}) => tree => {
       }
     })
-    nodeAttributes.style = nodeStyle ? `${nodeStyle} ${cssToInline.join('; ')}` : `${cssToInline.join('; ')}`
+    nodeAttributes.style = nodeStyle ? `${nodeStyle.split(';').join(';')} ${cssToInline.join('; ')}` : `${cssToInline.join('; ')}`
     node.attrs = nodeAttributes.compose()
@@ -96,3 +80,13 @@ const attributesToStyle = (options = {}) => tree => {
   return tree.walk(process)
 }
+export default posthtmlPlugin
+export async function attributeToStyle(html = '', attributes = [], posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(attributes)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/baseUrl.js CHANGED Viewed

@@ -1,41 +1,70 @@
-const posthtml = require('posthtml')
-const isUrl = require('is-url-superb')
-const baseUrl = require('posthtml-base-url')
-const {get, merge, isObject, isEmpty} = require('lodash')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import isUrl from 'is-url-superb'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import baseUrl from 'posthtml-base-url'
+import { render } from 'posthtml-render'
+import isEmpty from 'lodash-es/isEmpty.js'
+import isObject from 'lodash-es/isObject.js'
+import { parser as parse } from 'posthtml-parser'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
-module.exports = async (html, config = {}, direct = false) => {
-  const url = direct ? config : get(config, 'baseURL', get(config, 'baseUrl'))
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  // Handle `baseUrl` as a string
+const posthtmlPlugin = url => tree => {
+  // Handle `baseURL` as a string
   if (typeof url === 'string' && url.length > 0) {
-    html = rewriteVMLs(html, url)
+    const html = rewriteVMLs(render(tree), url)
-    return posthtml([
-      baseUrl({url, allTags: true, styleTag: true, inlineCss: true})
-    ])
-      .process(html, posthtmlOptions)
-      .then(result => result.html)
+    return baseUrl({
+      url,
+      allTags: true,
+      styleTag: true,
+      inlineCss: true
+    })(parse(html, posthtmlConfig))
   }
   // Handle `baseURL` as an object
   if (isObject(url) && !isEmpty(url)) {
-    html = rewriteVMLs(html, get(url, 'url', ''))
+    const html = rewriteVMLs(render(tree), get(url, 'url', ''))
+    const {
+      styleTag = true,
+      inlineCss = true,
+      allTags,
+      tags,
+      url: baseURL,
+      ...posthtmlOptions
+    } = url
-    return posthtml([
-      baseUrl(merge({styleTag: true, inlineCss: true}, url))
-    ])
-      .process(html, posthtmlOptions)
-      .then(result => result.html)
+    return baseUrl({
+      styleTag,
+      inlineCss,
+      allTags,
+      tags,
+      url: baseURL,
+    })(parse(html, merge(posthtmlConfig, posthtmlOptions)))
   }
-  return html
+  return tree
+}
+export default posthtmlPlugin
+export async function addBaseUrl(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }
 /**
+ * Handle VML
+ *
  * VML backgrounds must be handled with regex because
  * they're inside HTML comments.
+ *
+ * @param {string} html The HTML content
+ * @param {string} url The base URL to prepend
+ * @returns {string} The modified HTML
  */
 const rewriteVMLs = (html, url) => {
   // Handle <v:image>

package/src/transformers/comb.js ADDED Viewed

@@ -0,0 +1,51 @@
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import { comb as emailComb } from 'email-comb'
+import { parser as parse } from 'posthtml-parser'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+const posthtmlPlugin = options => tree => {
+  const defaultSafelist = [
+    '*body*', // Gmail
+    '.gmail*', // Gmail
+    '.apple*', // Apple Mail
+    '.ios*', // Mail on iOS
+    '.ox-*', // Open-Xchange
+    '.outlook*', // Outlook.com
+    '[data-ogs*', // Outlook.com
+    '.bloop_container', // Airmail
+    '.Singleton', // Apple Mail 10
+    '.unused', // Notes 8
+    '.moz-text-html', // Thunderbird
+    '.mail-detail-content', // Comcast, Libero webmail
+    '*edo*', // Edison (all)
+    '#*', // Freenet uses #msgBody
+    '.lang*' // Fenced code blocks
+  ]
+  const defaultOptions = {
+    backend: [
+      { heads: '{{', tails: '}}' },
+      { heads: '{%', tails: '%}' },
+    ],
+    whitelist: [...defaultSafelist, ...get(options, 'whitelist', [])]
+  }
+  options = merge(options, defaultOptions)
+  const { result: html } = emailComb(render(tree), options)
+  return parse(html)
+}
+export default posthtmlPlugin
+export async function comb(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/core.js ADDED Viewed

@@ -0,0 +1,20 @@
+const posthtmlPlugin = (config = {}) => tree => {
+  const process = node => {
+    /**
+     * Remove plaintext tags when developing locally
+     */
+    if (
+      config._dev
+      && node.tag === 'plaintext'
+    ) {
+      node.tag = false
+      node.content = ['']
+    }
+    return node
+  }
+  return tree.walk(process)
+}
+export default posthtmlPlugin

package/src/transformers/filters/defaultFilters.js CHANGED Viewed

@@ -1,3 +1,11 @@
+const append = (content, attribute) => content + attribute
+const capitalize = content => content.charAt(0).toUpperCase() + content.slice(1)
+const ceil = content => Math.ceil(Number.parseFloat(content))
+const divide = (content, attribute) => Number.parseFloat(content) / Number.parseFloat(attribute)
 const escapeMap = {
   '&': '&amp;',
   '<': '&lt;',
@@ -5,31 +13,27 @@ const escapeMap = {
   '"': '&#34;',
   '\'': '&#39;'
 }
-const unescapeMap = {
-  '&amp;': '&',
-  '&lt;': '<',
-  '&gt;': '>',
-  '&#34;': '"',
-  '&#39;': '\''
-}
-const unescape = string => string.replace(/&(amp|lt|gt|#34|#39);/g, m => unescapeMap[m])
-const append = (content, attribute) => content + attribute
-const capitalize = content => content.charAt(0).toUpperCase() + content.slice(1)
-const ceil = content => Math.ceil(Number.parseFloat(content))
-const divide = (content, attribute) => Number.parseFloat(content) / Number.parseFloat(attribute)
+// biome-ignore lint: not confusing
 const escape = content => content.replace(/["&'<>]/g, m => escapeMap[m])
 const escapeOnce = content => escape(unescape(content))
 const floor = content => Math.floor(Number.parseFloat(content))
 const lowercase = content => content.toLowerCase()
 const lstrip = content => content.replace(/^\s+/, '')
 const minus = (content, attribute) => Number.parseFloat(content) - Number.parseFloat(attribute)
 const modulo = (content, attribute) => Number.parseFloat(content) % Number.parseFloat(attribute)
 const multiply = (content, attribute) => Number.parseFloat(content) * Number.parseFloat(attribute)
 const newlineToBr = content => content.replace(/\n/g, '<br>')
 const plus = (content, attribute) => Number.parseFloat(content) + Number.parseFloat(attribute)
 const prepend = (content, attribute) => attribute + content
 const remove = (content, attribute) => {
@@ -38,6 +42,7 @@ const remove = (content, attribute) => {
 }
 const removeFirst = (content, attribute) => content.replace(attribute, '')
 const replace = (content, attribute) => {
   const [search, replace] = attribute.split('|')
   const regex = new RegExp(search, 'g')
@@ -50,77 +55,92 @@ const replaceFirst = (content, attribute) => {
 }
 const round = content => Math.round(Number.parseFloat(content))
 const rstrip = content => content.replace(/\s+$/, '')
 const uppercase = content => content.toUpperCase()
 const size = content => content.length
 const slice = (content, attribute) => {
-  try {
-    const [start, end] = attribute.split(',')
-    return content.slice(start, end)
-  } catch {
+  const [start, end] = attribute.split(',')
+  if (!end && !start) {
+    return content
+  }
+  if (!end) {
     return content.slice(attribute)
   }
+  return content.slice(start, end)
 }
 const stripNewlines = content => content.replace(/\n/g, '')
 const trim = content => content.trim()
 const truncate = (content, attribute) => {
-  try {
-    const [length, omission] = attribute.split(',')
-    return content.length > Number.parseInt(length, 10) ?
-      content.slice(0, length) + (omission || '...') :
-      content
-  } catch {
-    const length = Number.parseInt(attribute, 10)
-    return content.length > length ? content.slice(0, length) + '...' : content
-  }
+  const [length, omission] = attribute.split(',')
+  return content && content.length > Number.parseInt(length, 10)
+    ? content.slice(0, length) + (omission || '...')
+    : content // content is shorter than length required to truncate
 }
 const truncateWords = (content, attribute) => {
-  try {
-    const [length, omission] = attribute.split(',')
-    return content.split(' ').slice(0, Number.parseInt(length, 10)).join(' ') + (omission || '...')
-  } catch {
-    const length = Number.parseInt(attribute, 10)
-    return content.split(' ').slice(0, length).join(' ') + '...'
-  }
+  const [length, omission] = attribute.split(',')
+  return content.split(' ')
+    .slice(0, Number.parseInt(length, 10))
+    .join(' ') + (omission || '...')
+}
+const unescapeMap = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&#34;': '"',
+  '&#39;': '\''
 }
+// biome-ignore lint: not confusing
+const unescape = string => string.replace(/&(amp|lt|gt|#34|#39);/g, m => unescapeMap[m])
-// eslint-disable-next-line
 const urlDecode = content => content.split('+').map(decodeURIComponent).join(' ')
-// eslint-disable-next-line
 const urlEncode = content => content.split(' ').map(encodeURIComponent).join('+')
-exports.append = append
-exports.capitalize = capitalize
-exports.ceil = ceil
-exports['divide-by'] = divide
-exports.divide = divide
-exports.escape = escape
-exports['escape-once'] = escapeOnce
-exports.floor = floor
-exports.lowercase = lowercase
-exports.lstrip = lstrip
-exports.minus = minus
-exports.modulo = modulo
-exports.multiply = multiply
-exports['newline-to-br'] = newlineToBr
-exports.plus = plus
-exports.prepend = prepend
-exports.remove = remove
-exports['remove-first'] = removeFirst
-exports.replace = replace
-exports['replace-first'] = replaceFirst
-exports.round = round
-exports.rstrip = rstrip
-exports.uppercase = uppercase
-exports.size = size
-exports.slice = slice
-exports.strip = trim
-exports['strip-newlines'] = stripNewlines
-exports.times = multiply
-exports.trim = trim
-exports.truncate = truncate
-exports['truncate-words'] = truncateWords
-exports['url-decode'] = urlDecode
-exports['url-encode'] = urlEncode
+export const filters =  {
+  append,
+  capitalize,
+  ceil,
+  'divide-by': divide,
+  escape,
+  'escape-once': escapeOnce,
+  floor,
+  lowercase,
+  lstrip,
+  minus,
+  modulo,
+  multiply,
+  'newline-to-br': newlineToBr,
+  plus,
+  prepend,
+  remove,
+  'remove-first': removeFirst,
+  replace,
+  'replace-first': replaceFirst,
+  round,
+  rstrip,
+  uppercase,
+  size,
+  slice,
+  'strip-newlines': stripNewlines,
+  times: multiply,
+  trim,
+  truncate,
+  'truncate-words': truncateWords,
+  'url-decode': urlDecode,
+  'url-encode': urlEncode,
+  unescape
+}

package/src/transformers/filters/index.js CHANGED Viewed

@@ -1,83 +1,19 @@
-const posthtml = require('posthtml')
-const {get, merge, omit, has} = require('lodash')
-const defaultFilters = require('./defaultFilters')
-const PostCSS = require('../../generators/postcss')
-const posthtmlContent = require('posthtml-content')
-const Tailwind = require('../../generators/tailwindcss')
-const safeClassNames = require('posthtml-safe-class-names')
-const defaultConfig = require('../../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlContent from 'posthtml-content'
+import posthtmlConfig from '../../posthtml/defaultConfig.js'
+import { filters as defaultFilters } from './defaultFilters.js'
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'filters') === false) {
-    return html
-  }
+export default function posthtmlPlugin(filters = {}) {
+  filters = merge(defaultFilters, filters)
-  const filters = direct ?
-    merge(defaultFilters, config) :
-    merge(defaultFilters, get(config, 'filters', {}))
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  /**
-   * Compile CSS in <style {post|tailwind}css> tags
-   */
-  const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
-  filters.postcss = css => PostCSS.process(css, maizzleConfig)
-  filters.tailwindcss = css => Tailwind.compile({
-    css,
-    html,
-    config: merge({
-      build: {
-        tailwind: {
-          config: get(config, 'build.tailwind.config', 'tailwind.config.js')
-        }
-      }
-    }, maizzleConfig)
-  })
-  const posthtmlPlugins = [
-    styleDataEmbed(),
-    posthtmlContent(filters)
-  ]
-  /**
-   * Run `safeClassNames` in filters only when not when developing locally and
-   * `safeClassNames` is not explicitly disabled (set to `false`).
-   */
-  if (get(config, 'env') !== 'local' && get(config, 'safeClassNames') !== false) {
-    posthtmlPlugins.push(safeClassNames({
-      replacements: {
-        '{': '{',
-        '}': '}'
-      }
-    }))
-  }
-  return posthtml(posthtmlPlugins)
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
+  return posthtmlContent(filters)
 }
-/**
- * Prevent CSS inlining
- *
- * Add a `data-embed` attribute to <style> tags that we want to preserve.
- * Can be used for HTML email client targeting hacks.
- */
-const styleDataEmbed = () => tree => {
-  const process = node => {
-    if (
-      node.tag === 'style'
-      && node.attrs
-      && (has(node.attrs, 'preserve') || has(node.attrs, 'embed'))) {
-      node.attrs = {...node.attrs, 'data-embed': true}
-      node.attrs.preserve = false
-      node.attrs.embed = false
-    }
-    return node
-  }
-  return tree.walk(process)
+export async function filters(html = '', filters = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(filters)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }