Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

@thi.ng/transducers-hdom

2.0.12 • Public • Published

@thi.ng/transducers-hdom

npm version npm downloads Twitter Follow

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

About

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:

Installation

yarn add @thi.ng/transducers-hdom

Dependencies

Usage examples

The below example is also available in the /examples directory.

Live demo

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 Karsten Schmidt // Apache Software License 2.0

install

npm i @thi.ng/transducers-hdom

Downloadsweekly downloads

112

version

2.0.12

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability