@thi.ng/hdom-components 4.0.47 → 5.0.3

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@thi.ng/hdom-components",
-    "version": "4.0.47",
+    "version": "5.0.3",
     "description": "Raw, skinnable UI & SVG components for @thi.ng/hdom",
+    "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,33 +24,26 @@
     "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 utils",
-        "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 utils",
+        "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"
+        "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/adapt-dpi": "^1.0.23",
-        "@thi.ng/api": "^7.1.9",
-        "@thi.ng/checks": "^2.9.10",
-        "@thi.ng/math": "^4.0.5",
-        "@thi.ng/transducers": "^7.9.1",
-        "@thi.ng/transducers-stats": "^1.1.73"
+        "@thi.ng/adapt-dpi": "^2.0.3",
+        "@thi.ng/api": "^8.0.3",
+        "@thi.ng/checks": "^3.0.3",
+        "@thi.ng/math": "^5.0.3",
+        "@thi.ng/transducers": "^8.0.3",
+        "@thi.ng/transducers-stats": "^2.0.3"
+    },
+    "devDependencies": {
+        "@thi.ng/testament": "^0.1.3"
     },
-    "files": [
-        "*.js",
-        "*.d.ts",
-        "lib",
-        "utils"
-    ],
     "keywords": [
         "browser",
         "typescript"
@@ -58,11 +51,59 @@
     "publishConfig": {
         "access": "public"
     },
-    "sideEffects": false,
+    "engines": {
+        "node": ">=12.7"
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "utils"
+    ],
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./button-group": {
+            "import": "./button-group.js"
+        },
+        "./button": {
+            "import": "./button.js"
+        },
+        "./canvas": {
+            "import": "./canvas.js"
+        },
+        "./dropdown": {
+            "import": "./dropdown.js"
+        },
+        "./fps-counter": {
+            "import": "./fps-counter.js"
+        },
+        "./link": {
+            "import": "./link.js"
+        },
+        "./notification": {
+            "import": "./notification.js"
+        },
+        "./pager": {
+            "import": "./pager.js"
+        },
+        "./sparkline": {
+            "import": "./sparkline.js"
+        },
+        "./title": {
+            "import": "./title.js"
+        },
+        "./toggle": {
+            "import": "./toggle.js"
+        },
+        "./utils/merge-attribs": {
+            "import": "./utils/merge-attribs.js"
+        }
+    },
     "thi.ng": {
         "parent": "@thi.ng/hdom",
         "status": "beta",
         "year": 2018
     },
-    "gitHead": "84a067278ef79ccd538eeb652046eb8e03f3e34e"
+    "gitHead": "1fb38cac74d6c009d96855c28784a267a81badf1"
 }

package/pager.js

