@maizzle/framework 3.7.2 → 4.0.0-alpha.10

package/.github/workflows/nodejs.yml

@@ -1,29 +1,28 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12, 14, 16]
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm install
-      - run: npm test
-        env:
-          CI: true
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14, 16, 17]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true

package/bin/maizzle

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('@maizzle/cli')

package/package.json

@@ -1,84 +1,91 @@
-{
-  "name": "@maizzle/framework",
-  "version": "3.7.2",
-  "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
-  "license": "MIT",
-  "main": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/maizzle/framework.git"
-  },
-  "bugs": "https://github.com/maizzle/framework/issues",
-  "homepage": "https://maizzle.com",
-  "author": "Cosmin Popovici (https://github.com/cossssmin)",
-  "keywords": [
-    "maizzle",
-    "tailwindcss",
-    "responsive-email",
-    "email-framework",
-    "email-template",
-    "email-marketing",
-    "email-campaigns",
-    "email-newsletter",
-    "email-boilerplate",
-    "html-emails"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "test": "xo && nyc ava -s",
-    "style": "xo",
-    "release": "np"
-  },
-  "dependencies": {
-    "browser-sync": "^2.26.13",
-    "color-shorthand-hex-to-six-digit": "^3.0.2",
-    "email-comb": "^5.0.0",
-    "front-matter": "^4.0.0",
-    "fs-extra": "^10.0.0",
-    "glob-promise": "^4.1.0",
-    "html-crush": "^4.0.0",
-    "juice": "^8.0.0",
-    "lodash": "^4.17.20",
-    "ora": "^5.1.0",
-    "postcss": "^8.2.14",
-    "postcss-import": "^14.0.0",
-    "postcss-merge-longhand": "^5.0.1",
-    "posthtml": "^0.16.4",
-    "posthtml-attrs-parser": "^0.1.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-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",
-    "string-strip-html": "^8.2.0",
-    "tailwindcss": "^2.2.2",
-    "tailwindcss-box-shadow": "^1.0.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "ava": "^3.13.0",
-    "np": "*",
-    "nyc": "^15.1.0",
-    "xo": "0.39.1"
-  },
-  "engines": {
-    "node": ">=12.13.0"
-  },
-  "ava": {
-    "files": [
-      "test/**/test*.js"
-    ]
-  }
-}
+{
+  "name": "@maizzle/framework",
+  "version": "4.0.0-alpha.10",
+  "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
+  "license": "MIT",
+  "main": "src/index.js",
+  "bin": {
+    "maizzle": "bin/maizzle"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maizzle/framework.git"
+  },
+  "bugs": "https://github.com/maizzle/framework/issues",
+  "homepage": "https://maizzle.com",
+  "author": "Cosmin Popovici (https://github.com/cossssmin)",
+  "keywords": [
+    "maizzle",
+    "tailwindcss",
+    "responsive-email",
+    "email-framework",
+    "email-template",
+    "email-marketing",
+    "email-campaigns",
+    "email-newsletter",
+    "email-boilerplate",
+    "html-emails"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "c8 ava -s",
+    "pretest": "xo",
+    "style": "xo",
+    "release": "np"
+  },
+  "dependencies": {
+    "@maizzle/cli": "^1.4.0",
+    "autoprefixer": "^10.4.0",
+    "browser-sync": "^2.26.13",
+    "color-shorthand-hex-to-six-digit": "^3.0.2",
+    "email-comb": "^5.2.0",
+    "front-matter": "^4.0.0",
+    "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.4.4",
+    "postcss-import": "^14.0.0",
+    "postcss-merge-longhand": "^5.0.1",
+    "posthtml": "^0.16.6",
+    "posthtml-attrs-parser": "^0.1.1",
+    "posthtml-base-url": "^1.0.1",
+    "posthtml-content": "^0.1.0",
+    "posthtml-expressions": "^1.8.1",
+    "posthtml-extend": "^0.6.0",
+    "posthtml-extra-attributes": "^1.0.0",
+    "posthtml-fetch": "^2.2.0",
+    "posthtml-markdownit": "^1.3.0",
+    "posthtml-match-helper": "^1.0.3",
+    "posthtml-modules": "^0.9.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.8",
+    "posthtml-url-parameters": "^1.0.4",
+    "pretty": "^2.0.0",
+    "prevent-widows": "^1.0.2",
+    "query-string": "^7.1.0",
+    "string-strip-html": "^8.2.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "ava": "^4.0.1",
+    "c8": "^7.11.0",
+    "np": "*",
+    "xo": "0.39.1"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "ava": {
+    "files": [
+      "test/**/test*.js"
+    ]
+  }
+}

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,156 @@
+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 (config.events && typeof config.events.beforeCreate === 'function') {
+          await config.events.beforeCreate(config)
+        }
+
+        // Don't render if file type is not configured
+        // eslint-disable-next-line
+        const filetypes = templates.reduce((acc, template) => {
+          return [...acc, ...get(template, 'filetypes', ['html'])]
+        }, [])
+
+        if (!filetypes.includes(path.extname(file).slice(1))) {
+          return
+        }
+
+        if (get(config, 'build.console.clear')) {
+          clearConsole()
+        }
+
+        const start = new Date()
+
+        spinner.start('Building email...')
+
+        file = file.replace(/\\/g, '/')
+
+        const renderOptions = {
+          maizzle: config,
+          ...config.events
+        }
+
+        renderToString(
+          await fs.readFile(file, 'utf8'),
+          renderOptions
+        )
+          .then(async ({html, config}) => {
+            let source = ''
+            let dest = ''
+            let ext = ''
+
+            if (Array.isArray(config.build.templates)) {
+              const match = config.build.templates.find(template => template.source === path.parse(file).dir)
+              source = get(match, 'source')
+              dest = get(match, 'destination.path', 'build_local')
+              ext = get(match, 'destination.ext', 'html')
+            } else if (isObject(config.build.templates)) {
+              source = get(config, 'build.templates.source')
+              dest = get(config, 'build.templates.destination.path', 'build_local')
+              ext = get(config, 'build.templates.destination.ext', 'html')
+            }
+
+            const fileDir = path.parse(file).dir.replace(source, '')
+            const finalDestination = path.join(dest, fileDir, `${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(
+        merge(
+          {
+            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