Introduction

Installation#

Create a project

Open a terminal with Node.js 22+ and npm installed. Allow about 5 minutes for the SPA setup, depending on download speed.

Step 1: Create your app

npm create radi@latest -- my-app --template spa

Use a new or empty directory. The generator refuses nonempty destinations and does not install dependencies.

Step 2: Install dependencies

cd my-app
npm install

Step 3: Start the development server

npm run dev

Step 4: Open your app

Open http://127.0.0.1:3000. Your Radi app is running. Edit app.tsx, save, and reload the browser to see your change.

Choose another template

Replace spa in the create command with the template you need:

• spa — a browser-rendered app. Start here if you are unsure.
• ssr — HTML rendered by a Node server for each request.
• ssg — HTML generated at build time for a static host.
• go — a Go server with embedded V8 for rendering.

The Go starter also requires Linux amd64 with glibc, Go 1.26.10, Clang 21, and CGO enabled. Follow its generated README.md to set the compiler environment before running npm run dev.

Each generated README.md explains editing, building, and deployment for that template.

Use an existing project

Already created a starter? Skip this manual setup. To add Radi to an existing project, follow the steps below. The reference describes the current repository API; check exports and types against your installed version before using newer features.

Add the package

npm install radi

Configure JSX

Use a bundler that supports JSX. Merge these options into your TypeScript configuration.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "radi",
    "types": ["./node_modules/radi/jsx.d.ts"]
  }
}

The types entry above loads Radi’s browser JSX declarations. Its JSX attributes are permissive, so type checking does not guarantee valid HTML or correct runtime behavior.

The signal, channel, renderer, types and symbols entries below describe source-checkout APIs. Check your package exports before importing those subpaths. The application recipes use the public client API.

Mount your first component

Add a <div id="app"></div> to your HTML, then mount a component from your browser entry.

import { createRoot } from 'radi';

function App() {
  return <h1>Hello, Radi.</h1>;
}

const root = createRoot(document.getElementById('app')!);
root.render(<App />);

Components#

A component runs once when it mounts. Keep state in its closure. Props arrive as a getter; call it inside a reactive expression to read the latest value.

function Greeting(props: () => { name: string }) {
  return <h1>Hello, {() => props().name}!</h1>;
}

Reactivity#

Wrap dynamic children or attributes in functions. Call update on their ancestor to evaluate those functions again. Static content stays put.

import { update } from 'radi';

function Counter() {
  let count = 0;
  const view = (
    <button onclick={() => { count++; update(view as HTMLElement); }}>
      Count: {() => count}
    </button>
  );
  return view;
}

The HTMLElement assertion narrows Radi’s broad JSX return type for a known HTML element. It does not convert the value. Components run once; destructuring props or returning count without a function captures only the initial value.

Lifecycle#

Elements receive connect and disconnect events. Tie subscriptions to the component lifecycle with an abort signal.

import { createAbortSignal } from 'radi';

function Panel(this: HTMLElement) {
  const signal = createAbortSignal(this);
  window.addEventListener('resize', () => {
    // Respond to the new viewport.
  }, { signal });
  return <div>Ready when you are.</div>;
}

Lists and local state#

Use stable IDs, never array positions or random keys. A retained key keeps its instance; its factory may not run again. Read replacement data through a getter instead of capturing the first item.

import { createList, update } from 'radi';

type Item = { id: string; name: string };
function Row(props: () => { read: () => Item }) {
  let draft = '';
  return <li>
    <span>{() => props().read().name}</span>
    <input aria-label="Draft" value={() => draft}
      oninput={(event: Event) => {
        draft = (event.target as HTMLInputElement).value;
      }} />
  </li>;
}

function List() {
  let items: Item[] = [{ id: 'a', name: 'Apple' }, { id: 'b', name: 'Pear' }];
  let byId = new Map(items.map(item => [item.id, item]));
  function replace(next: Item[]) {
    items = next;
    byId = new Map(items.map(item => [item.id, item]));
    update(view as HTMLElement);
  }
  const view = <section>
    <button onclick={() => replace(items.map(item => ({
      ...item, name: item.name + '!',
    })))}>Replace data</button>
    <button onclick={() => replace([...items].reverse())}>Reverse</button>
    <button onclick={() => replace(items.slice(1))}>Remove first</button>
    <ul>{() => createList(key => items.map(({ id }) =>
      key(() => <Row read={() => byId.get(id)!} />, id)
    ))}</ul>
  </section>;
  return view;
}

