Improve documentation or example for `vitest`

[sanderhahn]

Describe the bug

The documentation describes how to use runes in a vitest (see link). However it isn't very obvious how to get the example working because the sources of multiplier.svelte and multiplier.svelte.ts are missing.

With the help of @Thiagolino8 discord the following seems to work:

<script lang="ts">
  // file: src/routes/multiplier.svelte
  import { multiplier } from "./multiplier.svelte.js";

  let { a, b }: { a: number; b: number } = $props();
</script>

<h1>Multiplier</h1>

<p>
  <input type="number" bind:value={a} /> x
  <input type="number" bind:value={b} />
  = {multiplier(() => a, b).value}
</p>

// file: src/routes/multiplier.svelte.ts
export function multiplier(
  callback: () => number,
  factor: number,
) {
  const double = $derived(callback() * factor);
  return {
    get value() {
      return double;
    },
  };
}

// file: src/routes/multiplier.svelte.test.ts
import { expect, test } from "vitest";
import { multiplier } from "./multiplier.svelte.js";

test("Multiplier", () => {
  const dispose = $effect.root(() => {
    let count = $state(0);

    const double = multiplier(() => count, 2);
    expect(double.value).toEqual(0);

    count = 5;
    expect(double.value).toEqual(10);
  });
  dispose();
});

Is this the right way to use the example code?
Do we need to update the documentation so that the example code works?

Reproduction

https://svelte.dev/playground/f25e4fa871594da38a0292087ab119e0?version=5.16.2

Logs

No response

System Info

% npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1
    Memory: 72.11 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
  Browsers:
    Safari: 18.2
  npmPackages:
    svelte: ^5.0.0 => 5.16.0 

Actually trying to use Deno, so adding this to package.json:

  "scripts": {
    "info": "deno -A --allow-scripts npm:envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers",
  }

Still results into an environment description that doesn't mention this fact:

  System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1
    Memory: 71.73 KB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
  Browsers:
    Safari: 18.2
  npmPackages:
    svelte: ^5.0.0 => 5.16.0 

% deno --version
deno 2.1.4 (stable, release, aarch64-apple-darwin)
v8 13.0.245.12-rusty
typescript 5.6.2

Severity

annoyance

[Thiagolino8]

Although it doesn't show it, the documentation implies that multiplier uses the $derived rune, since the file name is called multiplier.svelte.js and the test provides a value declared with $state
So either the fact that $derived needs an $effect.root is a bug or the documentation needs improvement

[dummdidumm]

The $derived code should be able to run without an effect root.

[Thiagolino8]

The $derived code should be able to run without an effect root.

Well, it isn't
https://stackblitz.com/edit/vitejs-vite-lqzixy57?file=src%2Fmultiplier.svelte.test.ts

[Thiagolino8]

The $derived code should be able to run without an effect root.

Well, it isn't https://stackblitz.com/edit/vitejs-vite-lqzixy57?file=src%2Fmultiplier.svelte.test.ts

@dummdidumm should I open another issue to address this?