jsxhtml
Write jsx like template literal.
Installation
$ npm i @kdts/jsxhtmlUsage
// Import ESModule
import { jsxhtml } from "@kdts/jsxhtml";
// Or require Commonjs
const { jsxhtml } = require("@kdts/jsxhtml");const listArray = [{ label: "First Item", isActive: true }, { label: "Second Item" }];
const title = " The list ";
const showText = false;
const templateStr = jsxhtml`<div>
${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
<ul>
${listArray.map(listItem => jsxhtml`<li class="item ${listItem.isActive && "active"}">${listItem.label}</li>`)}
</ul>
${showText && `<p>If showText is false, this is not rendered. </p>`}
</div>`;will produce the desire result
<div>
<h2>The list</h2>
<ul>
<li class="item active">First Item</li><li class="item ">Second Item</li>
</ul>
</div>Without the jsxhtml tagging function
const templateStr = `<div>
${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
<ul>
${listArray.map(listItem => `<li>${listItem.label}</li>`)}
</ul>
${showText && `<p>If showText is false, this is not rendered. </p>`}
</div>`;would have produced
<div>
<h2>The list</h2>
<ul>
<li class="active">First Item</li>,<li class="undefined">Second Item</li>
</ul>
false
</div>or you would have to write the template as follow to achieve the desire result
const templateStr = `<div>
${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
<ul>
${listArray.map(listItem => `<li class="${listItem.isActive ? "active" : ""}">${listItem.label}</li>`).join("")}
</ul>
${showText ? `<p>If showText is false, this is not rendered. </p>` : ""}
</div>`;but as the template gets complex it becomes harder to read. So use @kdts/jsxhtml to write ease to read templates.
License
See LICENSE.
Copyright
Copyright © 2023. Kossi D. T. Saka.