@maizzle/framework 4.0.0-alpha.2 → 4.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.5",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -48,7 +48,7 @@
     "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",

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

@@ -29,7 +29,7 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'tailwind.compiled') === 'string')
     ? config.tailwind.compiled
-    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config, spinner)
+    : await Tailwind.compile('', '', {}, config, spinner)
 
   // Parse each template config object
   await asyncForEach(templatesConfig, async templateConfig => {
@@ -50,6 +50,7 @@ module.exports = async (env, spinner, config) => {
 
     if (typeof templateConfig.source === 'function') {
       const sources = templateConfig.source(config)
+
       if (Array.isArray(sources)) {
         templateSource.push(...sources)
       } else if (typeof sources === 'string') {
@@ -69,8 +70,15 @@ module.exports = async (env, spinner, config) => {
 
     // 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, outputDir)
+        .copy(source, out)
         .then(async () => {
           const extensions = Array.isArray(templateConfig.filetypes)
             ? templateConfig.filetypes.join('|')
@@ -83,9 +91,6 @@ module.exports = async (env, spinner, config) => {
             return
           }
 
-          // Store template config currently being processed
-          config.build.currentTemplates = templateConfig
-
           if (config.events && typeof config.events.beforeCreate === 'function') {
             await config.events.beforeCreate(config)
           }
@@ -93,76 +98,79 @@ module.exports = async (env, spinner, 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.
-                 */
-
-                const plaintextConfig = get(templateConfig, '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
-                }
+            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')}

package/src/generators/plaintext.js

@@ -1,52 +1,49 @@
-const path = require('path')
-const {get} = require('lodash')
-const {stripHtml} = require('string-strip-html')
-
-module.exports.generate = async (html, destination, config) => {
-  const options = get(config, 'build.currentTemplates.plaintext', get(config, 'plaintext', {}))
-  const configDestinationPath = get(options, 'destination.path')
-  const extension = get(options, 'destination.extension', 'txt')
-  const plaintext = stripHtml(html, {
-    dumpLinkHrefsNearby: {
-      enabled: true
-    },
-    ...options
-  }).result
-
-  // If we set plaintext.destination.path in config/fm
-  if (configDestinationPath) {
-    // Naive path checking, this does not support dot folders
-    const isFilePath = Boolean(path.parse(configDestinationPath).ext)
-
-    /**
-     * Using a file path will generate a single plaintext file,
-     * no matter how many templates there are.
-     *
-     * It will be based on the last-processed template.
-     */
-    if (isFilePath) {
-      destination = configDestinationPath
-
-      return {plaintext, destination}
-    }
-
-    /**
-     * Using a directory-like path for plaintext.destination.path
-     */
-    destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
-
-    return {plaintext, destination}
-  }
-
-  /**
-   * Use template's `permalink` Front Matter key,
-   * fall back to the original `destination`.
-   */
-  destination = get(config, 'permalink', destination)
-
-  if (typeof destination === 'string') {
-    destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
-  }
-
-  return {plaintext, destination}
-}
+const path = require('path')
+const {get} = require('lodash')
+const {stripHtml} = require('string-strip-html')
+
+module.exports.generate = async (html, destination, config) => {
+  const configDestinationPath = get(config, 'destination.path')
+  const extension = get(config, 'destination.extension', 'txt')
+
+  const plaintext = stripHtml(html, {
+    dumpLinkHrefsNearby: {
+      enabled: true
+    },
+    ...get(config, 'options', {})
+  }).result
+
+  // If we set plaintext.destination.path in config/fm
+  if (configDestinationPath) {
+    /**
+     * Using a file path will generate a single plaintext file,
+     * no matter how many templates there are.
+     *
+     * It will be based on the last-processed template.
+     */
+    if (path.extname(configDestinationPath)) {
+      destination = configDestinationPath
+
+      return {plaintext, destination}
+    }
+
+    /**
+     * Using a directory-like path for plaintext.destination.path
+     */
+    destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
+
+    return {plaintext, destination}
+  }
+
+  /**
+   * Use template's `permalink` Front Matter key,
+   * fall back to the original `destination`.
+   */
+  destination = get(config, 'permalink', destination)
+
+  if (typeof destination === 'string') {
+    destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
+  }
+
+  return {plaintext, destination}
+}

package/src/generators/posthtml.js

@@ -1,61 +1,61 @@
-const fm = require('front-matter')
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const fetch = require('posthtml-fetch')
-const layouts = require('posthtml-extend')
-const modules = require('posthtml-modules')
-const expressions = require('posthtml-expressions')
-
-module.exports = async (html, config) => {
-  const layoutsOptions = get(config, 'build.layouts', {})
-
-  const fetchOptions = get(config, 'build.posthtml.fetch', {})
-  const fetchPlugin = fetch({...fetchOptions})
-
-  const modulesOptions = get(config, 'build.components', {})
-  // Fake `from` option so we can reference modules relatively
-  const modulesRoot = modulesOptions.root || './'
-  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
-
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
-
-  const locals = merge(
-    get(expressionsOptions, 'locals', {}),
-    get(config, 'locals', {}),
-    {page: config}
-  )
-
-  return posthtml([
-    fetchPlugin,
-    layouts(
-      merge(
-        {
-          strict: false,
-          plugins: [
-            expressions({...expressionsOptions, locals})
-          ]
-        },
-        layoutsOptions
-      )
-    ),
-    modules({
-      parser: posthtmlOptions,
-      attributeAsLocals: true,
-      from: modulesFrom,
-      root: modulesRoot,
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        fetchPlugin
-      ],
-      locals,
-      ...modulesOptions
-    }),
-    ...posthtmlPlugins
-  ])
-    .process(html, {...posthtmlOptions})
-    .then(result => fm(result.html).body)
-}
+const fm = require('front-matter')
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const fetch = require('posthtml-fetch')
+const layouts = require('posthtml-extend')
+const modules = require('posthtml-modules')
+const expressions = require('posthtml-expressions')
+
+module.exports = async (html, config) => {
+  const layoutsOptions = get(config, 'build.layouts', {})
+
+  const fetchOptions = get(config, 'build.posthtml.fetch', {})
+  const fetchPlugin = fetch({...fetchOptions})
+
+  const modulesOptions = get(config, 'build.components', {})
+  // Fake `from` option so we can reference modules relatively
+  const modulesRoot = modulesOptions.root || './'
+  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
+
+  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
+
+  const locals = merge(
+    get(expressionsOptions, 'locals', {}),
+    get(config, 'locals', {}),
+    {page: config}
+  )
+
+  return posthtml([
+    fetchPlugin,
+    layouts(
+      merge(
+        {
+          strict: false,
+          plugins: [
+            expressions({...expressionsOptions, locals})
+          ]
+        },
+        layoutsOptions
+      )
+    ),
+    modules({
+      parser: posthtmlOptions,
+      attributeAsLocals: true,
+      from: modulesFrom,
+      root: modulesRoot,
+      tag: 'component',
+      attribute: 'src',
+      plugins: [
+        fetchPlugin
+      ],
+      locals,
+      ...modulesOptions
+    }),
+    ...posthtmlPlugins
+  ])
+    .process(html, {...posthtmlOptions})
+    .then(result => fm(result.html).body)
+}

package/src/generators/tailwindcss.js

@@ -73,6 +73,13 @@ module.exports = {
           return {raw: '', extension: 'html'}
         }
 
+        // Support single-file sources i.e. src/templates/index.html
+        if (typeof source === 'string' && Boolean(path.extname(source))) {
+          config.content.files.push(source)
+
+          return {raw: '', extension: 'html'}
+        }
+
         return `${source}/**/*.*`
       })
 
@@ -83,7 +90,9 @@ module.exports = {
     const userFileExists = await fs.pathExists(userFilePath)
 
     if (userFileExists) {
-      css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+      css += await fs.readFile(path.resolve(userFilePath), 'utf8')
+    } else {
+      css = '@tailwind components; @tailwind utilities;' + css
     }
 
     return postcss([