@anywidget/svelte
v0.0.10
Published
Svelte utilities for anywidget
Downloads
47
Readme
@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
// 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>
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
// 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
Vite
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.
Acknowledgements
Special thanks to Daria Vasyukova for the idea and Donny Bertucci for the initial implementation, which lead to this package.
License
MIT