ElementValue #

A type representing all possible rendered values of an element.

Syntax #

type ElementValue<TNode> = Array<TNode> | TNode | undefined;

Type parameters #

Description #

ElementValue represents what an element actually renders to in the target environment. The type varies based on the element's tag:

Element typeElementValue
Host element (<div>)Single TNode
Text nodeSingle TNode
FragmentArray<TNode> or single TNode
ComponentArray<TNode>, single TNode, or undefined
Portalundefined (opaque to parent)
Empty renderundefined

Examples #

Accessing rendered values #

import {renderer} from "@b9g/crank/dom";
import type {ElementValue} from "@b9g/crank";

function App() {
  return <div id="app">Hello</div>;
}

const result: ElementValue<Node> = renderer.render(<App />, container);

// result could be a Node, array of Nodes, or undefined
if (result instanceof Node) {
  console.log("Single node:", result);
} else if (Array.isArray(result)) {
  console.log("Multiple nodes:", result.length);
} else {
  console.log("Nothing rendered");
}

Using ref callbacks #

import type {ElementValue} from "@b9g/crank";

function Form() {
  let inputRef: ElementValue<Node>;

  return (
    <form>
      <input ref={(el) => { inputRef = el; }} />
      <button onclick={() => {
        if (inputRef instanceof HTMLInputElement) {
          inputRef.focus();
        }
      }}>
        Focus
      </button>
    </form>
  );
}

In custom renderers #

import type {ElementValue, RenderAdapter} from "@b9g/crank";

interface MyNode {
  id: string;
  type: string;
}

const adapter: Partial<RenderAdapter<MyNode, void>> = {
  // The read method transforms internal values to public API
  read(value: ElementValue<MyNode>): MyNode | MyNode[] | null {
    if (value === undefined) {
      return null;
    }
    return value;
  },
};

See also #

Edit on GitHub