Small parser that allows including multiple html files in one using an <include> tag and a <for> tag.
npm i compile-include-html
<!-- main.html -->
<div class="container">
<include src="card.html" with="text: hello world" />
</div><!-- card.html -->
<div class="card">{text}</div><!-- main.html after compilation -->
<div class="container">
<div class="card">hello world</div>
</div>// javascript file where the context is defined
import { HtmlParser } from "compile-include-html";
const source = `
<div class="container">
<for condition="const user of array">
<span>Firstname: {user.firstName}, lastname: {user.lastName}</span>
</for>
</div>`;
const context = {
array: [
{ firstName: "john", lastName: "doe" },
{ firstName: "jannet", lastName: "foe" },
],
};
const htmlParser = new HtmlParser({
globalContext: context,
});
const output = htmlParser.transform(source);<!-- output -->
<div class="container">
<span>Firstname: john, lastname: doe</span>
<span>Firstname: jannet, lastname: foe</span>
</div>// javascript file where the context is defined
import { HtmlParser } from "compile-include-html";
const source = `<a href="{link.href}">{link.name}</a>`;
const parser = new HtmlParser({
globalContext: {
link: {
href: "https://example.com",
name: "link to example",
},
},
});
const output = htmlParser.transform(source);<!-- output -->
<a href="https://example.com">link to example</a>Create a new HtmlParser with:
import { HtmlParser } from "compile-include-html";
const htmlParser = new HtmlParser();You can pass an option object to your parser.
type options = {
indent?: number;
inputIsDocument?: boolean;
globalContext?: TContext;
basePath?: string;
};indent: You can set the indentation of your generated html with theindentproperty.inputIsDocument: determines whether the input is an entire document with<DOCTYPE>,<head>and<body>tags or just a fragment. It will allow the parser to correctly manage both cases.globalContext: allows you to pass a context object to the parser. It will be used to replace values wrapped in{and}. Brackets values only work on attributes values and text nodes, for example:
<!-- will work -->
<p class="{className}">{paragraph}</p>
<!-- will not work -->
<p {classAttr}="px-4">{paragraph}</p>basePath: allows you to pass a basePath to your parser, for example you can do
import { HtmlParser } from "compile-include-html";
const htmlParser = new HtmlParser({ basePath: "pages/about" });<!-- main.html -->
<div class="container">
<include src="card.html" with="text: hello world" />
</div>instead of
<!-- main.html -->
<div class="container">
<include src="pages/about/card.html" with="text: hello world" />
</div>Use it to read a file and retrieve a string of the file's content.
Use it to transform a string using the include or for tag into its compiled version.
Use it to compile an input file located at inputPath and create an output file located at outputPath.