perf(hdom-canvas): inline type checks, update deps & readme

packages/hdom-canvas/README.md

@@ -15,6 +15,7 @@ This project is part of the
 - [How it works](#how-it-works)
     - [Restrictions & behavior controls](#restrictions--behavior-controls)
     - [HDPI support](#hdpi-support)
+- [SVG conversion](#svg-conversion)
 - [Supported shape types](#supported-shape-types)
     - [Group](#group)
     - [Definition group](#definition-group)
@@ -53,7 +54,7 @@ API draw calls during the hdom update process / cycle.
 
 ### Status
 
-ALPHA - in active development, possibly breaking changes ahead...
+BETA - in active development, possibly breaking changes ahead...
 
 ## Installation
 
@@ -63,8 +64,10 @@ yarn add @thi.ng/hdom-canvas
 
 ## Dependencies
 
+- [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/master/packages/api)
+- [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/master/packages/checks)
+- [@thi.ng/diff](https://github.com/thi-ng/umbrella/tree/master/packages/diff)
 - [@thi.ng/hdom](https://github.com/thi-ng/umbrella/tree/master/packages/hdom)
-- [@thi.ng/vectors](https://github.com/thi-ng/umbrella/tree/master/packages/vectors)
 
 ## Usage examples
 
@@ -150,8 +153,60 @@ canvases simply set the `width` & `height` attribs to:
 ]
 ```
 
+## SVG conversion
+
+Even though the element names & syntax are *very similar* to SVG
+elements, for performance reasons all geometry data given to each shape
+remains un-stringified (only styling attributes are). However, the
+[@thi.ng/hiccup-svg](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup-svg)
+package provides a `convertTree()` function which takes the arguably
+more "raw" shape format used by hdom-canvas and converts an entire shape
+tree into SVG compatible & serializable format. Note: the tree MUST
+first be normalized (if not already) using hdom-canvas'
+`normalizeTree()`.
+
+```ts
+import { serialize } from "@thi.ng/hiccup/serialize";
+import { convertTree, svg } from "@thi.ng/hiccup-svg";
+import { normalizeTree } from "@thi.ng/hdom-canvas";
+
+serialize(
+    svg({ width: 100, height: 100},
+        convertTree(
+            normalizeTree(
+                {}, // default normalization options
+                ["g",
+                    {
+                        fill: "red",
+                        stroke: "none",
+                        translate: [50, 50]
+                    },
+                    ["circle", {}, [0, 0], 25],
+                    ["polygon", { fill: "white" },
+                        [[-10,10],[10,10],[0,-10]]
+                    ]
+                ]
+            )
+        )
+    )
+);
+```
+
+```xml
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
+    <g transform="translate(50.00 50.00)" fill="red" stroke="none">
+        <circle cx="0.00" cy="0.00" r="25.00"/>
+        <polygon points="-10.00,10.00 10.00,10.00 0.00,-10.00" fill="white"/>
+    </g>
+</svg>
+```
+
 ## Supported shape types
 
+In the near future, factory functions for these shape types will be
+provided...
+
+
 ### Group
 
 ```ts

packages/hdom-canvas/package.json

@@ -30,8 +30,8 @@
     "dependencies": {
         "@thi.ng/api": "^4.1.1",
         "@thi.ng/checks": "^1.5.8",
-        "@thi.ng/hdom": "^4.0.5",
-        "@thi.ng/vectors": "^1.1.0"
+        "@thi.ng/diff": "^1.0.23",
+        "@thi.ng/hdom": "^4.0.5"
     },
     "keywords": [
         "ES6",

packages/hdom-canvas/src/index.ts

@@ -1,15 +1,10 @@
 import { IObjectOf } from "@thi.ng/api/api";
-import { implementsFunction } from "@thi.ng/checks/implements-function";
 import { isArray } from "@thi.ng/checks/is-array";
 import { isArrayLike } from "@thi.ng/checks/is-arraylike";
-import { isFunction } from "@thi.ng/checks/is-function";
 import { isNotStringAndIterable } from "@thi.ng/checks/is-not-string-iterable";
-import { isString } from "@thi.ng/checks/is-string";
 import { diffArray } from "@thi.ng/diff/array";
 import { HDOMImplementation, HDOMOpts } from "@thi.ng/hdom/api";
 import { equiv, releaseTree } from "@thi.ng/hdom/diff";
-import { ReadonlyVec } from "@thi.ng/vectors/api";
-import { TAU } from "@thi.ng/vectors/math";
 
 interface DrawState {
     attribs: IObjectOf<any>;
@@ -18,6 +13,10 @@ interface DrawState {
     restore?: boolean;
 }
 
+type ReadonlyVec = ArrayLike<number> & Iterable<number>;
+
+const TAU = Math.PI * 2;
+
 const DEFAULTS = {
     align: "left",
     alpha: 1,
@@ -136,12 +135,15 @@ export const createTree = (_: Partial<HDOMOpts>, canvas: HTMLCanvasElement, tree
 };
 
 export const normalizeTree = (opts: Partial<HDOMOpts>, tree: any) => {
+    if (tree == null) {
+        return tree;
+    }
     if (isArray(tree)) {
         const tag = tree[0];
-        if (isFunction(tag)) {
+        if (typeof tag === "function") {
             return normalizeTree(opts, tag.apply(null, [opts.ctx, ...tree.slice(1)]));
         }
-        if (isString(tag)) {
+        if (typeof tag === "string") {
             const attribs = tree[1];
             if (attribs && attribs.__normalize === false) {
                 return tree;
@@ -153,11 +155,11 @@ export const normalizeTree = (opts: Partial<HDOMOpts>, tree: any) => {
             }
             return res;
         }
-    } else if (isFunction(tree)) {
+    } else if (typeof tree === "function") {
         return normalizeTree(opts, tree(opts.ctx));
-    } else if (implementsFunction(tree, "toHiccup")) {
+    } else if (typeof tree.toHiccup === "function") {
         return normalizeTree(opts, tree.toHiccup(opts.ctx));
-    } else if (implementsFunction(tree, "deref")) {
+    } else if (typeof tree.deref === "function") {
         return normalizeTree(opts, tree.deref());
     } else if (isNotStringAndIterable(tree)) {
         const res = [];

packages/hdom-canvas/test/index.ts

@@ -1,5 +1,5 @@
 // import * as assert from "assert";
-// import * as hiccup-canvas from "../src/index";
+// import * as hc from "../src/index";
 
 describe("hiccup-canvas", () => {
     it("tests pending");