@anywidget/svelte NPM

@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 })],
});