31:T5d6,cell_map_diagram = mermaid` stateDiagram-v2 observablehq.com --> user user --> cell: codemirror user --> FileAttachment: upload cell --> user: LSP cell --> user: highlight state ___.static.observableusercontent.com { cell --> variable: parse + compile variable --> cell: decompile cell --> module: import _ from _ variable --> main_module: define FileAttachment --> stdlib: part of module --> runtime: defines state static { main_module --> runtime runtime --> main_module: access-runtime stdlib --> runtime runtime --> inspector } inspector --> DOM: inspect } DOM --> observablehq.com: iframe `32:[] 2f:{"title":"How the Observable Runtime works","cells":[{"id":0,"value":"# How the Observable Runtime works\n## Living documentation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"A lot of Observable is open source and MIT/ISC licensed. Additional tools have been built by the community\n\n1st party\n- [Observable JS parser](https://github.com/observablehq/parser)\n- [Lezer Grammar for Observable JS](https://github.com/observablehq/lezer)\n- [Observable Runtime](https://github.com/observablehq/runtime)\n- [Standard Library](https://observablehq.com/documentation/misc/standard-library)\n- [Inspector](https://github.com/observablehq/inspector)\n\n3rd party\n- [Access the runtime](https://observablehq.com/@mootari/access-runtime)\n- [The Unofficial Observable Compiler](https://github.com/asg017/unofficial-observablehq-compiler/tree/beta)\n- [Userspace Observable compiler and decompiler](https://observablehq.com/@tomlarkworthy/observablejs-toolchain)\n- [Notebook Distiller](https://observablehq.com/@tmcw/notebook-distiller)\n- [Single File Exporter](https://observablehq.com/@tomlarkworthy/exporter)","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"## How Observable works\n\nIn this section I try to explain the main concepts, surfacing the runtime concepts as live variables you can explore inline.","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"### the sandbox","pinned":false,"hidden":false,"mode":"md"},{"id":358,"value":"The main security mechanism on [observablehq.com](https://Observablehq.com) is to run all user javascript inside a sandboxed iframe. Each user has their own subdomain, so local storage of user code is isolated from one another and from the main webpage. ","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"iframe_location = document.location // we are inside the sandbox, so the document is the iframe","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"A drawback of the sandbox approach is several Web APIs don't work (sharedArrayBuffer, Bluetooth) and default forms submission will redirect the inner page.","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"### The runtime","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"At the core is the [Observable runtime](https://github.com/observablehq/runtime), which hot-reloads and schedules recompilation of the dependancy graph. Its the engine of reactivity, implemented in Javascript, executing javascript snippets in units called `variables`.","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"The runtime runs *inside* the sandbox, so we can use [[mootari]()](https://observablehq.com/@mootari)'s hack to get a reference to the runtime from within an Observable notebook. ","pinned":false,"hidden":false,"mode":"md"},{"id":342,"value":"runtime_reference = toObject(runtime)","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"### Variables","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"The runtime holds a set of variables.","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"runtime_variables = [...runtime._variables].map(toObject)","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"Variables are scoped to a module. All notebooks come with a \"builtin\" module which is defined by the stdlib","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"builtin_module_ref = [...runtime._modules][0][1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"builtin_module = toObject(builtin_module_ref)","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"builtin_variables = toMap(\n ...[...runtime._variables].filter((v) => v._module === builtin_module_ref)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"Two variables clash if they are named the same and belong to the same scope. However, when you import a module, you only expose a few variables to another module, so it is possible to have variables of the same name but in different modules.","pinned":false,"hidden":false,"mode":"md"},{"id":1048,"value":"### Variable Definitions\n\nVariable updates are scheduled when inputs become available. The runtime abstracts over the difference between async and syncronous execution via its scheduler. A variable can emit multiple values per update when defined as a generator.\n\nWhen definitions are called, the `this` value bound to the prior state, allowing cells to reduce over executions i.e. chain state forward.","pinned":false,"hidden":false,"mode":"md"},{"id":1049,"value":"viewof count_button = Inputs.button(\"count\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"{\n count_button;\n return this + 1 || 0; // Add 1 to prior state (this)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1051,"value":"Observable does not enforce any kind of dataflow programming purity. Inputs are passed by reference, so definitions can mutate objects outside of the dataflow paradigm. Furthermore, definitions can reference globals like the window, change the DOM and perform arbitrary side effects outside the dataflow graph.\n\nWhile functional reactive purist may find this unattractive, being ordinary Javascript functions reduces integration friction when importing existing Javascript libraries.","pinned":false,"hidden":false,"mode":"md"},{"id":1052,"value":"### Glitch free Observable Reactivity Semantics","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"Observable builds a dataflow dependancy graph between variables. When a variable is marked dirty, it is scheduled for recomputation next tick, as long as its inputs are not dirty. This batched computation avoids common pitfuls with reactivty such as glitching.","pinned":false,"hidden":false,"mode":"md"},{"id":1054,"value":"mermaid`graph TD\nA-->D\nA-->C\nB-->D[\"D 🕣\"]\nC-->E\nD-->E\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"In syncronous reactive systems without batching, an update to `A` will chain to C and D and then trigger E twice -- a so called \"glitch\" which can have unwanted side effects. In Observable, an update to `A` automatically marks A, C, D and E as dirty. C recomputes quickly and updates, followed by D and E after the asynchronous process in D completes. Thus E remains in the dirty state until D has completed and updates only once.\n\nIf B and A update temporally close together, D still emits a value once, but internally the async computation is ran twice with overlap. E then only updates once.","pinned":false,"hidden":false,"mode":"md"},{"id":1056,"value":"Inputs.button(\"a\", {\n reduce: () => viewof a.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"Inputs.button(\"b\", {\n reduce: () => viewof b.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"viewof a = Inputs.input(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"viewof b = Inputs.input(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"c = {\n a, b;\n return this + 1 || 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"d = {\n a, b;\n await new Promise((r) => setTimeout(r, 1000));\n return this + 1 || 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"e = {\n c, d;\n debugger;\n return this + 1 || 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"viewof module = thisModule()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"vars = new Map([\n [\"a\", await lookupVariable(\"a\", module)],\n [\"b\", await lookupVariable(\"b\", module)],\n [\"c\", await lookupVariable(\"c\", module)],\n [\"d\", await lookupVariable(\"d\", module)],\n [\"e\", await lookupVariable(\"e\", module)]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1092,"value":"#### Cycles\n\nYou can get fake cycles by using a viewof and \"posting upstream\" programatically to the DAG","pinned":false,"hidden":false,"mode":"md"},{"id":1119,"value":"cycles = Inputs.button(\"do a cycle\", {\n reduce: () => {\n viewof cycle.value = 0;\n viewof cycle.dispatchEvent(new Event(\"input\"));\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"viewof cycle = Inputs.input()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"cycle","pinned":true,"hidden":false,"mode":"ojs"},{"id":1097,"value":"increment = {\n viewof cycle.value = cycle + 1;\n viewof cycle.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1133,"value":"#### Glitch Free cycles (with caveats)\n\nIf you use programmatic trigger, do we still get glitch free operation? i.e. do simultaneous triggers get merged into a single dataflow sweep? What about double triggers?","pinned":false,"hidden":false,"mode":"md"},{"id":1160,"value":"Inputs.button(\"n-multi trigger DAG\", {\n reduce: () => {\n viewof left.value = 0;\n viewof right.value = 0;\n for (let i = 0; i < n; i++) {\n debugger;\n viewof left.dispatchEvent(new Event(\"input\"));\n viewof right.dispatchEvent(new Event(\"input\"));\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1167,"value":"viewof n = Inputs.range([1, 10], { label: \"n\", step: 1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"viewof left = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"viewof right = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"left_right = {\n left, right;\n return this + 1 || 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1165,"value":"The above experiment shows triggers on seperate dataflow parents are merged in the same update batch (glitch free!). However, repeated triggers lead to multiple batches up to a max of 2, which is super weird and unexpected.","pinned":false,"hidden":false,"mode":"md"},{"id":1063,"value":"#### Responsiveness\n\nObservable prioritises user-responsiveness. Dataflow decendants of high frequency streams will miss updates when they exceed the animation frame rate (typically 60fps). Its best to view the Observable dataflow graph as monotonically converging to the latest state rather than a stream processing engine.","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"Inputs.button(\"burst 100\", {\n reduce: async () => {\n Array.from({ length: 100 }).reduce(\n (promise) =>\n promise.then(async () => {\n await new Promise((r) => setTimeout(r, 0));\n viewof burst.dispatchEvent(new Event(\"input\"));\n }),\n Promise.resolve()\n );\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1065,"value":"viewof burst = Inputs.input(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"burst_decendant = {\n burst;\n return this + 1 || 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1207,"value":"### Determining the state of a variable\n\nCan you tell if a variable is actively pending, computed a value or never computed?","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"state_experiment = new Runtime().module()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"observerFactory = (name) => ({\n fulfilled: () => (states[name] = \"fulfilled\"),\n rejected: () => (states[name] = \"rejected\"),\n pending: () => (states[name] = \"pending\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"state_experiment_resolved_variable = state_experiment\n .variable(observerFactory(\"resolved_variable\"))\n .define(\"resolved_variable\", [], () => 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"state_experiment_undefined_variable = state_experiment\n .variable(observerFactory(\"undefined_variable\"))\n .define(\"undefined_variable\", [], () => undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"state_experiment_hung_variable = state_experiment\n .variable(observerFactory(\"hung_variable\"))\n .define(\"hung_variable\", [], () => new Promise(() => {}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"state_experiment_error_variable = state_experiment\n .variable(observerFactory(\"error_variable\"))\n .define(\"error_variable\", [], () => {\n throw \"error\";\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1273,"value":"state_experiment_generator_variable = state_experiment\n .variable(observerFactory(\"generator_variable\"))\n .define(\"generator_variable\", [], function* () {\n let i = 0;\n while (true) yield i++;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"state_experiment_async_generator_variable = state_experiment\n .variable(observerFactory(\"async_generator_variable\"))\n .define(\"async_generator_variable\", [], async function* () {\n let i = 0;\n while (true) {\n await new Promise((r) => setTimeout(r, 1000));\n yield i++;\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"states = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"experiment_variables = [\n state_experiment_resolved_variable,\n state_experiment_undefined_variable,\n state_experiment_hung_variable,\n state_experiment_error_variable,\n state_experiment_generator_variable,\n state_experiment_async_generator_variable\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1280,"value":"Inputs.table(experiment_variables.map(toObject))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"new Map(\n await Promise.all(\n experiment_variables.map(async (v) => [\n v._name,\n await getPromiseState(v._promise)\n ])\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"### Cells","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"You program cells in notebooks using ObservableJS. They are compiled to the runtime definitions. There are few major types of cell.\n- Javascript cells\n - with some special handling for async, generator subtypes\n- viewof, mutables\n- Tagged template cells (e.g. markdown, html blocks)\n- import statements","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"#### Cell -> variables","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"Cells are mapped to one or more runtime variables. A 3rd party tool can group them for a given module. Most cells in this notebook are anonymous cells without names, e.g. markdown blocks.","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"main_cells = (await cellMap()).get(main)","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"Each cell is mapped to several variables, for instance, a mutable cell has three variables, the initial value, the non-reactive value, and the reactive value. Cells recompute when the *inputs* change.","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"viewof cell = Inputs.select(main_cells, {\n label: \"select a cell to expand\",\n format: (c) => c.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"Inputs.table([cell])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"cell_variables = cell.variables","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"cell_variables_table = Inputs.table(cell_variables.map(toObject), {\n columns: [\"_name\", \"_inputs\", \"_definition\"],\n format: {\n _definition: (d) =>\n Inputs.textarea({ value: d.toString(), disabled: true }),\n _inputs: (d) => d.map((i) => i._name)\n },\n width: {\n _definition: \"50%\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"The definition of a variable is the code that is executes when it recomputes. The arguments to that function are the dependancies that need to be computed first. A cell specifies its dependencies in the inputs array.","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"mutable example_mutable = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"Each imported variable exposes creates at least one variable to cross between modules.\n```js\nimport {a, b, c as d} from \"@...\"\n```\n\nImporting viewofs and mutables are a bit more complex because both the container and the data channels are imported even if you only import one of them. `with` syntax is even more complicated as a seperate runtime is spawned.","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"#### Parsing","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"The first stage of transforming ObserrvableJS source code to the runtime variable representation is parsing. The [observablehq/parser](https://github.com/observablehq/parser) does this. Its a wrapper around [acorn](https://github.com/acornjs/acorn). \n\nAs the examples below show, where Observable goes beyond typical javascript is often expressed in the custom top level \"cell\" AST node. The other thing it does is figure out external references, which is what drives the dependancy resolution.","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"viewof_ast = parser.parseCell(\"viewof foo = 'bar'\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"mutable_ast = parser.parseCell(\"mutable foo = 'bar'\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"async_ast = parser.parseCell(\"foo = { await ''}\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"generator_ast = parser.parseCell(\"foo = { yield 'async'}\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"fileattachment_ast = parser.parseCell(\"foo = FileAttachment('filepath')\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof_ref_ast = parser.parseCell(\"foo = viewof bar\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"import_ast = parser.parseCell(\"import {foo} from 'blah'\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"Inputs.table(\n [\n Object.assign(viewof_ast, { name: \"viewof_ast\" }),\n Object.assign(mutable_ast, { name: \"mutable_ast\" }),\n Object.assign(async_ast, { name: \"async_ast\" }),\n Object.assign(generator_ast, { name: \"generator_ast\" }),\n Object.assign(fileattachment_ast, { name: \"fileattachment_ast\" }),\n Object.assign(viewof_ref_ast, { name: \"viewof_ref_ast\" }),\n Object.assign(import_ast, { name: \"import_ast\" })\n ],\n {\n columns: [\n \"name\",\n \"id\",\n \"async\",\n \"generator\",\n \"references\",\n \"fileAttachments\"\n ],\n width: {\n async: \"10%\",\n generator: \"10%\"\n },\n format: {\n id: (id) => JSON.stringify(id),\n references: (r) => JSON.stringify(r),\n fileAttachments: (r) => [...r.keys()]\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"### Compiling","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"The Observable compiler is not open source. However, there is the community [unofficial-observablehq-compiler](https://github.com/asg017/unofficial-observablehq-compiler/tree/beta) and the [userspace decompiler/compiler](https://observablehq.com/@tomlarkworthy/observablejs-toolchain).","pinned":false,"hidden":false,"mode":"md"},{"id":671,"value":"import { compile } from \"@tomlarkworthy/observablejs-toolchain\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"compiled_variables = compile(\"mutable example = 12\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"## Running your own runtime","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"To execute a notebook outside of [observablehq.com](https://observablehq.com) you need to instantiate a runtime (this is what the [notebook export feature](https://observablehq.com/documentation/embeds/advanced) does). First grab import the runtime from npm:","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"import { Runtime } from \"@tomlarkworthy/observable-runtime-v6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"embedded_runtime = new Runtime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"Create a main module","pinned":false,"hidden":false,"mode":"md"},{"id":714,"value":"embedded_main = embedded_runtime.module()","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"Create and define variables, we will use the definitions that we compiled earlier","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"embedded_variables = compiled_variables.map((v) =>\n embedded_main\n .variable({})\n .define(v._name, v._inputs, toFunction(v._definition))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"toFunction = (definition) => {\n let _fn;\n eval(`_fn = ${definition}`);\n return _fn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"The runtime will just run automatically, but as the variables are asyncronously processed, it can take a little while before we can observe the value directly in `_value', so we can observe the promise instead.","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"{\n await new Promise((r) => setTimeout(r, 1000));\n return embedded_variables[0]._promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"### Value change notification with Observers","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"When a variable is setup, you can set a callback for value changes. Supply functions for handling for `pending`, `fulfilled` and `rejected` ([observers](https://github.com/observablehq/runtime?tab=readme-ov-file#observers) docs). Here we create a variable on a timer and send it result to a Generator function.","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"Generators.observe((notify) => {\n // Generator.observe is a notebook userspace concept to make emitting values simpler\n embedded_main\n .variable({\n fulfilled: (value) => {\n // Observer.fulfilled\n notify(value); // pipe the variable notification up to userspace\n }\n })\n .define(async function* () {\n // zero input async generator\n // this is pure JS, normally the output a compile step\n // is used here\n let i = 0;\n while (true) {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n yield i++;\n }\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"### Rendering values with Inspector","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"To display cell values reactively on a _webpage_, the values need to be converted to DOM and kept up to date reactively. Observable provides the `Inspector` for this purpose, which implements the Observer interface ","pinned":false,"hidden":false,"mode":"md"},{"id":905,"value":"

","pinned":true,"hidden":false,"mode":"md"},{"id":1242,"value":"import { Inspector } from \"@tomlarkworthy/inspector\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"inspector = new Inspector(cell_out) // connect Inspector to our DOM node","pinned":true,"hidden":false,"mode":"ojs"},{"id":902,"value":"Generators.observe((notify) => {\n // Generator.observe is a notebook userspace concept to make emitting values simpler\n embedded_main.variable(inspector).define(async function* () {\n // zero input async generator\n // this is pure JS, normally the output a compile step\n // is used here\n let i = 0;\n while (true) {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n yield i++;\n }\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"The Observer used in notebooks is not the same as the distributed Inspector, there is interesting metadata in the notebook's version. You can get a reference to it via the variable `_observer` reference. You can discover the type of cell by looking at the mode.","pinned":false,"hidden":false,"mode":"md"},{"id":973,"value":"notebook_observer = main._scope.get(\"title_cell\")._observer","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"notebook_observer.mode","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"Furthermore, you can relate the variable to the rendered DOM node in the notebook","pinned":false,"hidden":false,"mode":"md"},{"id":991,"value":"main._scope.get(\"title_cell\")._observer._node.innerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"## Views\n\n`viewof` macro expands to two variables. The 1st is a EventSource (typically a HTML element), this is the UI control, and the events it emits are the \"data\". The 2nd variable source is a `Generators.input()` which registers to the event source and pipes the data as the value to the reactive variable.\n\nYou don't really *need* views. You can create the equivalent manually:-","pinned":false,"hidden":false,"mode":"md"},{"id":1194,"value":"control = html`