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

@maizzle/framework 5.0.0-beta.8 → 5.0.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 (46) hide show

package/package.json +33 -31
package/src/commands/build.js +106 -30
package/src/generators/plaintext.js +22 -18
package/src/generators/render.js +16 -18
package/src/index.js +3 -3
package/src/posthtml/defaultComponentsConfig.js +10 -2
package/src/posthtml/defaultConfig.js +13 -3
package/src/posthtml/index.js +59 -14
package/src/server/index.js +171 -98
package/src/server/routes/index.js +51 -13
package/src/server/views/404.html +59 -0
package/src/server/views/index.html +162 -14
package/src/transformers/addAttributes.js +2 -3
package/src/transformers/attributeToStyle.js +1 -3
package/src/transformers/baseUrl.js +6 -6
package/src/transformers/filters/index.js +1 -2
package/src/transformers/index.js +57 -95
package/src/transformers/inline.js +44 -48
package/src/transformers/markdown.js +14 -7
package/src/transformers/minify.js +4 -3
package/src/transformers/posthtmlMso.js +1 -3
package/src/transformers/prettify.js +4 -3
package/src/transformers/preventWidows.js +15 -65
package/src/transformers/{comb.js → purge.js} +9 -8
package/src/transformers/removeAttributes.js +3 -4
package/src/transformers/replaceStrings.js +7 -5
package/src/transformers/safeClassNames.js +1 -2
package/src/transformers/shorthandCss.js +1 -3
package/src/transformers/sixHex.js +1 -3
package/src/transformers/template.js +9 -9
package/src/transformers/urlParameters.js +1 -3
package/src/transformers/useAttributeSizes.js +1 -3
package/src/utils/getConfigByFilePath.js +10 -0
package/src/utils/node.js +0 -23
package/src/utils/string.js +34 -12
package/types/build.d.ts +51 -28
package/types/config.d.ts +127 -64
package/types/css/inline.d.ts +10 -26
package/types/css/purge.d.ts +3 -3
package/types/events.d.ts +153 -5
package/types/index.d.ts +4 -3
package/types/posthtml.d.ts +3 -3
package/types/urlParameters.d.ts +1 -1
package/types/widowWords.d.ts +16 -36
package/types/components.d.ts +0 -195
package/types/expressions.d.ts +0 -100

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