@@ -1,4 +1,5 @@
-import { map, range } from "@thi.ng/transducers";
+import { map } from "@thi.ng/transducers/map";
+import { range } from "@thi.ng/transducers/range";
 /**
  * Higher order container component for paged navigation buttons. The
  * returned component function takes these arguments:
@@ -44,7 +45,14 @@ import { map, range } from "@thi.ng/transducers";
  * @param opts -
  */
 export const pager = (_opts) => {
-    const opts = Object.assign({ navStep: 1, labelFirst: "<<", labelPrev: "<", labelNext: ">", labelLast: ">>" }, _opts);
+    const opts = {
+        navStep: 1,
+        labelFirst: "<<",
+        labelPrev: "<",
+        labelNext: ">",
+        labelLast: ">>",
+        ..._opts,
+    };
     return (_, id, num, pageLen = 10, maxBts = 5) => {
         const bt = opts.button;
         const step = opts.navStep;

package/sparkline.js

@@ -1,5 +1,6 @@
-import { fitClamped } from "@thi.ng/math";
-import { mapIndexed, str } from "@thi.ng/transducers";
+import { fitClamped } from "@thi.ng/math/fit";
+import { mapIndexed } from "@thi.ng/transducers/map-indexed";
+import { str } from "@thi.ng/transducers/str";
 /**
  * Customizable, stateless SVG sparkline component.
  *
@@ -8,7 +9,15 @@ import { mapIndexed, str } from "@thi.ng/transducers";
  * @param vals - data values
  */
 export const sparkline = (_, _opts, vals) => {
-    const opts = Object.assign({ min: 0, max: 100, width: 50, height: 16, col: "red", r: 1.5 }, _opts);
+    const opts = {
+        min: 0,
+        max: 100,
+        width: 50,
+        height: 16,
+        col: "red",
+        r: 1.5,
+        ..._opts,
+    };
     const n = vals.length;
     const s = opts.width / n;
     const r = opts.r;

package/title.js

@@ -15,7 +15,13 @@
  * @param opts -
  */
 export const title = (_opts) => {
-    const opts = Object.assign({ element: "h1", attribs: {}, subElement: "small", subAttribs: {} }, _opts);
+    const opts = {
+        element: "h1",
+        attribs: {},
+        subElement: "small",
+        subAttribs: {},
+        ..._opts,
+    };
     return (_, title, subtitle) => [
         opts.element,
         opts.attribs,

package/toggle.js

@@ -9,7 +9,11 @@ const DEFAULT_OPTS = {
     fgOff: { fill: "#fff" },
 };
 export const slideToggleDot = (opts = {}) => {
-    const _opts = Object.assign(Object.assign({ r: 5 }, DEFAULT_OPTS), opts);
+    const _opts = {
+        r: 5,
+        ...DEFAULT_OPTS,
+        ...opts,
+    };
     const { r, pad, margin, vertical } = _opts;
     const m2 = margin * 2;
     const br = r + pad;
@@ -22,20 +26,35 @@ export const slideToggleDot = (opts = {}) => {
         ? { width: totalH, height: totalW }
         : { width: totalW, height: totalH };
     const style = { transition: `all ${_opts.anim}ms ease-out` };
-    const bgOn = Object.assign(Object.assign({ x: margin, y: margin, rx: br, ry: br }, (vertical ? { width: height, height: width } : { width, height })), _opts.bgOn);
-    const bgOff = Object.assign(Object.assign({}, bgOn), _opts.bgOff);
-    const shapeOn = Object.assign(Object.assign(Object.assign({}, (vertical ? { cx, cy: cx } : { cx: width + margin - br, cy: cx })), _opts.fgOn), { style,
-        r });
-    const shapeOff = Object.assign(Object.assign(Object.assign({}, shapeOn), (vertical ? { cy: width + margin - br } : { cx })), _opts.fgOff);
-    return (_, attribs, state) => [
-        "svg",
-        Object.assign(Object.assign({}, svgSize), attribs),
-        ["rect", state ? bgOn : bgOff],
-        ["circle", state ? shapeOn : shapeOff],
-    ];
+    const bgOn = {
+        x: margin,
+        y: margin,
+        rx: br,
+        ry: br,
+        ...(vertical ? { width: height, height: width } : { width, height }),
+        ..._opts.bgOn,
+    };
+    const bgOff = { ...bgOn, ..._opts.bgOff };
+    const shapeOn = {
+        ...(vertical ? { cx, cy: cx } : { cx: width + margin - br, cy: cx }),
+        ..._opts.fgOn,
+        style,
+        r,
+    };
+    const shapeOff = {
+        ...shapeOn,
+        ...(vertical ? { cy: width + margin - br } : { cx }),
+        ..._opts.fgOff,
+    };
+    return $toggle("circle", svgSize, bgOn, bgOff, shapeOn, shapeOff);
 };
 export const slideToggleRect = (opts = {}) => {
-    const _opts = Object.assign(Object.assign({ w: 10, h: 10 }, DEFAULT_OPTS), opts);
+    const _opts = {
+        w: 10,
+        h: 10,
+        ...DEFAULT_OPTS,
+        ...opts,
+    };
     const { w, h, pad, margin, vertical } = _opts;
     const m2 = margin * 2;
     const pm = pad + margin;
@@ -43,17 +62,33 @@ export const slideToggleRect = (opts = {}) => {
     const height = vertical ? (h + pad) * 2 : h + pad * 2;
     const svgSize = { width: width + m2, height: height + m2 };
     const style = { transition: `all ${_opts.anim}ms ease-out` };
-    const bgOn = Object.assign(Object.assign({}, _opts.bgOn), { width,
-        height, x: margin, y: margin });
-    const bgOff = Object.assign(Object.assign({}, bgOn), _opts.bgOff);
-    const shapeOn = Object.assign(Object.assign(Object.assign({}, (vertical
-        ? { x: pm, y: pm }
-        : { x: width + margin - pad - w, y: pm })), _opts.fgOn), { style, width: w, height: h });
-    const shapeOff = Object.assign(Object.assign(Object.assign({}, shapeOn), (vertical ? { y: height + margin - pad - h } : { x: pm })), _opts.fgOff);
-    return (_, attribs, state) => [
-        "svg",
-        Object.assign(Object.assign({}, svgSize), attribs),
-        ["rect", state ? bgOn : bgOff],
-        ["rect", state ? shapeOn : shapeOff],
-    ];
+    const bgOn = {
+        ..._opts.bgOn,
+        width,
+        height,
+        x: margin,
+        y: margin,
+    };
+    const bgOff = { ...bgOn, ..._opts.bgOff };
+    const shapeOn = {
+        ...(vertical
+            ? { x: pm, y: pm }
+            : { x: width + margin - pad - w, y: pm }),
+        ..._opts.fgOn,
+        style,
+        width: w,
+        height: h,
+    };
+    const shapeOff = {
+        ...shapeOn,
+        ...(vertical ? { y: height + margin - pad - h } : { x: pm }),
+        ..._opts.fgOff,
+    };
+    return $toggle("rect", svgSize, bgOn, bgOff, shapeOn, shapeOff);
 };
+const $toggle = (shape, size, bgOn, bgOff, shapeOn, shapeOff) => (_, attribs, state) => [
+    "svg",
+    { ...size, ...attribs },
+    ["rect", state ? bgOn : bgOff],
+    [shape, state ? shapeOn : shapeOff],
+];

package/utils/merge-attribs.js

@@ -11,8 +11,8 @@
 export const mergeAttribs = (base, xs) => {
     if (!xs)
         return base;
-    const res = Object.assign(Object.assign({}, base), xs);
+    const res = { ...base, ...xs };
     base.class && xs.class && (res.class = base.class + " " + xs.class);
-    base.style && xs.style && (res.style = Object.assign(Object.assign({}, base.style), xs.style));
+    base.style && xs.style && (res.style = { ...base.style, ...xs.style });
     return res;
 };

package/lib/index.js

@@ -1,333 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var adaptDpi = require('@thi.ng/adapt-dpi');
-var transducers = require('@thi.ng/transducers');
-var transducersStats = require('@thi.ng/transducers-stats');
-var math = require('@thi.ng/math');
-var checks = require('@thi.ng/checks');
-
-const mergeAttribs = (base, xs) => {
-    if (!xs)
-        return base;
-    const res = Object.assign(Object.assign({}, base), xs);
-    base.class && xs.class && (res.class = base.class + " " + xs.class);
-    base.style && xs.style && (res.style = Object.assign(Object.assign({}, base.style), xs.style));
-    return res;
-};
-
-const button = (opts) => {
-    opts = Object.assign({ tag: "a", tagDisabled: "span", preventDefault: true, attribs: {} }, opts);
-    !opts.attribs.role && (opts.attribs.role = "button");
-    return (_, args, ...body) => args.disabled
-        ? [
-            opts.tagDisabled,
-            Object.assign(Object.assign({}, mergeAttribs(opts.attribsDisabled, args.attribs)), { disabled: true }),
-            ...body,
-        ]
-        : [
-            opts.tag,
-            Object.assign(Object.assign({}, mergeAttribs(opts.attribs, args.attribs)), { onclick: opts.preventDefault
-                    ? (e) => (e.preventDefault(), args.onclick(e))
-                    : args.onclick }),
-            ...body,
-        ];
-};
-
-const buttonGroup = (opts) => (_, args, ...buttons) => [
-    "div",
-    mergeAttribs(opts.attribs, args.attribs),
-    ...groupBody(opts, args.disabled, buttons),
-];
-const groupBody = (opts, disabled, buttons) => {
-    switch (buttons.length) {
-        case 0:
-            return [];
-        case 1:
-            return [bt(opts.inner || opts.first, disabled, buttons[0])];
-        case 2:
-            return [
-                bt(opts.first, disabled, buttons[0]),
-                bt(opts.last || opts.first, disabled, buttons[1]),
-            ];
-        default: {
-            const res = [bt(opts.first, disabled, buttons[0])];
-            const el = opts.inner || opts.first;
-            const n = buttons.length - 1;
-            for (let i = 1; i < n; i++) {
-                res[i] = bt(el, disabled, buttons[i]);
-            }
-            res[n] = bt(opts.last || opts.first, disabled, buttons[n]);
-            return res;
-        }
-    }
-};
-const bt = (el, disabled, bt) => disabled ? [el, Object.assign(Object.assign({}, bt[0]), { disabled: true }), ...bt.slice(1)] : [el, ...bt];
-
-const _canvas = (type, handlers, opts) => {
-    let el;
-    let ctx;
-    let frame = 0;
-    let time = 0;
-    return {
-        init(_el, hctx, ...args) {
-            el = _el;
-            adaptDpi.adaptDPI(el, el.width, el.height);
-            ctx = el.getContext(type, opts);
-            time = Date.now();
-            handlers.init && handlers.init(el, ctx, hctx, ...args);
-            handlers.update &&
-                handlers.update(el, ctx, hctx, time, frame++, ...args);
-        },
-        render(hctx, ...args) {
-            ctx &&
-                handlers.update &&
-                handlers.update(el, ctx, hctx, Date.now() - time, frame++, ...args);
-            return ["canvas", args[0]];
-        },
-        release(hctx, ...args) {
-            handlers.release && handlers.release(el, ctx, hctx, ...args);
-        },
-    };
-};
-const canvasWebGL = (handlers, opts) => _canvas("webgl", handlers, opts);
-const canvasWebGL2 = (handlers, opts) => _canvas("webgl2", handlers, opts);
-const canvas2D = (handlers, opts) => _canvas("2d", handlers, opts);
-
-const option = ([value, label, disabled], sel) => [
-    "option",
-    { value, disabled: !!disabled, selected: value === sel },
-    label,
-];
-const optgroup = (attribs, options, sel) => [
-    "optgroup",
-    Object.assign(Object.assign({}, attribs), { label: attribs.label || "--" }),
-    ...options.map((o) => option(o, sel)),
-];
-const dropdown = (_, attribs, options, sel) => ["select", attribs, ...options.map((o) => option(o, sel))];
-const groupedDropdown = (_, attribs, groups, sel) => ["select", attribs, ...groups.map((o) => optgroup(o[0], o[1], sel))];
-
-const sparkline = (_, _opts, vals) => {
-    const opts = Object.assign({ min: 0, max: 100, width: 50, height: 16, col: "red", r: 1.5 }, _opts);
-    const n = vals.length;
-    const s = opts.width / n;
-    const r = opts.r;
-    const h = opts.height - r;
-    return [
-        "svg",
-        {
-            width: opts.width + 2 * r,
-            height: opts.height,
-            stroke: opts.col,
-            fill: "none",
-        },
-        [
-            "polyline",
-            {
-                points: transducers.str(",", transducers.mapIndexed((i, y) => [
-                    (i * s) | 0,
-                    math.fitClamped(y, opts.min, opts.max, h, r) | 0,
-                ], 0, vals)),
-            },
-        ],
-        [
-            "circle",
-            {
-                cx: ((n - 1) * s) | 0,
-                cy: math.fitClamped(vals[n - 1], opts.min, opts.max, h, r) | 0,
-                r,
-                fill: opts.col,
-            },
-        ],
-    ];
-};
-
-const fpsCounter = (_opts) => {
-    const opts = Object.assign({ history: 25, smooth: 5, labelPeriod: 250, sparkline: {} }, _opts);
-    return {
-        init() {
-            this.last = Date.now();
-            this.lastLabel = this.last;
-            this.buffer = [];
-            this.ma = transducers.step(transducersStats.sma(opts.smooth));
-        },
-        render() {
-            const t = Date.now();
-            const fps = 1000 / (t - this.last);
-            this.last = t;
-            if (!this.buffer)
-                return ["div"];
-            const smoothFps = this.ma(fps);
-            if (!smoothFps)
-                return ["div"];
-            this.buffer.push(smoothFps);
-            this.buffer.length > opts.history && this.buffer.shift();
-            const updateLabel = t - this.lastLabel > opts.labelPeriod;
-            updateLabel && (this.lastLabel = t);
-            return [
-                "div",
-                [
-                    sparkline,
-                    Object.assign({ min: 0, max: 65 }, opts.sparkline),
-                    this.buffer,
-                ],
-                [
-                    "span",
-                    { __skip: !updateLabel },
-                    smoothFps ? smoothFps.toFixed(2) + " fps" : "",
-                ],
-            ];
-        },
-    };
-};
-
-const link = (attribs, body) => [
-    "a",
-    checks.isString(attribs) ? { href: attribs } : attribs,
-    body,
-];
-const appLink = (_, attribs, onclick, body) => [
-    "a",
-    Object.assign({ href: "#", onclick: (e) => {
-            e.preventDefault();
-            onclick(e);
-        } }, attribs),
-    body,
-];
-
-const notification = (opts = {}) => {
-    return (_, args, body) => [
-        "div",
-        Object.assign(Object.assign({}, opts.attribs), args.attribs),
-        opts.icon,
-        body,
-        opts.close && args.onclose
-            ? [appLink, opts.attribsClose, args.onclose, opts.close]
-            : undefined,
-    ];
-};
-
-const pager = (_opts) => {
-    const opts = Object.assign({ navStep: 1, labelFirst: "<<", labelPrev: "<", labelNext: ">", labelLast: ">>" }, _opts);
-    return (_, id, num, pageLen = 10, maxBts = 5) => {
-        const bt = opts.button;
-        const step = opts.navStep;
-        const maxID = Math.floor(Math.max(0, num - 1) / pageLen);
-        id = Math.max(Math.min(id, maxID), 0);
-        return [
-            opts.root,
-            [
-                opts.groupPrev,
-                bt(0, id, maxID, opts.labelFirst, !id),
-                bt(Math.max(id - step, 0), id, maxID, opts.labelPrev, !id),
-            ],
-            [
-                opts.groupPages,
-                transducers.map((i) => bt(i, id, maxID, i + 1, i === id), pageRange(id, maxID, maxBts)),
-            ],
-            [
-                opts.groupNext,
-                bt(Math.min(id + step, maxID), id, maxID, opts.labelNext, id >= maxID),
-                bt(maxID, id, maxID, opts.labelLast, id >= maxID),
-            ],
-        ];
-    };
-};
-const pageRange = (id, maxID, maxBt) => {
-    if (maxID > maxBt - 1) {
-        const from = Math.max(Math.min(id - (maxBt >> 1), maxID - maxBt + 1), 0);
-        return transducers.range(from, from + maxBt);
-    }
-    return transducers.range(0, maxID + 1);
-};
-
-const title = (_opts) => {
-    const opts = Object.assign({ element: "h1", attribs: {}, subElement: "small", subAttribs: {} }, _opts);
-    return (_, title, subtitle) => [
-        opts.element,
-        opts.attribs,
-        title,
-        subtitle ? [opts.subElement, opts.subAttribs, subtitle] : undefined,
-    ];
-};
-
-const DEFAULT_OPTS = {
-    anim: 100,
-    pad: 1,
-    margin: 0,
-    vertical: false,
-    bgOn: { fill: "#000" },
-    bgOff: { fill: "#999" },
-    fgOn: { fill: "#fff" },
-    fgOff: { fill: "#fff" },
-};
-const slideToggleDot = (opts = {}) => {
-    const _opts = Object.assign(Object.assign({ r: 5 }, DEFAULT_OPTS), opts);
-    const { r, pad, margin, vertical } = _opts;
-    const m2 = margin * 2;
-    const br = r + pad;
-    const cx = br + margin;
-    const width = (r * 2 + pad) * 2;
-    const height = br * 2;
-    const totalW = width + m2;
-    const totalH = height + m2;
-    const svgSize = vertical
-        ? { width: totalH, height: totalW }
-        : { width: totalW, height: totalH };
-    const style = { transition: `all ${_opts.anim}ms ease-out` };
-    const bgOn = Object.assign(Object.assign({ x: margin, y: margin, rx: br, ry: br }, (vertical ? { width: height, height: width } : { width, height })), _opts.bgOn);
-    const bgOff = Object.assign(Object.assign({}, bgOn), _opts.bgOff);
-    const shapeOn = Object.assign(Object.assign(Object.assign({}, (vertical ? { cx, cy: cx } : { cx: width + margin - br, cy: cx })), _opts.fgOn), { style,
-        r });
-    const shapeOff = Object.assign(Object.assign(Object.assign({}, shapeOn), (vertical ? { cy: width + margin - br } : { cx })), _opts.fgOff);
-    return (_, attribs, state) => [
-        "svg",
-        Object.assign(Object.assign({}, svgSize), attribs),
-        ["rect", state ? bgOn : bgOff],
-        ["circle", state ? shapeOn : shapeOff],
-    ];
-};
-const slideToggleRect = (opts = {}) => {
-    const _opts = Object.assign(Object.assign({ w: 10, h: 10 }, DEFAULT_OPTS), opts);
-    const { w, h, pad, margin, vertical } = _opts;
-    const m2 = margin * 2;
-    const pm = pad + margin;
-    const width = vertical ? w + pad * 2 : (w + pad) * 2;
-    const height = vertical ? (h + pad) * 2 : h + pad * 2;
-    const svgSize = { width: width + m2, height: height + m2 };
-    const style = { transition: `all ${_opts.anim}ms ease-out` };
-    const bgOn = Object.assign(Object.assign({}, _opts.bgOn), { width,
-        height, x: margin, y: margin });
-    const bgOff = Object.assign(Object.assign({}, bgOn), _opts.bgOff);
-    const shapeOn = Object.assign(Object.assign(Object.assign({}, (vertical
-        ? { x: pm, y: pm }
-        : { x: width + margin - pad - w, y: pm })), _opts.fgOn), { style, width: w, height: h });
-    const shapeOff = Object.assign(Object.assign(Object.assign({}, shapeOn), (vertical ? { y: height + margin - pad - h } : { x: pm })), _opts.fgOff);
-    return (_, attribs, state) => [
-        "svg",
-        Object.assign(Object.assign({}, svgSize), attribs),
-        ["rect", state ? bgOn : bgOff],
-        ["rect", state ? shapeOn : shapeOff],
-    ];
-};
-
-exports.appLink = appLink;
-exports.button = button;
-exports.buttonGroup = buttonGroup;
-exports.canvas2D = canvas2D;
-exports.canvasWebGL = canvasWebGL;
-exports.canvasWebGL2 = canvasWebGL2;
-exports.dropdown = dropdown;
-exports.fpsCounter = fpsCounter;
-exports.groupedDropdown = groupedDropdown;
-exports.link = link;
-exports.mergeAttribs = mergeAttribs;
-exports.notification = notification;
-exports.optgroup = optgroup;
-exports.option = option;
-exports.pager = pager;
-exports.slideToggleDot = slideToggleDot;
-exports.slideToggleRect = slideToggleRect;
-exports.sparkline = sparkline;
-exports.title = title;