From observablehq cell to NPM

Community Help
1

I love this tool. What I really like is the fact that a cell in a notebook can be imported as a function as you would do with packages (cell->cell) and of course loading npm packages (npm->cell). However, it is not as easy to do the other way around (cell->npm).

It would be amazing if we could export notebooks as npm modules and use them in the same easy way, importing other notebooks works here.

The problem that I encounter is the following: I want to be able to just export a notebook and use the function that I defined in it, without doing any crazy runtime scripting. What I end up doing instead to avoid this issue is to copy paste the code in a new npm module and import this module in the notebook.

I have seen https://beta.observablehq.com/@benatkin/building-an-npm-module-with-observable but that’s really an adhoc solution that I would like to avoid.

Any ideas?

2 Likes
2

observable notebooks are legit es6 modules.

you can download, embed and package them however you’d like.

see: https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks

3

I am running node 10.11

nicola@nicolaprotocol ~/H/o/n/downloading-and-embedding-notebooks> node downloading-and-embedding-notebooks.js
/Users/nicola/Hacks/observablehq-scripts/node_modules/downloading-and-embedding-notebooks/downloading-and-embedding-notebooks.js:242
export default notebook;
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:279:19)
4

have you tried doing this:

code ```

npm i https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?key=ed62e16955cdc185

yarn add https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?key=ed62e16955cdc185
5 
nicola@nicolaprotocol ~/H/o/n/downloading-and-embedding-notebooks>
npm i "https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?key=ed62e16955cdc185"
npm ERR! code E404
npm ERR! 404 Not Found: https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?key=ed62e16955cdc185
6

lol! that notebook doesn’t exist on observablehq :slight_smile: it was simply a template for export notebook url signature.

Pick a notebook that you want to export and add to your JS project as a module, then right-click on Download tarball to Copy Link to your notebook module url.

then try npm i or yarn add again

good luck!

7

How is that different from what I have done already?

npm install https://api.observablehq.com/@jashkenas/downloading-and-embedding-notebooks.tgz
9

Sorry my comment wasn’t clear.

  1. I already installed a package using npm using the command above, however I get the error in my second comment
  2. By looking at the export, the export exports a form of the object:
const notebook = {
  id: "c2a04e7b9a9d03bb@519",
  modules: [m0]
};

which is not really what I am looking for (export of function names as they appear in the cells)

I hope this clarifies!

10

Hey Nicola,

Sorry for the delay in answering. Your evaluation of the current state is pretty much on point: we support loading from npm, cross-importing from Observable, and also running Observable notebooks on the web using the notebook runtime, but exporting notebooks as npm modules that can run with Node.js isn’t yet easy or straightforward. Partially this is because most notebooks require and rely on the web - whether it’s generating HTML or SVG elements, using fetch() to load data, or many other bits provided by the web platform. Unfortunately the Node.js platform and web platform are building sort of parallel futures currently.

So the current Notebook export format is made to work in browsers (which nearly all support the ES Module specification) rather than Node.js (which, unfortunately, doesn’t, yet).

Stay tuned for future developments on this front - especially as Node.js ships ES Module support in 12.x, we’ll be investing time to make Notebooks work well as springboards for Node.js module development.

2 Likes
11

That’s awesome, keep us posted, I am planning to use this tool extensively!

1 Like