Adapter type

Adapter type - core tree operations

Generic over: - TConfig: The adapter configuration (elements, events, baseElement)

## Lifecycle Hooks

The adapter supports six symmetric lifecycle hooks across three phases:

| Phase | Before | After (on) | |---------|----------------|------------| | Create | beforeCreate | onCreate | | Attach | beforeAttach | onAttach | | Destroy | beforeDestroy | onDestroy |

Node type (element vs fragment) is determined by ref.status: - STATUS_ELEMENT (1): Element node with actual DOM element - STATUS_FRAGMENT (2): Fragment node (logical container, no DOM element)

### Hydration

For hydration-specific position tracking, use the HydrationAdapter extension which adds seekToPosition and skipContent methods.

Signature:

export type Adapter<TConfig extends AdapterConfig> = {
    createNode: (type: string, props?: Record<string, unknown>, parentContext?: ParentContext<unknown>) => TConfig['baseElement'];
    setProperty: (node: TConfig['baseElement'], key: string, value: unknown) => void;
    appendChild: (parent: TConfig['baseElement'], child: TConfig['baseElement']) => void;
    removeChild: (parent: TConfig['baseElement'], child: TConfig['baseElement']) => void;
    insertBefore: (parent: TConfig['baseElement'], child: TConfig['baseElement'], reference: TConfig['baseElement'] | null) => void;
    beforeCreate?: (type: string, props?: Record<string, unknown>) => void;
    onCreate?: (ref: NodeRef<TConfig['baseElement']>, parent: TConfig['baseElement']) => void;
    beforeAttach?: (ref: NodeRef<TConfig['baseElement']>, parent: TConfig['baseElement'], nextSibling: TConfig['baseElement'] | null) => void;
    onAttach?: (ref: NodeRef<TConfig['baseElement']>, parent: TConfig['baseElement']) => void;
    beforeDestroy?: (ref: NodeRef<TConfig['baseElement']>, parent: TConfig['baseElement']) => void;
    onDestroy?: (ref: NodeRef<TConfig['baseElement']>, parent: TConfig['baseElement']) => void;
};

References: AdapterConfig, ParentContext, NodeRef

Example

import type { Adapter, AdapterConfig } from '@rimitive/view/adapter';

const domAdapter: Adapter<DOMAdapterConfig> = {
  createNode: (type, props) => {
    if (type === 'text') return document.createTextNode(props?.value as string || '');
    return document.createElement(type);
  },
  setProperty: (node, key, value) => {
    if (key === 'textContent') node.textContent = value as string;
    else (node as HTMLElement).setAttribute(key, String(value));
  },
  appendChild: (parent, child) => parent.appendChild(child),
  removeChild: (parent, child) => parent.removeChild(child),
  insertBefore: (parent, child, ref) => parent.insertBefore(child, ref),
};