@maizzle/framework 3.7.3 → 4.0.0-alpha.3

package/.github/workflows/nodejs.yml

@@ -7,7 +7,6 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master]
 
 jobs:
   build:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "3.7.3",
+  "version": "4.0.0-alpha.3",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -27,11 +27,13 @@
     "access": "public"
   },
   "scripts": {
-    "test": "xo && nyc ava -s",
+    "test": "c8 ava -s",
+    "pretest": "xo",
     "style": "xo",
     "release": "np"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.0",
     "browser-sync": "^2.26.13",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
     "email-comb": "^5.0.0",
@@ -39,38 +41,38 @@
     "fs-extra": "^10.0.0",
     "glob-promise": "^4.1.0",
     "html-crush": "^4.0.0",
+    "is-url-superb": "^5.0.0",
     "juice": "^8.0.0",
     "lodash": "^4.17.20",
     "ora": "^5.1.0",
-    "postcss": "^8.2.14",
+    "postcss": "^8.4.4",
     "postcss-import": "^14.0.0",
     "postcss-merge-longhand": "^5.0.1",
-    "posthtml": "^0.16.4",
+    "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
+    "posthtml-base-url": "^1.0.1",
     "posthtml-content": "^0.0.3",
     "posthtml-expressions": "^1.8.1",
     "posthtml-extend": "^0.6.0",
     "posthtml-extra-attributes": "^1.0.0",
     "posthtml-fetch": "^2.0.0",
-    "posthtml-markdownit": "^1.2.2",
-    "posthtml-modules": "^0.7.4",
-    "posthtml-mso": "^1.0.2",
+    "posthtml-markdownit": "^1.3.0",
+    "posthtml-modules": "^0.8.0",
+    "posthtml-mso": "^1.0.4",
     "posthtml-postcss-merge-longhand": "^1.0.2",
     "posthtml-remove-attributes": "^1.0.0",
     "posthtml-safe-class-names": "^1.0.4",
     "posthtml-url-parameters": "^1.0.4",
     "pretty": "^2.0.0",
     "prevent-widows": "^1.0.2",
-    "query-string": "^7.0.0",
+    "query-string": "^7.1.0",
     "string-strip-html": "^8.2.0",
-    "tailwindcss": "^2.2.2",
-    "tailwindcss-box-shadow": "^1.0.0"
+    "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "ava": "^3.13.0",
+    "ava": "^4.0.1",
+    "c8": "^7.11.0",
     "np": "*",
-    "nyc": "^15.1.0",
     "xo": "0.39.1"
   },
   "engines": {

package/src/commands/build.js

@@ -0,0 +1,32 @@
+const ora = require('ora')
+const {get} = require('lodash')
+const Output = require('../generators/output')
+const {clearConsole} = require('../utils/helpers')
+
+const build = async (env = 'local', config = {}) => {
+  const start = new Date()
+  const spinner = ora('Building emails...').start()
+
+  try {
+    const {files, parsed} = await Output.toDisk(env, spinner, config)
+
+    const elapsedSeconds = (Date.now() - start) / 1000
+
+    if (get(config, 'build.command') === 'serve') {
+      if (get(config, 'build.console.clear')) {
+        clearConsole()
+      }
+
+      spinner.succeed(`Re-built ${parsed.length} templates in ${elapsedSeconds}s`)
+    } else {
+      spinner.succeed(`Built ${parsed.length} templates in ${elapsedSeconds}s`)
+    }
+
+    return {files}
+  } catch (error) {
+    spinner.fail(error.message)
+    throw error
+  }
+}
+
+module.exports = build

package/src/commands/serve.js

@@ -0,0 +1,139 @@
+const ora = require('ora')
+const path = require('path')
+const fs = require('fs-extra')
+
+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 browsersync = () => {
+  if (!global.cachedBrowserSync) {
+    const bs = require('browser-sync')
+    global.cachedBrowserSync = bs.create()
+  }
+
+  return global.cachedBrowserSync
+}
+
+const serve = async (env = 'local', config = {}) => {
+  config = merge(
+    config,
+    await Config.getMerged(env),
+    {
+      build: {
+        command: 'serve'
+      }
+    }
+  )
+
+  const spinner = ora()
+
+  try {
+    await buildToFile(env, config)
+
+    let templates = get(config, 'build.templates')
+    templates = Array.isArray(templates) ? templates : [templates]
+
+    const templatePaths = [...new Set(templates.map(config => `${get(config, 'source', 'src')}/**`))]
+    const globalPaths = [
+      'src/**',
+      get(config, 'build.tailwind.config', 'tailwind.config.js'),
+      [...new Set(get(config, 'build.browsersync.watch', []))]
+    ]
+
+    // Watch for Template file changes
+    browsersync()
+      .watch(templatePaths)
+      .on('change', async file => {
+        if (get(config, 'build.console.clear')) {
+          clearConsole()
+        }
+
+        const start = new Date()
+
+        spinner.start('Building email...')
+
+        file = file.replace(/\\/g, '/')
+
+        if (config.events && typeof config.events.beforeCreate === 'function') {
+          await config.events.beforeCreate(config)
+        }
+
+        const renderOptions = {
+          maizzle: config,
+          ...config.events
+        }
+
+        renderToString(
+          await fs.readFile(file, 'utf8'),
+          renderOptions
+        )
+          .then(async ({html, config}) => {
+            let dest = ''
+            let ext = ''
+
+            if (Array.isArray(config.build.templates)) {
+              const match = config.build.templates.find(template => template.source === path.parse(file).dir)
+              dest = get(match, 'destination.path', 'build_local')
+              ext = get(match, 'destination.ext', 'html')
+            } else if (isObject(config.build.templates)) {
+              dest = get(config, 'build.templates.destination.path', 'build_local')
+              ext = get(config, 'build.templates.destination.ext', 'html')
+            }
+
+            const finalDestination = path.join(dest, `${path.parse(file).name}.${ext}`)
+
+            await fs.outputFile(config.permalink || finalDestination, html)
+          })
+          .then(() => {
+            browsersync().reload()
+            spinner.succeed(`Compiled in ${(Date.now() - start) / 1000}s [${file}]`)
+          })
+          .catch(() => spinner.warn(`Received empty HTML, please save your file again [${file}]`))
+      })
+
+    // Watch for changes in all other files
+    browsersync()
+      .watch(globalPaths, {ignored: templatePaths})
+      .on('change', () => buildToFile(env, config).then(() => browsersync().reload()))
+      .on('unlink', () => buildToFile(env, config).then(() => browsersync().reload()))
+
+    // Watch for changes in config files
+    browsersync()
+      .watch('config*.js')
+      .on('change', async file => {
+        const parsedEnv = path.parse(file).name.split('.')[1] || 'local'
+
+        Config
+          .getMerged(parsedEnv)
+          .then(config => buildToFile(parsedEnv, config).then(() => browsersync().reload()))
+      })
+
+    // Browsersync options
+    const baseDir = templates.map(t => t.destination.path)
+
+    // Initialize Browsersync
+    browsersync()
+      .init({
+        notify: false,
+        open: false,
+        port: 3000,
+        server: {
+          baseDir,
+          directory: true
+        },
+        tunnel: false,
+        ui: {port: 3001},
+        logFileChanges: false,
+        ...get(config, 'build.browsersync', {})
+      }, () => {})
+  } catch (error) {
+    spinner.fail(error)
+    throw error
+  }
+}
+
+module.exports = serve

package/src/functions/plaintext.js

@@ -0,0 +1,5 @@
+const Plaintext = require('../generators/plaintext')
+
+const toPlaintext = async (html, config = {}) => Plaintext.generate(html, false, config)
+
+module.exports = toPlaintext

package/src/functions/render.js

@@ -0,0 +1,5 @@
+const Output = require('../generators/output')
+
+const render = async (html, options) => Output.toString(html, options)
+
+module.exports = render

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

@@ -1,167 +1,208 @@
-const path = require('path')
-const fs = require('fs-extra')
-const glob = require('glob-promise')
-const {get, isEmpty, merge} = require('lodash')
-const {asyncForEach} = require('../../utils/helpers')
-const removePlaintextTags = require('../../transformers/plaintext')
-
-const Config = require('../config')
-const Tailwind = require('../tailwindcss')
-const Plaintext = require('../plaintext')
-
-const render = require('./to-string')
-
-module.exports = async (env, spinner, config) => {
-  process.env.NODE_ENV = env || 'local'
-
-  if (isEmpty(config)) {
-    config = await Config.getMerged(env).catch(error => {
-      spinner.fail('Build failed')
-      throw error
-    })
-  }
-
-  const buildTemplates = get(config, 'build.templates')
-  const templatesConfig = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-
-  const parsed = []
-  let files = []
-
-  const css = (typeof get(config, 'tailwind.compiled') === 'string')
-    ? config.tailwind.compiled
-    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config)
-
-  await asyncForEach(templatesConfig, async templateConfig => {
-    const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
-
-    await fs.remove(outputDir)
-
-    await fs
-      .copy(templateConfig.source, outputDir)
-      .then(async () => {
-        const extensions = Array.isArray(templateConfig.filetypes)
-          ? templateConfig.filetypes.join('|')
-          : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
-
-        const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
-
-        if (templates.length === 0) {
-          spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
-          return
-        }
-
-        // Store template config currently being processed
-        config.build.currentTemplates = templateConfig
-
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
-
-        await asyncForEach(templates, async file => {
-          const html = await fs.readFile(file, 'utf8')
-
-          await render(html, {
-            maizzle: {
-              ...config,
-              env
-            },
-            tailwind: {
-              compiled: css
-            },
-            ...config.events
-          })
-            .then(async ({html, config}) => {
-              const destination = config.permalink || file
-
-              /**
-               * Generate plaintext
-               *
-               * We do this first so that we can remove the <plaintext>
-               * tags from the markup before outputting the file.
-               */
-
-              // Make this a breaking change in 4.0, get only from `templateConfig`
-              const plaintextConfig = get(templateConfig, 'plaintext', get(config, 'plaintext'))
-              const plaintextDestination = get(plaintextConfig, 'destination', config.permalink || file)
-
-              if ((typeof plaintextConfig === 'boolean' && plaintextConfig) || !isEmpty(plaintextConfig)) {
-                await Plaintext
-                  .generate(html, plaintextDestination, merge(config, {filepath: file}))
-                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
-              }
-
-              html = removePlaintextTags(html, config)
-
-              /**
-               * Output file
-               */
-              const parts = path.parse(destination)
-              const extension = get(templateConfig, 'destination.extension', 'html')
-              const finalDestination = `${parts.dir}/${parts.name}.${extension}`
-
-              await fs.outputFile(finalDestination, html)
-                .then(async () => {
-                  /**
-                   * Remove original file if its path is different
-                   * from the final destination path.
-                   *
-                   * This ensures non-HTML files do not pollute
-                   * the build destination folder.
-                   */
-                  if (finalDestination !== file) {
-                    await fs.remove(file)
-                  }
-
-                  // Keep track of handled files
-                  files.push(file)
-                  parsed.push(file)
-                })
-            })
-            .catch(error => {
-              switch (config.build.fail) {
-                case 'silent':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  break
-                case 'verbose':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  console.error(error)
-                  break
-                default:
-                  spinner.fail(`Failed to compile template: ${path.basename(file)}`)
-                  throw error
-              }
-            })
-        })
-
-        const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
-
-        if (Array.isArray(assets.source)) {
-          await asyncForEach(assets.source, async source => {
-            if (fs.existsSync(source)) {
-              await fs.copy(source, path.join(templateConfig.destination.path, assets.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, '/**/*.*'))
-          .then(contents => {
-            files = [...new Set([...files, ...contents])]
-          })
-      })
-      .catch(error => spinner.warn(error.message))
-  })
-
-  if (config.events && typeof config.events.afterBuild === 'function') {
-    await config.events.afterBuild(files)
-  }
-
-  return {
-    files,
-    parsed,
-    css
-  }
-}
+const path = require('path')
+const fs = require('fs-extra')
+const glob = require('glob-promise')
+const {get, isEmpty, merge} = require('lodash')
+const {asyncForEach} = require('../../utils/helpers')
+const removePlaintextTags = require('../../transformers/plaintext')
+
+const Config = require('../config')
+const Tailwind = require('../tailwindcss')
+const Plaintext = require('../plaintext')
+
+const render = require('./to-string')
+
+module.exports = async (env, spinner, config) => {
+  process.env.NODE_ENV = env || 'local'
+
+  if (isEmpty(config)) {
+    config = await Config.getMerged(env).catch(error => {
+      spinner.fail('Build failed')
+      throw error
+    })
+  }
+
+  const buildTemplates = get(config, 'build.templates')
+  const templatesConfig = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
+
+  const parsed = []
+  let files = []
+
+  const css = (typeof get(config, 'tailwind.compiled') === 'string')
+    ? config.tailwind.compiled
+    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config, spinner)
+
+  // Parse each template config object
+  await asyncForEach(templatesConfig, async templateConfig => {
+    const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
+
+    await fs.remove(outputDir)
+
+    /**
+     * Get all files in the template config's source directory
+     * Supports `source` defined as:
+     * - string
+     * - array of strings
+     * - function that returns either of the above
+     *
+     *  */
+    const templateSource = []
+    const templateTypeErrorMessage = 'Invalid template source: expected string or array of strings, got '
+
+    if (typeof templateConfig.source === 'function') {
+      const sources = templateConfig.source(config)
+
+      if (Array.isArray(sources)) {
+        templateSource.push(...sources)
+      } else if (typeof sources === 'string') {
+        templateSource.push(sources)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof sources)
+      }
+    } else {
+      if (Array.isArray(templateConfig.source)) {
+        templateSource.push(...templateConfig.source)
+      } else if (typeof templateConfig.source === 'string') {
+        templateSource.push(templateConfig.source)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof templateConfig.source)
+      }
+    }
+
+    // Parse each template source
+    await asyncForEach(templateSource, async source => {
+      /**
+       * Copy single-file sources correctly
+       * If `src` is a file, `dest` cannot be a directory
+       * https://github.com/jprichardson/node-fs-extra/issues/323
+       */
+      const out = fs.lstatSync(source).isFile() ? `${outputDir}/${path.basename(source)}` : outputDir
+
+      await fs
+        .copy(source, out)
+        .then(async () => {
+          const extensions = Array.isArray(templateConfig.filetypes)
+            ? templateConfig.filetypes.join('|')
+            : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
+
+          const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
+
+          if (templates.length === 0) {
+            spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
+            return
+          }
+
+          if (config.events && typeof config.events.beforeCreate === 'function') {
+            await config.events.beforeCreate(config)
+          }
+
+          await asyncForEach(templates, async file => {
+            const html = await fs.readFile(file, 'utf8')
+
+            try {
+              const compiled = await render(html, {
+                maizzle: {
+                  ...config,
+                  env
+                },
+                tailwind: {
+                  compiled: css
+                },
+                ...config.events
+              })
+
+              const destination = config.permalink || file
+
+              /**
+               * Generate plaintext
+               *
+               * We do this first so that we can remove the <plaintext>
+               * tags from the markup before outputting the file.
+               */
+
+              const plaintextConfig = get(templateConfig, 'plaintext')
+              const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
+
+              if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
+                await Plaintext
+                  .generate(
+                    compiled.html,
+                    plaintextPath,
+                    merge(plaintextConfig, {filepath: file})
+                  )
+                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
+              }
+
+              compiled.html = removePlaintextTags(compiled.html, config)
+
+              /**
+               * Output file
+               */
+              const parts = path.parse(destination)
+              const extension = get(templateConfig, 'destination.extension', 'html')
+              const finalDestination = `${parts.dir}/${parts.name}.${extension}`
+
+              await fs.outputFile(finalDestination, compiled.html)
+
+              /**
+               * Remove original file if its path is different
+               * from the final destination path.
+               *
+               * This ensures non-HTML files do not pollute
+               * the build destination folder.
+               */
+              if (finalDestination !== file) {
+                await fs.remove(file)
+              }
+
+              // Keep track of handled files
+              files.push(file)
+              parsed.push(file)
+            } catch (error) {
+              switch (config.build.fail) {
+                case 'silent':
+                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                  break
+                case 'verbose':
+                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                  console.error(error)
+                  break
+                default:
+                  spinner.fail(`Failed to compile template: ${path.basename(file)}`)
+                  throw error
+              }
+            }
+          })
+
+          const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
+
+          if (Array.isArray(assets.source)) {
+            await asyncForEach(assets.source, async source => {
+              if (fs.existsSync(source)) {
+                await fs.copy(source, path.join(templateConfig.destination.path, assets.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, '/**/*.*'))
+            .then(contents => {
+              files = [...new Set([...files, ...contents])]
+            })
+        })
+        .catch(error => spinner.warn(error.message))
+    })
+  })
+
+  if (config.events && typeof config.events.afterBuild === 'function') {
+    await config.events.afterBuild(files)
+  }
+
+  return {
+    files,
+    parsed,
+    css
+  }
+}

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

@@ -3,7 +3,8 @@ const {get, merge} = require('lodash')
 const posthtml = require('../posthtml')
 const Tailwind = require('../tailwindcss')
 const Transformers = require('../../transformers')
-const posthtmlMSO = require('../../transformers/posthtml-mso')
+const posthtmlMSO = require('../../transformers/posthtmlMso')
+const Config = require('../config')
 
 module.exports = async (html, options) => {
   process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
@@ -16,7 +17,9 @@ module.exports = async (html, options) => {
     throw new RangeError('received empty string')
   }
 
-  let config = get(options, 'maizzle', {})
+  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
+
+  let config = merge(fileConfig, get(options, 'maizzle', {}))
 
   const tailwindConfig = get(options, 'tailwind.config', {})
   const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')