framework icon indicating copy to clipboard operation
framework copied to clipboard

Observable Inputs README on GitHub should not reference viewof

Open Fil opened this issue 1 year ago • 2 comments

The Observable Inputs page on github describes using the viewof keyword, which is not available in the cli.

Fil avatar Dec 07 '23 14:12 Fil

Probably best to drop the viewof declaration so it can be used with either.

mbostock avatar Dec 07 '23 22:12 mbostock

Here's the patch I'm thinking of sending when we release framework:

diff --git a/README.md b/README.md
index 0a72565..c9eb48d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,15 @@
 # Observable Inputs
 
-**Observable Inputs** are lightweight user interface components — buttons, sliders, dropdowns, tables, and the like — to help you explore data and build interactive displays in [Observable notebooks](https://observablehq.com). Each input can be used as an [Observable view](https://observablehq.com/@observablehq/introduction-to-views). For example, to allow a number *x* to be manipulated by a slider:
+**Observable Inputs** are lightweight user interface components — buttons, sliders, dropdowns, tables, and the like — to help you explore data and build interactive displays in [Observable](https://observablehq.com). Each input exposes a _value_ property that reflects its current value, and emits an _input_ event when the value changes. For example, to allow a number *x* to be manipulated by a slider:
+
+```js
+const slider = Inputs.range([0, 100]);
+slider.addEventListener((event) => {
+  // do something with event.value
+});
+```
+
+In Observable notebooks, the [`viewof`](https://observablehq.com/@observablehq/introduction-to-views) keyword can be used as a shortcut to display the view and create its reactive value *x* as a generator:
 
 ```js
 viewof x = Inputs.range([0, 100])
@@ -12,10 +21,18 @@ Now you can reference the live value of *x* in any cell, *e.g.*:
 md`The value of *x* is ${x}.`
 ```
 
-Any cell that references *x* will run automatically when the *viewof x* slider is moved. For live examples, see:
+Any cell that references *x* will run automatically when the slider is moved. For live examples, see:
 
 https://observablehq.com/@observablehq/inputs
 
+In [Observable Framework](https://observablehq/com/framework), the reactivity is ensured with the *view* function, that both displays the input and returns the value generator. Write:
+
+```js
+const x = view(Inputs.range([0, 100]));
+```
+
+For live examples, see the [Framework Inputs](https://observablehq.com/framework/javascript/inputs) documentation.
+
 Observable Inputs provides basic inputs:
 
 * [Button](#button) - do something when a button is clicked

Fil avatar Feb 12 '24 14:02 Fil