The first syntax here (in the context of an observable notebook—it has a different meaning when you see it in a JavaScript file) is the way you import reusable code from *another notebook* on observable. The syntax is `import {cellName} from ‘@notebookauthor/notebookname’`
The second syntax is how you import code from a package published on NPM.
Thanks! So I'm still curious what that other context is/how to word that - in a JS file is that how we we access functions from other files when using some bundler so that files "know" about each other? Finding words around this stuff is hard!
In a javascript file it can be pretty complicated and the behavior depends on your javascript environment—browser, node, or processed by a bundler. I'm likely to get some of this wrong because I don't even fully understand it, so double-check me against documentation and other people. For example when I'm working on one of my projects that is compiled with webpack and babel, I can `npm install d3` into the project and then import it like
import d3 from 'd3'
and my compiler will handle it. But if I were just writing javascript to run directly in a (modern) browser, I'd need to include a full url to the import, e.g.,
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"
Only javascript files that adhere to a particular standard can be imported this way (and this is where my understanding is fuzzy and you'd be best off reading up about it or hearing from someone else about it).
This MDN page covers how the javascript import statement works:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Thank you so much for sharing this notebook. It prompted me to experiment with making an npm library, and then I'm pretty sure it saved me a ton of time googling how to get the basics set up!
When I got to this part, I had to use "npm publish" rather than "npm register" to get it on npm. Thought I'd let you know in case it's helpful.