rolldown compiles to failing dynamic import

[janosh]

Documentation Link

https://github.com/manzt/anywidget/tree/main/packages/svelte

Issue

thanks so much for #869! 🙏

i took a close look at https://github.com/manzt/ipyfoo-svelte which is very helpful. there are a few things i'm still struggling with though. Structure.svelte component imports some file loading/reading utilities

import {
  decompress_file,
  handle_url_drop,
  load_from_url,
  parse_any_structure,
} from '$lib/io'

which results in a dynamic import in the rolldown-compiled JS file that fails to resolve

const { decompress_data } = await import("./decompress-BatFPLgB.js");
>>> TypeError: Failed to resolve module specifier "./decompress-BatFPLgB.js". Invalid relative url or base scheme isn't hierarchical.

directory structure:

pymatviz/widgets/static
├── composition.css
├── composition.js
├── decompress-_eNwcOzc.js
├── decompress-BatFPLgB.js
├── structure.css
└── structure.js

not sure if rolldown should have compiled this to use import.meta.url

const { decompress_data } = await import(new URL('./decompress-BatFPLgB.js', import.meta.url));

or how to achieve that.

Recommended improvement

maybe the docs could cover how to handle 3 cases:

1. Svelte files importing from JS/TS files, especially ones that contain $state runes for shared component state which rolldown doesn't pass to rollup-plugin-svelte and so the runes don't get compiled to vanilla JS. could be documented by extracting the count state in https://github.com/manzt/ipyfoo-svelte/blob/main/web/Widget.svelte into a state.svelts.js file.

2. how to compile multiple widgets with one rolldown config. seems to be as simple as exporting as array of configs (but would have saved me some trial and error if it was documented)

   import { defineConfig } from 'rolldown'
   import svelte from 'rollup-plugin-svelte'
   
   export default defineConfig([{
     input: './structure.ts',
     output: {
       dir: './static/',
       format: 'es',
     },
     plugins: [
       svelte({ compilerOptions: { runes: true } }),
     ],
   }, {
     input: './composition.ts',
     output: {
       dir: './static/',
       format: 'es',
     },
     plugins: [
       svelte({ compilerOptions: { runes: true } }),
     ],
   }])

3. what's the best way to include data files (JSON/YAML/...) needed by a component (use some rollup plugin to ESM-import or configure rolldown to copy it over or something else)?

sorry for the slightly messy issue. will spend some more time tomorrow figuring things out and maybe come up with more actionable suggestions

[janosh]

@manzt i just had another go at it and pushed the anywidget branch with code that i think might be close to working in https://github.com/janosh/matterviz/tree/anywidget. if you have any time to take a look, these commands should surface the errors i'm encountering:

git clone -b anywidget https://github.com/janosh/matterviz
cd extensions/notebook
pnpm install
pnpm rolldown --config rolldown.config.js --watch

that will populate

matterviz/extensions/notebook/matterviz/static
├── structure.css
├── structure.js
├── trajectory.css
└── trajectory.js

if you then run extensions/notebook/test_widget_display.py in VSCode's interactive window, i get blank cell outputs and very persistent errors in the VSCode console:

index.js:711 ReferenceError: $state is not defined
    at a4570fce-d0aa-4aa6-9…648bc19494:72202:18
ipywidgetsKernel.js:17 Could not create a view for model id 0c2ed65907df4bb18b64e245937451e3
ipywidgetsKernel.js:17 Error: Failed to render widget 0c2ed65907df4bb18b64e245937451e3, TypeError: Cannot read properties of undefined (reading 'widget_manager')

one of the problems is on this line where i'm trying to compile the runes in src/lib/state.svelte.ts which fails the build for some reason. any guidance would be hugely appreciated!

fwiw, i was able to get the widgets working by compiling Svelte straight to ESM without the @anywidget/svelte over in pymatviz/widgets/web/anywidget.ts but the DX isn't great (no HMR, too many manual steps)