Embedding with Runtime.load seems to no longer load/reference dependencies

Community Help
1

@mbostock I used to be able to specify specific cells with Runtime.load which would in turn load the specified cells’ dependencies. I think this functionality may have broken at some point.

For example: http://ashkenas.com/breakout/ shows several “could not be resolved” errors.

2

Which version of the Runtime are you using? I don’t see any errors on the Breakout! link, but it is using 1.0.1 of the runtime, whereas the latest version 3.0.5 features a new API and uses a different module format.

Here’s the old and new documentation:

Here’s the old and new generated code:

https://api.observablehq.com/@tmcw/hello-world.js?v=3

https://api.observablehq.com/@tmcw/hello-world.js?v=1

4

@mbostock Thanks for the references. I used to be able to do something like this:

  <script type="module">
    import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1?module";
    import notebook from "https://api.observablehq.com/d/xxxxxxxxx.js";

    const renders = {
      "custom_style": "#style",
      "viewof person_list": "#person_list",
      "viewof input_parameters": "#input_parameters",
      "grid": "#grid",
      "pdf": "#pdf",
      "print": "#print",
    };
    Runtime.load(notebook, (variable) => {
    const selector = renders[variable.name];
    if (selector) {
        return new Inspector(document.querySelector(selector));
    } else {
        return true;
    }
    });
  </script>

But it is failing with version 3. I’ll re-read the documentation – perhaps I missed a usage change. The current error I’m getting is:
viewof person_list = RuntimeError: select is not defined where person_list is the thing I want to render and select is the typical import from import {select, date, button} from "@jashkenas/inputs" which person_list depends on.

5

Making progress. I think at least one issue may have been that that forgot to add viewof in front of the variable name when referencing it in my embedded version. I’m no longer getting the is not defined error message. Thanks for your help.

6

The v3 API deprecated the Runtime.load method (and perhaps should have removed it entirely); you should only use that if you’re using v1 of the Runtime. As shown in the README, the new API looks like this:

import {Runtime, Inspector} from "https://unpkg.com/@observablehq/runtime@3/dist/runtime.js";
import define from "https://api.observablehq.com/@tmcw/hello-world.js?v=3";

const runtime = new Runtime();
const main = runtime.module(define, name => {
  if (name === "hello") {
    return new Inspector(document.querySelector("#hello"));
  }
});

In other words, replace Runtime.load with runtime.module, and replace the variable.name with name.

7

Another potential issue is that the index.html of the download tarball link in Observable seems to still reference version 1.

import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1?module";
8

Ah, this makes sense. I didn’t catch that the Runtime.load method was deprecated. Thank you.

9

The transition from the v1 to v3 runtime went deeper than I expected and might be a bit incomplete:

image
image.png1060×890 72 KB

for people coming from https://observablehq.com/@observablehq/downloading-and-embedding-notebooks or https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app

(it is a live copy of the old 1.7 documentation for Runtime.load() too)

Need to manually switch to @observablehq/runtime to get beyond 2.0.0.

Still having trouble using the code above as a drop-in replacement though because the new v3 calls the notebook as a function whereas v1 does not: https://github.com/observablehq/runtime/blob/9b462bbfe8129bb9e07a32dd23be212981a94139/src/runtime.js#L44
Specifically, how do you get v3 notebook API from an NPM tarball? They all seem to be labeled runtime version: 1, even with .tgz?v=3

package.json:

...
   "@observablehq/runtime": "^4.0.1",
   "windfall-awareness-notebook-prototype": "https://api.observablehq.com/@thadk/windfall-awareness-notebook-prototype.tgz"
 },```
10

A quick update: the v=3 API is now the default (linked from the Download code and Download tarball actions in the notebook menu), and the API now supports v=3 tarballs.

You can find the repos and API references here (under new names):



We’re working on updates to the documentation that will give more guidance on how to use the v=3 API. Please let me know if you have any questions!

6 Likes