Core Virtual DOM

/**
 * Initialize a patch function with chosen modules
 * @param modules - Array of modules to include in the patch function
 * @param domApi - Optional DOM API implementation (defaults to htmlDomApi)
 * @param options - Optional configuration for experimental features
 * @returns Patch function for updating DOM
 */
function init(
  modules: Array<Partial<Module>>,
  domApi?: DOMAPI,
  options?: Options
): (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode;

import { init, classModule, styleModule } from "snabbdom";

const patch = init([classModule, styleModule]);

/**
 * Patch function that updates DOM based on virtual node differences
 * @param oldVnode - Previous virtual node, DOM element, or document fragment
 * @param vnode - New virtual node representing desired state
 * @returns The new virtual node with updated DOM references
 */
type PatchFunction = (
  oldVnode: VNode | Element | DocumentFragment,
  vnode: VNode
) => VNode;

const container = document.getElementById("app");
const vnode1 = h("div", "Hello");
const vnode2 = h("div", "Hello World");

// Initial render
const result1 = patch(container, vnode1);

// Update render
const result2 = patch(result1, vnode2);

/**
 * Create a virtual DOM node with selector syntax
 * @param sel - CSS selector string (tag, id, classes)
 * @returns Virtual node
 */
function h(sel: string): VNode;

/**
 * Create a virtual DOM node with selector and data
 * @param sel - CSS selector string
 * @param data - Virtual node data (props, attrs, etc.)
 * @returns Virtual node
 */
function h(sel: string, data: VNodeData | null): VNode;

/**
 * Create a virtual DOM node with selector and children
 * @param sel - CSS selector string
 * @param children - Child elements or text content
 * @returns Virtual node
 */
function h(sel: string, children: VNodeChildren): VNode;

/**
 * Create a virtual DOM node with selector, data, and children
 * @param sel - CSS selector string
 * @param data - Virtual node data (props, attrs, etc.)
 * @param children - Child elements or text content
 * @returns Virtual node
 */
function h(
  sel: string,
  data: VNodeData | null,
  children: VNodeChildren
): VNode;

import { h } from "snabbdom";

// Simple element
const div = h("div", "Hello World");

// Element with ID and classes
const container = h("div#app.container.main");

// Element with properties and children
const button = h("button", 
  { 
    props: { type: "button" },
    on: { click: () => console.log("clicked") }
  },
  "Click me"
);

// Complex structure
const app = h("div.app", [
  h("h1", "My App"),
  h("p", "Welcome to Snabbdom"),
  h("ul", [
    h("li", "Item 1"),
    h("li", "Item 2")
  ])
]);

/**
 * Create a virtual document fragment (experimental)
 * @param children - Child elements to group in fragment
 * @returns Virtual node representing a document fragment
 */
function fragment(children: VNodeChildren): VNode;

import { fragment, h, init } from "snabbdom";

// Enable fragments in options
const patch = init([], undefined, {
  experimental: { fragments: true }
});

const fragmentNode = fragment([
  h("p", "First paragraph"),
  h("p", "Second paragraph")
]);

/**
 * Create a virtual node (low-level function)
 * @param sel - Element selector
 * @param data - Node data
 * @param children - Child nodes
 * @param text - Text content
 * @param elm - Associated DOM element
 * @returns Virtual node
 */
function vnode(
  sel: string | undefined,
  data: any | undefined,
  children: Array<VNode | string> | undefined,
  text: string | undefined,
  elm: Element | DocumentFragment | Text | undefined
): VNode;

/**
 * Convert a DOM node into a virtual node
 * @param node - DOM node to convert
 * @param domApi - Optional DOM API implementation
 * @returns Virtual node representation of the DOM node
 */
function toVNode(node: Node, domApi?: DOMAPI): VNode;

import { toVNode, init } from "snabbdom";

const patch = init([]);
const existingElement = document.querySelector(".server-rendered");
const vnode = toVNode(existingElement);

// Now you can patch over server-rendered content
const newVnode = h("div.updated", "New content");
patch(vnode, newVnode);

type VNodeChildren = ArrayOrElement<VNodeChildElement>;
type VNodeChildElement = VNode | string | number | String | Number | undefined | null;
type ArrayOrElement<T> = T | T[];

interface Options {
  experimental?: {
    fragments?: boolean;
  };
}

interface DOMAPI {
  createElement: (tagName: any, options?: ElementCreationOptions) => HTMLElement;
  createElementNS: (namespaceURI: string, qualifiedName: string, options?: ElementCreationOptions) => Element;
  createDocumentFragment?: () => DocumentFragment;
  createTextNode: (text: string) => Text;
  createComment: (text: string) => Comment;
  insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
  removeChild: (node: Node, child: Node) => void;
  appendChild: (node: Node, child: Node) => void;
  parentNode: (node: Node) => Node | null;
  nextSibling: (node: Node) => Node | null;
  tagName: (elm: Element) => string;
  setTextContent: (node: Node, text: string | null) => void;
  getTextContent: (node: Node) => string | null;
  isElement: (node: Node) => node is Element;
  isText: (node: Node) => node is Text;
  isComment: (node: Node) => node is Comment;
  isDocumentFragment?: (node: Node) => node is DocumentFragment;
}