Export `SvelteArray` on `svelte/reactivity`

[kran6a]

Describe the problem

svelte/reactivity is already exporting the Date, Set and Map classes which allow us to do things like this:

//+layout.ts - using adapter-static
import {SvelteDate} from "svelte/reactivity";
import type {LayoutLoad} from "./$types.js";

const time = new SvelteDate();
setInterval(()=>time.setTime(Date.now()), 1000);

export const load = (async ()=>{
    return {
        time
}) satisfies LayoutLoad;

This example provides a single reactive reference to the current time to every page and sublayout that updates every second.
The same can be done with Sets, Maps and other reactive structures exported by svelte/reactivity.
Array, for an unknown reason, is not exported so we cannot do things like fetching data from the server, putting it in a reactive array and starting a WS or SSE subscription to append/remove items to/from said array when the server notifies us about an update.

I think having having such an asymmetric API is bad DX as it breaks developers expectations. From a developer POV it makes no sense that we can return a reactive Set/Map from a load function but not a reactive Array.

Describe the proposed solution

Export SvelteArray on svelte/reactivity so that adapter-static users can use it outside .svelte/.svelte.ts files like we can already use every other reactive class.

Importance

would make my life easier

[trueadm]

Reactive arrays are just $state([]), unless I'm missing something?

[Thiagolino8]

The only reason I can think of to provide a SvelteArray would be to extend it.

[trueadm]

@Thiagolino8 Yeah, please never extends arrays. History has taught us that there has never been a good reason to.

[kran6a]

Reactive arrays are just $state([]), unless I'm missing something?

The point is you can't use runes in +page.ts/+layout.ts files but you can call the constructors and get a reactive class that can be trivially shared with all descendant pages when returned on a +layout.ts file.

This only matters for adapter-static, which is the only adapter that allows you returning anything from load functions as it does not have to serialize/deserialize it. For other adapters it makes no sense as they can't return any reactive class from a load function.

[dummdidumm]

So the real fix is to support +page.svelte.ts/+layout.svelte.ts

[kran6a]

So the real fix is to support +page.svelte.ts/+layout.svelte.ts

Yeah, that would be better for this use case as we could also use reactive objects/primitives but I thought exporting the SvelteArray class would be a better welcomed change than allowing +page.svelte.ts/+layout.svelte.ts files as it just normalizes the svelte/reactivity exports and the functionality can be discovered via Language Service Protocol rather than needing to read the docs to discover it and having non adapter-static users who copied the example code wondering why it does not work for them.

Also svelte/reactivity can be used on any svelte app, framework and tools like Storybook while +page.svelte.ts/+layout.svelte.ts are svelte-kit specific. Storybook users would also wonder why they can create reactive sets to pass as props on .stories.ts files but not reactive arrays.

[trueadm]

@kran6a Providing SvelteArray is a bit problematic in turns of teaching good patterns. It also prevents people from using array literals to build non-holey arrays, so I don't think we ever want to export something like SvelteArray or SvelteObject.

[kran6a]

Then I think allowing +page.svelte.ts/+layout.svelte.ts would be the next better option even if it only works on svelte-kit.

[khromov]

@kran6a

This only matters for adapter-static, which is the only adapter that allows you returning anything from load functions as it does not have to serialize/deserialize it. For other adapters it makes no sense as they can't return any reactive class from a load function.

I don't think this is true. You can return something inside an if(browser) check on any adapter in +page.ts and it will be run only client side and hence does not need to serialize.

[webJose]

// reactiveArray.svelte.ts
export function reactiveArray<T>() {
  const arr = $state<T[]>([]);
  return arr;
}

// +layout.ts
import { reactiveArray } from './reactiveArray.svelte.js';

const arr = reactiveArray<string>();

Or am I misunderstanding?

[kran6a]

// reactiveArray.svelte.ts
export function reactiveArray<T>() {
  const arr = $state<T[]>([]);
  return arr;
}

// +layout.ts
import { reactiveArray } from './reactiveArray.svelte.js';

const arr = reactiveArray<string>();

Or am I misunderstanding?

Works only on .svelte.ts files and svelte-kit requires load functions to be defined in +page.ts/+layout.ts files. Storybook uses .stories.ts. Other reactive classes can be instantiated in .ts files since you can call their constructors via new.

[paoloricciuti]

// reactiveArray.svelte.ts
export function reactiveArray<T>() {
  const arr = $state<T[]>([]);
  return arr;
}

// +layout.ts
import { reactiveArray } from './reactiveArray.svelte.js';

const arr = reactiveArray<string>();

Or am I misunderstanding?

Works only on .svelte.ts files and svelte-kit requires load functions to be defined in +page.ts/+layout.ts files. Storybook uses .stories.ts. Other reactive classes can be instantiated in .ts files since you can call their constructors via new.

You can define the reactiveArray function in a .svelte.ts file and import it in the +layout.ts file and use it.

[webJose]

Works only on .svelte.ts files and svelte-kit requires load functions to be defined in +page.ts/+layout.ts files. Storybook uses .stories.ts. Other reactive classes can be instantiated in .ts files since you can call their constructors via new.

As Paolo already pointed out, my example is divided into 2 files: One file, reactiveArray.svelte.ts, satisfies the compiler requirement in the file name, and then you import from +layout.ts, satisfying Sveltekit's requirement.