@maizzle/framework 4.5.0 → 4.6.1

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "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",
   "bin": {
     "maizzle": "bin/maizzle"
   },
@@ -77,6 +78,8 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
+    "@types/js-beautify": "^1.14.0",
+    "@types/markdown-it": "^13.0.0",
     "ava": "^5.2.0",
     "c8": "^8.0.0",
     "np": "*",

package/src/commands/serve.js

@@ -6,8 +6,8 @@ const Config = require('../generators/config')
 const buildToFile = require('../commands/build')
 const renderToString = require('../functions/render')
 
-const {get, merge, isObject} = require('lodash')
-const {clearConsole} = require('../utils/helpers')
+const {get, isObject} = require('lodash')
+const {clearConsole, merge} = require('../utils/helpers')
 
 /**
  * Initialize Browsersync on-demand
@@ -149,9 +149,12 @@ const serve = async (env = 'local', config = {}) => {
 
   // Watch for changes in config files
   browsersync()
-    .watch('config*.js')
+    .watch('{maizzle.config*,config*}.{js,cjs}')
     .on('change', async file => {
-      const parsedEnv = path.parse(file).name.split('.')[1] || 'local'
+      const fileName = path.parse(file).base
+      const match = fileName.match(/\.?config\.(.+?)\./)
+
+      const parsedEnv = match ? match[1] : env || 'local'
 
       Config
         .getMerged(parsedEnv)
@@ -180,7 +183,13 @@ const serve = async (env = 'local', config = {}) => {
           },
           tunnel: false,
           ui: {port: 3001},
-          logFileChanges: false
+          logFileChanges: false,
+          watchOptions: {
+            awaitWriteFinish: {
+              stabilityThreshold: 150,
+              pollInterval: 25
+            }
+          }
         },
         get(config, 'build.browsersync', {})
       ), () => {})

package/src/generators/config.js

@@ -1,6 +1,16 @@
 const path = require('path')
-const {merge} = require('lodash')
-const {requireUncached} = require('../utils/helpers')
+const {merge, requireUncached} = require('../utils/helpers')
+
+const baseConfigFileNames = [
+  './maizzle.config.js',
+  './maizzle.config.cjs',
+  './maizzle.config.local.js',
+  './maizzle.config.local.cjs',
+  './config.js',
+  './config.cjs',
+  './config.local.js',
+  './config.local.cjs'
+]
 
 module.exports = {
   getMerged: async (env = 'local') => {
@@ -11,17 +21,19 @@ module.exports = {
     let baseConfig = {env}
     let envConfig = {env}
 
-    const cwd = env === 'maizzle-ci' ? './test/stubs/config' : process.cwd()
+    const cwd = ['maizzle-ci', 'test'].includes(env) ? './test/stubs/config' : process.cwd()
 
-    for (const module of ['./config', './config.cjs', './config.local', './config.local.cjs']) {
+    for (const module of baseConfigFileNames) {
       try {
         baseConfig = merge(baseConfig, requireUncached(path.resolve(cwd, module)))
       } catch {}
     }
 
-    if (typeof env === 'string' && env !== 'local') {
+    if (env !== 'local') {
       let loaded = false
-      for (const module of [`./config.${env}`, `./config.${env}.cjs`]) {
+      const modulesToTry = [`./maizzle.config.${env}.js`, `./maizzle.config.${env}.cjs`, `./config.${env}.js`, `./config.${env}.cjs`]
+
+      for (const module of modulesToTry) {
         try {
           envConfig = merge(envConfig, requireUncached(path.resolve(cwd, module)))
           loaded = true
@@ -30,7 +42,7 @@ module.exports = {
       }
 
       if (!loaded) {
-        throw new Error(`could not load config.${env}.js`)
+        throw new Error(`Failed to load config file for \`${env}\` environment, do you have one of these files in your project root?\n\n${modulesToTry.join('\n')}`)
       }
     }
 

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

@@ -1,7 +1,8 @@
 const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob-promise')
-const {get, isEmpty, merge} = require('lodash')
+const {get, isEmpty} = require('lodash')
+const {merge} = require('../../utils/helpers')
 
 const Config = require('../config')
 const Tailwind = require('../tailwindcss')

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

@@ -1,6 +1,7 @@
 const fm = require('front-matter')
-const {get, merge} = require('lodash')
+const {get} = require('lodash')
 const posthtml = require('../posthtml')
+const {merge} = require('../../utils/helpers')
 const Transformers = require('../../transformers')
 const Tailwind = require('../tailwindcss')
 const Config = require('../config')

package/src/generators/plaintext.js

@@ -1,6 +1,7 @@
 const path = require('path')
+const {get} = require('lodash')
 const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
+const {merge} = require('../utils/helpers')
 const {stripHtml} = require('string-strip-html')
 const defaultConfig = require('./posthtml/defaultConfig')
 

package/src/generators/posthtml/index.js

@@ -1,26 +1,28 @@
 const fm = require('front-matter')
 const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
+const {get, omit} = require('lodash')
 const fetch = require('posthtml-fetch')
 const layouts = require('posthtml-extend')
+const {merge} = require('../../utils/helpers')
 const components = require('posthtml-component')
-const defaultConfig = require('./defaultConfig')
+const defaultPosthtmlConfig = require('./defaultConfig')
 const defaultComponentsConfig = require('./defaultComponentsConfig')
 
 module.exports = async (html, config) => {
-  const layoutsOptions = get(config, 'build.layouts', {})
-  const componentsOptions = get(config, 'build.components', {})
+  const posthtmlOptions = merge(defaultPosthtmlConfig, get(config, 'build.posthtml.options', {}))
+  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
+
+  const componentsUserOptions = get(config, 'build.components', {})
+
   const expressionsOptions = merge(
     {
       loopTags: ['each', 'for'],
       strictMode: false
     },
-    get(config, 'build.posthtml.expressions', {})
+    get(config, 'build.posthtml.expressions', {}),
+    get(componentsUserOptions, 'expressions', {})
   )
 
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
-
   const locals = merge(
     get(expressionsOptions, 'locals', {}),
     get(config, 'locals', {}),
@@ -30,24 +32,29 @@ module.exports = async (html, config) => {
   const fetchPlugin = fetch(
     merge(
       {
-        expressions: merge({...expressionsOptions, locals})
+        expressions: merge(expressionsOptions, {locals})
       },
       get(config, 'build.posthtml.fetch', {})
     )
   )
 
-  const defaultComponentsOptions = merge(
+  const componentsOptions = merge(
     {
       ...defaultComponentsConfig,
       folders: [
-        ...defaultComponentsConfig.folders,
-        ...get(componentsOptions, 'folders', [])
+        ...get(componentsUserOptions, 'folders', []),
+        ...defaultComponentsConfig.folders
       ],
-      expressions: {...expressionsOptions, locals}
+      expressions: merge(expressionsOptions, {locals})
     },
     {
-      root: componentsOptions.root || './'
-    }
+      root: componentsUserOptions.root || './'
+    },
+    /**
+     * We omit `folders`, `root` and `expressions` in order to prevent duplicate
+     * array values, as they are already added above
+     */
+    omit(componentsUserOptions, ['folders', 'root', 'expressions'])
   )
 
   return posthtml([
@@ -56,17 +63,12 @@ module.exports = async (html, config) => {
       merge(
         {
           strict: false,
-          expressions: merge({...expressionsOptions, locals})
+          expressions: merge(expressionsOptions, {locals})
         },
-        layoutsOptions
-      )
-    ),
-    components(
-      merge(
-        defaultComponentsOptions,
-        componentsOptions
+        get(config, 'build.layouts', {})
       )
     ),
+    components(componentsOptions),
     ...posthtmlPlugins
   ])
     .process(html, {...posthtmlOptions})

package/src/generators/tailwindcss.js

@@ -3,10 +3,10 @@ const fs = require('fs-extra')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
 const postcssImport = require('postcss-import')
+const {get, isObject, isEmpty} = require('lodash')
 const postcssNested = require('tailwindcss/nesting')
-const {requireUncached} = require('../utils/helpers')
+const {merge, requireUncached} = require('../utils/helpers')
 const mergeLonghand = require('postcss-merge-longhand')
-const {get, isObject, isEmpty, merge} = require('lodash')
 const defaultComponentsConfig = require('./posthtml/defaultComponentsConfig')
 
 const addImportantPlugin = () => {