@anywidget/svelte

Svelte utilities for anywidget

Installation

npm install @anywidget/svelte

Usage

// index.js
import { defineWidget } from "@anywidget/svelte";
import Counter from "./Counter.svelte";

export default defineWidget(Counter);

<!-- Counter.svelte -->
<script>
  /** @type {{ bindings: { value: number }}} */
  let { bindings } = $props();
</script>

<button onclick={() => bindings.value++}>Count is {bindings.value}</button>

Bundlers

You'll need to compile the above source files into a single ESM entrypoint for anywidget with a bundler.

Rolldown

We recommend using Rolldown for bundling Svelte 5 components.

pnpm add -D rolldown rollup-plugin-svelte

// rolldown.config.js
import { defineConfig } from "rolldown";
import svelte from "rollup-plugin-svelte";

export default defineConfig({
  input: "./index.js",
  output: {
    dir: "./dist/",
  },
  plugins: [
    svelte({ compilerOptions: { runes: true } }),
  ],
});

rolldown -c

See manzt/ipyfoo-svelte for a complete example.

Acknowledgements

Special thanks to Daria Vasyukova for the idea and Donny Bertucci for the initial implementation, which lead to this package.

License

MIT