render

Mounts code into container.

Mounts code into container. Creates an owner, inserts the output, flushes the effects, and returns a dispose function that stops the owner and removes the nodes this call inserted. A second render into the same container appends after the first.

Import#

import { render } from "@shadow-js/web";

Signature#

function render(
  code: () => unknown,
  container: Element | Document | DocumentFragment,
  options?: RenderOptions,
): () => void

Parameters#

Name	Description
`code`	Runs once, untracked, to build the tree (a component call, a node, text or an array). Return an accessor (for example `() => count`) from it to make the root content reactive.
`container`	Element, Document or DocumentFragment that receives the output.
`options`	The root's error reporters (`onUncaughtError`, `onCaughtError`). Undefined sets no reporter.

Returns#

A dispose function, safe to call more than once.

Examples#

import { createComponent, render } from "@shadow-js/web";

function App() {
  return "Hello";
}

const dispose = render(
  () => createComponent(App, {}),
  document.getElementById("root") as Element,
);
dispose(); // stops the root and removes the text it inserted