@@ -4,21 +4,169 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Maizzle | Templates</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" media="screen">
+  <style>
+    body {
+      padding: 7rem 6.25rem;
+    }
+    @media (max-width: 425px) {
+      body {
+        padding: 3rem 1.5rem;
+      }
+    }
+    /* General styling */
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      font-family: Inter, Arial, Helvetica, sans-serif;
+    }
+    /* Folder styling */
+    li > strong {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+      color: #0F172A;
+    }
+    li.folder.root {
+      padding-bottom: 1.5rem;
+      padding-top: 3rem;
+    }
+    li.folder.root:first-child {
+      padding-top: 0 !important;
+    }
+    li.folder.nested {
+      padding-top: 1.5rem;
+    }
+    li.folder.nested > strong {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 600;
+    }
+    li > strong > span {
+      color: #94A3B8;
+    }
+    /* File styling */
+    li > a {
+      color: #4f46e5;
+      text-decoration: none;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+    li > a:hover {
+      text-decoration: underline;
+    }
+    /* Indentation based on depth */
+    li {
+      padding-left: 1.5rem;
+    }
+    li.folder.nested {
+      padding-top: 2.25rem;
+      padding-bottom: 0.625rem;
+      border-left: 1px solid #64748B;
+    }
+    li.folder.nested > strong {
+      cursor: pointer;
+      display: block;
+    }
+    li.folder.root {
+      padding-top: 3rem;
+      border: none;
+    }
+    li.file {
+      border-left: 1px solid #64748B;
+    }
+    li.file.nested {
+      line-height: 2.25rem;
+    }
+    li.file.nested.collapsed {
+      display: none;
+    }
+    li.file.nested.collapsed + .folder.nested {
+      padding-top: 0;
+    }
+    li.file.nested a {
+      padding-bottom: 0.75rem;
+      margin-left: -1.5rem;
+      padding-left: 1.5rem;
+      border-left: 1px solid #cbd5e1;
+    }
+    li.file.nested:last-child a {
+      padding-bottom: 0;
+    }
+    .insignia {
+      width: 64rem;
+      position: fixed;
+      z-index: -1;
+      right: -3rem;
+      bottom: 0;
+    }
+    @media (max-width: 425px) {
+      .insignia {
+        width: 100%;
+      }
+    }
+  </style>
 </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>
+  <ul>
+    <each loop="item in paths">
+      <if condition="item.type === 'folder'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="folder {{ item.depth > 0 ? 'nested' : 'root' }}"
+        >
+          <strong>{{{ item.name }}}</strong>
+        </li>
+      </if>
+      <if condition="item.type === 'file'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="file {{ item.depth > 1 ? 'nested' : '' }}"
+        >
+          <a href="{{ item.href }}">
+            {{ item.name }}
+          </a>
+        </li>
+      </if>
+    </each>
+  </ul>
+  <svg fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993 483" class="insignia"><mask id="a" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="993" height="483"><path fill="#D9D9D9" d="M0 0h993v483H0z"></path></mask><g mask="url(#a)" stroke="#e2e8f0" stroke-miterlimit="10"><path d="M954.124 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816ZM583.379 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816Z"></path><path d="M935.39 132.185c30.161-35.57 23.362-86.965-15.187-114.795S825.954-4.165 795.794 31.404L425.713 467.848c-30.161 35.57-23.361 86.965 15.187 114.795 38.549 27.829 94.249 21.555 124.41-14.014l370.08-436.444ZM564.288 132.196c30.161-35.569 23.362-86.964-15.187-114.794S454.852-4.154 424.692 31.416L54.611 467.86c-30.16 35.569-23.361 86.965 15.187 114.794 38.549 27.83 94.249 21.556 124.41-14.013l370.08-436.445Z"></path></g></svg>
+  <script>
+    document.querySelectorAll('.folder.nested').forEach(folder => {
+      folder.addEventListener('click', function() {
+        let nextElement = this.nextElementSibling;
+        while (nextElement && nextElement.classList.contains('file') && nextElement.classList.contains('nested')) {
+          nextElement.classList.toggle('collapsed');
+          nextElement = nextElement.nextElementSibling;
+        }
+      });
+    });
+  </script>
 </body>
 </html>

package/src/transformers/addAttributes.js CHANGED Viewed

@@ -1,6 +1,5 @@
 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 = {}) {
@@ -11,7 +10,7 @@ export default function posthtmlPlugin(attributes = {}) {
       role: 'none'
     },
     img: {
-      alt: ''
+      alt: true,
     }
   }
@@ -25,6 +24,6 @@ export async function addAttributes(html = '', attributes = {}, posthtmlOptions
   return posthtml([
     posthtmlPlugin(attributes)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/attributeToStyle.js CHANGED Viewed

@@ -1,11 +1,9 @@
 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)) {
@@ -87,6 +85,6 @@ export async function attributeToStyle(html = '', attributes = [], posthtmlOptio
   return posthtml([
     posthtmlPlugin(attributes)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/baseUrl.js CHANGED Viewed

@@ -1,13 +1,14 @@
 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'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
+const posthtmlOptions = getPosthtmlOptions()
 const posthtmlPlugin = url => tree => {
   // Handle `baseURL` as a string
@@ -19,7 +20,7 @@ const posthtmlPlugin = url => tree => {
       allTags: true,
       styleTag: true,
       inlineCss: true
-    })(parse(html, posthtmlConfig))
+    })(parse(html, posthtmlOptions))
   }
   // Handle `baseURL` as an object
@@ -31,7 +32,6 @@ const posthtmlPlugin = url => tree => {
       allTags,
       tags,
       url: baseURL,
-      ...posthtmlOptions
     } = url
     return baseUrl({
@@ -40,7 +40,7 @@ const posthtmlPlugin = url => tree => {
       allTags,
       tags,
       url: baseURL,
-    })(parse(html, merge(posthtmlConfig, posthtmlOptions)))
+    })(parse(html, posthtmlOptions))
   }
   return tree
@@ -52,7 +52,7 @@ export async function addBaseUrl(html = '', options = {}, posthtmlOptions = {})
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, getPosthtmlOptions())
     .then(result => result.html)
 }

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

