jsxhtml

Write jsx like template literal.

Installation

$ npm i @kdts/jsxhtml

Usage

// 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.