@thi.ng/hdom-canvas 4.1.96 → 4.1.98

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:03Z
+- **Last updated**: 2023-12-11T10:07:09Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/index.js

@@ -7,165 +7,127 @@ import { equiv, releaseTree } from "@thi.ng/hdom/diff";
 import { draw } from "@thi.ng/hiccup-canvas/draw";
 const FN = "function";
 const STR = "string";
-/**
- * Special HTML5 canvas component which injects a branch-local hdom
- * implementation for virtual SVG-like shape components / elements. These
- * elements are then translated into canvas draw commands during the hdom update
- * process.
- *
- * The canvas component automatically adjusts its size for HDPI displays by
- * adding CSS `width` & `height` properties and pre-scaling the drawing context
- * accordingly before shapes are processed.
- *
- * Shape components are expressed in standard hiccup syntax, however with the
- * following restrictions:
- *
- * - Shape component objects with life cycle methods are only partially
- *   supported, i.e. only the
- *   [`ILifecycle.render()`](https://docs.thi.ng/umbrella/hdom/interfaces/ILifecycle.html#render)
- *   &
- *   [`ILifecycle.release()`](https://docs.thi.ng/umbrella/hdom/interfaces/ILifecycle.html#release)
- *   methods are used (Note, for performance reasons `release` methods are
- *   ignored by default. If your shape tree contains stateful components which
- *   use the `release` life cycle method, you'll need to explicitly enable the
- *   canvas component's `__release` attribute by setting it to `true`).
- * - Currently no event listeners can be assigned to shapes (ignored), though
- *   this is planned for a future version. The canvas element itself can of
- *   course have event handlers as usual.
- *
- * All embedded component functions receive the user context object just like
- * normal hdom components.
- *
- * For best performance, it's recommended to ensure all resulting shapes
- * elements are provided in already normalized hiccup format (i.e. `[tag,
- * {attribs}, ...]`). That way the `__normalize: false` control attribute can be
- * added either to the canvas component itself (or to individual shapes /
- * groups), and if present, will skip normalization of all children.
- *
- * @param _ - hdom user context (ignored)
- * @param attribs - canvas attribs
- * @param shapes - shape components
- */
-export const canvas = {
-    render(_, attribs, ...body) {
-        const cattribs = { ...attribs };
-        delete cattribs.__diff;
-        delete cattribs.__normalize;
-        const dpr = window.devicePixelRatio || 1;
-        if (dpr !== 1) {
-            !cattribs.style && (cattribs.style = {});
-            cattribs.style.width = `${cattribs.width}px`;
-            cattribs.style.height = `${cattribs.height}px`;
-            cattribs.width *= dpr;
-            cattribs.height *= dpr;
-        }
-        return [
-            "canvas",
-            cattribs,
-            [
-                "g",
-                {
-                    __impl: IMPL,
-                    __diff: attribs.__diff !== false,
-                    __normalize: attribs.__normalize !== false,
-                    __release: attribs.__release === true,
-                    __serialize: false,
-                    __clear: attribs.__clear,
-                    scale: dpr !== 1 ? dpr : null,
-                },
-                ...body,
-            ],
-        ];
-    },
-};
-/** @internal */
-export const createTree = (_, canvas, tree) => {
-    // console.log(Date.now(), "draw");
-    const ctx = canvas.getContext("2d");
-    assert(!!ctx, "canvas ctx unavailable");
-    const attribs = tree[1];
-    if (attribs) {
-        if (attribs.__skip)
-            return;
-        if (attribs.__clear !== false) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-        }
+const canvas = {
+  render(_, attribs, ...body) {
+    const cattribs = { ...attribs };
+    delete cattribs.__diff;
+    delete cattribs.__normalize;
+    const dpr = window.devicePixelRatio || 1;
+    if (dpr !== 1) {
+      !cattribs.style && (cattribs.style = {});
+      cattribs.style.width = `${cattribs.width}px`;
+      cattribs.style.height = `${cattribs.height}px`;
+      cattribs.width *= dpr;
+      cattribs.height *= dpr;
     }
-    draw(ctx, tree);
+    return [
+      "canvas",
+      cattribs,
+      [
+        "g",
+        {
+          __impl: IMPL,
+          __diff: attribs.__diff !== false,
+          __normalize: attribs.__normalize !== false,
+          __release: attribs.__release === true,
+          __serialize: false,
+          __clear: attribs.__clear,
+          scale: dpr !== 1 ? dpr : null
+        },
+        ...body
+      ]
+    ];
+  }
 };
-/** @internal */
-export const normalizeTree = (opts, tree) => {
-    if (tree == null) {
-        return tree;
-    }
-    if (isArray(tree)) {
-        const tag = tree[0];
-        if (typeof tag === FN) {
-            return normalizeTree(opts, tag.apply(null, [opts.ctx, ...tree.slice(1)]));
-        }
-        if (typeof tag === STR) {
-            const attribs = tree[1];
-            if (attribs && attribs.__normalize === false) {
-                return tree;
-            }
-            const res = [tree[0], attribs];
-            for (let i = 2, n = tree.length; i < n; i++) {
-                const n = normalizeTree(opts, tree[i]);
-                n != null && res.push(n);
-            }
-            return res;
-        }
-    }
-    else if (typeof tree === FN) {
-        return normalizeTree(opts, tree(opts.ctx));
-    }
-    else if (typeof tree.toHiccup === FN) {
-        return normalizeTree(opts, tree.toHiccup(opts.ctx));
-    }
-    else if (typeof tree.deref === FN) {
-        return normalizeTree(opts, tree.deref());
-    }
-    else if (isNotStringAndIterable(tree)) {
-        const res = [];
-        for (let t of tree) {
-            const n = normalizeTree(opts, t);
-            n != null && res.push(n);
-        }
-        return res;
+const createTree = (_, canvas2, tree) => {
+  const ctx = canvas2.getContext("2d");
+  assert(!!ctx, "canvas ctx unavailable");
+  const attribs = tree[1];
+  if (attribs) {
+    if (attribs.__skip)
+      return;
+    if (attribs.__clear !== false) {
+      ctx.clearRect(0, 0, canvas2.width, canvas2.height);
     }
-    return tree;
+  }
+  draw(ctx, tree);
 };
-/** @internal */
-export const diffTree = (opts, parent, prev, curr, child) => {
-    const attribs = curr[1];
-    if (attribs.__skip)
-        return;
-    if (attribs.__diff === false) {
-        releaseTree(prev);
-        return createTree(opts, parent, curr);
+const normalizeTree = (opts, tree) => {
+  if (tree == null) {
+    return tree;
+  }
+  if (isArray(tree)) {
+    const tag = tree[0];
+    if (typeof tag === FN) {
+      return normalizeTree(
+        opts,
+        tag.apply(null, [opts.ctx, ...tree.slice(1)])
+      );
     }
-    // delegate to branch-local implementation
-    let impl = attribs.__impl;
-    if (impl && impl !== IMPL) {
-        return impl.diffTree(opts, parent, prev, curr, child);
+    if (typeof tag === STR) {
+      const attribs = tree[1];
+      if (attribs && attribs.__normalize === false) {
+        return tree;
+      }
+      const res = [tree[0], attribs];
+      for (let i = 2, n = tree.length; i < n; i++) {
+        const n2 = normalizeTree(opts, tree[i]);
+        n2 != null && res.push(n2);
+      }
+      return res;
     }
-    const delta = diffArray(prev, curr, "only-distance", equiv);
-    if (delta.distance > 0) {
-        return createTree(opts, parent, curr);
+  } else if (typeof tree === FN) {
+    return normalizeTree(opts, tree(opts.ctx));
+  } else if (typeof tree.toHiccup === FN) {
+    return normalizeTree(opts, tree.toHiccup(opts.ctx));
+  } else if (typeof tree.deref === FN) {
+    return normalizeTree(opts, tree.deref());
+  } else if (isNotStringAndIterable(tree)) {
+    const res = [];
+    for (let t of tree) {
+      const n = normalizeTree(opts, t);
+      n != null && res.push(n);
     }
+    return res;
+  }
+  return tree;
+};
+const diffTree = (opts, parent, prev, curr, child) => {
+  const attribs = curr[1];
+  if (attribs.__skip)
+    return;
+  if (attribs.__diff === false) {
+    releaseTree(prev);
+    return createTree(opts, parent, curr);
+  }
+  let impl = attribs.__impl;
+  if (impl && impl !== IMPL) {
+    return impl.diffTree(opts, parent, prev, curr, child);
+  }
+  const delta = diffArray(prev, curr, "only-distance", equiv);
+  if (delta.distance > 0) {
+    return createTree(opts, parent, curr);
+  }
+};
+const IMPL = {
+  createTree,
+  normalizeTree,
+  diffTree,
+  hydrateTree: NO_OP,
+  getElementById: NO_OP,
+  createElement: NO_OP,
+  createTextElement: NO_OP,
+  replaceChild: NO_OP,
+  getChild: NO_OP,
+  removeAttribs: NO_OP,
+  removeChild: NO_OP,
+  setAttrib: NO_OP,
+  setContent: NO_OP
 };
-export const IMPL = {
-    createTree,
-    normalizeTree,
-    diffTree,
-    hydrateTree: NO_OP,
-    getElementById: NO_OP,
-    createElement: NO_OP,
-    createTextElement: NO_OP,
-    replaceChild: NO_OP,
-    getChild: NO_OP,
-    removeAttribs: NO_OP,
-    removeChild: NO_OP,
-    setAttrib: NO_OP,
-    setContent: NO_OP,
+export {
+  IMPL,
+  canvas,
+  createTree,
+  diffTree,
+  normalizeTree
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hdom-canvas",
-  "version": "4.1.96",
+  "version": "4.1.98",
   "description": "@thi.ng/hdom component wrapper for declarative canvas scenegraphs",
   "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 draw",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -36,15 +38,16 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/checks": "^3.4.11",
-    "@thi.ng/diff": "^5.1.44",
-    "@thi.ng/errors": "^2.4.5",
-    "@thi.ng/hdom": "^9.3.31",
-    "@thi.ng/hiccup-canvas": "^2.4.11"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/checks": "^3.4.12",
+    "@thi.ng/diff": "^5.1.45",
+    "@thi.ng/errors": "^2.4.6",
+    "@thi.ng/hdom": "^9.4.0",
+    "@thi.ng/hiccup-canvas": "^2.4.13"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -90,5 +93,5 @@
     ],
     "year": 2018
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "22e36fa838e5431d40165384918b395603bbd92f\n"
 }