Type a draft, replace data, then reverse: labels change and drafts follow their IDs. Removing a row discards its local state. Use createKey for one stateful branch; change its key only when you want a reset.

Forms and shared state#

Use native labels, validation and submit events. Read value or checked from the control, change state, then update the smallest view that displays it. Event handlers do not trigger updates automatically.

import { update } from 'radi';

function Profile() {
  let message = '';
  const view = <form onsubmit={(event: SubmitEvent) => {
    event.preventDefault();
    const form = event.currentTarget as HTMLFormElement;
    const name = String(new FormData(form).get('name') ?? '').trim();
    message = name ? 'Hello, ' + name : 'Enter a name.';
    update(view as HTMLElement);
  }}>
    <label>Name <input name="name" required /></label>
    <button type="submit">Continue</button>
    <p role="status">{() => message}</p>
  </form>;
  return view;
}

This example only validates locally. For saving, show pending/error/success states, prevent duplicate submissions, and validate again on the server. Catch failures where the operation starts; Suspense shows loading, not an application error boundary.

Keep state in the closest shared owner and pass getters and action callbacks to children. Use a channel when a DOM-scoped provider is more convenient.

import { update } from 'radi';

function Count(props: () => { read: () => number; increment: () => void }) {
  return <button onclick={() => props().increment()}>{() => props().read()}</button>;
}
function SharedCounter() {
  let count = 0;
  const read = () => count;
  const increment = () => { count++; update(view as HTMLElement); };
  const view = <section>
    <Count read={read} increment={increment} />
    <Count read={read} increment={increment} />
  </section>;
  return view;
}

Both buttons share one value and update together. Keep per-user server state inside the request. Signals are an optional low-level API: current direct signal children can miss their initial subscription during mounting, so use explicit owner updates for reliable shared state.

Async work and cleanup#

Cancel the previous request when its input changes. Also guard late results: cancellation alone does not stop every Promise. Cancel on disconnect, and show a retryable error.

import { createAbortSignal, update } from 'radi';

function Search(this: HTMLElement) {
  const lifetime = createAbortSignal(this);
  let request: AbortController | undefined;
  let message = 'Enter a search.';
  lifetime.addEventListener('abort', () => request?.abort(), { once: true });

  async function search(query: string) {
    request?.abort();
    const current = request = new AbortController();
    message = query ? 'Loading…' : 'Enter a search.';
    update(view as HTMLElement);
    if (!query || lifetime.aborted) return;
    try {
      const response = await fetch('/api/search?q=' + encodeURIComponent(query), {
        signal: current.signal,
      });
      if (!response.ok) throw new Error('Request failed');
      const result = await response.text();
      if (current.signal.aborted || current !== request) return;
      message = result || 'No results.';
    } catch {
      if (current.signal.aborted || current !== request) return;
      message = 'Could not load. Submit again to retry.';
    }
    update(view as HTMLElement);
  }

  const view = <form onsubmit={(event: SubmitEvent) => {
    event.preventDefault();
    const form = event.currentTarget as HTMLFormElement;
    void search(String(new FormData(form).get('q') ?? '').trim());
  }}>
    <label>Search <input name="q" oninput={(event: Event) => {
      void search((event.target as HTMLInputElement).value.trim());
    }} /></label>
    <button type="submit">Search</button>
    <p role="status">{() => message}</p>
  </form>;
  return view;
}

Provide your own /api/search endpoint returning text. For live search at scale, debounce input and clear the timer on disconnect. Start DOM-dependent work on connect. Dispose subscriptions, timers, observers and router fetchers when their owner disconnects; remove trees through Radi so cleanup runs.

createAbortSignalOnUpdate cancels on every update, including one used to show loading. Use it only when that is the intended lifetime; use a separate controller for input-dependent requests as above.

Keep updates small#

update(view) synchronously visits reactive expressions in that subtree. Radi does not batch your calls or infer dependencies. A small runtime cannot make expensive application work free.

• Update the smallest ancestor that contains every changed expression. Group related state changes, then call update once.
• Keep render expressions pure and cheap. Fetch in an action or lifecycle handler; compute costly derived data when its inputs change.
• Use keyed rows to preserve state, and paginate or virtualize large lists. Keys do not remove the cost of visiting every row.
• Coalesce pointer/scroll updates with requestAnimationFrame; cancel the frame on disconnect. Debounce network searches separately.
• Use memo only with a correct invalidation predicate: true skips work, false recomputes. Include every dependency or the view becomes stale.

