Svelte utilities for anywidget
Warning This API is currently experimental an subject to change. Our plan is to migrate to Svelte 5 with runes once released.
npm install @anywidget/svelte
// index.js
import { createRender } from "@anywidget/svelte";
import Counter from "./Counter.svelte";
export let render = createRender(Counter);
<!-- Counter.svelte -->
<script>
import { stores } from "@anywidget/svelte";
// Access traitlet values as Svelte stores
let { count } = stores;
</script>
<button on:click={() => $count += 1}>Count is {$count}</button>
You'll need to compile the above source files into a single ESM entrypoint for anywidget with a bundler.
We currently recommend using Rollup.
pnpm add -D rollup @rollup/plugin-node-resolve rollup-plugin-svelte
// rollup.config.js
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
export default {
input: "index.js",
output: "bundle.js",
plugins: [svelte({ emitCss: false }), resolve()],
};
rollup -c rollup.config.js --watch
Alternatively, you can use the anywidget Vite plugin.
pnpm add -D vite @sveltejs/vite-plugin-svelte @anywidget/vite
// vite.config.js
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import anywidget from "@anywidget/vite";
export default defineConfig({
plugins: [anywidget(), svelte({ hot: false })],
});
vite
You can read more about using Vite with anywidget in our documentation.
Special thanks to Daria Vasyukova for the idea and Donny Bertucci for the initial implementation, which lead to this package.
MIT