@maizzle/framework 4.7.5 → 4.8.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.7.5",
+  "version": "4.8.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "types": "types/index.d.ts",
   "bin": {
     "maizzle": "bin/maizzle"
   },
@@ -38,6 +38,7 @@
   },
   "files": [
     "src/**/*",
+    "types/**/*",
     "bin/*"
   ],
   "dependencies": {
@@ -59,7 +60,7 @@
     "postcss-merge-longhand": "^6.0.0",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
-    "posthtml-base-url": "^2.0.0",
+    "posthtml-base-url": "^2.0.2",
     "posthtml-component": "^1.1.0",
     "posthtml-content": "^1.0.2",
     "posthtml-extend": "^0.6.0",
@@ -67,8 +68,8 @@
     "posthtml-fetch": "^3.0.0",
     "posthtml-markdownit": "^1.3.1",
     "posthtml-match-helper": "^1.0.3",
-    "posthtml-mso": "^2.0.0",
-    "posthtml-postcss-merge-longhand": "^2.0.1",
+    "posthtml-mso": "^2.0.1",
+    "posthtml-postcss-merge-longhand": "^2.1.0",
     "posthtml-safe-class-names": "^3.0.0",
     "posthtml-url-parameters": "^2.0.0",
     "pretty": "^2.0.0",
@@ -78,6 +79,7 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
+    "@types/browser-sync": "^2.29.0",
     "@types/js-beautify": "^1.14.0",
     "@types/markdown-it": "^13.0.0",
     "ava": "^5.2.0",

package/src/commands/serve.js

@@ -107,7 +107,7 @@ const serve = async (env = 'local', config = {}) => {
           let ext = ''
 
           if (Array.isArray(config.build.templates)) {
-            const match = config.build.templates.find(template => template.source === path.parse(file).dir)
+            const match = config.build.templates.find(template => path.parse(file).dir.includes(path.normalize(template.source)))
             source = path.normalize(get(match, 'source'))
             dest = path.normalize(get(match, 'destination.path', 'build_local'))
             ext = get(match, 'destination.ext', 'html')

package/src/generators/output/to-disk.js

@@ -209,22 +209,26 @@ module.exports = async (env, spinner, config) => {
             }
           }
 
-          const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
-
-          if (Array.isArray(assets.source)) {
-            for await (const source of assets.source) {
-              if (fs.existsSync(source)) {
+          const assets = Array.isArray(get(templateConfig, 'assets'))
+            ? get(templateConfig, 'assets')
+            : [{source: '', destination: 'assets', ...get(templateConfig, 'assets')}]
+
+          for await (const asset of assets) {
+            if (Array.isArray(asset.source)) {
+              for await (const source of asset.source) {
+                if (fs.existsSync(source)) {
+                  await fs
+                    .copy(source, path.join(templateConfig.destination.path, asset.destination))
+                    .catch(error => spinner.warn(error.message))
+                }
+              }
+            } else {
+              if (fs.existsSync(asset.source)) {
                 await fs
-                  .copy(source, path.join(templateConfig.destination.path, assets.destination))
+                  .copy(asset.source, path.join(templateConfig.destination.path, asset.destination))
                   .catch(error => spinner.warn(error.message))
               }
             }
-          } else {
-            if (fs.existsSync(assets.source)) {
-              await fs
-                .copy(assets.source, path.join(templateConfig.destination.path, assets.destination))
-                .catch(error => spinner.warn(error.message))
-            }
           }
 
           await glob(path.join(templateConfig.destination.path, '/**').replace(/\\/g, '/'))

package/types/baseUrl.d.ts

@@ -0,0 +1,79 @@
+export default interface BaseURLConfig {
+  /**
+  The URL to prepend.
+
+  @default undefined
+  */
+  url: string;
+
+  /**
+  Tags to apply the `url` to. When using this option, the `url` will only be prepended to the specified tags.
+
+  Maizzle uses a [custom set of tags](https://github.com/posthtml/posthtml-base-url/blob/main/lib/index.js#L6-L60) by default.
+
+  @example
+
+  Prepend `url` to all 'source'-like attribute values on image tags, like `src` and `srcset`:
+
+  ```
+  module.exports = {
+    baseURL: {
+      url: 'https://cdn.example.com/',
+      tags: ['img'],
+    },
+  }
+  ```
+
+  With more granular control:
+
+  ```
+  module.exports = {
+    baseURL: {
+      url: 'https://cdn.example.com/',
+      tags: {
+        img: {
+          src: true, // use the value of `url` above
+          srcset: 'https://bar.com/',
+        },
+      },
+    },
+  }
+  ```
+  */
+  tags?: string[] | Record<string, unknown>;
+
+  /**
+  Key-value pairs of attributes and the string to prepend to their existing value.
+
+  @default {}
+
+  @example
+
+  Prepend `https://example.com/` to all `data-url` attribute values:
+
+  ```
+  module.exports = {
+    baseURL: {
+      attributes: {
+        'data-url': 'https://example.com/',
+      },
+    },
+  }
+  ```
+  */
+  attributes?: Record<string, unknown>;
+
+  /**
+  Whether the string defined in `url` should be prepended to `url()` values in CSS `<style>` tags.
+
+  @default true
+  */
+  styleTag?: boolean;
+
+  /**
+  Whether the string defined in `url` should be prepended to `url()` values in inline CSS.
+
+  @default true
+  */
+  inlineCss?: boolean;
+}

package/types/build.d.ts

@@ -0,0 +1,74 @@
+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';
+
+export default interface BuildConfig {
+  /**
+  Templates configuration.
+  */
+  templates: TemplatesConfig;
+
+  /**
+  Tailwind CSS configuration.
+  */
+  tailwind?: TailwindConfig;
+
+  /**
+  [DEPRECATED] Layouts configuration.
+  */
+  layouts?: LayoutsConfig;
+
+  /**
+  Components configuration.
+  */
+  components?: ComponentsConfig;
+
+  /**
+  PostHTML configuration.
+  */
+  posthtml?: PostHTMLConfig;
+
+  /**
+  Configure PostCSS
+   */
+  postcss?: {
+    /**
+    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[];
+  };
+
+  /**
+  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;
+
+  /**
+  Configure how build errors are handled when developing with the Maizzle CLI.
+
+  @default undefined
+  */
+  fail?: 'silent' | 'verbose';
+}

package/types/components.d.ts

@@ -0,0 +1,177 @@
+export default interface ComponentsConfig {
+  /**
+  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']
+  */
+  folders?: string[];
+
+  /**
+  Prefix to use for component tags.
+
+  @default 'x-'
+  */
+  tagPrefix?: string;
+
+  /**
+  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?: string;
+
+  /**
+  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'
+  */
+  yield?: string;
+
+  /**
+  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'
+  */
+  fill?: string;
+
+  /**
+  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'
+  */
+  push?: string;
+
+  /**
+  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'
+  */
+  propsScriptAttribute?: string;
+
+  /**
+  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'
+  */
+  propsAttribute?: string;
+
+  /**
+  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
+  */
+  strict?: boolean;
+
+  /**
+  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 {}
+  */
+  elementAttributes?: Record<string, void>;
+
+  /**
+  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 []
+  */
+  blacklistAttributes?: string[];
+}