Before shipping

Build against the installed Radi version. Try typing, reordering, removal, rapid input changes, failed requests and unmounting during a request. Profile a production build with realistic data and a slower device/network; check long tasks, interaction latency, transferred bytes and cleanup after repeated mounts. Measure before adding caches or memoization.

Client routing#

Use radi/router for SPA navigation without replacing the document. Keep shared layout outside a route outlet. Routes can load code lazily, read server data through loaders, and mutate it through actions followed by revalidation.

import { createElement as h, createRoot } from 'radi';
import { createRouter, fetchRouteData } from 'radi/router';

const root = createRoot(document.getElementById('outlet')!);
const router = createRouter({
  routes: [{
    path: '/pages/:id',
    loader: ({ params, signal }) => fetchRouteData(
      '/api/pages/' + encodeURIComponent(params.id), { signal },
    ),
  }],
});
router.subscribe((state) => {
  if (state.status !== 'idle') return;
  if (state.error) root.render(h('p', null, 'Could not load this page.'));
  else root.render(h('pre', null, JSON.stringify(state.data, null, 2)));
});
router.attach();
await router.ready;
// Dispose when the application is removed: router.dispose();

Serve the application shell for direct visits to these URLs. The example expects a JSON endpoint implemented by your server. Authorization and persistence remain on the server; fresh data can still require a request.

The optional initialData setting reuses data serialized by your server. Rendering an outlet replaces its existing DOM; it does not hydrate it. Routes are flat, with static paths, :parameters, and a final * wildcard. This is not Remix API compatibility.

Caching is disabled by default. Enable staleTime and a bounded cacheSize to reuse prefetched data. Invalidate on account changes. New navigation aborts obsolete loads, but aborting an action cannot undo a server mutation.

Save through a route action

action: ({ params, formData, method, signal }) => fetchRouteData(
  '/api/pages/' + encodeURIComponent(params.id),
  { method, body: formData, signal },
),

<form onsubmit={(event: SubmitEvent) => {
  event.preventDefault();
  const form = event.currentTarget as HTMLFormElement;
  void router.submit(location.pathname, new FormData(form), 'POST');
}}>
  <label>Title <input name="title" required /></label>
  <button type="submit">Save</button>
</form>

submit navigates and reloads the destination loader. Show submitting and error states from router.subscribe. Use a component-owned createFetcher for local changes that must preserve the route and its drafts; it runs only the action, so apply its returned data or explicitly reload. Dispose it on disconnect.

For code splitting, add lazy: () => import('./settings') to a route. That module exports loader, action and optionally view. Your subscriber calls root.render(state.module.view(state)) when idle; the router never renders it for you. Provide error/retry UI, focus management and any custom scroll restoration.

For Go integration, serve JSON endpoints beside the HTML handler and share authorized data functions between them. Safely serialize initial data into HTML and pass it as initialData. Authenticate, validate and enforce CSRF protection in the server endpoints; never expose the V8 operation registry as an API.

Server rendering#

Use the separate server entry to render HTML without a browser. Choose synchronous rendering, resolved async HTML, or ordered streaming. For JSX on the server, set jsxImportSource to radi/server.

import { createElement as h, renderToString } from 'radi/server';

const html = renderToString(h('h1', null, 'Hello from the server.'));

Go + embedded V8#

Keep application components in TypeScript/TSX while Go owns HTTP, authorization, and Flop access. The Go adapter embeds V8 in the server process and streams ordered HTML. It uses neither a Node/Deno serving process nor a persisted bytecode cache.

import { data, defineApp } from 'radi/go';

async function Title() {
  const row = await data<{ title: string }>('page', { id: 'home' });
  return <h1>{row.title}</h1>;
}

export const app = defineApp(() => (
  <main><p>Loading your page…</p><Title /></main>
));

Register the page operation in Go and return its Flop result. data() resolves that result as a Promise. Bundle the TSX with radi-build, embed the JavaScript source with go:embed, and pass it to radi.New from github.com/Marcisbee/radi/go. The checked-in example includes the complete Go host and database setup.

