@anywidget/svelte
Svelte utilities for anywidget
Installation
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
Usage
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>
Bundlers
You'll need to compile the above source files into a single ESM entrypoint for
anywidget with a bundler.
Rollup
We currently recommend using Rollup.
pnpm add -D rollup @rollup/plugin-node-resolve rollup-plugin-svelte
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
Vite
Alternatively, you can use the anywidget Vite plugin.
pnpm add -D vite @sveltejs/vite-plugin-svelte @anywidget/vite
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.
Acknowledgements
Special thanks to Daria Vasyukova for
the idea and
Donny Bertucci for the
initial implementation,
which lead to this package.
License
MIT