@thi.ng/rdom-components 0.6.38 → 0.6.39

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/README.md

@@ -82,9 +82,7 @@ directory are using this package:
 
 | Screenshot                                                                                                                 | Description                                                                              | Live demo                                                 | Source                                                                                 |
 |:---------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:----------------------------------------------------------|:---------------------------------------------------------------------------------------|
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/big-font.png" width="240"/>            | Large ASCII font text generator using @thi.ng/rdom                                       | [Demo](https://demo.thi.ng/umbrella/big-font/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/big-font)            |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/color-themes.png" width="240"/>        | Probabilistic color theme generator                                                      | [Demo](https://demo.thi.ng/umbrella/color-themes/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/color-themes)        |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/dominant-colors.png" width="240"/>     | Color palette generation via dominant color extraction from uploaded images              | [Demo](https://demo.thi.ng/umbrella/dominant-colors/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/dominant-colors)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/parse-playground.png" width="240"/>    | Parser grammar livecoding editor/playground & codegen                                    | [Demo](https://demo.thi.ng/umbrella/parse-playground/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/parse-playground)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/procedural-text.jpg" width="240"/>     | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation | [Demo](https://demo.thi.ng/umbrella/procedural-text/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/trace-bitmap.jpg" width="240"/>        | Multi-layer vectorization & dithering of bitmap images                                   | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/trace-bitmap)        |

package/accordion.js

@@ -5,10 +5,26 @@ import { $promise } from "@thi.ng/rdom/promise";
 import { dedupe } from "@thi.ng/transducers/dedupe";
 import { map } from "@thi.ng/transducers/map";
 import { range } from "@thi.ng/transducers/range";
-export const accordion = (src, { attribs, head, sections, error }) => {
-    return $list(src.transform(dedupe(), map((id) => [
-        ...map((i) => [i, i === id], range(sections.length)),
-    ])), "div", attribs.wrapper, ([i, sel]) => section(sel ? attribs.sectionOn : attribs.sectionOff, head(src, sections[i].title, i, sel), sel
-        ? div(attribs.content, $promise(sections[i].content(i), error))
-        : null));
+const accordion = (src, { attribs, head, sections, error }) => {
+  return $list(
+    src.transform(
+      dedupe(),
+      map((id) => [
+        ...map((i) => [i, i === id], range(sections.length))
+      ])
+    ),
+    "div",
+    attribs.wrapper,
+    ([i, sel]) => section(
+      sel ? attribs.sectionOn : attribs.sectionOff,
+      head(src, sections[i].title, i, sel),
+      sel ? div(
+        attribs.content,
+        $promise(sections[i].content(i), error)
+      ) : null
+    )
+  );
+};
+export {
+  accordion
 };

package/dropdown.js

@@ -3,92 +3,64 @@ import { $input } from "@thi.ng/rdom/event";
 import { __nextID } from "@thi.ng/rdom/idgen";
 import { $list } from "@thi.ng/rdom/list";
 import { $replace } from "@thi.ng/rdom/replace";
-/**
- * Dropdown `<select>` component with dynamically defined list of items (via
- * subscription) and reactive updates using additionally provided `sel`
- * subscription.
- *
- * @remarks
- * Only single selections are supported. Each generated `<option>` element will
- * have its own child subscription to update its `selected` attribute based on
- * current value of `sel`.
- *
- * See {@link staticDropdown} or {@link staticDropdownAlt} for use cases where
- * the items themselves are statically defined.
- *
- * @param items
- * @param sel
- * @param opts
- */
-export const dynamicDropdown = (items, sel, opts) => {
-    opts = {
-        value: String,
-        label: String,
-        ...opts,
-    };
-    return $list(items, "select", { onchange: $input(sel), ...opts.attribs }, $option(sel, opts));
+const dynamicDropdown = (items, sel, opts) => {
+  opts = {
+    value: String,
+    label: String,
+    ...opts
+  };
+  return $list(
+    items,
+    "select",
+    { onchange: $input(sel), ...opts.attribs },
+    $option(sel, opts)
+  );
 };
-/**
- * Dropdown `<select>` component with statically defined list of items, but
- * reactive updates using provided `sel` subscription.
- *
- * @remarks
- * Only single selections are supported. Each generated `<option>` element will
- * have its own child subscription to update its `selected` attribute based on
- * current value of `sel`.
- *
- * See {@link staticDropdownAlt} for alternative approach or
- * {@link dynamicDropdown} for use cases where the items themselves are
- * dynamically changeable.
- *
- * @param items
- * @param sel
- * @param opts
- * @returns
- */
-export const staticDropdown = (items, sel, opts) => {
-    opts = {
-        value: String,
-        label: String,
-        ...opts,
-    };
-    return select({ onchange: $input(sel), ...opts.attribs }, ...items.map($option(sel, opts)));
+const staticDropdown = (items, sel, opts) => {
+  opts = {
+    value: String,
+    label: String,
+    ...opts
+  };
+  return select(
+    { onchange: $input(sel), ...opts.attribs },
+    ...items.map($option(sel, opts))
+  );
 };
-/**
- * Similar to {@link staticDropdown}, but using only a single subscription for
- * the entire dropdown.
- *
- * @remarks
- * **IMPORTANT:** This component is replacing its entire `<select>` element (and
- * all its children) with each value change of `sel`. The component will only be
- * fully mounted when `sel` produces a non-null value. In other words, `sel`
- * **MUST** be pre-initialized for the component to show up (e.g. using
- * rstream's
- * [`reactive`](https://docs.thi.ng/umbrella/rstream/functions/reactive.html)
- * with a seed value).
- *
- * Internally uses thi.ng/rdom
- * [`$replace()`](https://docs.thi.ng/umbrella/rdom/functions/_replace.html).
- *
- * @param items
- * @param sel
- * @param opts
- */
-export const staticDropdownAlt = (items, sel, opts) => {
-    opts = {
-        value: String,
-        label: String,
-        ...opts,
-    };
-    return $replace(sel.map((id) => select({ onchange: $input(sel), ...opts.attribs }, ...items.map((x) => {
-        const value = opts.value(x);
-        return option({ value, selected: value === id }, opts.label(x));
-    })), { id: __nextID("dropdown") }));
+const staticDropdownAlt = (items, sel, opts) => {
+  opts = {
+    value: String,
+    label: String,
+    ...opts
+  };
+  return $replace(
+    sel.map(
+      (id) => select(
+        { onchange: $input(sel), ...opts.attribs },
+        ...items.map((x) => {
+          const value = opts.value(x);
+          return option(
+            { value, selected: value === id },
+            opts.label(x)
+          );
+        })
+      ),
+      { id: __nextID("dropdown") }
+    )
+  );
 };
 const $option = (sel, { label, value }) => (x) => {
-    let v = value(x);
-    return option({
-        value: v,
-        selected: sel.map((x) => v === x, { id: __nextID("opt") }),
-    }, label(x));
+  let v = value(x);
+  return option(
+    {
+      value: v,
+      selected: sel.map((x2) => v === x2, { id: __nextID("opt") })
+    },
+    label(x)
+  );
+};
+export {
+  dynamicDropdown,
+  staticDropdown,
+  staticDropdownAlt
 };

package/editor.js

@@ -4,31 +4,45 @@ import { textArea } from "@thi.ng/hiccup-html/forms";
 import { $compile } from "@thi.ng/rdom/compile";
 import { reactive } from "@thi.ng/rstream/stream";
 import { computeCursorPos } from "@thi.ng/strings/cursor";
-export const editor = (src, opts = {}) => {
-    opts = meldDeepObj({
-        editor: {
-            attribs: {
-                spellcheck: false,
-            },
-        },
-        cursor: {
-            format: (pos) => pos[0] + ":" + pos[1],
-        },
-    }, opts);
-    let inner;
-    const fmt = opts.cursor.format;
-    const cursor = reactive(0).map((pos) => fmt(inner
-        ? computeCursorPos(inner.el.value, pos)
-        : [1, 1]));
-    const setCursor = (e) => cursor.next(e.target.selectionStart);
-    return div(opts.wrapper, (inner = $compile(textArea({
+const editor = (src, opts = {}) => {
+  opts = meldDeepObj(
+    {
+      editor: {
+        attribs: {
+          spellcheck: false
+        }
+      },
+      cursor: {
+        format: (pos) => pos[0] + ":" + pos[1]
+      }
+    },
+    opts
+  );
+  let inner;
+  const fmt = opts.cursor.format;
+  const cursor = reactive(0).map(
+    (pos) => fmt(
+      inner ? computeCursorPos(inner.el.value, pos) : [1, 1]
+    )
+  );
+  const setCursor = (e) => cursor.next(e.target.selectionStart);
+  return div(
+    opts.wrapper,
+    inner = $compile(
+      textArea({
         ...opts.editor.attribs,
         value: src,
         oninput: (e) => {
-            setCursor(e);
-            src.next(e.target.value);
+          setCursor(e);
+          src.next(e.target.value);
         },
         onkeyup: setCursor,
-        onmouseup: setCursor,
-    }))), div(opts.cursor.attribs, cursor));
+        onmouseup: setCursor
+      })
+    ),
+    div(opts.cursor.attribs, cursor)
+  );
+};
+export {
+  editor
 };

package/icon-button.js

@@ -1,14 +1,18 @@
 import { button } from "@thi.ng/hiccup-html/forms";
 import { i } from "@thi.ng/hiccup-html/inline";
-export const iconButton = (opts) => {
-    const isLeft = opts.iconPos !== "right";
-    const icon = i({
-        style: {
-            fill: "currentColor",
-            [`margin-${isLeft ? "right" : "left"}`]: "0.5rem",
-        },
-    }, opts.icon);
-    return isLeft
-        ? button(opts.attribs, icon, opts.label)
-        : button(opts.attribs, opts.label, icon);
+const iconButton = (opts) => {
+  const isLeft = opts.iconPos !== "right";
+  const icon = i(
+    {
+      style: {
+        fill: "currentColor",
+        [`margin-${isLeft ? "right" : "left"}`]: "0.5rem"
+      }
+    },
+    opts.icon
+  );
+  return isLeft ? button(opts.attribs, icon, opts.label) : button(opts.attribs, opts.label, icon);
+};
+export {
+  iconButton
 };

package/input.js

@@ -1,20 +1,30 @@
 import { div } from "@thi.ng/hiccup-html/blocks";
-import { inputNumber, } from "@thi.ng/hiccup-html/forms";
+import {
+  inputNumber
+} from "@thi.ng/hiccup-html/forms";
 import { $inputNum } from "@thi.ng/rdom/event";
 import { pluck } from "@thi.ng/transducers/pluck";
 import { repeatedly } from "@thi.ng/transducers/repeatedly";
-export const inputNumeric = (dest, attribs) => inputNumber({
-    ...attribs,
-    value: dest,
-    oninput: $inputNum(dest),
+const inputNumeric = (dest, attribs) => inputNumber({
+  ...attribs,
+  value: dest,
+  oninput: $inputNum(dest)
 });
-export const inputVector = (dim, dest, outerAttribs = {}, innerAttribs) => div(outerAttribs, ...repeatedly((i) => inputVectorCoord(dim, i, dest, innerAttribs), dim));
-export const inputVectorCoord = (dim, i, dest, attribs) => inputNumber({
-    ...attribs,
-    value: dest.transform(pluck(i)),
-    oninput: (e) => {
-        const vec = (dest.deref() || new Array(dim).fill(0)).slice();
-        vec[i] = parseFloat(e.target.value);
-        dest.next(vec);
-    },
+const inputVector = (dim, dest, outerAttribs = {}, innerAttribs) => div(
+  outerAttribs,
+  ...repeatedly((i) => inputVectorCoord(dim, i, dest, innerAttribs), dim)
+);
+const inputVectorCoord = (dim, i, dest, attribs) => inputNumber({
+  ...attribs,
+  value: dest.transform(pluck(i)),
+  oninput: (e) => {
+    const vec = (dest.deref() || new Array(dim).fill(0)).slice();
+    vec[i] = parseFloat(e.target.value);
+    dest.next(vec);
+  }
 });
+export {
+  inputNumeric,
+  inputVector,
+  inputVectorCoord
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom-components",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "description": "Collection of unstyled, customizable components for @thi.ng/rdom",
   "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",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,16 +35,17 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/associative": "^6.3.23",
-    "@thi.ng/hiccup-html": "^2.3.0",
-    "@thi.ng/rdom": "^0.13.3",
-    "@thi.ng/rstream": "^8.2.13",
-    "@thi.ng/strings": "^3.7.2",
-    "@thi.ng/transducers": "^8.8.14"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/associative": "^6.3.24",
+    "@thi.ng/hiccup-html": "^2.3.1",
+    "@thi.ng/rdom": "^0.13.4",
+    "@thi.ng/rstream": "^8.2.14",
+    "@thi.ng/strings": "^3.7.3",
+    "@thi.ng/transducers": "^8.8.15"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -54,6 +57,7 @@
     "dom",
     "hiccup",
     "html",
+    "rdom",
     "reactive",
     "rstream",
     "typescript",
@@ -103,5 +107,5 @@
     "status": "alpha",
     "year": 2020
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }

package/radio.js

@@ -1,19 +1,31 @@
 import { div } from "@thi.ng/hiccup-html/blocks";
-import { label, radio, } from "@thi.ng/hiccup-html/forms";
+import {
+  label,
+  radio
+} from "@thi.ng/hiccup-html/forms";
 import { $input } from "@thi.ng/rdom/event";
-export const staticRadio = (items, sel, opts) => {
-    opts = {
-        label: (x, radio) => label({ for: String(x) }, String(x), radio),
-        value: String,
-        ...opts,
-    };
-    return div({ ...opts.attribs }, ...items.map($radio(sel, opts)));
+const staticRadio = (items, sel, opts) => {
+  opts = {
+    label: (x, radio2) => label({ for: String(x) }, String(x), radio2),
+    value: String,
+    ...opts
+  };
+  return div(
+    { ...opts.attribs },
+    ...items.map($radio(sel, opts))
+  );
 };
 const $radio = (sel, opts) => (x) => {
-    let v = opts.value(x);
-    return opts.label(x, radio({
-        value: v,
-        checked: sel.map((x) => v === x),
-        onchange: $input(sel),
-    }));
+  let v = opts.value(x);
+  return opts.label(
+    x,
+    radio({
+      value: v,
+      checked: sel.map((x2) => v === x2),
+      onchange: $input(sel)
+    })
+  );
+};
+export {
+  staticRadio
 };

package/tabs.js

@@ -6,12 +6,28 @@ import { $switch } from "@thi.ng/rdom/switch";
 import { dedupe } from "@thi.ng/transducers/dedupe";
 import { map } from "@thi.ng/transducers/map";
 import { range } from "@thi.ng/transducers/range";
-export const tabs = (src, opts) => {
-    const { attribs, head, sections } = { attribs: {}, ...opts };
-    return div(attribs.wrapper, $list(src.map((id) => [
-        ...map((i) => [i, i === id], range(sections.length)),
-    ]), "div", attribs.tab, ([i, sel]) => head(src, sections[i].title, i, sel)), $switch(src.transform(dedupe()), identity, sections.reduce((acc, { content }, i) => {
-        acc[i] = async (i) => section(attribs.content, await content(i));
+const tabs = (src, opts) => {
+  const { attribs, head, sections } = { attribs: {}, ...opts };
+  return div(
+    attribs.wrapper,
+    $list(
+      src.map((id) => [
+        ...map((i) => [i, i === id], range(sections.length))
+      ]),
+      "div",
+      attribs.tab,
+      ([i, sel]) => head(src, sections[i].title, i, sel)
+    ),
+    $switch(
+      src.transform(dedupe()),
+      identity,
+      sections.reduce((acc, { content }, i) => {
+        acc[i] = async (i2) => section(attribs.content, await content(i2));
         return acc;
-    }, {})));
+      }, {})
+    )
+  );
+};
+export {
+  tabs
 };