How to resolve `import(npm: ...)` protocol imports in standard library when using in Browser

[tomlarkworthy]

The standard library uses protocol prefixed imports, e.g.

export const svg = () => import("npm:htl").then((_) => _.svg);

Its not clear what the blessed path is on how these should resolve when using the NotebookRuntime in the browser.

Example: https://observablehq.com/@tomlarkworthy/basic-notebook-2-0-renderer-smoke-test

4 of 5 cells works except the svg`` tagged template fails because it can't load htl from the standard library. Leading to

RuntimeError: Failed to fetch dynamically imported module: npm:htl

I see resolveImport strips protocols in notebooks but its not applied in the standard library loading critical path?

[tomlarkworthy]

I got it working using es-module-shims but I don't think thats the blessed path! But it does suggest inserting resolveNpmImport will fix the issue at some level.

https://observablehq.com/@tomlarkworthy/basic-notebook-2-0-renderer-with-es-module-shims

[mbostock]

Hmm, this is probably a bug in how the library is bundled. The version that is published to npm should probably have imports rewritten so that they point to the resolved values, for example https://cdn.jsdelivr.net/npm/htl/+esm instead of npm:htl.

https://cdn.jsdelivr.net/npm/@observablehq/notebook-kit@1.4.1/dist/src/runtime/stdlib/recommendedLibraries.js