@nubbin/react

The React render path for Nubbin. It walks a compiled artifact, loads the blocks that artifact names, resolves the data holes it declares, and renders them.

npm install @nubbin/react

import { defineRegistry, Renderer } from "@nubbin/react";

export const registry = defineRegistry({
  Hero: () => import("./blocks/Hero").then((m) => m.Hero),
});

export default async function Page() {
  const artifact = await resolveArtifact(store, slug);
  return <Renderer artifact={artifact} registry={registry} />;
}

Each registry value is an import() the bundler can see, which is what gives one chunk per block; a route resolves only the names its artifact carries, so the hundredth block costs pages that do not use it nothing. A block author types their component as BlockComponent<HeroProps>; the registry stores it with its props erased, because function parameters are contravariant and a shared props type would be assignable from no real component.

Renderer is an async server component. It invokes each block and stamps data-nubbin-node on the element that block returns, which is how the studio maps a node in the tree to a region on the page. A block is therefore a server component returning exactly one root element — a Fragment root or a client reference has no root to stamp, and the renderer throws naming the block rather than wrapping it in an element the consumer's layout did not ask for.

Slot children arrive as props: slots.sections renders to props.sections, an array of elements the block places itself.

<Renderer
  artifact={artifact}
  registry={registry}
  resolveHole={async ({ block, path, spec }) => fetchLiveValue(block, path, spec)}
/>

A hole is a field a block marked as fetched per request or on an interval, which compile deliberately left unfrozen; spec is "request" or { revalidate: n } — exactly what compile wrote. A node with no holes never calls the resolver. A node that declares holes and gets no resolver throws naming the node, rather than rendering a compile-time placeholder to a visitor.

Read the Nubbin documentation for the complete renderer reference. MIT.