1 | # @observablehq/notebook-inspector
|
2 |
|
3 | [![CircleCI](https://circleci.com/gh/observablehq/notebook-inspector/tree/master.svg?style=svg)](https://circleci.com/gh/observablehq/notebook-inspector/tree/master)
|
4 |
|
5 | This library implements the default value rendering implementation for Observable notebooks. When plugged in to the [Observable runtime](https://github.com/observablehq/notebook-runtime) as [observers](https://github.com/observablehq/notebook-runtime/blob/master/README.md#observers), inspectors can be used to insert DOM elements into the page or to render interactive inspectors for arbitrary values.
|
6 |
|
7 | To install this library from [npm](https://www.npmjs.com/package/@observablehq/notebook-inspector):
|
8 |
|
9 | ```
|
10 | npm install @observablehq/notebook-inspector
|
11 | ```
|
12 |
|
13 | This library is also available for download [from unpkg](https://unpkg.com/@observablehq/notebook-inspector/) as an [ES module](https://unpkg.com/@observablehq/notebook-inspector?module) and as a [UMD bundle](https://unpkg.com/@observablehq/notebook-inspector/dist/notebook-inspector.umd.js).
|
14 |
|
15 | ## API Reference
|
16 |
|
17 | ### Inspectors
|
18 |
|
19 | An inspector implements the Observable runtime’s [*Observer* interface](https://github.com/observablehq/notebook-runtime/blob/master/README.md#observers) by rendering the current value of its associated [variable](https://github.com/observablehq/notebook-runtime/blob/master/README.md#variables) to a given DOM element. Inspectors display DOM elements “as-is”, and create interactive “devtools”-style inspectors for other arbitrary values such as numbers and objects.
|
20 |
|
21 | <a href="#Inspector" name="Inspector">#</a> new **Inspector**(*element*) [<>](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js "Source")
|
22 |
|
23 | Creates a new inspector attached to the specified DOM *element*.
|
24 |
|
25 | For example, to render a notebook into elements whose id attribute matches the variable name:
|
26 |
|
27 | ```js
|
28 | Runtime.load(notebook, variable => {
|
29 | return new Inspector(document.getElementById(variable.name));
|
30 | });
|
31 | ```
|
32 |
|
33 | Or, to render a single variable into a new DIV element appended to the body:
|
34 |
|
35 | ```js
|
36 | Runtime.load(notebook, variable => {
|
37 | if (variable.name === "chart") {
|
38 | const div = document.createElement("div");
|
39 | document.body.appendChild(div);
|
40 | return new Inspector(div);
|
41 | }
|
42 | });
|
43 | ```
|
44 |
|
45 | See also [Inspector.into](#Inspector_into).
|
46 |
|
47 | <a href="#inspector_pending" name="inspector_pending">#</a> *inspector*.**pending**() [<>](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js "Source")
|
48 |
|
49 | Applies the `observablehq-running` class to this inspector’s *element*.
|
50 |
|
51 | <a href="#inspector_fulfilled" name="inspector_fulfilled">#</a> *inspector*.**fulfilled**(*value*) [<>](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js "Source")
|
52 |
|
53 | Inspects the specified *value*, replacing the contents of this inspector’s *element* as appropriate, and dispatching an *update* event. If the specified *value* is a DOM element or text node, and the *value* is not already attached to the DOM, it is inserted into this inspector’s *element*, replacing any existing contents. Otherwise, for other arbitrary values such as numbers, arrays, or objects, an expandable display of the specified *value* is generated into this inspector’s *element*. Applies the `observablehq` class to this inspector’s *element*, and for non-element *value*s, the `observablehq--inspect` class.
|
54 |
|
55 | <a href="#inspector_rejected" name="inspector_rejected">#</a> *inspector*.**rejected**(*error*) [<>](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js "Source")
|
56 |
|
57 | Inspects the specified *error*, replacing the contents of this inspector’s *element* as appropriate with the error’s description, and dispatching an *error* event. Applies the `observablehq` and `observablehq--error` class to this inspector’s *element*.
|
58 |
|
59 | <a href="#inspector_into" name="inspector_into">#</a> Inspector.**into**(*container*) [<>](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js "Source")
|
60 |
|
61 | Returns a function that when passed a given [*variable*](https://github.com/observablehq/notebook-runtime/blob/master/README.md#variables), returns a new [*inspector*](#inspectors) attached to a new DIV element within the specifier *container* element. If *container* is a string, it represents a selector, and the *container* element becomes the matching selected element. This method can be used with [Runtime.load](https://github.com/observablehq/notebook-runtime/blob/master/README.md#Runtime_load) as the observer factory to conveniently render an entire notebook. For example, to render into the body:
|
62 |
|
63 | ```js
|
64 | Runtime.load(notebook, Inspector.into(document.body));
|
65 | ```
|
66 |
|
67 | To render into a specific element:
|
68 |
|
69 | ```js
|
70 | Runtime.load(notebook, Inspector.into(".article .visualization"));
|
71 | ```
|