tessl/npm-snabbdom

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Snabbdom

Name: tessl/npm-snabbdom
Author: tessl

Snabbdom is a virtual DOM library with focus on simplicity, modularity, powerful features and performance. It consists of an extremely simple, performant, and extensible core that is only ≈ 200 SLOC. It offers a modular architecture with rich functionality for extensions through custom modules.

Package Information

Package Name: snabbdom
Package Type: npm
Language: TypeScript
Installation: npm install snabbdom

Core Imports

import { 
  init, 
  h, 
  classModule, 
  propsModule, 
  styleModule, 
  eventListenersModule 
} from "snabbdom";

For CommonJS:

const { 
  init, 
  h, 
  classModule, 
  propsModule, 
  styleModule, 
  eventListenersModule 
} = require("snabbdom");

Basic Usage

import {
  init,
  classModule,
  propsModule,  
  styleModule,
  eventListenersModule,
  h
} from "snabbdom";

// Initialize patch function with chosen modules
const patch = init([
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule // attaches event listeners
]);

// Create virtual nodes
const vnode = h("div#container.two.classes", 
  { on: { click: () => console.log("div clicked") } },
  [
    h("span", { style: { fontWeight: "bold" } }, "This is bold"),
    " and this is just normal text",
    h("a", { props: { href: "/foo" } }, "I'll take you places!")
  ]
);

// Patch into DOM element
const container = document.getElementById("container");
patch(container, vnode);

Architecture

Snabbdom is built around several key components:

Core Engine: Minimal virtual DOM diffing and patching algorithm (~200 SLOC)
Module System: Extensible architecture where functionality is delegated to modules
Virtual Nodes: Lightweight representations of DOM elements with selector-based identity
Patch Function: Single function interface that updates the DOM efficiently
Hook System: Rich lifecycle hooks for both modules and individual vnodes

Capabilities

Core Virtual DOM

Essential functions for creating and managing virtual DOM trees, including the init function, patch function, and h helper for creating virtual nodes.

function init(
  modules: Array<Partial<Module>>,
  domApi?: DOMAPI,
  options?: Options
): (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode;

function h(sel: string): VNode;
function h(sel: string, data: VNodeData | null): VNode;
function h(sel: string, children: VNodeChildren): VNode;
function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode;

Core Virtual DOM

Modules

Six built-in modules for managing different aspects of DOM elements: attributes, classes, datasets, event listeners, properties, and styles.

const attributesModule: Module;
const classModule: Module;
const datasetModule: Module;
const eventListenersModule: Module;
const propsModule: Module;
const styleModule: Module;

Modules

JSX Support

JSX factory functions and TypeScript definitions for using Snabbdom with JSX syntax in React-style applications.

function jsx(
  tag: string | FunctionComponent,
  data: VNodeData | null,
  ...children: JsxVNodeChildren[]
): VNode;

function Fragment(
  data: { key?: Key } | null,
  ...children: JsxVNodeChildren[]
): VNode;

JSX Support

Advanced Features

Performance optimization through thunks, comprehensive lifecycle hooks system, and helper utilities for complex use cases.

function thunk(
  sel: string,
  fn: (...args: any[]) => any,
  args: any[]
): VNode;
function thunk(
  sel: string,
  key: any,
  fn: (...args: any[]) => any,
  args: any[]
): VNode;

interface Hooks {
  pre?: PreHook;
  init?: InitHook;
  create?: CreateHook;
  insert?: InsertHook;
  prepatch?: PrePatchHook;
  update?: UpdateHook;
  postpatch?: PostPatchHook;
  destroy?: DestroyHook;
  remove?: RemoveHook;
  post?: PostHook;
}

Advanced Features

Types

interface VNode {
  sel: string | undefined;
  data: VNodeData | undefined;
  children: Array<VNode | string> | undefined;
  elm: Node | undefined;
  text: string | undefined;
  key: Key | undefined;
}

interface VNodeData<VNodeProps = Props> {
  props?: VNodeProps;
  attrs?: Attrs;
  class?: Classes;
  style?: VNodeStyle;
  dataset?: Dataset;
  on?: On;
  attachData?: AttachData;
  hook?: Hooks;
  key?: Key;
  ns?: string;
  fn?: () => VNode;
  args?: any[];
  is?: string;
  [key: string]: any;
}

type Key = string | number | symbol;

interface Module {
  pre?: PreHook;
  create?: CreateHook;
  update?: UpdateHook;
  destroy?: DestroyHook;
  remove?: RemoveHook;
  post?: PostHook;
}

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