@thi.ng/hdom-mock

[!NOTE] This is one of 192 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

• About
• Status
• Installation
• Dependencies
• API
• Authors
• License

About

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.

Status

ALPHA - bleeding edge / work-in-progress

Search or submit any issues for this package

Installation

yarn add @thi.ng/hdom-mock

ESM import:

import * as hm from "@thi.ng/hdom-mock";

Browser ESM import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/hdom-mock"></script>

Skypack documentation

For Node.js REPL:

const hm = await import("@thi.ng/hdom-mock");

Package sizes (brotli'd, pre-treeshake): ESM: 1.08 KB

Dependencies

• @thi.ng/api
• @thi.ng/checks
• @thi.ng/hdom

API

Generated API docs

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

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
}

License

© 2018 - 2024 Karsten Schmidt // Apache License 2.0