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	Description
$.fetch(url: any, ?options: RequestInit) => Promise<Response>	Wrapper around the fetch api. Uses cloudflare service bindings where possible.
$.form(field: string) => string | null	Get form fields from POST requests. Returns null unless the method is POST.
$.url() => URL	Gets the current URL. Can be modified (ie. redirect) in the control hook.
$.path() => string	Gets the current URL path. Can be modified in the control hook.
$.search(field: string) => string | null	Get query params from requests. Returns null if there are no query params.
$.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 "".
$.loc() => Location	Get the user's approximate location from their IP address.
$.relocate() => Promise<Location>	Make a server request to update the user's location. Also updates $.tz() and $.lang()
$.tz() => string	Gets the user's timezone from their IP address.
$.lang() => Array	Gets the user's preferred languages from their Accept-Language header
$.props(prop: string) => string | undefined	Get props passed in the $.pass() function or as data attributes on the fragment element.

Render APIs

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

Syntax	Description
$(selector: string, callback: (elmt: Element) => void) => void	JQuery-like selector API. Runs callback for each matching element.
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.style(property: string, ?value: string) => string | void	Shorthand for (get/set)Style(). Similar to JQuery .css() but uses inline styles.
Element.class($class: string, ?value: bool) => boolean	Shorthand for (get/set)Class()
Element.toggleClass($class: string) => void	Similar to DOM Element.classList.toggle()
Element.value(?value: string) => string	Modify/read the value attribute/property of an 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	Description
$.url(url: string | URL) => void	Changes the current URL (ie. redirects).
$.path(path: string | URL) => void	Equivalent to $.url()
$.error(code: number) => void	Changes the current HTTP status and re-renders the response.
$.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, ?props: Object) => 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	Description
HTML <microrender-fragment name="">	Embed another fragment within this fragment.
HTML name="microrender:js"	Add the browser JS to the page.
HTML name="microrender:ol"	Create a dynamic list using a <ol> tag.
HTML name="microrender:ul"	Create a dynamic list using a <ul> tag.
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.