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.