Reshape Layouts


Layout inheritance using block and extend, inspired by (jade/pug).

$3

npm i reshape-layouts --save

$3

Let's say we have a base template:

base.html
``html














`

Now we can inherit this template. All defined blocks inside will
replace the blocks with the same name in the parent template. If the block is not defined inside its content in the parent template remains the same.

In the example the blocks title and content will be replaced and
the block footer will remain unchanged:

`js
const reshape = require('reshape')
const layouts = require('reshape-layouts')

const html = '' +
'' +
'Read the documentation'
''

reshape({
plugins: layouts({
encoding: 'utf8', // Parent template encoding (default: 'utf8')
root: './' // Path to parent template directory (default: './')
})
}).process(html)
.then((res) => res.output())
`

The final HTML will be:

`html












`

#### Append & Prepend

It's also possible to append and prepend block's content

`js
const reshape = require('reshape')
const layouts = require('reshape-layouts')

const html = '' +
'How to use reshape-layouts' +
'Read the documentation' +
'— 2016'
''

reshape({ plugins: layouts() })
.process(html)
.then((res) => res.output())
`

The final HTML will be:

`html











`

$3

There are a number of tags that have their contents parsed as plaintext and cannot contain nested html tags. If you place a block tag inside any of these elements, it will not behave as expected, and instead will be rendered as plaintext. These are the tags that are content-only: title, noscript, noframes, style, script, xmp, iframe, noembed.

$3

All options are optional, none are required.

| Name | Description | Default |
| ---- | ----------- | ------- |
| root | root to resolve layout paths from | reshape filename option |
| encoding | encoding with which to read layout files | utf8 |

$3

This plugin will report its dependencies in the standard format as dictated by reshape-loader if you pass dependencies: [] as an option to reshape when it runs. Dependencies will be available on the output object under the dependencies key. For example:

`js
const reshape = require('reshape')
const include = require('reshape-layouts')

reshape({ plugins: [layouts()], dependencies: []})
.process(someHtml)
.then((res) => {
console.log(res.dependencies)
console.log(res.output())
})
``

If you are using this with webpack, reshape-loader takes care of the dependency reporting and you don't have to do anything 😁

$3

- Licensed under MIT
- See the contributing guide