are js packages loaded into the env or do they get loaded at runtime?

[jgunstone]

Hi there,
I've started messing around with anywidget - its great.
I'm a python programmer and my understanding of how packaging works in js is shaky...

I'm making an application that uses observableplot as a dependency, is this (/can this be) installed when the environment is created, as with python? i.e. if I wanted to run the application without an internet connection? or does it need to be loaded from a CDN? or am I thinking about it in the wrong way altogether?

cheers

[gereleth]

Hi, John!

Importing dependencies from a CDN is the simplest option because it doesn't require any js tooling while developing. But in order to have your js dependencies included in the pip-installable package and available offline you'll need to use a bundler - as described in anywidget docs (Bundling).

You will need to install npm and after that the easiest way to bootstrap the widget project is to run npm create anywidget@latest. Follow the steps to get something like this:

create-anywidget version 0.7.5

┌  Welcome to anywidget!
│
◇  Where should we create your project?
│  mywidget
│
◇  Which framework?
│  Vanilla
│
◇  Which variant?
│  JavaScript (Bundles dependencies with esbuild.)
│
└  Your project is ready!


Next steps:
  1: cd mywidget
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev

Then after step 2 also run npm add @observablehq/plot to install the dependency.

You should then be able to import and use this library in your code:

// js/widget.js
import "./widget.css";
import * as Plot from "@observablehq/plot";

function render({ model, el }) {
        // make an example plot
	const plot = Plot.rectY({length: 5000}, Plot.binX({y: "count"}, {x: Math.random})).plot();
	el.append(plot);
}

export default { render };

npm run dev is the command to run when developing the widget - it will watch for changes in your js code and rebuild it when necessary.

npm run build is the command to run when you're done and want to build a final version.

The bundler is configured to output into src/mywidget/static/widget.js - this file will contain your js code and its dependencies. And this file gets distributed along with the python code so once installed the widget should be usable offline.

I hope this helps =).

[jgunstone]

thank you :)