Usage

Install this package in your project:

# via npm
npm add omnires

# or pnpm
pnpm add omnires

# or yarn
yarn add omnires

Now you could render any object onto your page.

// example.ts
import { render } from "omnires";

const result = document.querySelector("#result");

render([69, true, { foo: "Hello World!" }], result);

would give you...

Cool, isn't it?

Not only could Omnires render primitives, it also supports essentially all types in JS.

Methods

render<T extends HTMLElement>(value: unknown, container: T): T

Mounts rendered value into container.

Returns container.

wrap<T extends keyof HTMLElementTagNameMap>(tag: T, value: unknown): HTMLElementTagNameMap[T]

Wraps rendered value into a tag element.

Returns the tag element.

WARNING: Make sure you know what you are doing. Sanitize expression if you can't trust user input.

renderEval<T extends HTMLElement>(expression: string, container: T): T

Mounts rendered expression into container after parsing it with JavaScript.

Returns container.

wrapEval<T extends keyof HTMLElementTagNameMap>(tag: T, expression: string): HTMLElementTagNameMap[T]

Wraps rendered expression into a tag element after parsing it with JavaScript.

Returns the tag element.

Demo

A demo of Omnires is available at Omnires Demo.

 Anything, Anywhere, Anyone