Reshape Include


Include other HTML files ("partials") into your HTML.

$3

``sh
npm i reshape-include --save
`

$3

Given the following input files:

`html



Here's my partial:

after the partial

`

`html

hello from the partial!
`

Process them with reshape:

`js
const {readFileSync} = require('fs')
const reshape = require('reshape')
const include = require('reshape-include')

const html = readFileSync('index.html')

reshape({ plugins: include() })
.process(html)
.then((result) => console.log(result.output()))
`

Output:

`html


Here's my partial:

hello from the partial!

after the partial

`

$3

Sometimes, you might want to import a html file into a sgr file. Or maybe a svg. In these cases and any other where you are seeking to mix two files that are processed by different parsers, you can utilize the parserRules config value. Example shown below:

`js
const htmlParser = require('reshape-parser')
const sugarml = require('sugarml')

reshape({
plugins: [
include({
parserRules: [
{ test: /\.sgr$/, parser: sugarml }
{ test: /\.html$/, parser: htmlParser }
]
})
]
})
`

Note that anything not matched by a parserRules test will be parsed by whatever parser is being used by reshape from its primary config. So in the example above, the html test is unnecessary -- since reshape's default parser is reshape-parser, it will already use this for any file not matching .sgr.

Note that any parser can be used here in theory, but it must output a valid Reshape AST. Feel free to make use of the reshape AST validator if you want in the process.

$3

All options are optional, none are required.

| Name | Description | Default |
| ---- | ----------- | ------- |
| root | Root path to resolve the include from | the file's path. |
| alias| Object with alias mappings, each key is your reference and the corresponding value is the relative path to your file. { button: './views/button.html } | |
| parserRules| Array of objects that can include the test (regex) and parser (fn) keys. See readme for further details | |

$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-include')

reshape({ plugins: [include()], 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 our contributing guide