InlineResourceLiteral
InlineResource is a Javascript build tool that handles inlining of common types of resources with a declarative syntax. It provides an ability to replace pre-defined placeholders into JS expressions at build time. It automatically minifies files with extension html and css.
Installation
Add InlineResource to your project's devDependency by executing:
yarn add inline-resource-literal --dev
Usage
Sources
// source.js
...
element.innerHTML = RESOURCE_TEMPLATE;
...// template.html
<html><div></div></html>Build setup
Using CLI
inline-resc source.js inlined.js --resc:TEMPLATE template.html
Using JS API
// build.js
const InlineResource = require("inline-resource-literal");
const fs = require('fs');
const file = fs.readFileSync('./source.js').toString();
const inlined = (new InlineResource({
"TEMPLATE": './template.html'
})).inline(file);
fs.writeFileSync('./inlined.js', inlined);Output
// inlined.js
element.innerHTML = "<div></div>";Inlining with Precomputed Values
Sources
// source.js
element.innerHTML = RESOURCE_ARGS("TEMPLATE", "DOMAIN", document.domain, "LANGUAGE", navigator.language);// template.html
<p>domain is: RESOURCE_DOMAIN</p>
<p>language is: RESOURCE_LANGUAGE</p>Build setup
inline-resc source.js inlined.js --resc:TEMPLATE template.html
or
// build.js
const InlineResource = require("inline-resource-literal");
const fs = require('fs');
const file = fs.readFileSync('./source.js').toString();
const inlined = (new InlineResource({
"TEMPLATE": './template.html'
})).inline(file);
fs.writeFileSync('./inlined.js', inlined);Output
// inlined.js
element.innerHTML = "<p>domain is: " + document.domain + "</p>\n<p>language is: " + navigator.language + "</p>";API
Check out the .d.ts file.