0.11.0 (#262)

* hide and disable the selection inputs
closes #136

* check inputof

* document the select option

* document inputs for vanilla, notebook and framework contexts

closes observablehq/framework#344

* checkpoint

* publish inputs.css; fix namespace

* index.css

* excise viewof; link new examples

* module-alias stopped working

* 0.11.0

* clean imports

* update dependencies

* fix main, module

* fix description

* adopt vite

* link to framework

* test & publish workflows

* prettier arrow functions

* simplify; remove width:0

* use inputs-3a86ea to match framework

* fix link typo

---------

Co-authored-by: Mike Bostock <[email protected]>

.github/workflows/publish.yml

@@ -0,0 +1,25 @@
+name: Publish
+
+on:
+  workflow_dispatch: {}
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+      - run: yarn --frozen-lockfile
+      - run: yarn test
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -7,13 +7,14 @@ on:
     branches: [main]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
           cache: 'yarn'
       - run: yarn --frozen-lockfile
       - run: |

DEVELOPMENT.md

@@ -8,14 +8,14 @@ cd inputs
 yarn
 ```
 
-Inputs is written in ES modules and uses [Snowpack](https://snowpack.dev/) for development; this means that you can edit the Inputs source code and examples, and they’ll update live as you save changes. To start, copy over the example scratch.html file:
+Inputs is written in ES modules and uses [Vite](https://vitejs.dev/) for development; this means that you can edit the Inputs source code and examples, and they’ll update live as you save changes. To start, copy over the example scratch.html file:
 
 ```
 mkdir scratch
 cp test/scratch.html scratch/index.html
 ```
 
-Then start Snowpack:
+Then start Vite:
 
 ```
 yarn dev

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2021 Observable, Inc.
+Copyright 2021–2024 Observable, Inc.
 
 Permission to use, copy, modify, and/or distribute this software for any purpose
 with or without fee is hereby granted, provided that the above copyright notice

bin/clean-css.js

@@ -0,0 +1,15 @@
+import {stdin} from "node:process";
+import CleanCSS from "clean-css";
+
+stdin.setEncoding("utf-8");
+
+let input = "";
+
+for await (const chunk of stdin) {
+  input += chunk;
+}
+
+// A unique namespace for our styles.
+const styleNs = "inputs-3a86ea";
+
+process.stdout.write(new CleanCSS().minify(input.replace(/\.__ns__\b/g, `.${styleNs}`)).styles);

package.json

@@ -1,26 +1,30 @@
 {
   "name": "@observablehq/inputs",
-  "description": "User interface components for Observable notebooks",
-  "version": "0.10.6",
+  "description": "Lightweight user interface components",
+  "version": "0.11.0",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"
   },
   "license": "ISC",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "jsdelivr": "dist/inputs.min.js",
   "unpkg": "dist/inputs.min.js",
   "exports": {
-    "umd": "./dist/inputs.min.js",
-    "default": "./src/index.js"
+    ".": {
+      "umd": "./dist/inputs.min.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/observablehq/inputs.git"
   },
   "files": [
+    "dist/**/*.css",
     "dist/**/*.js",
     "src/**/*.js"
   ],
@@ -29,34 +33,33 @@
   },
   "scripts": {
     "test": "yarn test:mocha && yarn test:lint",
-    "test:mocha": "mkdir -p test/output && mocha -r module-alias/register 'test/**/*-test.js' test/input.js",
+    "test:mocha": "mkdir -p test/output && mocha 'test/**/*-test.js' test/input.js",
     "test:lint": "eslint src test",
-    "prepublishOnly": "rm -rf dist && rollup -c",
+    "prepublishOnly": "rm -rf dist && rollup -c && node bin/clean-css < src/style.css > dist/index.css",
     "postpublish": "git push && git push --tags",
-    "dev": "snowpack dev"
+    "dev": "vite dev"
   },
   "_moduleAliases": {
     "@observablehq/inputs": "./src/index.js"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "4",
-    "@rollup/plugin-node-resolve": "13",
-    "@rollup/plugin-replace": "3",
-    "apache-arrow": "17",
-    "clean-css": "5",
-    "d3": "7",
-    "eslint": "8",
-    "js-beautify": "1",
-    "jsdom": "19",
-    "jsesc": "3",
-    "mocha": "9",
-    "module-alias": "2",
-    "rollup": "2",
-    "rollup-plugin-terser": "7",
-    "snowpack": "3"
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^3.1.0",
+    "apache-arrow": "^17.0.0",
+    "clean-css": "^5.3.3",
+    "d3": "^7.9.0",
+    "eslint": "^8.57.0",
+    "js-beautify": "^1.15.1",
+    "jsdom": "^24.1.1",
+    "jsesc": "^3.0.2",
+    "mocha": "^10.7.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "vite": "^5.3.5"
   },
   "dependencies": {
-    "htl": "0.3",
+    "htl": "^0.3.1",
     "isoformat": "^0.2.0"
   },
   "publishConfig": {

rollup.config.js

@@ -1,4 +1,3 @@
-import crypto from "crypto";
 import fs from "fs";
 import path from "path";
 import {terser} from "rollup-plugin-terser";
@@ -22,10 +21,10 @@ const copyrights = fs.readFileSync("./LICENSE", "utf-8")
   .filter(line => /^copyright\s+/i.test(line))
   .map(line => line.replace(/^copyright\s+/i, ""));
 
-// Create a content-hashed namespace for our styles.
+// A unique namespace for our styles.
+const styleNs = "inputs-3a86ea";
+
 const stylePath = path.resolve("./src/style.css");
-const styleHash = crypto.createHash("sha256").update(fs.readFileSync(stylePath, "utf8")).digest("hex").slice(0, 6);
-const styleNs = `oi-${styleHash}`;
 
 // A lil’ Rollup plugin to allow importing of style.css.
 const css = {
@@ -86,5 +85,19 @@ export default [
       ...config.plugins,
       terser({output: {preamble: config.output.banner}})
     ]
+  },
+  {
+    input: "src/index.js",
+    external: ["htl", "isoformat"],
+    output: {
+      indent: false,
+      banner: `// ${meta.name} v${meta.version} Copyright ${copyrights.join(", ")}`,
+      format: "es",
+      file: "dist/index.js"
+    },
+    plugins: [
+      node(),
+      replace({__ns__: styleNs, preventAssignment: true})
+    ]
   }
 ];

src/table.js

@@ -54,6 +54,7 @@ function initialize(
     rows = 11.5, // maximum number of rows to show
     width = {}, // object of column name to width, or overall table width
     multiple = true,
+    select: selectable = true, // is the table selectable?
     layout // "fixed" or "auto"
   } = {}
 ) {
@@ -96,8 +97,8 @@ function initialize(
   let anchor = null, head = null;
 
   const tbody = html`<tbody>`;
-  const tr = html`<tr><td><input type=${multiple ? "checkbox" : "radio"} name=${multiple ? null : "radio"}></td>${columns.map(() => html`<td>`)}`;
-  const theadr = html`<tr><th><input type=checkbox onclick=${reselectAll} disabled=${!multiple}></th>${columns.map((column) => html`<th title=${column} onclick=${event => resort(event, column)}><span></span>${header && column in header ? header[column] : column}</th>`)}</tr>`;
+  const tr = html`<tr><td>${selectable ? html`<input type=${multiple ? "checkbox" : "radio"} name=${multiple ? null : "radio"}>` : null}</td>${columns.map(() => html`<td>`)}`;
+  const theadr = html`<tr><th>${selectable ? html`<input type=checkbox onclick=${reselectAll} disabled=${!multiple}>` : null}</th>${columns.map((column) => html`<th title=${column} onclick=${event => resort(event, column)}><span></span>${header && column in header ? header[column] : column}</th>`)}</tr>`;
   root.appendChild(html.fragment`<table style=${{tableLayout: layout}}>
   <thead>${minlengthof(1) || columns.length ? theadr : null}</thead>
   ${tbody}
@@ -125,9 +126,11 @@ function initialize(
   function appendRow(d, i) {
     const itr = tr.cloneNode(true);
     const input = inputof(itr);
-    input.onclick = reselect;
-    input.checked = selected.has(i);
-    input.value = i;
+    if (input != null) {
+      input.onclick = reselect;
+      input.checked = selected.has(i);
+      input.value = i;
+    }
     if (d != null) for (let j = 0; j < columns.length; ++j) {
       let column = columns[j];
       let value = d[column];
@@ -243,6 +246,7 @@ function initialize(
 
   function reinput() {
     const check = inputof(theadr);
+    if (check == null) return;
     check.disabled = !multiple && !selected.size;
     check.indeterminate = multiple && selected.size && selected.size !== N; // assume materalized!
     check.checked = selected.size;

test/arrow-test.js

@@ -1,7 +1,7 @@
-import assert from "assert";
-import {table} from "@observablehq/inputs";
+import assert from "node:assert";
 import {tableFromJSON} from "apache-arrow";
 import {autoType, csv} from "d3";
+import {table} from "../src/index.js";
 import it from "./jsdom.js";
 
 it("Inputs.table() detects dates in Arrow tables", async () => {

test/bind-test.js

@@ -1,5 +1,5 @@
-import assert from "assert";
-import * as Inputs from "@observablehq/inputs";
+import assert from "node:assert";
+import * as Inputs from "../src/index.js";
 import it from "./jsdom.js";
 
 it("Inputs.bind(button, button) dispatches click events", () => {

test/checkbox-test.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
-import assert from "assert";
+import assert from "node:assert";
+import * as Inputs from "../src/index.js";
 import it from "./jsdom.js";
 
 it("Inputs.checkbox([]) handles empty options", () => {

test/date-test.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
-import assert from "assert";
+import assert from "node:assert";
+import * as Inputs from "../src/index.js";
 import it from "./jsdom.js";
 
 it("Inputs.date() sets the initial value to null", () => {

test/input.js

@@ -1,6 +1,6 @@
-import assert from "assert";
-import {promises as fs} from "fs";
-import * as path from "path";
+import assert from "node:assert";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
 import beautify from "js-beautify";
 import it from "./jsdom.js";
 import * as inputs from "./inputs/index.js";

test/inputs/buttons.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function button() {
   return Inputs.button();

test/inputs/checkboxes.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function checkbox() {
   return Inputs.checkbox(["red", "green", "blue"]);

test/inputs/colors.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function color() {
   return Inputs.color();

test/inputs/dates.js

@@ -1,4 +1,4 @@
-import * as Inputs from "@observablehq/inputs";
+import * as Inputs from "../../src/index.js";
 
 export async function date() {
   return Inputs.date();

test/inputs/files.js

@@ -1,4 +1,4 @@
-import * as Inputs from "@observablehq/inputs";
+import * as Inputs from "../../src/index.js";
 
 const Inputs_file = Inputs.fileOf(class AbstractFile {});
 

test/inputs/forms.js

@@ -1,4 +1,4 @@
-import * as Inputs from "@observablehq/inputs";
+import * as Inputs from "../../src/index.js";
 
 export async function formArray() {
   return Inputs.form([

test/inputs/numbers.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function number() {
   return Inputs.number();

test/inputs/radios.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function radio() {
   return Inputs.radio(["red", "green", "blue"]);

test/inputs/ranges.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function range() {
   return Inputs.range();

test/inputs/searches.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function search() {
   return Inputs.search(["red", "green", "blue"]);

test/inputs/selects.js

@@ -1,5 +1,5 @@
-import * as Inputs from "@observablehq/inputs";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function select() {
   return Inputs.select(["red", "green", "blue"]);

test/inputs/tables.js

@@ -1,6 +1,6 @@
-import * as Inputs from "@observablehq/inputs";
 import * as d3 from "d3";
 import {html} from "htl";
+import * as Inputs from "../../src/index.js";
 
 export async function table() {
   const athletes = await d3.csv("data/athletes.csv");