Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Observable Inputs README on GitHub should not reference viewof #344

Open
Fil opened this issue Dec 7, 2023 · 2 comments · May be fixed by observablehq/inputs#262
Open

Observable Inputs README on GitHub should not reference viewof #344

Fil opened this issue Dec 7, 2023 · 2 comments · May be fixed by observablehq/inputs#262
Assignees
Labels
documentation Improvements or additions to documentation

Comments

@Fil
Copy link
Contributor

Fil commented Dec 7, 2023

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

@Fil Fil added the documentation Improvements or additions to documentation label Dec 7, 2023
@Fil Fil mentioned this issue Dec 7, 2023
@mbostock
Copy link
Member

mbostock commented Dec 7, 2023

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

@mbostock mbostock changed the title Observable Inputs and viewof Observable Inputs README on GitHub should not reference viewof Jan 16, 2024
@mbostock mbostock added this to the General availability milestone Jan 16, 2024
@Fil
Copy link
Contributor Author

Fil commented Feb 12, 2024

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 Fil self-assigned this Feb 12, 2024
@mbostock mbostock modified the milestones: General availability, Future Feb 14, 2024
@mbostock mbostock removed this from the Future milestone Mar 24, 2024
Fil added a commit to observablehq/inputs that referenced this issue May 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants