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/utils/string.js ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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;
 }

package/types/components.d.ts CHANGED Viewed

@@ -1,177 +1,195 @@
+import type ExpressionsConfig from './expressions';
+import type { Options as PostHTMLParserOptions } from 'posthtml-parser';
+interface AnyObject {
+  [key: string]: string | AnyObject;
+}
 export default interface ComponentsConfig {
   /**
-  Root path where to look for folders containing component files.
-  @default './'
-  */
+   * Root path where to look for folders containing component files.
+   *
+   * @default './'
+   */
   root?: string;
   /**
-  Paths where to look for component files. Must be relative to `root`.
-  @default ['src/components', 'src/layouts', 'src/templates']
-  */
+   * Paths where to look for component files. Must be relative to `root`.
+   *
+   * @default ['src/components', 'src/layouts', 'src/templates']
+   */
   folders?: string[];
   /**
-  Prefix to use for component tags.
-  @default 'x-'
-  */
+   * Prefix to use for component tags.
+   *
+   * @default 'x-'
+   */
   tagPrefix?: string;
   /**
-  Tag name to be used in HTML when using a component.
-  @default 'component'
-  */
+   * Tag name to be used in HTML when using a component.
+   *
+   * @default 'component'
+   */
   tag?: string;
   /**
-  Attribute name to be used when referencing a component via its path.
-  @default 'src'
-  */
+   * Attribute name to be used when referencing a component via its path.
+   *
+   * @default 'src'
+   */
   attribute?: string;
   /**
-  File extension that component files must use.
-  Any other files will be ignored and not be made available as components.
-  @default 'html'
-  */
+   * File extension that component files must use.
+   * Any other files will be ignored and not be made available as components.
+   *
+   * @default 'html'
+   */
   fileExtension?: string;
   /**
-  Name of the tag that will be replaced with the content that is passed to the component.
-  @default 'content'
-  */
+   * Name of the tag that will be replaced with the content that is passed to the component.
+   *
+   * @default 'yield'
+   */
   yield?: string;
   /**
-  Name of the slot tag, where the content will be injected.
-  @default 'slot'
+  * Name of the slot tag, where the content will be injected.
+  *
+  * @default 'slot'
   */
   slot?: string;
   /**
-  Name of the fill tag, where the content to be injected is defined.
-  @default 'fill'
-  */
+   * Name of the fill tag, where the content to be injected is defined.
+   *
+   * @default 'fill'
+   */
   fill?: string;
   /**
-  String to use as a separator between the slot tag and its name.
-  @default ':'
-  */
+   * String to use as a separator between the slot tag and its name.
+   *
+   * @default ':'
+   */
   slotSeparator?: string;
   /**
-  Tag name for pushing content to a stack.
-  @default 'push'
-  */
+   * Tag name for pushing content to a stack.
+   *
+   * @default 'push'
+   */
   push?: string;
   /**
-  Tag name for popping (rendering) content from a stack.
-  @default 'stack'
-  */
+   * Tag name for popping (rendering) content from a stack.
+   *
+   * @default 'stack'
+   */
   stack?: string;
   /**
-  Name of the props attribute to use in the `<script>` tag of a component.
-  @default 'props'
-  */
+   * Name of the props attribute to use in the `<script>` tag of a component.
+   *
+   * @default 'props'
+   */
   propsScriptAttribute?: string;
   /**
-  Name of the object that will be used to store the props of a component.
-  @default 'props'
-  */
+   * Name of the object that will be used to store the props of a component.
+   *
+   * @default 'props'
+   */
   propsContext?: string;
   /**
-  Name of the attribute that will be used to pass props to a component as JSON.
-  @default 'locals'
-  */
+   * Name of the attribute that will be used to pass props to a component as JSON.
+   *
+   * @default 'locals'
+   */
   propsAttribute?: string;
   /**
-  Name of the key to use when retrieving props passed to a slot via `$slots.slotName.props`.
-  @default 'props'
-  */
+   * Name of the key to use when retrieving props passed to a slot via `$slots.slotName.props`.
+   *
+   * @default 'props'
+   */
   propsSlot?: string;
   /**
-  Configure [`posthtml-parser`](https://github.com/posthtml/posthtml-parser).
-  @default {recognizeSelfClosing:true}
-  */
-  parserOptions?: Record<string, any>;
-  /**
-  Configure [`posthtml-expressions`](https://github.com/posthtml/posthtml-expressions).
-  @default {} // custom object
-  */
-  expressions?: Record<any, any>;
-  /**
-  PostHTML plugins to apply to each parsed component.
-  @default []
-  */
-  plugins?: any[];
-  /**
-  Extra rules for the PostHTML plugin that is used by components to parse attributes.
-  @default {}
-  */
-  attrsParserRules?: Record<any, any>;
-  /**
-  In strict mode, an error will be thrown if a component cannot be rendered.
-  @default true
-  */
+   * Configure [`posthtml-parser`](https://github.com/posthtml/posthtml-parser).
+   *
+   * @default
+   * {
+   *  recognizeNoValueAttribute: true,
+   *  recognizeSelfClosing: true
+   * }
+   */
+  parserOptions?: PostHTMLParserOptions;
+  /**
+   * Configure [`posthtml-expressions`](https://github.com/posthtml/posthtml-expressions).
+   *
+   * @default
+   * {
+   *   strictMode: false,
+   *   missingLocal: '{local}',
+   *   locals: {
+   *     page: config, // the computed Maizzle config object
+   *   }
+   * }
+   */
+  expressions?: ExpressionsConfig;
+  /**
+   * PostHTML plugins to apply to each parsed component.
+   *
+   * @default []
+   */
+  plugins?: Array<() => void>;
+  /**
+   * Extra rules for the PostHTML plugin that is used by components to parse attributes.
+   *
+   * @default {}
+   */
+  attrsParserRules?: Record<string, AnyObject>;
+  /**
+   * In strict mode, an error will be thrown if a component cannot be rendered.
+   *
+   * @default true
+   */
   strict?: boolean;
   /**
-  Utility methods to be passed to `<script props>` in a component.
-  @default {merge: _.mergeWith, template: _.template}
-  */
+   * Utility methods to be passed to `<script props>` in a component.
+   *
+   * @default {merge: _.mergeWith, template: _.template}
+   */
   utilities?: Record<string, unknown>;
   /**
-  Define additional attributes that should be preserved for specific HTML elements.
-  @default {}
-  */
+   * Define additional attributes that should be preserved for specific HTML elements.
+   *
+   * @default {}
+   */
   elementAttributes?: Record<string, void>;
   /**
-  Attributes that should be preserved on all elements in components.
-  @default ['data-*']
-  */
+   * Attributes that should be preserved on all elements in components.
+   *
+   * @default ['data-*']
+   */
   safelistAttributes?: string[];
   /**
-  Attributes that should be removed from all elements in components.
-  @default []
-  */
+   * Attributes that should be removed from all elements in components.
+   *
+   * @default []
+   */
   blacklistAttributes?: string[];
 }