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
- New
- Exposed
html
inbeforeRender
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
anddestination
have been moved under thetemplates
keytemplates.root
is nowtemplates.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:
Line 37 in ae08459
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:
framework/src/generators/output/to-string.js
Lines 51 to 54 in ff8de79
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