vanilla stdlib; server-side render implicit stylesheets; async Generators; width(target) (#294)

* vanilla stdlib

* libs

* duckdb

* sqlite

* xlsx

* remove todo

* simplify database resolution

* ignore unresolved databases

* incremental implicit stylesheets

* async generators

* don’t masquerade as sql.js

* width(target: Element)

* rm docs/stdlib.md

* remove stdlib dependency

* Update src/libraries.ts

Co-authored-by: Philippe Rivière <[email protected]>

* sqlite docs; FileAttachment support

* template literal string coercion

* build & deploy client bundles

* remove unused example-dist

---------

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

.eslintrc.json

@@ -24,8 +24,8 @@
     "@typescript-eslint/no-unused-vars": ["error", {"ignoreRestSiblings": true}],
     "import/first": "warn",
     "import/newline-after-import": "warn",
+    "import/no-duplicates": "off",
     "import/no-import-module-exports": "warn",
-    "import/no-namespace": "error",
     "import/no-relative-packages": "warn",
     "import/no-unresolved": "off",
     "import/no-unused-modules": "error",

docs/.observablehq/config.ts

@@ -2,9 +2,10 @@ export default {
   title: "Observable CLI",
   pages: [
     {name: "Getting started", path: "/getting-started"},
-    {name: "Markdown", path: "/markdown"},
     {name: "JavaScript", path: "/javascript"},
     {name: "Data loaders", path: "/loaders"},
+    {name: "Markdown", path: "/markdown"},
+    {name: "HTML", path: "/html"},
     {
       name: "JavaScript",
       open: false,
@@ -17,17 +18,26 @@ export default {
         {name: "Mutables", path: "/javascript/mutables"},
         {name: "Imports", path: "/javascript/imports"},
         {name: "Inputs", path: "/javascript/inputs"},
-        {name: "DuckDB", path: "/javascript/duckdb"}
       ]
     },
     {
-      name: "Features",
+      name: "Libraries",
       open: false,
       pages: [
-        {name: "HTML", path: "/html"},
-        {name: "DOT", path: "/dot"},
-        {name: "Mermaid", path: "/mermaid"},
-        {name: "TeX", path: "/tex"}
+        {name: "Arquero", path: "/lib/arquero"},
+        {name: "Apache Arrow", path: "/lib/arrow"},
+        {name: "D3", path: "/lib/d3"},
+        {name: "DOT (Graphviz)", path: "/lib/dot"},
+        {name: "DuckDB", path: "/lib/duckdb"},
+        {name: "Hypertext Literal", path: "/lib/htl"},
+        {name: "Leaflet", path: "/lib/leaflet"},
+        {name: "Lodash", path: "/lib/lodash"},
+        {name: "Mermaid", path: "/lib/mermaid"},
+        {name: "Observable Inputs", path: "/lib/inputs"},
+        {name: "Observable Plot", path: "/lib/plot"},
+        {name: "SQLite", path: "/lib/sqlite"},
+        {name: "TeX", path: "/lib/tex"},
+        {name: "TopoJSON", path: "/lib/topojson"}
       ]
     },
     {name: "Contributing", path: "/contributing"}

docs/javascript/inputs.md

@@ -17,223 +17,3 @@ The current gain is ${gain.toFixed(1)}!
 ## view(*input*)
 
 As described above, this function [displays](./display) the given input element and then returns its corresponding [generator](./generators) via `Generators.input`. Use this to display an input element while also exposing the input’s value as a [reactive top-level variable](./reactivity).
-
-## Built-in inputs
-
-These basic inputs will get you started.
-
-* [Button](#button) - do something when a button is clicked
-* [Toggle](#toggle) - toggle between two values (on or off)
-* [Checkbox](#checkbox) - choose any from a set
-* [Radio](#radio) - choose one from a set
-* [Range](#range) or [Number](https://observablehq.com/@observablehq/input-range) - choose a number in a range (slider)
-* [Select](#select) - choose one or any from a set (drop-down menu)
-* [Text](#text) - enter freeform single-line text
-* [Textarea](#textarea) - enter freeform multi-line text
-* [Date](#date) or [Datetime](https://observablehq.com/@observablehq/input-date) - choose a date
-* [Color](#color) - choose a color
-* [File](#file) - choose a local file
-
-These fancy inputs are designed to work with tabular data such as CSV or TSV [file attachments](./files).
-
-* [Search](#search) - query a tabular dataset
-* [Table](#table) - browse a tabular dataset
-
----
-
-### Button
-
-Do something when a button is clicked. [Examples ›](https://observablehq.com/@observablehq/input-button) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#button)
-
-```js echo
-const clicks = view(Inputs.button("Click me"));
-```
-
-```js
-clicks
-```
-
----
-
-### Toggle
-
-Toggle between two values (on or off). [Examples ›](https://observablehq.com/@observablehq/input-toggle) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#toggle)
-
-```js echo
-const mute = view(Inputs.toggle({label: "Mute"}));
-```
-
-```js
-mute
-```
-
----
-
-### Checkbox
-
-Choose any from a set. [Examples ›](https://observablehq.com/@observablehq/input-checkbox) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#checkbox)
-
-```js echo
-const flavors = view(Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"}));
-```
-
-```js
-flavors
-```
-
----
-
-### Radio
-
-Choose one from a set. [Examples ›](https://observablehq.com/@observablehq/input-radio) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#radio)
-
-```js echo
-const flavor = view(Inputs.radio(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"}));
-```
-
-```js
-flavor
-```
-
----
-
-### Range
-
-Pick a number. [Examples ›](https://observablehq.com/@observablehq/input-range) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#range)
-
-```js echo
-const n = view(Inputs.range([0, 255], {step: 1, label: "Favorite number"}));
-```
-
-```js
-n
-```
-
----
-
-### Select
-
-Choose one, or any, from a menu. [Examples ›](https://observablehq.com/@observablehq/input-select) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#select)
-
-```js
-const capitals = FileAttachment("us-state-capitals.tsv").tsv({typed: true});
-const stateNames = capitals.then((capitals) => capitals.map(d => d.State));
-```
-
-```js echo
-const homeState = view(Inputs.select([null].concat(stateNames), {label: "Home state"}));
-```
-
-```js
-homeState
-```
-
-```js echo
-const visitedStates = view(Inputs.select(stateNames, {label: "Visited states", multiple: true}));
-```
-
-```js
-visitedStates
-```
-
----
-
-### Text
-
-Enter freeform single-line text. [Examples ›](https://observablehq.com/@observablehq/input-text) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#text)
-
-```js echo
-const name = view(Inputs.text({label: "Name", placeholder: "What’s your name?"}));
-```
-
-```js
-name
-```
-
----
-
-### Textarea
-
-Enter freeform multi-line text. [Examples ›](https://observablehq.com/@observablehq/input-textarea) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#textarea)
-
-```js echo
-const bio = view(Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}));
-```
-
-```js
-bio
-```
-
----
-
-### Date
-
-Choose a date, or a date and time. [Examples ›](https://observablehq.com/@observablehq/input-date) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#date)
-
-```js echo
-const birthday = view(Inputs.date({label: "Birthday"}));
-```
-
-```js
-birthday
-```
-
----
-
-### Color
-
-Choose a color. [Examples ›](https://observablehq.com/@observablehq/input-color) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#color)
-
-```js echo
-const color = view(Inputs.color({label: "Favorite color", value: "#4682b4"}));
-```
-
-```js
-color
-```
-
----
-
-### File
-
-Choose a local file. [Examples ›](https://observablehq.com/@observablehq/input-file) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#file)
-
-```js echo
-const file = view(Inputs.file({label: "CSV file", accept: ".csv", required: true}));
-```
-
-```js
-data = file.csv({typed: true})
-```
-
----
-
-### Search
-
-Query a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-search) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)
-
-```js echo
-const search = view(Inputs.search(capitals, {placeholder: "Search U.S. capitals"}));
-```
-
-```js
-search // see table below!
-```
-
----
-
-### Table
-
-Browse a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-table) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#table)
-
-```js echo
-const rows = view(Inputs.table(search));
-```
-
-```js
-rows // click a checkbox in the leftmost column
-```
-
----
-
-* [Form](https://observablehq.com/@observablehq/input-form?collection=@observablehq/inputs) - combine multiple inputs for a compact display

docs/lib/arquero.md

@@ -0,0 +1,5 @@
+# Arquero
+
+```js echo
+aq
+```

docs/lib/arrow.md

@@ -0,0 +1,5 @@
+# Apache Arrow
+
+```js echo
+Arrow
+```

docs/lib/chinook.db

@@ -0,0 +1,5 @@
+# D3
+
+```js echo
+d3
+```

docs/lib/d3.md

@@ -1,6 +1,10 @@
 # DuckDB
 
-Observable Markdown has built-in support for DuckDB via [duckdb-wasm](https://github.com/duckdb/duckdb-wasm). It’s easiest to use in conjunction with [`FileAttachment`](./files). Declare a database with `DuckDBClient`, passing in a set of named tables:
+Observable Markdown has built-in support for DuckDB via [duckdb-wasm](https://github.com/duckdb/duckdb-wasm). It’s easiest to use in conjunction with [`FileAttachment`](../javascript/files). Declare a database with `DuckDBClient`, passing in a set of named tables:
+
+```js echo
+duckdb
+```
 
 ```js echo
 const db = DuckDBClient.of({gaia: FileAttachment("gaia-sample.parquet")});

docs/dot.md renamed to docs/lib/dot.md

@@ -0,0 +1,13 @@
+# Hypertext Literal
+
+```js echo
+htl
+```
+
+```js echo
+html
+```
+
+```js echo
+svg
+```