How to import observable user made components like @mootari/offset-slider?

[ManuelR-D]

I want to have an offset date slider in my framework page. I saw that the user mootari already developed the exact thing I need here
https://observablehq.com/@mootari/offset-slider?collection=@mootari/widgets

However, if I do import {offsetInterval} from "@mootari/offset-slider" it fails with RuntimeError: Failed to resolve module specifier '@mootari/offset-slider'

I tried converting the notebook with npm run observable convert https://observablehq.com/@mootari/range-slider but the converted code doesnt work, it replaces the import with
import {interval} from '${SLUG}'

and SLUG is not defined.

How can I import this? Is it possible?

[mootari]

Those widgets were created for notebooks and cannot easily be ported to Framework. Importing them directly would require glue code to substitute the Runtime, which I'd argue is more hassle than it's worth for what you'd end up with.

The concept that the offset slider uses is fairly straight-forward though, and my suggestion would be to reimplement it using a different dual range slider library, e.g. https://jshawl.github.io/dual-range-input/

[mootari]

To answer the broader question of how to import from notebooks: The general answer is that you shouldn't, because

• notebooks need their own set of libraries (including a different version of the Observable Runtime),
• they won't get bundled (making it easier for your app to break),
• you end up including a lot of cruft without preload support, making your app larger and slower.

---

If however you're in a pinch, you can use the following code:

function importNotebook(url) {
  const Runtime = import("npm:@observablehq/runtime@5").then(m => m.Runtime);
  const define = import(url).then(m => m.default);
  const module = Promise.all([Runtime, define]).then(([R, d]) => (new R).module(d));
  return new Proxy({}, {
    get: (_, name) => name === "then" ? module : module.then(m => m.value(name))
  });
}

It can be called as follows:

```js
// Each imported cell is a promise and must be referenced from a different code block.
const {offsetInterval} = importNotebook("https://api.observablehq.com/@mootari/[email protected]?v=4");
```
```js
const value = view(offsetInterval(["a", "b", "c", "d", "e", "f"], {label: "Letters"}));
```
${value[0]} ... ${value[1]}