How to publish an npm package compatible with observable?

Community Help
1

I’m publishing a couple of new esm packages on npm that I want to be compatible with observable. Is there a guide on the best way to do this?

I’m currently exporting esm/cjs/iife formats (using tsup, with extentions: .js/.cjs/.iife.min.js respectively) but none seem to work as expected in observable. My goal is to have things work with both require(‘libname’) and import(‘libname’).

Interestingly, when I hardcode the path to my iife on unpkg, I get the following object back:


{
  version: "1.2.0", 
  encode: ƒ(N, K), 
  decode: ƒ(N, K), 
  escape: ƒ(N), 
  unescape: ƒ(N, K)
}
2

I would recommend to test with esm.run or esm.sh instead of unpkg, e.g.

(await import("https://esm.run/rjs3")).default

While Observable still defaults to unpkg for dynamic imports it’s something we want to change once we can do so without breaking existing notebooks.

Edit: I missed your remark about wanting to support pathless imports. For what it’s worth, I wouldn’t put to much weight on them as they are kind of an observablism (at least in the case of import() rewriting).

3

… but to answer your actual question: Your package.json specifies ./dist/riscript.iife.min.js as entrypoint for browser, but the file is missing from your package.

The path should likely read ./dist/rita.iife.min.js.

By the way, both unpkg and jsdelivr let you browse a package’s contents:

4

Thanks @mootari, I have fixed the browser field (good catch), but I still get that same strange object when I use the iife:

del
del2004×286 79.2 KB

5

That appears to be the he package, which coincidentally is also the package that unpkg chokes on during import(): https://unpkg.com/he@1.2.0?module

I don’t know what went wrong with the UMD bundling, but at least for he it seems to me that you won’t be able to make import("rjs3") work unless you can either bundle he or import it remotely as ESM.

6

So “he” is already bundled in the iife. And when I run either of the following in node, I get the expected outcome. It is a bit perplexing, but only via require in observable do I get the “he” export.

import('./dist/riscript.min.js').then(rs => console.log(rs.default));

console.log(require('./dist/riscript.min.js'));

Any thoughts?

7

Hi again @mootari (and others) - so, strangely, the import I was using, https://cdn.jsdelivr.net/npm/rita/+esm, no longer works (the file all of a sudden doesn’t exist), so all of my notebooks using the library now fail. Can you help me to find a way to import/require the rita library? The notebook is here: RiTa + Observable / Daniel Howe | Observable - thanks!

8

You probably dropped an entrypoint from your package.json? Try older versions to narrow down where it breaks.