github maizzle/framework v2.0.0

latest releases: v5.0.0-beta.27, v5.0.0-beta.26, v5.0.0-beta.25...
4 years ago

This release started from the idea to add support for multiple build destination directories, as outlined in #207. However, this introduced a breaking change in the toString() method and in the config.js structure, so here we are, Maizzle 2.0...

Highlights

  • Multiple destination directories
    • New build.templates.config
    • Multiple Sources
  • Exposed html in beforeRender
  • toString now returns object

Multiple destination directories

You can now define multiple destination directories in your config.js.

The new build.templates structures supports multiple template configurations, so you can compile from multiple sources to multiple destinations, each with their own filetypes, extensions, and even assets.

New `build.templates` config

The build config key now has a slightly different structure:

  • assets and destination have been moved under the templates key
  • templates.root is now templates.source
# config.js

module.exports = {
  build: {
-    assets: {
-      source: 'src/assets/images',
-      destination: 'images',
-    },
-    destination: {
-      path: 'build_local',
-    },
-    templates: {
-      root: 'src/templates',
-    },
+    templates: {
+      source: 'src/templates',
+      filetypes: 'html',
+      destination: {
+        path: 'build_local',
+        extension: 'html',
+      },
+      assets: {
+        source: 'src/assets/images',
+        destination: 'images',
+      },
+    },
  },
}

Multiple Sources

You can define multiple Template sources by using an array of objects inside build.templates:

# config.js

module.exports = {
  build: {
-    assets: {
-      source: 'src/assets/images',
-      destination: 'images',
-    },
-    destination: {
-      path: 'build_local',
-    },
-    templates: {
-      root: 'src/templates',
-    },
+    templates: [
+      {
+        source: 'src/templates',
+        destination: {
+          path: 'build_production',
+        },
+        assets: {
+          source: 'src/assets/images',
+          destination: 'images',
+        },
+      },
+      {
+        source: 'src/client-name',
+        filetypes: 'html',
+        destination: {
+          path: 'build_client_name',
+        },
+        assets: {
+          source: ['src/assets/images', '../client/branding'],
+          destination: 'assets',
+        },
+      },
+    ],
  },
}

Browsersync and multiple sources

With multiple sources, Browsersync will serve files from the first destination.path directory it finds in your build.templates config:

framework/src/index.js

Line 37 in ae08459

baseDir: getPropValue(templates[0], 'destination.path') || 'build_local',

In the 'Multiple Sources' example above, that directory is build_production.

Exposed `html` in `beforeRender`

You can now manipulate the HTML in the beforeRender event, too:

module.exports = {
  events: {
    beforeRender(html, config) {
      config.test = 'example'

      html = config.test

      // must return `html`
      return html
    },
  }
}

`toString` now returns object

The toString method now returns an object instead of just the rendered HTML. This object now includes the config that was computed for this template:

return {
html,
config
}

This means that when using it to compile a string, you need to either access the result.html property:

const Maizzle = require('@maizzle/framework')

const html = Maizzle.render(`your html`, {/* config... */}).then(result => result.html)

... or destructure it:

const Maizzle = require('@maizzle/framework')

const html = Maizzle.render(`your html`, {/* config... */}).then(({html}) => html)

  • Merge pull request #291 from maizzle/2.0 69504b1
  • build(tests): run in parallel 787f321
  • fix(todisk): show correct number of templates built 73e079f
  • feat: expose html in beforeRender event 1ea1b54
  • refactor: browsersync config in serve method ae08459
  • refactor(todisk): use sets for removing duplicates in files array f9c597d
  • fix(todisk): return array of all files d281396
  • build(deps): bump posthtml-expressions from 1.4.6 to 1.4.7 51d65c8
  • build(deps): bump tailwindcss from 1.7.5 to 1.7.6 257cb0c
  • feat: multiple destination directories 4400f93
  • Merge branch 'master' of github.com:maizzle/framework into 2.0 265cd13
  • build(deps): bump tailwindcss from 1.7.3 to 1.7.5 87448ac
  • fix: plaintext and todisk generators 5c3c06a
  • feat(tostring): return object with html and config ff8de79

v1.4.3...v2.0.0

Don't miss a new framework release

NewReleases is sending notifications on new releases.