export CC=clang-21 CXX=clang++-21 CGO_CXXFLAGS=-nostdinc++
go generate ./examples/go-server
go build -trimpath -o radi-go-server ./examples/go-server
RADI_ADDR=127.0.0.1:8080 RADI_DATA_DIR=./data ./radi-go-server

Run these commands from a Radi checkout with Go 1.26.10 and Clang 21. Linux amd64 is the qualified target. The Go-based bundler needs no JavaScript runtime at build time. Each request gets fresh JavaScript state; the default single worker reuses its V8 instance and compiled source.

The adapter bounds queued work, data calls, response bytes, and execution time. Slow readers apply backpressure; disconnects cancel operations. Use trusted application code, external memory limits and a restart policy: the V8 heap setting is not a hard memory sandbox. Go operations must respect cancellation. Pair the adapter with radi/router for client navigation and route data handling through Go HTTP endpoints.

radi/go API · Go host setup

Use your own Go host

Use matching Radi release tags for Go and npm, or one source checkout for both. From the Go application module, bundle the app.tsx above with the following command. Replace VERSION with your pinned release tag; use -radi PATH to resolve a source checkout instead of the installed npm package.

go run github.com/Marcisbee/radi/cmd/radi-build@VERSION -entry app.tsx -out app.js

Place this host beside app.js. The page operation returns public demo data; replace it with an authorized, validated database read. Add the matching github.com/Marcisbee/radi module version to go.mod.

package main

import (
  "context"
  _ "embed"
  "encoding/json"
  "log"
  "net/http"
  "time"

  radi "github.com/Marcisbee/radi/go"
)

//go:embed app.js
var source string

func main() {
  handler, err := radi.New(radi.Config{
    Source: source,
    Operations: map[string]radi.Operation{
      "page": func(ctx context.Context, input json.RawMessage) (any, error) {
        return map[string]string{"title": "Hello from Go"}, ctx.Err()
      },
    },
  })
  if err != nil { log.Print(err); return }
  defer handler.Close(context.Background())
  server := &http.Server{
    Addr: "127.0.0.1:8080", Handler: handler,
    ReadHeaderTimeout: 5 * time.Second, IdleTimeout: 60 * time.Second,
  }
  log.Print(server.ListenAndServe())
}

Build with CGO enabled on Linux amd64/glibc using the Clang environment above, then run the binary. V8 has no fetch, timers, Node modules, DOM or Web Streams globals; use data() for I/O. Go operations may run concurrently and must bound their own work and honor context cancellation.

Limits and deployment

radi.Config{
  Source: source,                  // required bundled source
  Workers: 1, Queue: 0,            // excess requests receive 503
  Timeout: 10 * time.Second,       // includes queue time
  WriteTimeout: 5 * time.Second,   // per response write
  MaxHeapBytes: 64 << 20,          // best effort, not an RSS cap
  MaxResponseBytes: 16 << 20,
  MaxDataBytes: 1 << 20,           // each input/result and request metadata
  MaxDataCalls: 32,               // per request
  OnError: func(r *http.Request, err error) { log.Print(err) },
}

Zero selects defaults except Queue, where it means no waiting capacity. Negative limits are rejected. One worker handles one response at a time, including slow readers; more workers cost memory. Data calls also have a global bound of Workers × MaxDataCalls.

The handler accepts GET only. Put mutations and authentication in separate HTTP handlers. Before streaming starts, failures return 500 or 504; after it starts, failure truncates the response. Component failures can render ERROR:ComponentName, so handle expected errors in the application. Keep diagnostics private with OnError.

Serve behind TLS, disable proxy buffering for early chunks, and preserve HTTP flush/write-deadline support in middleware. For shutdown, drain http.Server first, then Close the Radi handler with a deadline and close the database. Monitor errors, latency and process memory. Rebuild the bundle and binary together when upgrading; keep the previous binary for rollback.

Static sites#

This guide is built with Radi’s static site generator. Routes become complete HTML files. Your build owns the filesystem writer, asset bundling, and deployment; no Radi server runs in production.

import { generateStaticSite } from 'radi/static';
import { createElement as h } from 'radi/server';
import { mkdir, writeFile } from 'node:fs/promises';
import { dirname, join } from 'node:path';

await generateStaticSite([{
  path: '/',
  title: 'My site',
  render: () => h('h1', null, 'Made with Radi.'),
}], async (path, html) => {
  const file = join('dist', path);
  await mkdir(dirname(file), { recursive: true });
  await writeFile(file, html);
});

