@thi.ng/hdom-components 5.1.81 → 5.1.83

package/CHANGELOG.md

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

package/button-group.js

@@ -1,47 +1,33 @@
 import { mergeAttribs } from "./utils/merge-attribs.js";
-/**
- * Higher order function to create a new stateless button group
- * component, pre-configured via user supplied options. The returned
- * component function accepts the following arguments:
- *
- * - hdom context object (unused)
- * - partial {@link ButtonGroupArgs} object (extra attribs, disabled flag)
- * - button group items (varargs)
- *
- * Any `attribs` provided as arg via {@link ButtonGroupArgs} are merged with
- * the default options provided to the HOF. If `disabled` is true, ALL
- * buttons in the group will be disabled, regardless of their individual
- * settings. The group can have any number of elements, given as
- * varargs.
- *
- * @param opts -
- */
-export const buttonGroup = (opts) => (_, args, ...buttons) => [
-    "div",
-    mergeAttribs(opts.attribs, args.attribs),
-    ...groupBody(opts, args.disabled, buttons),
+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;
-        }
+  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, bt2) => disabled ? [el, { ...bt2[0], disabled: true }, ...bt2.slice(1)] : [el, ...bt2];
+export {
+  buttonGroup
 };
-const bt = (el, disabled, bt) => disabled ? [el, { ...bt[0], disabled: true }, ...bt.slice(1)] : [el, ...bt];

package/button.js

@@ -1,45 +1,29 @@
 import { mergeAttribs } from "./utils/merge-attribs.js";