@@ -1,7 +1,6 @@
 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'
 export default function posthtmlPlugin(filters = {}) {
@@ -14,6 +13,6 @@ export async function filters(html = '', filters = {}, posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin(filters)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/index.js CHANGED Viewed

@@ -2,7 +2,8 @@ import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
 import { defu as merge } from 'defu'
-import comb from './comb.js'
+import core from './core.js'
+import purge from './purge.js'
 import sixHex from './sixHex.js'
 import minify from './minify.js'
 import baseUrl from './baseUrl.js'
@@ -21,41 +22,36 @@ import replaceStrings from './replaceStrings.js'
 import attributeToStyle from './attributeToStyle.js'
 import removeAttributes from './removeAttributes.js'
-import coreTransformers from './core.js'
-import defaultPosthtmlConfig from '../posthtml/defaultConfig.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 /**
  * Use Maizzle Transformers on an HTML string.
  *
- * Only Transformers that are enabled in the `config` will be used.
+ * Only Transformers that are enabled in the passed
+ * `config` parameter will be used.
  *
  * @param {string} html The HTML content
  * @param {object} config The Maizzle config object
- * @returns {Promise<{ original: string, config: object, html: string }>}
- *   A Promise resolving to an object containing the original HTML, modified HTML, and the config
+ * @returns {Promise<{ html: string }>} A Promise resolving to an object containing the modified HTML
  */
 export async function run(html = '', config = {}) {
   const posthtmlPlugins = []
-  const posthtmlConfig = merge(
-    get(config, 'posthtml.options', {}),
-    defaultPosthtmlConfig
-  )
+  const posthtmlConfig = getPosthtmlOptions(get(config, 'posthtml.options', {}))
   /**
    * 1. Core transformers
    *
-   * Transformers that are always enabled
+   * Transformers that are always enabled.
    *
    */
-  posthtmlPlugins.push(coreTransformers(config))
+  posthtmlPlugins.push(core(config))
   /**
    * 2. Safe class names
    *
    * Rewrite Tailwind CSS class names to email-safe alternatives,
-   * unless explicitly disabled
+   * unless explicitly disabled.
    */
   if (get(config, 'css.safe') !== false) {
     posthtmlPlugins.push(
@@ -66,7 +62,6 @@ export async function run(html = '', config = {}) {
   /**
    * 3. Filters
    *
-   * Apply filters to HTML.
    * Filters are always applied, unless explicitly disabled.
    */
   if (get(config, 'filters') !== false) {
@@ -78,7 +73,7 @@ export async function run(html = '', config = {}) {
   /**
    * 4. Markdown
    *
-   * Convert Markdown to HTML with Markdown-it, unless explicitly disabled
+   * Convert Markdown to HTML with markdown-it, unless explicitly disabled.
    */
   if (get(config, 'markdown') !== false) {
     posthtmlPlugins.push(
@@ -88,7 +83,9 @@ export async function run(html = '', config = {}) {
   /**
    * 5. Prevent widow words
-   * Always runs, unless explicitly disabled
+   *
+   * Enabled by default, will prevent widow words in elements
+   * wrapped with a `prevent-widows` attribute.
    */
   if (get(config, 'widowWords') !== false) {
     posthtmlPlugins.push(
@@ -110,7 +107,7 @@ export async function run(html = '', config = {}) {
   /**
    * 7. Inline CSS
    *
-   * Inline CSS into HTML
+   * Inline CSS into HTML.
    */
   if (get(config, 'css.inline')) {
     posthtmlPlugins.push(inlineCSS(
@@ -124,16 +121,7 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 8. Purge CSS
-   *
-   * Remove unused CSS, uglify classes etc.
-   */
-  if (get(config, 'css.purge')) {
-    posthtmlPlugins.push(comb(config.css.purge))
-  }
-  /**
-   * 9. Remove attributes
+   * 8. Remove attributes
    *
    * Remove attributes from HTML tags
    * If `undefined`, removes empty `style` and `class` attributes
@@ -148,9 +136,9 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 10. Shorthand CSS
+   * 9. Shorthand CSS
    *
-   * Convert longhand CSS properties to shorthand in `style` attributes
+   * Convert longhand CSS properties to shorthand in `style` attributes.
    */
   if (get(config, 'css.shorthand')) {
     posthtmlPlugins.push(
@@ -159,9 +147,9 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 11. Add attributes
+   * 10. Add attributes
    *
-   * Add attributes to HTML tags
+   * Add attributes to HTML tags.
    */
   if (get(config, 'attributes.add') !== false) {
     posthtmlPlugins.push(
@@ -170,35 +158,21 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 12. Base URL
+   * 11. Base URL
    *
-   * Add a base URL to relative paths
+   * Add a base URL to relative paths.
    */
-  if (get(config, 'baseURL', get(config, 'baseUrl'))) {
+  const baseConfig = get(config, 'baseURL', get(config, 'baseUrl'))
+  if (baseConfig) {
     posthtmlPlugins.push(
-      baseUrl(get(config, 'baseURL', get(config, 'baseUrl', {})))
+      baseUrl(baseConfig)
     )
-  } else {
-    /**
-     * Set baseURL to `build.static.destination` if it's not already set
-     */
-    const destination = get(config, 'build.static.destination', '')
-    if (destination && !config._dev) {
-      posthtmlPlugins.push(
-        baseUrl({
-          url: destination,
-          allTags: true,
-          styleTag: true,
-          inlineCss: true,
-        })
-      )
-    }
   }
   /**
-   * 13. URL parameters
+   * 12. URL parameters
    *
-   * Add parameters to URLs
+   * Add parameters to URLs.
    */
   if (get(config, 'urlParameters')) {
     posthtmlPlugins.push(
@@ -207,10 +181,9 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 14. Six-digit HEX
+   * 13. Six-digit HEX
    *
-   * Convert three-digit HEX colors to six-digit
-   * Always runs, unless explicitly disabled
+   * Enabled by default, converts three-digit HEX colors to six-digit.
    */
   if (get(config, 'css.sixHex') !== false) {
     posthtmlPlugins.push(
@@ -219,9 +192,9 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 15. PostHTML MSO
+   * 14. PostHTML MSO
    *
-   * Simplify writing MSO conditionals for Outlook
+   * Enabled by default, simplifies writing MSO conditionals for Outlook.
    */
   if (get(config, 'outlook') !== false) {
     posthtmlPlugins.push(
@@ -230,42 +203,51 @@ export async function run(html = '', config = {}) {
   }
   /**
-   * 16. Prettify
+   * 15. Purge CSS
    *
-   * Pretty-print HTML using js-beautify
+   * Remove unused CSS, uglify classes etc.
    */
-  if (get(config, 'prettify')) {
-    posthtmlPlugins.push(
-      prettify(get(config, 'prettify', {}))
-    )
+  if (get(config, 'css.purge')) {
+    posthtmlPlugins.push(purge(config.css.purge))
   }
   /**
-   * 17. Minify
+   * 16. <template> tags
    *
-   * Minify HTML using html-crush
+   * Replace <template> tags with their content.
    */
-  if (get(config, 'minify')) {
+  posthtmlPlugins.push(templateTag())
+  /**
+   * 17. Replace strings
+   *
+   * Replace strings through regular expressions.
+   */
+  if (get(config, 'replaceStrings')) {
     posthtmlPlugins.push(
-      minify(get(config, 'minify', {}))
+      replaceStrings(get(config, 'replaceStrings', {}))
     )
   }
   /**
-   * 18. <template> tags
+   * 18. Prettify
    *
-   * Replace <template> tags with their content
+   * Pretty-print HTML using js-beautify.
    */
-  posthtmlPlugins.push(templateTag())
+  if (get(config, 'prettify')) {
+    posthtmlPlugins.push(
+      prettify(get(config, 'prettify', {}))
+    )
+  }
   /**
-   * 19. Replace strings
+   * 19. Minify
    *
-   * Replace strings through regular expressions
+   * Minify HTML using html-crush.
    */
-  if (get(config, 'replaceStrings')) {
+  if (get(config, 'minify')) {
     posthtmlPlugins.push(
-      replaceStrings(get(config, 'replaceStrings', {}))
+      minify(get(config, 'minify', {}))
     )
   }
@@ -275,23 +257,3 @@ export async function run(html = '', config = {}) {
       html: result.html,
     }))
 }
-export const transformers = {
-  comb,
-  sixHex,
-  minify,
-  baseUrl,
-  inlineCSS,
-  prettify,
-  filters,
-  markdown,
-  posthtmlMso,
-  shorthandCss,
-  preventWidows,
-  addAttributes,
-  urlParameters,
-  safeClassNames,
-  replaceStrings,
-  attributeToStyle,
-  removeAttributes,
-}