Interactive islands#

Add explicit resumable boundaries to static HTML. Their handlers update existing DOM without rendering the whole page again. This example includes its handler in the initial script, so the first click needs no additional download.

import { createElement as h, resumable, resumeClick } from 'radi/server';

const counter = resumable({ count: 0 }, [
  h('button', { type: 'button', ...resumeClick('increment') }, 'Add one'),
  h('output', null, '0'),
]);

import { resume } from 'radi/resume';
import { increment } from './handler';

resume(document, {
  increment: () => Promise.resolve(increment),
});

import type { ResumeContext } from 'radi/resume';

export function increment({ state, boundary }: ResumeContext) {
  const counter = state as { count: number };
  boundary.querySelector('output')!.textContent = String(++counter.count);
}

Bundle the client entry as a classic script and pass its public URL as the static page’s bootstrap. Dynamic imports are optional: use them for larger, rarely used interactions when the download delay is acceptable.

This is explicit resumption: arbitrary closures are not serialized. Use native links and forms for navigation. The current island API supports registered clicks.

Keep the initial markup and JSON state consistent. State changes persist in memory, not in the HTML attribute. Preserve the boundary’s final template marker: streamed clicks wait for it. Keep ordinary client roots outside islands, since their first render replaces existing HTML. Configure CSP to allow your bootstrap and any lazy handler modules.

Why are islands explicit?

Function children identify dynamic output, but do not identify a browser module or preserve a closure’s captured state. Radi currently has no compiler to extract those functions. A wrapper could generate registry entries for explicit module references, but could not automatically resume arbitrary components.

Router API#

Import from radi/router.

const router = createRouter({ routes, initialData?, staleTime?, cacheSize? });
await router.ready;

router.state;
const unsubscribe = router.subscribe(state => { /* render */ });

await router.navigate('/pages/about', { replace: false });

const detach = router.attach(document);

await router.submit('/pages/about', formData, 'POST');

const fetcher = router.createFetcher<Result>();
fetcher.subscribe(({ data, error, status }) => { /* update a component */ });
await fetcher.submit('/posts/42/reactions', formData, 'POST', { invalidate: ['/posts/42'] });
await fetcher.load('/posts/42/reactions');
fetcher.dispose();

await router.revalidate();
router.invalidate();

await router.prefetch('/pages/about');

router.dispose();

const data = await fetchRouteData<Page>('/api/page', { signal });

redirect('/pages/home');
throw new RouteRedirect('/pages/home');

throw new RouteError(404, 'Page not found');

Go bridge API#

Import from radi/go (embedded server bundle).

export const app = defineApp(
  (request: GoRequest): ServerChild => <main>Hello</main>,
);

data<T = unknown>(name: string, input: unknown = null): Promise<T>

interface GoRequest {
  method: string;
  url: string;
  headers: Record<string, string[]>;
}

Client API#

Import from radi or radi/client.

const root = createRoot(target: HTMLElement);
root.render(element);
root.root; // current node, or null
root.unmount();

import { createElement as h, createRoot, Fragment } from 'radi';

const target = document.body.appendChild(document.createElement('div'));
const view = h('main', { className: 'greeting' },
  h(Fragment, null,
    h('h1', null, 'Hello, Radi'),
    h('p', null, 'These siblings share no extra wrapper.'),
  ),
);

createRoot(target).render(view);

update(target: Node): boolean

memo(render: (anchor: Node) => unknown, shouldMemo: () => boolean)

createList(key => items.map(item =>
  key(() => <Row item={item} />, item.id)
))

createKey(render: () => unknown, keyValue: unknown)

createAbortSignal(target: Node): AbortSignal

createAbortSignalOnUpdate(target: Node): AbortSignal

<Suspense fallback={() => <p>Loading…</p>}>
  <AsyncComponent />
</Suspense>

suspend(target: Node): boolean
unsuspend(target: Node): boolean

function Component(this: ComponentNode, props: () => Props) {
  // this is the component host
}

Server API#

Import from radi/server.

createElement(type, props, ...children): ServerNode
createTextNode(text: string): ServerChild
createComment(text: string): ServerNode
Fragment(children: ServerChild[]): ServerNode