-/**
- * Higher order function to create a new stateless button component,
- * pre-configured via user supplied options. The returned component
- * function accepts the following arguments:
- *
- * - hdom context object (unused)
- * - partial {@link ButtonArgs} object (extra attribs, onclick, disabled)
- * - body content (varargs)
- *
- * Any `attribs` provided as arg via {@link ButtonArgs} are merged with the
- * default options provided to the HOF. The `disabled` arg decides which
- * button version to create. The button can have any number of body
- * elements (e.g. icon and label), given as varargs.
- */
-export const button = (opts) => {
-    // init with defaults
-    opts = {
-        tag: "a",
-        tagDisabled: "span",
-        preventDefault: true,
-        attribs: {},
-        ...opts,
-    };
-    !opts.attribs.role && (opts.attribs.role = "button");
-    return (_, args, ...body) => args.disabled
-        ? [
-            opts.tagDisabled,
-            {
-                ...mergeAttribs(opts.attribsDisabled, args.attribs),
-                disabled: true,
-            },
-            ...body,
-        ]
-        : [
-            opts.tag,
-            {
-                ...mergeAttribs(opts.attribs, args.attribs),
-                onclick: opts.preventDefault
-                    ? (e) => (e.preventDefault(), args.onclick(e))
-                    : args.onclick,
-            },
-            ...body,
-        ];
+const button = (opts) => {
+  opts = {
+    tag: "a",
+    tagDisabled: "span",
+    preventDefault: true,
+    attribs: {},
+    ...opts
+  };
+  !opts.attribs.role && (opts.attribs.role = "button");
+  return (_, args, ...body) => args.disabled ? [
+    opts.tagDisabled,
+    {
+      ...mergeAttribs(opts.attribsDisabled, args.attribs),
+      disabled: true
+    },
+    ...body
+  ] : [
+    opts.tag,
+    {
+      ...mergeAttribs(opts.attribs, args.attribs),
+      onclick: opts.preventDefault ? (e) => (e.preventDefault(), args.onclick(e)) : args.onclick
+    },
+    ...body
+  ];
+};
+export {
+  button
 };

package/canvas.js

@@ -1,75 +1,39 @@
 import { adaptDPI } from "@thi.ng/adapt-dpi";
-/**
- * Configurable canvas component. Used as common base for {@link canvasWebGL}
- * and {@link canvas2D} wrappers.
- *
- * @param type - canvas context type
- * @param handlers - user handlers
- * @param opts - canvas context creation options
- */
 const _canvas = (type, handlers, opts) => {
-    let el;
-    let ctx;
-    let frame = 0;
-    let time = 0;
-    return {
-        init(_el, hctx, ...args) {
-            el = _el;
-            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);
-        },
-    };
+  let el;
+  let ctx;
+  let frame = 0;
+  let time = 0;
+  return {
+    init(_el, hctx, ...args) {
+      el = _el;
+      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);
+export {
+  canvas2D,
+  canvasWebGL,
+  canvasWebGL2
 };
-/**
- * Higher order WebGL canvas component delegating to user provided
- * handlers.
- *
- * @remarks
- * Since this is an higher order component, if used within a non-static
- * parent component, this function itself cannot be directly inlined
- * into hdom tree and must be initialized prior/outside, however the
- * returned component can be used as normal.
- *
- * @example
- * ```ts
- * const glcanvas = canvasWebGL({
- *   render(canv, gl, hctx, time, frame, ...args) {
- *     const col = 0.5 + 0.5 * Math.sin(time);
- *     gl.clearColor(col, col, col, 1);
- *   }
- * });
- * ...
- * [glcanvas, {id: "foo", width: 640, height: 480}]
- * ```
- *
- * @param handlers - user provided handlers
- * @param opts - canvas context creation options
- */
-export const canvasWebGL = (handlers, opts) => _canvas("webgl", handlers, opts);
-/**
- * Same as {@link canvasWebGL} but targets WebGL2.
- *
- * @param handlers - user provided handlers
- * @param opts - canvas context creation options
- */
-export const canvasWebGL2 = (handlers, opts) => _canvas("webgl2", handlers, opts);
-/**
- * Similar to {@link canvasWebGL}, but targets default 2D drawing context.
- *
- * @param handlers - user provided handlers
- * @param glopts - canvas context creation options
- */
-export const canvas2D = (handlers, opts) => _canvas("2d", handlers, opts);

package/dropdown.js

@@ -1,12 +1,18 @@
-export const option = ([value, label, disabled], sel) => [
-    "option",
-    { value, disabled: !!disabled, selected: value === sel },
-    label,
+const option = ([value, label, disabled], sel) => [
+  "option",
+  { value, disabled: !!disabled, selected: value === sel },
+  label
 ];
-export const optgroup = (attribs, options, sel) => [
-    "optgroup",
-    { ...attribs, label: attribs.label || "--" },
-    ...options.map((o) => option(o, sel)),
+const optgroup = (attribs, options, sel) => [
+  "optgroup",
+  { ...attribs, label: attribs.label || "--" },
+  ...options.map((o) => option(o, sel))
 ];
-export const dropdown = (_, attribs, options, sel) => ["select", attribs, ...options.map((o) => option(o, sel))];
-export const groupedDropdown = (_, attribs, groups, sel) => ["select", attribs, ...groups.map((o) => optgroup(o[0], o[1], 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))];
+export {
+  dropdown,
+  groupedDropdown,
+  optgroup,
+  option
+};

package/fps-counter.js

@@ -1,53 +1,50 @@
 import { sma } from "@thi.ng/transducers-stats/sma";
 import { step } from "@thi.ng/transducers/step";
 import { sparkline } from "./sparkline.js";
-/**
- * Customizable FPS counter with sparkline visualization of N previous
- * frames.
- *
- * @param opts -
- */
-export const fpsCounter = (_opts) => {
-    const opts = {
-        history: 25,
-        smooth: 5,
-        labelPeriod: 250,
-        sparkline: {},
-        ..._opts,
-    };
-    return {
-        init() {
-            this.last = Date.now();
-            this.lastLabel = this.last;
-            this.buffer = [];
-            this.ma = step(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,
-                    { min: 0, max: 65, ...opts.sparkline },
-                    this.buffer,
-                ],
-                [
-                    "span",
-                    { __skip: !updateLabel },
-                    smoothFps ? smoothFps.toFixed(2) + " fps" : "",
-                ],
-            ];
-        },
-    };
+const fpsCounter = (_opts) => {
+  const opts = {
+    history: 25,
+    smooth: 5,
+    labelPeriod: 250,
+    sparkline: {},
+    ..._opts
+  };
+  return {
+    init() {
+      this.last = Date.now();
+      this.lastLabel = this.last;
+      this.buffer = [];
+      this.ma = step(sma(opts.smooth));
+    },
+    render() {
+      const t = Date.now();
+      const fps = 1e3 / (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,
+          { min: 0, max: 65, ...opts.sparkline },
+          this.buffer
+        ],
+        [
+          "span",
+          { __skip: !updateLabel },
+          smoothFps ? smoothFps.toFixed(2) + " fps" : ""
+        ]
+      ];
+    }
+  };
+};
+export {
+  fpsCounter
 };

package/link.js

@@ -1,18 +1,22 @@
 import { isString } from "@thi.ng/checks/is-string";
-export const link = (attribs, body) => [
-    "a",
-    isString(attribs) ? { href: attribs } : attribs,
-    body,
+const link = (attribs, body) => [
+  "a",
+  isString(attribs) ? { href: attribs } : attribs,
+  body
 ];
-export const appLink = (_, attribs, onclick, body) => [
-    "a",
-    {
-        href: "#",
-        onclick: (e) => {
-            e.preventDefault();
-            onclick(e);
-        },
-        ...attribs,
+const appLink = (_, attribs, onclick, body) => [
+  "a",
+  {
+    href: "#",
+    onclick: (e) => {
+      e.preventDefault();
+      onclick(e);
     },
-    body,
+    ...attribs
+  },
+  body
 ];
+export {
+  appLink,
+  link
+};

package/notification.js

@@ -1,28 +1,13 @@
 import { appLink } from "./link.js";
-/**
- * Higher order function to create a new stateless notification
- * component, pre-configured via user supplied options. The returned
- * component function accepts the following arguments:
- *
- * - hdom context object (unused)
- * - partial {@link NotificationArgs} object (extra attribs, onclose handler)
- * - body content
- *
- * Any `attribs` provided as arg via {@link NotificationArgs} are merged with
- * the default options provided to the HOF. If the notification body
- * consists of multiple elements then they will need to be wrapped in a
- * container element.
- *
- * @param opts -
- */
-export const notification = (opts = {}) => {
-    return (_, args, body) => [
-        "div",
-        { ...opts.attribs, ...args.attribs },
-        opts.icon,
-        body,
-        opts.close && args.onclose
-            ? [appLink, opts.attribsClose, args.onclose, opts.close]
-            : undefined,
-    ];
+const notification = (opts = {}) => {
+  return (_, args, body) => [
+    "div",
+    { ...opts.attribs, ...args.attribs },
+    opts.icon,
+    body,
+    opts.close && args.onclose ? [appLink, opts.attribsClose, args.onclose, opts.close] : void 0
+  ];
+};
+export {
+  notification
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hdom-components",
-  "version": "5.1.81",
+  "version": "5.1.83",
   "description": "Raw, skinnable UI & SVG components for @thi.ng/hdom",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "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 utils",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,15 +35,16 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/adapt-dpi": "^2.2.27",
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/checks": "^3.4.11",
-    "@thi.ng/math": "^5.7.6",
-    "@thi.ng/transducers": "^8.8.14",
-    "@thi.ng/transducers-stats": "^2.1.81"
+    "@thi.ng/adapt-dpi": "^2.2.28",
+    "@thi.ng/api": "^8.9.13",
+    "@thi.ng/checks": "^3.4.13",
+    "@thi.ng/math": "^5.7.8",
+    "@thi.ng/transducers": "^8.8.16",
+    "@thi.ng/transducers-stats": "^2.1.83"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -55,7 +58,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=12.7"
+    "node": ">=18"
   },
   "files": [
     "./*.js",
@@ -108,5 +111,5 @@
     "status": "beta",
     "year": 2018
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "25a42a81fac8603a1e440a7aa8bc343276211ff4\n"
 }

package/pager.js

@@ -1,86 +1,57 @@
 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:
- *
- * - `ctx` - hdom context object
- * - `id` - current page ID (zero-based)
- * - `numItems` - current number of items
- * - `pageLen` - number of items per page (only used for calculation)
- * - `maxButtons` - number of page buttons to show (default: 5). If
- *   zero, only the prev / next and first / last buttons will be shown.
- *
- * If there are more pages than the specified number, only the
- * neighboring page IDs (relative to the current page) are shown. E.g.
- * If there are 10 pages, the current page ID is 5 and 3 visible page
- * buttons then the pager will look like this (the `|` character here
- * indicates button group boundaries):
- *
- * ```
- * << < | 4 5 6 | > >>
- * ```
- *
- * Providing `pageLen` and `maxButtons` as arguments allows to
- * dynamically control the number of page buttons at runtime, e.g. in
- * response to window resizing.
- *
- * Yields a component of page buttons and prev / next and first / last
- * navigation buttons. The actual button and button group components are
- * defined via the user supplied options. The first / prev and next /
- * last nav buttons are paired within inner `div` elements (one per
- * pair) and can be styled (or hidden) separately.
- *
- * ```
- * // initialization
- * const mypager = pager({
- *   button: (i, curr, max, label, disabled) =>
- *     ["a", {href: `/page/${i}`, disabled}, label]
- * });
- *
- * // usage
- * [mypager, currPage, currNumItems, 10, 5]
- * ```
- *
- * @param opts -
- */
-export const pager = (_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;
-        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,
-                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 pager = (_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;
+    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,
+        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 range(from, from + maxBt);
-    }
-    return range(0, maxID + 1);
+  if (maxID > maxBt - 1) {
+    const from = Math.max(
+      Math.min(id - (maxBt >> 1), maxID - maxBt + 1),
+      0
+    );
+    return range(from, from + maxBt);
+  }
+  return range(0, maxID + 1);
+};
+export {
+  pager
 };

package/sparkline.js

@@ -1,52 +1,55 @@
 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.
- *
- * @param _ - hdom context object (ignored)
- * @param opts - config options
- * @param vals - data values
- */
-export const sparkline = (_, _opts, vals) => {
-    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;
-    const h = opts.height - r;
-    return [
-        "svg",
-        {
-            width: opts.width + 2 * r,
-            height: opts.height,
-            stroke: opts.col,
-            fill: "none",
-        },
-        [
-            "polyline",
-            {
-                points: str(",", mapIndexed((i, y) => [
-                    (i * s) | 0,
-                    fitClamped(y, opts.min, opts.max, h, r) | 0,
-                ], 0, vals)),
-            },
-        ],
-        [
-            "circle",
-            {
-                cx: ((n - 1) * s) | 0,
-                cy: fitClamped(vals[n - 1], opts.min, opts.max, h, r) | 0,
-                r,
-                fill: opts.col,
-            },
-        ],
-    ];
+const sparkline = (_, _opts, vals) => {
+  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;
+  const h = opts.height - r;
+  return [
+    "svg",
+    {
+      width: opts.width + 2 * r,
+      height: opts.height,
+      stroke: opts.col,
+      fill: "none"
+    },
+    [
+      "polyline",
+      {
+        points: str(
+          ",",
+          mapIndexed(
+            (i, y) => [
+              i * s | 0,
+              fitClamped(y, opts.min, opts.max, h, r) | 0
+            ],
+            0,
+            vals
+          )
+        )
+      }
+    ],
+    [
+      "circle",
+      {
+        cx: (n - 1) * s | 0,
+        cy: fitClamped(vals[n - 1], opts.min, opts.max, h, r) | 0,
+        r,
+        fill: opts.col
+      }
+    ]
+  ];
+};
+export {
+  sparkline
 };

package/title.js

@@ -1,31 +1,18 @@
-/**
- * Configurable Higher order title with optional subtitle component. The
- * returned component function takes two args: title, subtitle.
- *
- * @example
- * ```ts
- * const h1 = title();
- * const h2 = title({ element: "h2", attribs: { class: "blue" }});
- *
- * [h1, "Hello world", "Once upon a time..."]
- *
- * [h2, "Chapter 1", "Once upon a time..."]
- * ```
- *
- * @param opts -
- */
-export const title = (_opts) => {
-    const opts = {
-        element: "h1",
-        attribs: {},
-        subElement: "small",
-        subAttribs: {},
-        ..._opts,
-    };
-    return (_, title, subtitle) => [
-        opts.element,
-        opts.attribs,
-        title,
-        subtitle ? [opts.subElement, opts.subAttribs, subtitle] : undefined,
-    ];
+const title = (_opts) => {
+  const opts = {
+    element: "h1",
+    attribs: {},
+    subElement: "small",
+    subAttribs: {},
+    ..._opts
+  };
+  return (_, title2, subtitle) => [
+    opts.element,
+    opts.attribs,
+    title2,
+    subtitle ? [opts.subElement, opts.subAttribs, subtitle] : void 0
+  ];
+};
+export {
+  title
 };

package/toggle.js

@@ -1,94 +1,94 @@
 const DEFAULT_OPTS = {
-    anim: 100,
-    pad: 1,
-    margin: 0,
-    vertical: false,
-    bgOn: { fill: "#000" },
-    bgOff: { fill: "#999" },
-    fgOn: { fill: "#fff" },
-    fgOff: { fill: "#fff" },
+  anim: 100,
+  pad: 1,
+  margin: 0,
+  vertical: false,
+  bgOn: { fill: "#000" },
+  bgOff: { fill: "#999" },
+  fgOn: { fill: "#fff" },
+  fgOff: { fill: "#fff" }
 };
-export const slideToggleDot = (opts = {}) => {
-    const _opts = {
-        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 = {
-        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);
+const slideToggleDot = (opts = {}) => {
+  const _opts = {
+    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 = {
+    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 = {
-        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 = {
-        ..._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 slideToggleRect = (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;
+  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 = {
+    ..._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],
+  "svg",
+  { ...size, ...attribs },
+  ["rect", state ? bgOn : bgOff],
+  [shape, state ? shapeOn : shapeOff]
 ];
+export {
+  slideToggleDot,
+  slideToggleRect
+};

package/utils/merge-attribs.js

@@ -1,18 +1,11 @@
-/**
- * Helper function to immutably merge attribs from two sources and
- * concatenate their `class` values and merge their `style` maps (if
- * present). Returns merged result object.
- *
- * @param base - base attribs
- * @param xs - overrides
- *
- * @internal
- */
-export const mergeAttribs = (base, xs) => {
-    if (!xs)
-        return base;
-    const res = { ...base, ...xs };
-    base.class && xs.class && (res.class = base.class + " " + xs.class);
-    base.style && xs.style && (res.style = { ...base.style, ...xs.style });
-    return res;
+const mergeAttribs = (base, xs) => {
+  if (!xs)
+    return base;
+  const res = { ...base, ...xs };
+  base.class && xs.class && (res.class = base.class + " " + xs.class);
+  base.style && xs.style && (res.style = { ...base.style, ...xs.style });
+  return res;
+};
+export {
+  mergeAttribs
 };