Microrender NPM

MicroRender

Simple JS rendering engine that runs on the edge and the browser for optimum speed and compatibility.

MicroRender currently has backends for the browser and Cloudflare pages. Support for other backends eg. NodeJS servers or AWS Lambda may be added in the future.

MicroRender is not yet stable or production-ready, but it is coming closer to that point. View the demo (code; web page) for examples.

Global APIs

These APIs can be accessed on the $ object passed to any hook (exported function) of each fragment.

Syntax	Implemented?	Description
`$.form(field: string)` => `string` \| `void`	✅	Get form fields from POST requests. `undefined` unless the method is `POST`.
`$.fetch(url: any, ?options: RequestInit)` => `Promise<Response>`	✅	Wrapper around the fetch api. Uses cloudflare service bindings where possible.
`$.url()` => `URL`	✅	Gets the current URL. Can be modified in the `control` hook.
`$.error()` => `number`	✅	Gets the current HTTP status. Can be modified in the `control` hook. Default `200`.
`$.cookie(name: string)` => `string`	✅	Reads browser cookies.
`$.title()` => `string`	✅	Gets the title variable. Can be modified in the `control` hook. Default `""`.
`$.desc()` => `string`	✅	Gets the description variable. Can be modified in the `control` hook. Default `""`.

Render APIs

These APIs can be accessed on the $ object passed to the render hook (export function) of each fragment.

Syntax	Implemented?	Description
`$(selector: string, callback: (elmt: Element) => void)` => `void`	✅	JQuery-like selector API. Runs `callback` for each matching element.
`Element.getAttribute(attr)` => `string` \| `void`	✅	Similar to DOM `Element.getAttribute()`
`Element.hasAttribute(attr)` => `boolean`	✅	Similar to DOM `Element.hasAttribute()`
`Element.setAttribute(attr)` => `void`	✅	Similar to DOM `Element.setAttribute()`
`Element.removeAttribute(attr)` => `void`	✅	Similar to DOM `Element.removeAttribute()`
`Element.attr(attr: string, ?value: string)` => `string` \| `void`	✅	Shorthand for `(get/set/remove)Attribute`; similer to JQuery `.attr()`.
`Element.boolean(attr: string, ?value: string)` => `boolean` \| `void`	✅	Similar to `.attr()` but simplifies working with boolean attributes.
`Element.html(content: string)` => `void`	✅	Equivalent to DOM `Element.innerHTML = content`. HTML is not escaped.
`Element.text(content: string)` => `void`	✅	Equivalent to DOM `Element.textContent = content`. HTML is escaped.
`Element.getStyle(property: string)` => `string` \| `void`	✅	Get a CSS property in the inline style tag.
`Element.setStyle(property: string, value: string)` => `void`	✅	Set a CSS property in the inline style tag. A blank string removes it.
`Element.removeStyle(property: string)` => `void`	✅	Remove a CSS property in the inline style tag.
`Element.style(property: string, ?value: string)` => `string` \| `void`	✅	Shorthand for `(get/set)Style()`. Similar to JQuery `.css()` but uses inline styles.
`Element.getClass($class: string)` => `boolean`	✅	Similar to DOM `Element.classList.contains()`
`Element.setClass($class: string, value: boolean)` => `void`	✅	Similar to DOM `Element.classList.add()` and `Element.classList.remove()`
`Element.toggleClass($class: string)` => `void`	✅	Similar to DOM `Element.classList.toggle()`
`Element.class($class: string, ?value: bool)` => `boolean`	✅	Shorthand for `(get/set)Class()`
`Element.value(?value: string)` => `string`	✅	Modify/read the value attribute/property of an element.
`$.data(attr: string)` => `string` \| `void`	✅	Get data-* attributes from the fragment element.

Control APIs

These APIs can be accessed on the $ object passed to the control hook (export function) of each fragment. They cannot be used in the render hook as they modify HTTP headers on the server so must run before any of the body code. These (mostly) extend the global APIs.

Syntax	Implemented?	Description
`$.url(url: string \\| URL)` => `void`	✅	Changes the current URL.
`$.error(code: number)` => `void`	✅	Changes the current HTTP status.
`$.cookie(name: string, value: string)` => `void`	✅	Sets browser cookies.
`$.title(title: string)` => `void`	✅	Sets a title variable readable by all fragments. Should be added to the `<title>` tag.
`$.desc(desc: string)` => `void`	✅	Sets a description variable readable by all fragments. Should be added a `<meta>` tag.
`$.pass(fragment: string)` => `Promise<void>`	✅	Passes control to the `control` hook of another fragment.

Additional Fragment APIs

These are HTML and CSS APIs for defining and using fragments.

Syntax	Implemented?	Description
HTML `<microrender-fragment name="">`	✅	Embed another fragment within this fragment.
HTML `name="microrender:js"`	✅	Add the browser JS to the page.
HTML `data-*=""`	✅	Add parameters to a fragment. These can be accessed in the `render` hook using `$.data`.
HTML `microrender-timeout=""`	✅	Refresh the fragment after the timeout. Only calls the `control` hook.
CSS `:states(--requires-fetch)` (`.state--requires-fetch` polyfill)	✅	CSS selector for fragments that need to be fetched from the server.