Svelte 5: using var with $state is brittle

[Rich-Harris]

Describe the bug

State declarations are transformed thusly:

-let count = $state(0);
+let count = $.source(0);

If we tried to console.log(count) before the declaration, we would get a TDZ error:

Can't access lexical declaration 'count' before initialization

But if it's a var instead, we don't — instead we try to get(undefined).

-console.log(count);
+console.log($.get(count));

This errors with

signal is undefined

which is cryptic and unhelpful.

Possible remedies:

1. add a if (signal === undefined) return signal to the top of get

   svelte/packages/svelte/src/internal/client/runtime.js

   Lines 722 to 732 in 5094cb9

   	/**
   	* @template V
   	* @param {Value<V>} signal
   	* @returns {V}
   	*/
   	export function get(signal) {
   	var flags = signal.f;
   	if ((flags & DESTROYED) !== 0) {
   	return signal.v;
   	}

2. disallow var
3. hoist the declaration

Option 1 means doing a tiny bit of extra work on every get for something that's a real edge case. Option 2 feels like a bit of a cop-out. So I think we should probably do option 3.

Reproduction

link

Logs

No response

System Info

next

Severity

annoyance

[trueadm]

Can't we statically detect it's referenced before and just statically compile the read to undefined?

[Rich-Harris]

Not trivially:

var a = get_b(), b = $state();

function get_b() {
  return b; // we certainly can't compile this to `undefined`
}

With sufficiently sophisticated static analysis we could determine that b could be read before declaration, and replace the read with return b === undefined ? undefined : $.get(b) but that would likely involve a lot more work, and be a lot less reliable, than hoisting

[Conduitry]

Adjacent: #12900.

[dummdidumm]

I opted for option 4 in #12949: Add a new safe_get function which works like get but checks for undefined. That way only var declarations get the tiny penalty.