Input, bind, disposal

Author: mbostock

README.md

@@ -25,3 +25,21 @@ User interface components for Observable notebooks.
 <a name="Table" href="#Table">#</a> <b>Table</b>(<i>data</i>, <i>options</i>) · [Source](./src/table.js)
 
 …
+
+## Input
+
+<a name="Input" href="#Input">#</a> <b>Input</b>(<i>value</i>) · [Source](./src/input.js)
+
+…
+
+## bind
+
+<a name="bind" href="#bind">#</a> <b>bind</b>(<i>input</i>, <i>view</i>, <i>invalidation</i>) · [Source](./src/bind.js)
+
+…
+
+## disposal
+
+<a name="disposal" href="#disposal">#</a> <b>disposal</b>(<i>element</i>) · [Source](./src/disposal.js)
+
+…

package.json

@@ -18,6 +18,9 @@
     "dist/**/*.js",
     "src/**/*.js"
   ],
+  "engines": {
+    "node": ">=14.5.0"
+  },
   "scripts": {
     "test": "mkdir -p test/output && tape -r esm -r module-alias/register 'test/**/*-test.js' | tap-dot && node -r esm -r module-alias/register test/input.js | tap-dot && eslint src test",
     "prepublishOnly": "rm -rf dist && rollup -c",

src/bind.js

@@ -0,0 +1,48 @@
+import {disposal} from "./disposal.js";
+
+export function bind(target, source, invalidation = disposal(target)) {
+  const onsource = () => set(target, source);
+  const ontarget = () => (set(source, target), source.dispatchEvent(new CustomEvent("input")));
+  const sourceEvent = eventof(source);
+  const targetEvent = eventof(target);
+  onsource();
+  target.addEventListener(targetEvent, ontarget);
+  source.addEventListener(sourceEvent, onsource);
+  invalidation.then(() => {
+    target.removeEventListener(targetEvent, ontarget);
+    source.removeEventListener(sourceEvent, onsource);
+  });
+  return target;
+}
+
+function get(input) {
+  switch (input.type) {
+    case "range":
+    case "number": return input.valueAsNumber;
+    case "date": return input.valueAsDate;
+    case "checkbox": return input.checked;
+    case "file": return input.multiple ? input.files : input.files[0];
+    default: return input.value;
+  }
+}
+
+function set(target, source) {
+  const value = get(source);
+  switch (target.type) {
+    case "range":
+    case "number": target.valueAsNumber = value; break;
+    case "date": target.valueAsDate = value; break;
+    case "checkbox": target.checked = value; break;
+    case "file": target.multiple ? (target.files = value) : (target.files = [value]); break;
+    default: target.value = value; break;
+  }
+}
+
+function eventof(input) {
+  switch (input.type) {
+    case "button":
+    case "submit": return "click";
+    case "file": return "change";
+    default: return "input";
+  }
+}

src/disposal.js

@@ -0,0 +1,13 @@
+export function disposal(element) {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      const target = element.closest(".observablehq");
+      if (!target) return resolve();
+      const observer = new MutationObserver(() => {
+        if (target.contains(element)) return;
+        observer.disconnect(), resolve();
+      });
+      observer.observe(target, {childList: true});
+    });
+  });
+}

src/index.js

@@ -2,3 +2,6 @@ export {Range} from "./range.js";
 export {Search, searchFilter} from "./search.js";
 export {Select} from "./select.js";
 export {Table} from "./table.js";
+export {Input} from "./input.js";
+export {bind} from "./bind.js";
+export {disposal} from "./disposal.js";

src/input.js

@@ -0,0 +1,11 @@
+import {bind} from "./bind.js";
+
+export class Input extends EventTarget {
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  bind(input, invalidation) {
+    return bind(input, this, invalidation);
+  }
+}

test/jsdom.js

@@ -20,6 +20,7 @@ export async function withJsdom(run) {
   const jsdom = new JSDOM("");
   global.window = jsdom.window;
   global.document = jsdom.window.document;
+  global.CustomEvent = jsdom.window.CustomEvent;
   global.Node = jsdom.window.Node;
   global.NodeList = jsdom.window.NodeList;
   global.HTMLCollection = jsdom.window.HTMLCollection;
@@ -29,6 +30,7 @@ export async function withJsdom(run) {
   } finally {
     delete global.window;
     delete global.document;
+    delete global.CustomEvent;
     delete global.Node;
     delete global.NodeList;
     delete global.HTMLCollection;

test/scratch.html

@@ -190,7 +190,7 @@
 
   </style>
 </head>
-<body>
+<body class="observablehq">
   <script type="module">
 
 import {Range} from "@observablehq/inputs";