@leafac/html
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    @leafac/html

    HTML tagged template literals

    Source Package Continuous Integration

    Installation

    $ npm install @leafac/html

    Use @leafac/html with Prettier (automatic formatting), and the Visual Studio Code extensions Prettier - Code formatter (Prettier support) and es6-string-html (syntax highlighting).

    Features, Usage, and Examples

    • Use tagged template literals as an HTML template engine. For example:

      import html from "@leafac/html";
      
      console.log(html`<p>${"Leandro Facchinetti"}</p>`); // => <p>Leandro Facchinetti</p>
    • Safe by default. For example:

      console.log(html`<p>${`<script>alert(1);</script>`}</p>`); // => <p>&#x3C;script&#x3E;alert(1);&#x3C;/script&#x3E;</p>
    • Unsafely interpolate trusted HTML with $${...}. For example:

      console.log(html`<p>$${`<span>Leandro Facchinetti</span>`}</p>`); // => <p><span>Leandro Facchinetti</span></p>
    • Join interpolated arrays. For example:

      console.log(html`<p>${["Leandro", " ", "Facchinetti"]}</p>`); // => <p>Leandro Facchinetti</p>

      Array interpolations are safe by default; if you wish to unsafely interpolate an array of trusted HTML use $${[...]}.

    • @leafac/html doesn’t encode HTML itself. It relies on he, which is much more robust than any bespoke encoding.

    • @leafac/html doesn’t try to format the output. If you need pretty HTML, you may call Prettier programmatically on the output.

    • @leafac/html generates strings. No kind of virtual DOM here. For readability, the HTML type is exported in TypeScript, and you may use it like in the following example:

      import { html, HTML } from ".";
      const name: HTML = html`<p>Leandro Facchinetti</p>`;
      console.log(name);
    • @leafac/html sanitizes (removes) invalid XML characters. It uses sanitize-xml-string. For example:

      console.log(html`<p>A backspace is invalid in XML: |\b|</p>`); // => <p>A backspace is invalid in XML: ||</p>

    Related Projects

    Prior Art

    Install

    npm i @leafac/html

    DownloadsWeekly Downloads

    42

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • leafac