Doesn't support svelte 5 $bindable

[markpsiano]

The latest version of rollup-plugin-svelte currently does not recognize the $bindable rune for svelte 5.

Repro steps:

In any .svelte file:

<script lang="ts>
let { someVar = $bindable(false) } = $props();
</script>

Rollup config:

const ssrConfig = {
    input: ssrInputs,
    output: {
        format: 'esm',
        dir: serverBundle,
        entryFileNames: '[name].js'
    },
    plugins: [
        css({ output: 'bundle.css' }),
        svelte({
            compilerOptions: {
                dev: false,
                immutable: true,
                generate: 'server',
                hydratable: true,
            },
            preprocess: sveltePreprocess()
        }),
        resolve({
            dedupe: ['svelte']
        })
    ]
}

This is the config I'm using to compile my .svelte files into .js files rendered on the server.

Error:

[!] (plugin svelte) CompileError: $bindable is an illegal variable name. To reference a global variable called $bindable, use globalThis.$bindable

Dependencies:

"rollup-plugin-svelte": "^7.2.2", "svelte": "^5.0.0-next.1", "svelte-preprocess": "^5.1.4",

[dummdidumm]

This is not a reproduction. Please provide a code snippet that reproduces this. Please also state which version of Svelte you're using (make sure to upgrade to the latest)

[markpsiano]

updated :)

[Conduitry]

These are semver ranges - they don't actually say anything about the specific version of the compiler you're using, other than that it's at least 5.0.0-next.1.

[markpsiano]

Ah, here are the versions I'm using (checking node_modules)

svelte: 5.0.0-next.1 rollup-plugin-svelte: 7.2.2 svelte-preprocess: 5.1.4

[Conduitry]

$bindable() has only existed since 5.0.0-next.82 - https://github.com/sveltejs/svelte/pull/10851

[markpsiano]

5.0.0-next.1 is newer than 5.0.0-next.82 though, and has support for $bindable. I'm able to find its definition in the svelte node module code.

This is what I see in the library code:

/**
 * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
 *
 * ```ts
 * let { propName = $bindable() }: { propName: boolean } = $props();
 * ```
 *
 * https://svelte-5-preview.vercel.app/docs/runes#$bindable
 */
declare function $bindable<T>(t?: T): T;

[dummdidumm]

.1 is the very first version, it is the oldest one and did not include $bindable yet. To ensure you're on the latest version change it to ^5.0.0-next.152