Options
All
  • Public
  • Public/Protected
  • All
Menu

@thi.ng/transducers-hdom

@thi.ng/transducers-hdom

npm version npm downloads Twitter Follow

This project is part of the @thi.ng/umbrella monorepo.

About

Transducer based UI updater for @thi.ng/hdom. This is a support package for @thi.ng/transducers.

This package provides a single updateDOM function, a side-effecting & stateful transducer which receives @thi.ng/hdom component trees, diffs each against the previous value and applies any required changes to the browser DOM, starting at given root element. By default, incoming values are first normalized using @thi.ng/hdom's normalizeTree() function. See hdom's start() function for more details.

If the hydrate option is given, the first received tree is only used to inject event listeners and initialize components with lifecycle init() methods and expects an otherwise identical pre-existing DOM. All succeeding trees are diffed then as usual.

This transducer is primarily intended for @thi.ng/rstream-based dataflow graphs, where it can be used as final leaf subscription / stream transformer to reflect UI changes back to the user, without using the usual RAF update loop used by @thi.ng/hdom by default. In this setup, DOM updates will only be performed if the stream this transducer is attached to receives new values (i.e. hdom component trees).

Please also see the following hdom references for further details:

Status

STABLE - used in production

Related packages

  • @thi.ng/hdom - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors
  • @thi.ng/interceptors - Interceptor based event bus, side effect & immutable state handling
  • @thi.ng/rstream - Reactive streams & subscription primitives for constructing dataflow graphs / pipelines

Installation

yarn add @thi.ng/transducers-hdom

Package sizes (gzipped): ESM: 0.3KB / CJS: 0.3KB / UMD: 0.4KB

Dependencies

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

adaptive-threshold

screenshot

Interactive image processing (adaptive threshold)

Live demo | Source

bitmap-font

screenshot

Figlet-style bitmap font creation with transducers

Live demo | Source

crypto-chart

screenshot

Basic crypto-currency candle chart with multiple moving averages plots

Live demo | Source

gesture-analysis

screenshot

Mouse gesture / stroke analysis, simplification, corner detection

Live demo | Source

hdom-canvas-draw

Interactive @thi.ng/hdom-canvas pattern drawing demo using transducers

Live demo | Source

hdom-canvas-shapes

screenshot

Live demo | Source

imgui

screenshot

Canvas based Immediate Mode GUI components

Live demo | Source

mandelbrot

screenshot

Worker based, interactive Mandelbrot visualization

Live demo | Source

markdown

screenshot

Minimal Markdown to Hiccup to HTML parser / transformer

Live demo | Source

multitouch

Basic @thi.ng/rstream-gestures multi-touch demo

Live demo | Source

poly-spline

Live demo | Source

rotating-voronoi

screenshot

Live demo | Source

rstream-event-loop

screenshot

Minimal demo of using rstream constructs to form an interceptor-style event loop

Live demo | Source

rstream-spreadsheet

Live demo | Source

transducers-hdom

Live demo | Source

API

Generated API docs

Code for the above linked transducers-hdom example...

import * as rs from "@thi.ng/rstream";
import * as tx from "@thi.ng/transducers";
import { updateDOM } from "@thi.ng/transducers-hdom";

// root component function
const app = ({ ticks, clicks }) =>
    ["div",
        `${ticks} ticks and `,
        ["a",
            { href: "#", onclick: () => clickStream.next(0) },
            `${clicks} clicks`]
    ];

// click stream (click counter)
const clickStream = new rs.Stream().transform(tx.scan(tx.count(-1)));

// stream combinator
rs.sync({
    src: {
        ticks: rs.fromInterval(1000),
        clicks: clickStream,
    },
    reset: false,
}).transform(
    // transform into hdom component
    tx.map(app),
    // apply as DOM
    updateDOM({ root: document.body })
);

// kick off
clickStream.next(0);

Authors

Karsten Schmidt

License

© 2018 - 2020 Karsten Schmidt // Apache Software License 2.0

Generated using TypeDoc