1.0.0 • Public • Published

Reshape Include

npm tests dependencies coverage

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


npm i reshape-include --save


Given the following input files:

<!-- index.html -->
<p>Here's my partial:</p>
<include src='_partial.html'></include>
<p>after the partial</p>
<!-- _partial.html -->
<strong>hello from the partial!</strong>

Process them with reshape:

const {readFileSync} = require('fs')
const reshape = require('reshape')
const include = require('reshape-include')
const html = readFileSync('index.html')
reshape({ plugins: include() })
  .then((result) => console.log(result.output()))


<p>Here's my partial:</p>
<strong>hello from the partial!</strong>
<p>after the partial</p>

Utilizing Different Parsers

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:

const htmlParser = require('reshape-parser')
const sugarml = require('sugarml')
  plugins: [
      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.


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

Reporting Dependencies

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:

const reshape = require('reshape')
const include = require('reshape-include')
reshape({ plugins: [include()], dependencies: []})
  .then((res) => {

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


Package Sidebar


npm i reshape-include

Weekly Downloads






Last publish


  • jescalan