Nine Pedestrians Mesmerized

    @thi.ng/hdom-mock
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.7 • Public • Published

    hdom-mock

    npm version npm downloads Twitter Follow

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

    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

    ES module import:

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

    Skypack documentation

    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.06 KB

    Dependencies

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

    Install

    npm i @thi.ng/hdom-mock

    DownloadsWeekly Downloads

    239

    Version

    2.1.7

    License

    Apache-2.0

    Unpacked Size

    29.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • thi.ng