Package Exports
- @thi.ng/hdom-mock
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@thi.ng/hdom-mock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@thi.ng/hdom-mock
This project is part of the @thi.ng/umbrella monorepo.
About
This package provides a mock implementation of the
HDOMImplementation
interface for testing and prototyping purposes of potential basis of
custom target implementations.
Installation
yarn add @thi.ng/hdom-mockDependencies
Usage examples
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' ] ] ] ]Authors
- Karsten Schmidt
License
© 2018 Karsten Schmidt // Apache Software License 2.0