Core Virtual DOM

/**
 * Renders a virtual node to a DOM container
 * @param vnode - Virtual node or component to render
 * @param parent - DOM container element
 */
function render(vnode: ComponentChild, parent: ContainerNode): void;

/**
 * @deprecated The replaceNode parameter will be removed in v11
 * Renders with optional replacement node
 */
function render(
  vnode: ComponentChild,
  parent: ContainerNode,
  replaceNode?: Element | Text
): void;

interface ContainerNode {
  readonly nodeType: number;
  readonly parentNode: ContainerNode | null;
  readonly firstChild: ContainerNode | null;
  readonly childNodes: ArrayLike<ContainerNode>;
  
  contains(other: ContainerNode | null): boolean;
  insertBefore(node: ContainerNode, child: ContainerNode | null): ContainerNode;
  appendChild(node: ContainerNode): ContainerNode;
  removeChild(child: ContainerNode): ContainerNode;
}

import { render, createElement } from "preact";

// Render a simple element
render(
  createElement("h1", null, "Hello World"),
  document.getElementById("app")
);

// Render a component
function App() {
  return createElement("div", null,
    createElement("h1", null, "Welcome"),
    createElement("p", null, "This is a Preact app")
  );
}

render(createElement(App), document.body);

/**
 * Hydrates server-rendered content with Preact components
 * @param vnode - Virtual node to hydrate
 * @param parent - DOM container with server-rendered content
 */
function hydrate(vnode: ComponentChild, parent: ContainerNode): void;

import { hydrate, createElement } from "preact";

// Hydrate server-rendered content
function App() {
  return createElement("div", null,
    createElement("h1", null, "Server Rendered"),
    createElement("button", { 
      onClick: () => alert("Interactive!") 
    }, "Click me")
  );
}

// Assumes server rendered the same structure
hydrate(createElement(App), document.getElementById("app"));

/**
 * Creates a virtual DOM node
 * @param type - Component type or HTML tag name
 * @param props - Properties and attributes for the element
 * @param children - Child elements or content
 * @returns Virtual node representation
 */
function createElement<P>(
  type: ComponentType<P> | string,
  props: (Attributes & P) | null,
  ...children: ComponentChildren[]
): VNode<P>;

/**
 * JSX pragma alias for createElement
 */
function h<P>(
  type: ComponentType<P> | string,
  props: (Attributes & P) | null,
  ...children: ComponentChildren[]
): VNode<P>;

import { createElement, h } from "preact";

// HTML elements
const heading = createElement("h1", { className: "title" }, "Hello");
const button = createElement("button", 
  { onClick: () => console.log("clicked") }, 
  "Click me"
);

// With JSX pragma (h)
const element = h("div", { id: "container" },
  h("p", null, "Using h function"),
  h("span", null, "Works the same")
);

// Functional component
function Greeting({ name }: { name: string }) {
  return createElement("h1", null, `Hello ${name}!`);
}

const greeting = createElement(Greeting, { name: "World" });

// Multiple children
const list = createElement("ul", null,
  createElement("li", null, "Item 1"),
  createElement("li", null, "Item 2"),
  createElement("li", null, "Item 3")
);

/**
 * Clones a virtual node with new props and/or children
 * @param vnode - Virtual node to clone
 * @param props - New or overriding properties
 * @param children - New children to replace existing ones
 * @returns New virtual node with modifications
 */
function cloneElement<P>(
  vnode: VNode<P>,
  props?: any,
  ...children: ComponentChildren[]
): VNode<P>;

import { createElement, cloneElement } from "preact";

const original = createElement("button", 
  { className: "btn", disabled: false }, 
  "Click me"
);

// Clone with new props
const disabled = cloneElement(original, { disabled: true });

// Clone with new children
const newText = cloneElement(original, null, "New Text");

// Clone with both new props and children
const modified = cloneElement(original, 
  { className: "btn btn-primary" }, 
  "Save Changes"
);

/**
 * Fragment component for grouping elements
 * @param props - Props containing children
 * @returns The children without wrapper
 */
const Fragment: FunctionComponent<{ children?: ComponentChildren }>;

import { createElement, Fragment } from "preact";

// Multiple top-level elements without wrapper
function MultipleElements() {
  return createElement(Fragment, null,
    createElement("h1", null, "Title"),
    createElement("p", null, "Paragraph 1"),
    createElement("p", null, "Paragraph 2")
  );
}

// Conditional rendering with fragments
function ConditionalContent({ showExtra }: { showExtra: boolean }) {
  return createElement("div", null,
    createElement("h1", null, "Always shown"),
    showExtra && createElement(Fragment, null,
      createElement("p", null, "Extra content 1"),
      createElement("p", null, "Extra content 2")
    )
  );
}

/**
 * Creates a mutable ref object
 * @returns Ref object with current property
 */
function createRef<T = any>(): RefObject<T>;

/**
 * Checks if a value is a valid Preact element
 * @param vnode - Value to check
 * @returns True if value is a valid VNode
 */
function isValidElement(vnode: any): vnode is VNode;

/**
 * Normalizes children to a flat array
 * @param children - Children to normalize
 * @param out - Optional accumulator array to use
 * @returns Flat array of VNodes and primitives
 */
function toChildArray(children: ComponentChildren, out?: Array<VNode | string | number>): Array<VNode | string | number>;

import { createRef, isValidElement, toChildArray, createElement } from "preact";

// Ref usage
const inputRef = createRef<HTMLInputElement>();

function InputComponent() {
  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  
  return createElement("div", null,
    createElement("input", { ref: inputRef, type: "text" }),
    createElement("button", { onClick: focusInput }, "Focus Input")
  );
}

// Element validation
const element = createElement("div", null, "Hello");
console.log(isValidElement(element)); // true
console.log(isValidElement("string")); // false

// Children normalization
const children = [
  "text",
  createElement("span", null, "element"),
  ["nested", "array"]
];
const normalized = toChildArray(children);
// Result: ["text", VNode, "nested", "array"]