@thi.ng/hdom 8.2.32 → 9.0.3

package/README.md

@@ -90,8 +90,8 @@ Benefits:
 - Default implementation supports CSS conversion from JS objects for
   `style` attribs (also see:
   [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-css))
-- Auto-expansion of embedded values / types which implement the [`IToHiccup`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/api.ts#L415) or
-  [`IDeref`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/api.ts#L166)
+- Auto-expansion of embedded values / types which implement the [`IToHiccup`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/hiccup.ts) or
+  [`IDeref`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/deref.ts)
   interfaces (e.g. [atoms, cursors, derived views](https://github.com/thi-ng/umbrella/tree/develop/packages/atom), [streams](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream) etc.)
 - Fast (see [benchmark examples](#benchmarks) below)
 - Only ~6.2KB gzipped
@@ -119,12 +119,21 @@ Benefits:
 yarn add @thi.ng/hdom
 ```
 
+ES module import:
+
 ```html
-// ES module
-<script type="module" src="https://unpkg.com/@thi.ng/hdom?module" crossorigin></script>
+<script type="module" src="https://cdn.skypack.dev/@thi.ng/hdom"></script>
+```
+
+[Skypack documentation](https://docs.skypack.dev/)
+
+For Node.js REPL:
+
+```text
+# with flag only for < v16
+node --experimental-repl-await
 
-// UMD
-<script src="https://unpkg.com/@thi.ng/hdom/lib/index.umd.js" crossorigin></script>
+> const hdom = await import("@thi.ng/hdom");
 ```
 
 You can use the
@@ -142,7 +151,7 @@ yarn install
 yarn start
 ```
 
-Package sizes (gzipped, pre-treeshake): ESM: 3.62 KB / CJS: 3.72 KB / UMD: 3.66 KB
+Package sizes (gzipped, pre-treeshake): ESM: 3.70 KB
 
 ## Dependencies
 
@@ -152,6 +161,7 @@ Package sizes (gzipped, pre-treeshake): ESM: 3.62 KB / CJS: 3.72 KB / UMD: 3.66
 - [@thi.ng/equiv](https://github.com/thi-ng/umbrella/tree/develop/packages/equiv)
 - [@thi.ng/errors](https://github.com/thi-ng/umbrella/tree/develop/packages/errors)
 - [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup)
+- [@thi.ng/logger](https://github.com/thi-ng/umbrella/tree/develop/packages/logger)
 - [@thi.ng/prefixes](https://github.com/thi-ng/umbrella/tree/develop/packages/prefixes)
 
 ## Usage examples
@@ -170,8 +180,16 @@ A selection:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-canvas-clock.png" width="240"/>             | Realtime analog clock demo                                                       | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-clock/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-clock)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-canvas-particles.jpg" width="240"/>         | 2D Bezier curve-guided particle system                                           | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-particles/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-particles) |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/hdom-canvas/hdom-canvas-shapes-results.png" width="240"/> | Various hdom-canvas shape drawing examples & SVG conversion / export             | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-shapes/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-shapes)    |
+|                                                                                                                                      | Custom dropdown UI component for hdom                                            | [Demo](https://demo.thi.ng/umbrella/hdom-dropdown/)         | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-dropdown)         |
 |                                                                                                                                      | Custom dropdown UI component w/ fuzzy search                                     | [Demo](https://demo.thi.ng/umbrella/hdom-dropdown-fuzzy/)   | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-dropdown-fuzzy)   |
+|                                                                                                                                      | Using custom hdom context for dynamic UI theming                                 | [Demo](https://demo.thi.ng/umbrella/hdom-dyn-context/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-dyn-context)      |
 |                                                                                                                                      | Using hdom in an Elm-like manner                                                 | [Demo](https://demo.thi.ng/umbrella/hdom-elm/)              | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-elm)              |
+|                                                                                                                                      | Higher-order component for rendering HTML strings                                | [Demo](https://demo.thi.ng/umbrella/hdom-inner-html/)       | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-inner-html)       |
+|                                                                                                                                      | Isolated, component-local DOM updates                                            | [Demo](https://demo.thi.ng/umbrella/hdom-local-render/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-local-render)     |
+|                                                                                                                                      | UI component w/ local state stored in hdom context                               | [Demo](https://demo.thi.ng/umbrella/hdom-localstate/)       | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-localstate)       |
+|                                                                                                                                      | Skipping UI updates for selected component(s)                                    | [Demo](https://demo.thi.ng/umbrella/hdom-skip/)             | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-skip)             |
+|                                                                                                                                      | Skipping UI updates for nested component(s)                                      | [Demo](https://demo.thi.ng/umbrella/hdom-skip-nested/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-skip-nested)      |
+|                                                                                                                                      | Example for themed components proposal                                           | [Demo](https://demo.thi.ng/umbrella/hdom-theme/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-theme)            |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-toggle.png" width="240"/>                   | Customizable slide toggle component demo                                         | [Demo](https://demo.thi.ng/umbrella/hdom-toggle/)           | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-toggle)           |
 |                                                                                                                                      | Hiccup / hdom DOM hydration example                                              | [Demo](https://demo.thi.ng/umbrella/hydrate-basics/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hydrate-basics)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/imgui/imgui-all.png" width="240"/>                        | Canvas based Immediate Mode GUI components                                       | [Demo](https://demo.thi.ng/umbrella/imgui/)                 | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/imgui)                 |
@@ -620,9 +638,9 @@ import { map, range } from "@thi.ng/transducers";
 ### Interface support
 
 Any type implementing one of the
-[`IToHiccup`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/api.ts#L415)
+[`IToHiccup`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/hiccup.ts)
 or
-[`IDeref`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/api.ts#L166)
+[`IDeref`](https://github.com/thi-ng/umbrella/tree/develop/packages/api/src/deref.ts)
 or interfaces will be auto-expanded during tree normalization.
 
 This currently includes the following types from other packages in this
@@ -944,7 +962,7 @@ The following functions are the core parts of the `HDOMImplementation`
 interface, the abstraction layer used by hdom to support different
 targets.
 
-- [interface definition](https://github.com/thi-ng/umbrella/blob/develop/packages/hdom/src/api.ts#L127)
+- [interface definition](https://docs.thi.ng/umbrella/hdom/interfaces/HDOMImplementation.html)
 - [default implementation](https://github.com/thi-ng/umbrella/blob/develop/packages/hdom/src/default.ts)
 
 ### normalizeTree()

package/default.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMImplementation } from "./api";
+import type { HDOMImplementation } from "./api.js";
 /**
  * Default target implementation to manipulate browser DOM.
  */

package/default.js

@@ -1,6 +1,6 @@
-import { diffTree } from "./diff";
-import { createElement, createTextElement, createTree, getChild, hydrateTree, removeAttribs, removeChild, replaceChild, setAttrib, setContent, } from "./dom";
-import { normalizeTree } from "./normalize";
+import { diffTree } from "./diff.js";
+import { createElement, createTextElement, createTree, getChild, hydrateTree, removeAttribs, removeChild, replaceChild, setAttrib, setContent, } from "./dom.js";
+import { normalizeTree } from "./normalize.js";
 /**
  * Default target implementation to manipulate browser DOM.
  */

package/diff.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMImplementation, HDOMOpts } from "./api";
+import type { HDOMImplementation, HDOMOpts } from "./api.js";
 /**
  * See {@link HDOMImplementation} interface for further details.
  *

package/diff.js

@@ -1,5 +1,6 @@
-import { SEMAPHORE } from "@thi.ng/api";
-import { diffArray, diffObject } from "@thi.ng/diff";
+import { SEMAPHORE } from "@thi.ng/api/api";
+import { diffArray } from "@thi.ng/diff/array";
+import { diffObject } from "@thi.ng/diff/object";
 import { equiv as _equiv, equivArrayLike, equivMap, equivObject, equivSet, } from "@thi.ng/equiv";
 const isArray = Array.isArray;
 const max = Math.max;

package/dom.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMImplementation, HDOMOpts } from "./api";
+import type { HDOMImplementation, HDOMOpts } from "./api.js";
 /**
  * See {@link HDOMImplementation} interface for further details.
  *

package/dom.js

@@ -1,6 +1,10 @@
-import { isArray as isa, isNotStringAndIterable as isi, isString as iss, } from "@thi.ng/checks";
-import { css, formatPrefixes, SVG_TAGS } from "@thi.ng/hiccup";
-import { XML_SVG } from "@thi.ng/prefixes";
+import { isArray as isa } from "@thi.ng/checks/is-array";
+import { isNotStringAndIterable as isi } from "@thi.ng/checks/is-not-string-iterable";
+import { isString as iss } from "@thi.ng/checks/is-string";
+import { SVG_TAGS } from "@thi.ng/hiccup/api";
+import { css } from "@thi.ng/hiccup/css";
+import { formatPrefixes } from "@thi.ng/hiccup/prefix";
+import { XML_SVG } from "@thi.ng/prefixes/xml";
 const isArray = isa;
 const isNotStringAndIterable = isi;
 const isString = iss;

package/index.d.ts

@@ -1,10 +1,10 @@
-export * from "./api";
-export * from "./default";
-export * from "./diff";
-export * from "./dom";
-export * from "./logger";
-export * from "./normalize";
-export * from "./render-once";
-export * from "./start";
-export * from "./utils";
+export * from "./api.js";
+export * from "./default.js";
+export * from "./diff.js";
+export * from "./dom.js";
+export * from "./logger.js";
+export * from "./normalize.js";
+export * from "./render-once.js";
+export * from "./resolve.js";
+export * from "./start.js";
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,9 +1,9 @@
-export * from "./api";
-export * from "./default";
-export * from "./diff";
-export * from "./dom";
-export * from "./logger";
-export * from "./normalize";
-export * from "./render-once";
-export * from "./start";
-export * from "./utils";
+export * from "./api.js";
+export * from "./default.js";
+export * from "./diff.js";
+export * from "./dom.js";
+export * from "./logger.js";
+export * from "./normalize.js";
+export * from "./render-once.js";
+export * from "./resolve.js";
+export * from "./start.js";

package/logger.d.ts

@@ -1,4 +1,4 @@
-import { ILogger } from "@thi.ng/api";
+import type { ILogger } from "@thi.ng/logger";
 export declare let LOGGER: ILogger;
 export declare const setLogger: (logger: ILogger) => ILogger;
 //# sourceMappingURL=logger.d.ts.map

package/logger.js

@@ -1,3 +1,3 @@
-import { NULL_LOGGER } from "@thi.ng/api";
+import { NULL_LOGGER } from "@thi.ng/logger/null";
 export let LOGGER = NULL_LOGGER;
 export const setLogger = (logger) => (LOGGER = logger);

package/normalize.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMOpts } from "./api";
+import type { HDOMOpts } from "./api.js";
 /**
  * Expands single hiccup element/component into its canonical form:
  *

package/normalize.js

@@ -1,6 +1,9 @@
-import { isArray as isa, isNotStringAndIterable as isi, isPlainObject as iso, } from "@thi.ng/checks";
-import { illegalArgs } from "@thi.ng/errors";
-import { mergeEmmetAttribs, NO_SPANS, RE_TAG } from "@thi.ng/hiccup";
+import { isArray as isa } from "@thi.ng/checks/is-array";
+import { isNotStringAndIterable as isi } from "@thi.ng/checks/is-not-string-iterable";
+import { isPlainObject as iso } from "@thi.ng/checks/is-plain-object";
+import { illegalArgs } from "@thi.ng/errors/illegal-arguments";
+import { NO_SPANS, RE_TAG } from "@thi.ng/hiccup/api";
+import { mergeEmmetAttribs } from "@thi.ng/hiccup/attribs";
 const isArray = isa;
 const isNotStringAndIterable = isi;
 const isPlainObject = iso;
@@ -47,7 +50,7 @@ export const normalizeElement = (spec, keys) => {
     if (tag === name && hasAttribs && (!keys || spec[1].key)) {
         return spec;
     }
-    attribs = mergeEmmetAttribs(hasAttribs ? Object.assign({}, spec[1]) : {}, match[2], match[3]);
+    attribs = mergeEmmetAttribs(hasAttribs ? { ...spec[1] } : {}, match[2], match[3]);
     return attribs.__skip && spec.length < 3
         ? [name, attribs]
         : [name, attribs, ...spec.slice(hasAttribs ? 2 : 1)];

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@thi.ng/hdom",
-    "version": "8.2.32",
+    "version": "9.0.3",
     "description": "Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors",
+    "type": "module",
     "module": "./index.js",
-    "main": "./lib/index.js",
-    "umd:main": "./lib/index.umd.js",
     "typings": "./index.d.ts",
+    "sideEffects": false,
     "repository": {
         "type": "git",
         "url": "https://github.com/thi-ng/umbrella.git"
@@ -24,36 +24,29 @@
     "author": "Karsten Schmidt <k+npm@thi.ng>",
     "license": "Apache-2.0",
     "scripts": {
-        "build": "yarn clean && yarn build:es6 && node ../../scripts/bundle-module",
-        "build:release": "yarn clean && yarn build:es6 && node ../../scripts/bundle-module all",
-        "build:es6": "tsc --declaration",
-        "build:test": "rimraf build && tsc -p test/tsconfig.json",
-        "build:check": "tsc --isolatedModules --noEmit",
-        "test": "mocha test",
-        "cover": "nyc mocha test && nyc report --reporter=lcov",
-        "clean": "rimraf *.js *.d.ts *.map .nyc_output build coverage doc lib",
-        "doc:readme": "ts-node -P ../../tools/tsconfig.json ../../tools/src/readme.ts",
-        "doc": "typedoc --excludePrivate --out doc --theme ../../tools/doc/typedoc-theme src/index.ts",
+        "build": "yarn clean && tsc --declaration",
+        "clean": "rimraf *.js *.d.ts *.map doc",
+        "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
         "doc:ae": "mkdir -p .ae/doc .ae/temp && node_modules/.bin/api-extractor run --local --verbose",
-        "pub": "yarn build:release && yarn publish --access public"
-    },
-    "devDependencies": {
-        "@thi.ng/atom": "^4.1.42"
+        "doc:readme": "yarn doc:stats && ../../scripts/node-esm ../../tools/src/readme.ts",
+        "doc:stats": "../../scripts/node-esm ../../tools/src/module-stats.ts",
+        "pub": "yarn build && yarn publish --access public",
+        "test": "testament test"
     },
     "dependencies": {
-        "@thi.ng/api": "^7.2.0",
-        "@thi.ng/checks": "^2.9.11",
-        "@thi.ng/diff": "^4.0.13",
-        "@thi.ng/equiv": "^1.0.45",
-        "@thi.ng/errors": "^1.3.4",
-        "@thi.ng/hiccup": "^3.6.22",
-        "@thi.ng/prefixes": "^1.0.2"
+        "@thi.ng/api": "^8.0.3",
+        "@thi.ng/checks": "^3.0.3",
+        "@thi.ng/diff": "^5.0.3",
+        "@thi.ng/equiv": "^2.0.3",
+        "@thi.ng/errors": "^2.0.3",
+        "@thi.ng/hiccup": "^4.0.3",
+        "@thi.ng/logger": "^1.0.3",
+        "@thi.ng/prefixes": "^2.0.3"
+    },
+    "devDependencies": {
+        "@thi.ng/atom": "^5.0.3",
+        "@thi.ng/testament": "^0.1.3"
     },
-    "files": [
-        "*.js",
-        "*.d.ts",
-        "lib"
-    ],
     "keywords": [
         "array",
         "browser",
@@ -74,7 +67,45 @@
     "publishConfig": {
         "access": "public"
     },
-    "sideEffects": false,
+    "engines": {
+        "node": ">=12.7"
+    },
+    "files": [
+        "*.js",
+        "*.d.ts"
+    ],
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./api": {
+            "import": "./api.js"
+        },
+        "./default": {
+            "import": "./default.js"
+        },
+        "./diff": {
+            "import": "./diff.js"
+        },
+        "./dom": {
+            "import": "./dom.js"
+        },
+        "./logger": {
+            "import": "./logger.js"
+        },
+        "./normalize": {
+            "import": "./normalize.js"
+        },
+        "./render-once": {
+            "import": "./render-once.js"
+        },
+        "./resolve": {
+            "import": "./resolve.js"
+        },
+        "./start": {
+            "import": "./start.js"
+        }
+    },
     "thi.ng": {
         "blog": [
             {
@@ -88,5 +119,5 @@
         ],
         "year": 2015
     },
-    "gitHead": "d971cb3f9b215a95483f78f1a8614015e331146f"
+    "gitHead": "1fb38cac74d6c009d96855c28784a267a81badf1"
 }

package/render-once.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMImplementation, HDOMOpts } from "./api";
+import type { HDOMImplementation, HDOMOpts } from "./api.js";
 /**
  * One-off hdom tree conversion & target DOM application. Takes same
  * options as {@link start}, but performs no diffing and only creates or

package/render-once.js

@@ -1,6 +1,6 @@
-import { derefContext } from "@thi.ng/hiccup";
-import { DEFAULT_IMPL } from "./default";
-import { resolveRoot } from "./utils";
+import { derefContext } from "@thi.ng/hiccup/deref";
+import { DEFAULT_IMPL } from "./default.js";
+import { resolveRoot } from "./resolve.js";
 /**
  * One-off hdom tree conversion & target DOM application. Takes same
  * options as {@link start}, but performs no diffing and only creates or
@@ -12,7 +12,7 @@ import { resolveRoot } from "./utils";
  * @param impl - hdom implementation
  */
 export const renderOnce = (tree, opts = {}, impl = DEFAULT_IMPL) => {
-    opts = Object.assign({ root: "app" }, opts);
+    opts = { root: "app", ...opts };
     opts.ctx = derefContext(opts.ctx, opts.autoDerefKeys);
     const root = resolveRoot(opts.root, impl);
     tree = impl.normalizeTree(opts, tree);

package/resolve.d.ts

@@ -0,0 +1,3 @@
+import type { HDOMImplementation } from "./api.js";
+export declare const resolveRoot: (root: any, impl: HDOMImplementation<any>) => any;
+//# sourceMappingURL=resolve.d.ts.map

package/{utils.js → resolve.js}

@@ -1,2 +1,2 @@
-import { isString } from "@thi.ng/checks";
+import { isString } from "@thi.ng/checks/is-string";
 export const resolveRoot = (root, impl) => isString(root) ? impl.getElementById(root) : root;

package/start.d.ts

@@ -1,4 +1,4 @@
-import type { HDOMImplementation, HDOMOpts } from "./api";
+import type { HDOMImplementation, HDOMOpts } from "./api.js";
 /**
  * Takes an hiccup tree (array, function or component object w/ life
  * cycle methods) and an optional object of DOM update options. Starts

package/start.js

@@ -1,6 +1,6 @@
-import { derefContext } from "@thi.ng/hiccup";
-import { DEFAULT_IMPL } from "./default";
-import { resolveRoot } from "./utils";
+import { derefContext } from "@thi.ng/hiccup/deref";
+import { DEFAULT_IMPL } from "./default.js";
+import { resolveRoot } from "./resolve.js";
 /**
  * Takes an hiccup tree (array, function or component object w/ life
  * cycle methods) and an optional object of DOM update options. Starts
@@ -46,7 +46,7 @@ import { resolveRoot } from "./utils";
  * @param impl - hdom target implementation
  */
 export const start = (tree, opts = {}, impl = DEFAULT_IMPL) => {
-    const _opts = Object.assign({ root: "app" }, opts);
+    const _opts = { root: "app", ...opts };
     let prev = [];
     let isActive = true;
     const root = resolveRoot(_opts.root, impl);