Best practice for library that depends on d3

Community Help
1

Hi, thank you for these amazing set of tools!
I’m writing a library that should be easily usable in notebooks (and quarto ojs cells), but I stumble on the best way to build & package this library, because it has a dependency on d3.

I wonder what are the best practices for that? I couldn’t really find examples like this.

My current implementation leads to this:

funkyheatmap = (await require('d3@7').then(d3 => {
  window.d3 = d3;
  return import('/funkyheatmap.js');
})).default;

And the library is build with d3 dependency aliased to global object d3.

Hope my question makes sense.
Thank you!

2

Mark d3 as peerDependency and import it. Bundlers should take care of resolving and injecting the dependencies.

3

Thanks! Is there an example somewhere?

I’m trying to get to

funkyheatmap = import('/funkyheatmap.js');

without bundling a copy of d3 inside that file.

4

You will need some level of bundling. Either by bundling as UMD and making sure that you pass in d3 as dependency when requiring your package, or by using any of the bundling services like esm.sh, skypack.dev etc.

There are a few d3 plugins out there that are published to npm. I’d probably look to those for examples.