@anywidget/svelte

@anywidget/svelte

Svelte utilities for anywidget

Installation

Warning This API is currently experimental an subject to change.

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