renderToString(child: ServerChild): string
renderToStringRoot(child: ServerChild): string
ssr(entry: () => ServerChild): string

renderToStringAsync(child: ServerChild): Promise<string>

renderToReadableStream(child: ServerChild): ReadableStream<Uint8Array>

type ServerComponent<P> = (props: () => P) => ServerChild;
// ServerNode: lazy server element representation
// ServerChild: nodes, primitives, arrays, functions,
// promises, and subscribable values

resumable(state: ResumeState, children: ServerChild, tag = 'div'): ServerNode
resumeClick(handler: string): { 'data-radi-click': string }

Resumption API#

Import from radi/resume (client) and radi/server (boundaries).

const dispose = resume(root: Document | Element, loaders: ResumeLoaders, options?: ResumeOptions);
dispose();

const loaders = {
  increment: () => import('./handler').then(m => m.increment),
};
// Or bundle the handler up front:
// increment: () => Promise.resolve(increment)

type ResumeHandler = (context: ResumeContext) => void | Promise<void>;
// context: boundary, element, event, state, signal

resume(document, loaders, {
  maxPending: 64,
  timeout: 30000,
  onError: error => console.error(error),
});

type ResumeState = null | boolean | number | string
  | ResumeState[] | { [key: string]: ResumeState };

resumeClick('increment')
resumable({ count: 0 }, children, 'section')

Static generation API#

Import from radi/static.

generateStaticSite(pages: readonly StaticPage[], write: StaticWriter): Promise<string[]>

const page: StaticPage = {
  path: '/guide/',
  title: 'Guide',
  render: () => h('h1', null, 'Guide'),
  lang: 'en',
  head: h('link', { rel: 'stylesheet', href: '/style.css' }),
  bootstrap: '/client.js',
};

type StaticWriter = (path: string, html: string) => void | Promise<void>;

Signals and channels#

Import from radi/signal and radi/channel respectively.

const count = createSignal(0);
count(); // read
count(1); // write
const label = count(value => `Count: ${value}`);

const theme = createChannel('light');
const provider = theme.provide(element, 'dark');
const value = theme.use(descendant);
value();
provider.set(previous => previous === 'dark' ? 'light' : 'dark');

value();
value.set(nextValueOrUpdater);
value.update();
value.provider;
value.resolved;

Custom renderer API#

Import from radi/renderer.

const renderer = createRenderer(adapter: RendererAdapter);
renderer.createElement(type, props, ...children);
renderer.createTextNode(text);
renderer.createComment(text);
renderer.fragment(children);
renderer.render(root, child);
renderer.renderToString?.(child);

createDomAdapter(document?)
createServerStringAdapter()
DOM_RENDERER
SERVER_RENDERER

interface RendererAdapter {
  createElement(tag); createTextNode(text); createComment(text);
  setProperty(node, name, value);
  insertNode(parent, node, anchor?); removeNode(parent, node);
  getParentNode(node); getFirstChild(node); getNextSibling(node);
  isTextNode(node); isCommentNode?(node); serialize?(root);
}

JSX and shared types#

Import from radi/jsx-runtime, radi/jsx-dev-runtime, radi/server/jsx-runtime, radi/server/jsx-dev-runtime, radi/types, radi/symbols.

import { createRoot } from 'radi';
import { jsx, jsxs, Fragment } from 'radi/jsx-runtime';
import { jsxDEV } from 'radi/jsx-dev-runtime';

const target = document.body.appendChild(document.createElement('div'));
const view = jsxs('main', {
  children: [
    jsx('h1', { children: 'Hello, Radi' }),
    jsxs(Fragment, {
      children: [
        jsx('p', { children: 'First sibling' }),
        jsx('p', { children: 'Second sibling' }),
      ],
    }),
    jsxDEV('p', { children: 'Development output' },
      undefined, false, { fileName: 'main.ts', lineNumber: 16 }),
  ],
});

createRoot(target).render(view);

isSubscribable(value): value is Subscribable<unknown>
isReactiveGenerator(value): value is ReactiveGenerator
toChildArray(child): Child[]

COMPONENT, REACTIVE_CHILDREN, TAIL, RENDER_ID, RENDER, MEMO,
REACTIVE_ATTRIBUTES, TYPE, PROPS, INSTANCE, UPDATE_ID, CLEANUP,
SINGLE_KEYED, KEY, NODE, KEY_MAP, ATTRS, KEYED