Comments (2)
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!
from dataflow.
Makes a lot of sense, thank you!
from dataflow.
Related Issues (20)
- Add option for displaying (non-editable) source code below rendered output
- `dataflow library`, point to a directory of notebooks HOT 1
- Secure notebook, import, and fileattachment access
- Bundler plugins for webpack, esbuild, rollup, etc.
- Better way to define custom builtin cells (stdlib)
- More features on the compiler
- Editor-agnostic auto-completion HOT 3
- Reload FileAttachments when FA is added/removed HOT 3
- "Visual Dataflow" for a notebook's cell depedencies
- Add Cell Menus for downloading cell values
- Dataflow Grid System
- Dataflow-specific builtin cell
- Bug in html template literal HOT 1
- custom `.ojs` is not standardized, why not use markdown with extensions instead HOT 1
- Live-reload displays blank page on Windows 10 HOT 3
- Shebang support
- Conflicting GitHub and Observable CSS
- Improper cells margin collapsing
- Truly self-host all dependencies
- RuntimeError: Inputs.form is not a function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dataflow.