New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

js-html-renderer

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

js-html-renderer

A JS DSL for rendering HTML on the client or the server.

0.0.2
Source
npm

Version published: 12 months ago

Weekly downloads: 12; decreased by-90.7%

Maintainers: 1

Weekly downloads

Created: 12 months ago

Source

JS HTML Renderer

A JS DSL for rendering HTML on the client or the server.

Introduction

The JS HTML Renderer provides a concise and intuitive syntax for writing HTML using JavaScript. You can use the Renderer in order to create a static Template and inject dynamic content into it. JS Symbols are used in order to designate where dynamic content will be inserted.

The Renderer's syntax is intuitive and concise e.g.,

const template: Template = doctype()(
    html()(
        head()(
            title()('The Title'),
                    // ⮴ The element collection may contain text nodes or other elements.
            script({ src: 'script.js' })()
                    // ⮴ Attributes are defined using key-value pairs.
        ),
        body()(
            main({ id: 'main-content' })(
                br(),
                // ⮴ Void elements lack parens for a node collection.
                p()(
                    $greetings // 🢤 `$greetings` is a JS Symbol.
                    // ⮴ Dynamic content may be injected wherever there is a Symbol.
                )
            )
        )
    )
);

Features

An intuitive and concise syntax.
Create your own custom HTML tags (i.e., for Custom Elements).
Performant prerendering.
Use the prettier of your choice for beautifying your HTML.

Installation

npm install js-html-renderer

Usage

In this example you will create an HTML document that contains greetings in Esperanto and English.

Import typings and relevant tags.

import { Template, doctype, html, head, body, main, ul, li } from "js-html-renderer";

Create Symbols for dynamic content.

const $greetings = Symbol('greetings');

Create an HTML `Template`.

You will use the Symbol created above in order to designate where dynamic content will be inserted.

const template: Template = doctype()(
    html()(
        head()(
        ),
        body()(
            main({ id: 'main-content' })(
                $greetings
                // ⮴ You will insert an unordered list of greetings here.
            )
        )
    )
);

Create an HTML list of greetings using JavaScript.

You use JavaScript and the Renderer's HTML elements in order to produce dynamic content. In this example we use Array.prototype.map in order to map the elements of helloWorld into a list of li elements.

const helloWorld = ['Saluton, Mondo!', 'Hello, World!'];

const greetings = ul({ id: 'greetings' })(
    helloWorld.map(
        (greeting: string, index: number) => li({ id: `greeting-${index}` })(greeting)
            // This is an HTML `li` element. ⮵ 
            // Each `li` element will contain its respective `id` attribute.
    ) 
);

The `greetings` HTML fragment looks like this:

<ul id="greetings">
    <li id="greeting-0">Saluton, Mondo!</li>
    <li id="greeting-1">Hello, World!</li>
</ul>

Inject the dynamic content and render the HTML.

You use template.render in order to inject the unordered HTML list of greetings created above into the Template.

const htmlText = template.render(
    {
        [$greetings]: greetings
    }
);

Log the result to the console.

console.log(htmlText);

The resulting HTML (formatted for clarity).

<!DOCTYPE html>
<html>
<head></head>
<body>
    <main id="main-content">
        <ul id="greetings">
            <li id="greeting-0">Saluton, Mondo!</li>
            <li id="greeting-1">Hello, World!</li>
        </ul>
    </main>
</body>
</html>

Performance

Prerendering

HTML is prerendered at the time the Template is created. The HTML elements are concatenated into a string separated by just the Symbolic dynamic components of the Template. For example, in the Template below, all the HTML elements, including the footer, are prerendered at the time of Template creation. This means that the Template may be reused without having to reconstruct the HTML elements that comprise it at each use.

The final render step, invoked using the template.render method, involves just a final concatenation of the prerenderd HTML and the dynamic content.

const template: Template = doctype()(
    html()(
        head()(
        ),
        body()(
            main({ id: 'main-content' })(
                $greetings
            ),
            footer({id: 'footer'})()
        )
    )
);

Custom HTML Tags

Custom HTML tags can be created by binding the name of the tag to the first argument of the Renderer's sigil function. The resulting HTML tag can be used as a Custom Element.

Import the Renderer's sigil function for creating custom HTML tags.

import { $ } from "js-html-renderer";

Create a custom HTML element.

const my_custom_element = $.bind(null, 'my-custom-element');

Render the custom element with the class name `custom-element` and content "Hello, World!" and log it to the console.

console.log(my_custom_element({ class: 'custom-element' })('Hello, World!').render());

Output

<my-custom-element class="custom-element">Hello, World!</my-custom-element>

FAQs

What is js-html-renderer?

Is js-html-renderer popular?

Is js-html-renderer well maintained?

Package last updated on 18 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

js-html-renderer

JS HTML Renderer

Introduction

Features

Table of Contents

Installation

Usage

Import typings and relevant tags.

Create Symbols for dynamic content.

Create an HTML `Template`.

Create an HTML list of greetings using JavaScript.

The `greetings` HTML fragment looks like this:

Inject the dynamic content and render the HTML.

Log the result to the console.

The resulting HTML (formatted for clarity).

Performance

Prerendering

Custom HTML Tags

Import the Renderer's sigil function for creating custom HTML tags.

Create a custom HTML element.

Render the custom element with the class name `custom-element` and content "Hello, World!" and log it to the console.

Output

Related posts

js-html-renderer

JS HTML Renderer

Introduction

Features

Table of Contents

Installation

Usage

Import typings and relevant tags.

Create Symbols for dynamic content.

Create an HTML Template.

Create an HTML list of greetings using JavaScript.

The greetings HTML fragment looks like this:

Inject the dynamic content and render the HTML.

Log the result to the console.

The resulting HTML (formatted for clarity).

Performance

Prerendering

Custom HTML Tags

Import the Renderer's sigil function for creating custom HTML tags.

Create a custom HTML element.

Render the custom element with the class name custom-element and content "Hello, World!" and log it to the console.

Output

Related posts

North Korean APT Lazarus Targets Developers with Malicious npm Package

CISA Brings KEV Data to GitHub

Create an HTML `Template`.

The `greetings` HTML fragment looks like this:

Render the custom element with the class name `custom-element` and content "Hello, World!" and log it to the console.