I've recently started experimenting with Observable notebooks and I must say, it's been a great experience so far. Now, my next goal is to integrate a notebook into my web app. The following vanilla JavaScript code using JavaScript modules accomplishes this seamlessly:
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3";
new Runtime().module(notebook, Inspector.into(document.body));
</script>
However, when attempting to import a module from a remote URL in TypeScript, compilation errors arise:
// error: Cannot find module 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3'
import notebook from 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';
I've experimented with using // @ts-ignore to bypass the compile-time errors but they then manifest during runtime. I've also delved into the import-http Webpack plugin as a potential solution, without success in resolving the compile-time issues.
I am aware that this issue is not exclusive to Observable, rather it pertains more to TypeScript and/or Webpack. Nonetheless, any alternatives or solutions specific to Observable would be highly valuable.
Therefore, my query is: How can I dynamically import an external ES module from a remote location, particularly in TypeScript? This way, I aim to achieve something similar to:
// url = 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';
public async foo(url: string): Promise<void> {
const notebook = await import(url);
const runtime = new Runtime();
const main = runtime.module(notebook, Inspector.into(document.body));
}