@thi.ng/hdom 9.3.30 → 9.4.0

package/normalize.js

@@ -7,143 +7,122 @@ import { mergeEmmetAttribs } from "@thi.ng/hiccup/attribs";
 const isArray = isa;
 const isNotStringAndIterable = isi;
 const isPlainObject = iso;
-/**
- * Expands single hiccup element/component into its canonical form:
- *
- * ```
- * [tagname, {attribs}, ...children]
- * ```
- *
- * Emmet-style ID and class names in the original tagname are moved into
- * the attribs object, e.g.:
- *
- * ```
- * ["div#foo.bar.baz"] => ["div", {id: "foo", class: "bar baz"}]
- * ```
- *
- * If both Emmet-style classes AND a `class` attrib exists, the former
- * are appended to the latter:
- *
- * ```
- * ["div.bar.baz", {class: "foo"}] => ["div", {class: "foo bar baz"}]
- * ```
- *
- * Elements with `__skip` attrib enabled and no children, will have an
- * empty text child element injected.
- *
- * @param spec - single hdom component
- * @param keys -
- *
- * @internal
- */
-export const normalizeElement = (spec, keys) => {
-    let tag = spec[0];
-    let hasAttribs = isPlainObject(spec[1]);
-    let match;
-    let name;
-    let attribs;
-    if (typeof tag !== "string" || !(match = RE_TAG.exec(tag))) {
-        illegalArgs(`${tag} is not a valid tag name`);
-    }
-    name = match[1];
-    // return orig if already normalized and satisfies key requirement
-    if (tag === name && hasAttribs && (!keys || spec[1].key)) {
-        return spec;
-    }
-    attribs = mergeEmmetAttribs(hasAttribs ? { ...spec[1] } : {}, match[2], match[3]);
-    return attribs.__skip && spec.length < 3
-        ? [name, attribs]
-        : [name, attribs, ...spec.slice(hasAttribs ? 2 : 1)];
+const normalizeElement = (spec, keys) => {
+  let tag = spec[0];
+  let hasAttribs = isPlainObject(spec[1]);
+  let match;
+  let name;
+  let attribs;
+  if (typeof tag !== "string" || !(match = RE_TAG.exec(tag))) {
+    illegalArgs(`${tag} is not a valid tag name`);
+  }
+  name = match[1];
+  if (tag === name && hasAttribs && (!keys || spec[1].key)) {
+    return spec;
+  }
+  attribs = mergeEmmetAttribs(
+    hasAttribs ? { ...spec[1] } : {},
+    match[2],
+    match[3]
+  );
+  return attribs.__skip && spec.length < 3 ? [name, attribs] : [name, attribs, ...spec.slice(hasAttribs ? 2 : 1)];
 };
-/**
- * See {@link HDOMImplementation} interface for further details.
- *
- * @param opts - hdom config options
- * @param tree - component tree
- */
-export const normalizeTree = (opts, tree) => _normalizeTree(tree, opts, opts.ctx, [0], opts.keys !== false, opts.span !== false);
+const normalizeTree = (opts, tree) => _normalizeTree(
+  tree,
+  opts,
+  opts.ctx,
+  [0],
+  opts.keys !== false,
+  opts.span !== false
+);
 const _normalizeTree = (tree, opts, ctx, path, keys, span) => {
-    if (tree == null) {
-        return;
+  if (tree == null) {
+    return;
+  }
+  if (isArray(tree)) {
+    if (tree.length === 0) {
+      return;
     }
-    if (isArray(tree)) {
-        if (tree.length === 0) {
-            return;
-        }
-        let norm, nattribs = tree[1], impl;
-        // if available, use branch-local normalize implementation
-        if (nattribs &&
-            (impl = nattribs.__impl) &&
-            (impl = impl.normalizeTree)) {
-            return impl(opts, tree);
-        }
-        const tag = tree[0];
-        // use result of function call
-        // pass ctx as first arg and remaining array elements as rest args
-        if (typeof tag === "function") {
-            return _normalizeTree(tag.apply(null, [ctx, ...tree.slice(1)]), opts, ctx, path, keys, span);
-        }
-        // component object w/ life cycle methods
-        // (render() is the only required hook)
-        if (typeof tag.render === "function") {
-            const args = [ctx, ...tree.slice(1)];
-            norm = _normalizeTree(tag.render.apply(tag, args), opts, ctx, path, keys, span);
-            if (isArray(norm)) {
-                norm.__this = tag;
-                norm.__init = tag.init;
-                norm.__release = tag.release;
-                norm.__args = args;
-            }
-            return norm;
-        }
-        norm = normalizeElement(tree, keys);
-        nattribs = norm[1];
-        if (nattribs.__normalize === false) {
-            return norm;
-        }
-        if (keys && nattribs.key === undefined) {
-            nattribs.key = path.join("-");
-        }
-        return norm.length > 2
-            ? normalizeChildren(norm, nattribs, opts, ctx, path, keys, span)
-            : norm;
+    let norm, nattribs = tree[1], impl;
+    if (nattribs && (impl = nattribs.__impl) && (impl = impl.normalizeTree)) {
+      return impl(opts, tree);
+    }
+    const tag = tree[0];
+    if (typeof tag === "function") {
+      return _normalizeTree(
+        tag.apply(null, [ctx, ...tree.slice(1)]),
+        opts,
+        ctx,
+        path,
+        keys,
+        span
+      );
+    }
+    if (typeof tag.render === "function") {
+      const args = [ctx, ...tree.slice(1)];
+      norm = _normalizeTree(
+        tag.render.apply(tag, args),
+        opts,
+        ctx,
+        path,
+        keys,
+        span
+      );
+      if (isArray(norm)) {
+        norm.__this = tag;
+        norm.__init = tag.init;
+        norm.__release = tag.release;
+        norm.__args = args;
+      }
+      return norm;
+    }
+    norm = normalizeElement(tree, keys);
+    nattribs = norm[1];
+    if (nattribs.__normalize === false) {
+      return norm;
     }
-    return typeof tree === "function"
-        ? _normalizeTree(tree(ctx), opts, ctx, path, keys, span)
-        : typeof tree.toHiccup === "function"
-            ? _normalizeTree(tree.toHiccup(opts.ctx), opts, ctx, path, keys, span)
-            : typeof tree.deref === "function"
-                ? _normalizeTree(tree.deref(), opts, ctx, path, keys, span)
-                : span
-                    ? ["span", keys ? { key: path.join("-") } : {}, tree.toString()]
-                    : tree.toString();
+    if (keys && nattribs.key === void 0) {
+      nattribs.key = path.join("-");
+    }
+    return norm.length > 2 ? normalizeChildren(norm, nattribs, opts, ctx, path, keys, span) : norm;
+  }
+  return typeof tree === "function" ? _normalizeTree(tree(ctx), opts, ctx, path, keys, span) : typeof tree.toHiccup === "function" ? _normalizeTree(tree.toHiccup(opts.ctx), opts, ctx, path, keys, span) : typeof tree.deref === "function" ? _normalizeTree(tree.deref(), opts, ctx, path, keys, span) : span ? ["span", keys ? { key: path.join("-") } : {}, tree.toString()] : tree.toString();
 };
 const normalizeChildren = (norm, nattribs, opts, ctx, path, keys, span) => {
-    const tag = norm[0];
-    const res = [tag, nattribs];
-    span = span && !NO_SPANS[tag];
-    for (let i = 2, j = 2, k = 0, n = norm.length; i < n; i++) {
-        let el = norm[i];
-        if (el != null) {
-            const isarray = isArray(el);
-            if ((isarray && isArray(el[0])) ||
-                (!isarray && isNotStringAndIterable(el))) {
-                for (let c of el) {
-                    c = _normalizeTree(c, opts, ctx, path.concat(k), keys, span);
-                    if (c !== undefined) {
-                        res[j++] = c;
-                    }
-                    k++;
-                }
-            }
-            else {
-                el = _normalizeTree(el, opts, ctx, path.concat(k), keys, span);
-                if (el !== undefined) {
-                    res[j++] = el;
-                }
-                k++;
-            }
+  const tag = norm[0];
+  const res = [tag, nattribs];
+  span = span && !NO_SPANS[tag];
+  for (let i = 2, j = 2, k = 0, n = norm.length; i < n; i++) {
+    let el = norm[i];
+    if (el != null) {
+      const isarray = isArray(el);
+      if (isarray && isArray(el[0]) || !isarray && isNotStringAndIterable(el)) {
+        for (let c of el) {
+          c = _normalizeTree(
+            c,
+            opts,
+            ctx,
+            path.concat(k),
+            keys,
+            span
+          );
+          if (c !== void 0) {
+            res[j++] = c;
+          }
+          k++;
+        }
+      } else {
+        el = _normalizeTree(el, opts, ctx, path.concat(k), keys, span);
+        if (el !== void 0) {
+          res[j++] = el;
         }
+        k++;
+      }
     }
-    return res;
+  }
+  return res;
+};
+export {
+  normalizeElement,
+  normalizeTree
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hdom",
-  "version": "9.3.30",
+  "version": "9.4.0",
   "description": "Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors",
   "type": "module",
   "module": "./index.js",
@@ -27,7 +27,9 @@
   ],
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -36,19 +38,19 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.10",
-    "@thi.ng/checks": "^3.4.10",
-    "@thi.ng/diff": "^5.1.43",
-    "@thi.ng/equiv": "^2.1.35",
-    "@thi.ng/errors": "^2.4.4",
-    "@thi.ng/hiccup": "^5.0.9",
-    "@thi.ng/logger": "^2.0.1",
-    "@thi.ng/prefixes": "^2.2.6"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/checks": "^3.4.12",
+    "@thi.ng/diff": "^5.1.45",
+    "@thi.ng/equiv": "^2.1.37",
+    "@thi.ng/errors": "^2.4.6",
+    "@thi.ng/hiccup": "^5.1.1",
+    "@thi.ng/logger": "^2.0.2",
+    "@thi.ng/prefixes": "^2.2.8"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
-    "@thi.ng/atom": "^5.2.16",
-    "@thi.ng/testament": "^0.4.3",
+    "@thi.ng/atom": "^5.2.18",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -130,5 +132,5 @@
     "status": "completed",
     "year": 2015
   },
-  "gitHead": "04d1de79f256d7a53c6b5fd157b37f49bc88e11d\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }

package/render-once.js

@@ -1,24 +1,15 @@
 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
- * hydrates target once. The given tree is first normalized and if
- * result is `null` or `undefined` no further action will be taken.
- *
- * @param tree - component tree
- * @param opts - hdom config options
- * @param impl - hdom implementation
- */
-export const renderOnce = (tree, opts = {}, impl = DEFAULT_IMPL) => {
-    opts = { root: "app", ...opts };
-    opts.ctx = derefContext(opts.ctx, opts.autoDerefKeys);
-    const root = resolveRoot(opts.root, impl);
-    tree = impl.normalizeTree(opts, tree);
-    if (!tree)
-        return;
-    opts.hydrate
-        ? impl.hydrateTree(opts, root, tree)
-        : impl.createTree(opts, root, tree);
+const renderOnce = (tree, opts = {}, impl = DEFAULT_IMPL) => {
+  opts = { root: "app", ...opts };
+  opts.ctx = derefContext(opts.ctx, opts.autoDerefKeys);
+  const root = resolveRoot(opts.root, impl);
+  tree = impl.normalizeTree(opts, tree);
+  if (!tree)
+    return;
+  opts.hydrate ? impl.hydrateTree(opts, root, tree) : impl.createTree(opts, root, tree);
+};
+export {
+  renderOnce
 };

package/resolve.js

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

package/start.js

@@ -1,70 +1,30 @@
 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 RAF update
- * loop, in each iteration first normalizing given tree, then computing diff to
- * previous frame's tree and applying any changes to the real DOM. The `ctx`
- * option can be used for passing arbitrary config data or state down into the
- * hiccup component tree. Any embedded component function in the tree will
- * receive this context object (shallow copy) as first argument, as will life
- * cycle methods in component objects. If the `autoDerefKeys` option is given,
- * attempts to auto-expand/deref the given keys in the user supplied context
- * object (`ctx` option) prior to *each* tree normalization. All of these values
- * should implement the
- * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) interface
- * (e.g. atoms, cursors, views, rstreams etc.). This feature can be used to
- * define dynamic contexts linked to the main app state, e.g. using derived
- * views provided by [`thi.ng/atom`](https://thi.ng/atom).
- *
- * **Selective updates**: No updates will be applied if the given hiccup tree is
- * `undefined` or `null` or a root component function returns no value. This way
- * a given root function can do some state handling of its own and implement
- * fail-fast checks to determine no DOM updates are necessary, save effort
- * re-creating a new hiccup tree and request skipping DOM updates via this
- * function. In this case, the previous DOM tree is kept around until the root
- * function returns a tree again, which then is diffed and applied against the
- * previous tree kept as usual. Any number of frames may be skipped this way.
- *
- * **Important:** Unless the `hydrate` option is enabled, the parent element
- * given is assumed to have NO children at the time when `start()` is called.
- * Since hdom does NOT track the real DOM, the resulting changes will result in
- * potentially undefined behavior if the parent element wasn't empty. Likewise,
- * if `hydrate` is enabled, it is assumed that an equivalent DOM (minus
- * listeners) already exists (i.e. generated via SSR) when `start()` is called.
- * Any other discrepancies between the pre-existing DOM and the hdom trees will
- * cause undefined behavior.
- *
- * Returns a function, which when called, immediately cancels the update loop.
- *
- * @param tree - hiccup DOM tree
- * @param opts - options
- * @param impl - hdom target implementation
- */
-export const start = (tree, opts = {}, impl = DEFAULT_IMPL) => {
-    const _opts = { root: "app", ...opts };
-    let prev = [];
-    let isActive = true;
-    const root = resolveRoot(_opts.root, impl);
-    const update = () => {
-        if (isActive) {
-            _opts.ctx = derefContext(opts.ctx, _opts.autoDerefKeys);
-            const curr = impl.normalizeTree(_opts, tree);
-            if (curr != null) {
-                if (_opts.hydrate) {
-                    impl.hydrateTree(_opts, root, curr);
-                    _opts.hydrate = false;
-                }
-                else {
-                    impl.diffTree(_opts, root, prev, curr);
-                }
-                prev = curr;
-            }
-            // check again in case one of the components called cancel
-            isActive && requestAnimationFrame(update);
+const start = (tree, opts = {}, impl = DEFAULT_IMPL) => {
+  const _opts = { root: "app", ...opts };
+  let prev = [];
+  let isActive = true;
+  const root = resolveRoot(_opts.root, impl);
+  const update = () => {
+    if (isActive) {
+      _opts.ctx = derefContext(opts.ctx, _opts.autoDerefKeys);
+      const curr = impl.normalizeTree(_opts, tree);
+      if (curr != null) {
+        if (_opts.hydrate) {
+          impl.hydrateTree(_opts, root, curr);
+          _opts.hydrate = false;
+        } else {
+          impl.diffTree(_opts, root, prev, curr);
         }
-    };
-    requestAnimationFrame(update);
-    return () => (isActive = false);
+        prev = curr;
+      }
+      isActive && requestAnimationFrame(update);
+    }
+  };
+  requestAnimationFrame(update);
+  return () => isActive = false;
+};
+export {
+  start
 };