Invalid binding when importing from observable

[Nicola]

This is my notebook

import {select} from "https://observablehq.com/@jashkenas/inputs"

select(['a', 'b'])

This is what appears:

Error: invalid binding

[Alex Garcia]

Hey @nicola , thanks for the bug report!

Dataflow uses htl for the html and svg builtins. These html and svg alternatives, which are slightly different than the current defaults on observablehq.com, offer more functionality and features and are better all around, imo (and observablehq plans to make them the default in the future).

But, that means that when you try to import notebooks that use the old html and svg variants, there may be some bugs. The @jashkenas/inputs notebook is one of these problematic notebooks, it uses the old html builtin that's not compatible with the new htl.html equivalent. You can see this if you go to that notebook and add this as a new cell:

html = (await require("htl")).html

You'll see that several of the inputs will error out with invalid binding, and you see in your example.

To fix this in dataflow, you have a few options. One option, you can fetch a copy of the old html builtin from the @observablehq/stdlib standard library, and substitute that value in when you import:

oldHtml = new (await require("@observablehq/stdlib")).Library().html();


import { select } with {oldHtml as html} from "https://observablehq.com/@jashkenas/inputs";

select(["a", "b"]);

Or, you can fork that notebook, update it to use htl.html, and import that notebook instead. Although that notebook is a little complicated under the hood, so it could take some time.

Or, if you don't like the htl default for html and svg in dataflow, you can use the custom stdlib feature to override this behavior and substitute the older html and svg builtins instead. This is also a little more complicated, because the custom stdlib feature is a little awkward right now and it won't work with dataflow compile just yet, but if you have a custom_stdlib.js file like this:

window.OJS_STDLIB = {
  dependency: {
    require: {
      html: (require) => require("@observablehq/stdlib").then( lib => new lib.Library().html() )
    }
  }
};

And your notebook.ojs file looks like this:

import { select } from "https://observablehq.com/@jashkenas/inputs";

select(["a", "b"]);

Then running the notebook with dataflow run notebook.ojs --stdlib custom_stdlib.js will run the notebook with the older html builtin, and the notebook will run as expected.

Also, I'd suggest using @observablehq/inputs iff possible instead of @jashkenas/inputs, since it bundles it's own dependencies in it's own library, and it plays well with dataflow right out of the box!

[Nicola]

Makes a lot of sense, thank you!