This project is part of the @thi.ng/umbrella monorepo.
Mock base implementation for @thi.ng/hdom API.
This package provides a mock implementation of the
HDOMImplementation
interface for testing and prototyping purposes of potential basis of
custom target implementations.
ALPHA - bleeding edge / work-in-progress
Search or submit any issues for this package
yarn add @thi.ng/hdom-mockES module import:
<script type="module" src="https://cdn.skypack.dev/@thi.ng/hdom-mock"></script>For Node.js REPL:
# with flag only for < v16
node --experimental-repl-await
> const hdomMock = await import("@thi.ng/hdom-mock");
Package sizes (gzipped, pre-treeshake): ESM: 1.07 KB
import { HDOMNode, MockHDOM } from "@thi.ng/hdom-mock";
const title = (ctx, body) => ["h1", ctx.ui.title, body];
const ctx = { ui: { title: { class: "f1 lh-headline" } } };
const opts = { ctx };
// target implementation
const impl = new MockHDOM(new HDOMNode("root", { id: "app" }));
// some trees
const tree1 = impl.normalizeTree(opts, ["div#foo.bar", [title, "hello world"]]);
const tree2 = impl.normalizeTree(opts, ["div", [title, "hi hdom"], ["p.red", "Lorem ipsum"]]);
// render hdom tree w/ mock implementation
impl.createTree(opts, impl.root, tree1));
// convert result DOM back to hiccup (for better clarity)
impl.root.toHiccup();
// [ 'root',
// { id: 'app' },
// [ 'div',
// { id: 'foo', class: 'bar', key: '0' },
// [ 'h1',
// { class: 'f1 lh-headline', key: '0-0' },
// [ 'span', { key: '0-0-0' }, 'hello world' ] ] ] ]
// apply diff from tree1 -> tree2
impl.diffTree(opts, impl.root, tree1, tree2);
impl.root.children[0].toHiccup();
// [ 'root',
// { id: 'app' },
// [ 'div',
// { key: '0' },
// [ 'h1',
// { class: 'f1 lh-headline', key: '0-0' },
// [ 'span', { key: '0-0-0' }, 'hi hdom' ] ],
// [ 'p',
// { class: 'red', key: '0-1' },
// [ 'span', { key: '0-1-0' }, 'Lorem ipsum' ] ] ] ]Karsten Schmidt
If this project contributes to an academic publication, please cite it as:
@misc{thing-hdom-mock,
title = "@thi.ng/hdom-mock",
author = "Karsten Schmidt",
note = "https://thi.ng/hdom-mock",
year = 2018
}© 2018 - 2021 Karsten Schmidt // Apache Software License 2.0