square / svelte-store Goto Github PK

How would one use debounce/throttle when using asyncWritable? Currently sending requests to an API and the asyncWritable triggers on an input with bind:value because I have a 3rd argument set.

I have a component that's only displayed conditionally. Inside that component, I have an asyncDerived store that derives from a writable store that's defined in a global stores.js file.

App.svelte

{#if displayMyComponent}
<MyComponent />
{/if}

MyComponent.svelte

<script>
import { writable, asyncDerived } from '@square/svelte-store';
import { searchText } from 'stores';

const sortCol = writable('foo');

const myStore = asyncDerived(
  [searchText, sortCol],
  async ([theSearchText, theSortCol]) => {
    console.log('updating');
    return await getData(theSearchText, theSortCol);
  },
  false
);
</script>

stores.js

import { writable } from '@square/svelte-store';

export const searchText = writable('');

The first time displayMyComponent becomes true and the component is displayed, the stores work as expected.

However, when displayMyComponent is toggled from false back to true, thus destroying and reloading the component, whenever the value searchText changes, the derived function runs twice: I see "updating" twice in the console and getData produces two identical network requests. Toggling the display flag again produces triplicate behavior.

Notably, this duplication doesn't happen when the value of sortCol changes no matter how many times the component is destroyed and reloaded. I don't think this happens when you're using plain Svelte derived stores, either.

It seems like there needs to be an unsubscription that happens when the component is destroyed. Is there something I can put in onDestroy that will break the dependency between searchText and myStore? Or a better way to define myStore?

https://github.com/square/svelte-store/blob/ccb97fce941344c510f2e80eedb523a477df6213/src/async-stores/types.ts#L37C1-L41C2

I think "true" should be "boolean", the following returns an error

  const {store: positionStore, state: positionState} = asyncReadable(
    {},
    async () => {
      const response = await fetch(URL_API + 'positions');
      const userObject = await response.json();
      console.log(userObject)
      return userObject;
    },
    { reloadable: false, trackState: true }
  );

Type 'false' is not assignable to type 'true'.ts(2322)
(property) reloadable?: true

Currently the Loadable implementation introduces a new type and requires extra syntax:

{#await myLoadableStore.load()}
 <p>Currently loading...</p>
{:then}
 <p>Your loaded data is: {$myLoadableStore}</p>
{/await}

What about just making the store itself implement .then() ie making it a Thenable.
The syntax would then look like this:

{#await myLoadableStore}
 <p>Currently loading...</p>
{:then}
 <p>Your loaded data is: {$myLoadableStore}</p>
{/await}

Hey all! With the 1.0 release I think we've arrived at a pretty complete and robust set of features. With that in mind I opened a discussion in the main Svelte repository about the possibility of merging these features in.

Is that something you'd like to see? Or does existing as a separate package make more sense to you?

weigh in here: sveltejs/svelte#8011

This package is written with ES modules, but depends on Node-style imports (inferring extensions of *.js and */index.js). This combination is not supported when moduleResolution = 'NodeNext'. I've updated all of the imports and tested that they work in a fork at https://github.com/bmcbarron/svelte-store. If your amenable, I'll send a pull request.

Consider the store

export const receivedEvent = readable<boolean>(undefined, (set) => {
  const setStore = () => set(true);
  addEventListener(SOME_EVENT , setStore);
  return () => removeEventListener(SOME_EVENT, setStore);
});

This store should load the first time SOME_EVENT is fired. However if you await receivedEvent.load() without subscribing to the store, the store will never load. This is because there is no subscription to the store, so its start function never runs, and thus the event listener is never created.

Introduced in: v0.2.0

const hasConsent = actionWritable((set) => {
    const setConsent = set(true);
    addEventListener('CONSENT_EVENT', setConsent);

    return () => removeEventListener('CONSENT_EVENT', setConsent);  
});

This works perfectly for production purposes, however I'm running into issues in testing. How should we reload or reset this store in a test environment?

What I have tried:

• Using flagForReload which is defined by the Loadable<any> type. I received the following error: flagForReload is not a function. Seems like we have some divergence between the type and exposed functions for readable/writable.
• Setting the store back to undefined. This had no affect on the load state.

I can see from your discussions here that this is intended for one off situations and shouldn't be able to be reset. I believe we need to be able to reset these stores in testing environments.

I have the following setup

export type LastLocation = {
    location: null|[number, number]
    state: "DENIED"|"ALLOWED"|"UNKNOWN"|"ASKED"
}

export const lastLocation = persisted<LastLocation>({
    location: null,
    state: "UNKNOWN",
}, "last-location", {
    storageType: "LOCAL_STORAGE",
})

which I then use in my component

<script lang="ts">
    import {lastLocation} from "./utils"

    if($lastLocation.state === "UNKNOWN") {
        // error
    }
</script>

The problem is, that the first time the store is initialized and saved to the local storage with it's default value, $lastLocation is undefined. I need to reload the store/page.

This line is the culprit https://github.com/square/svelte-store/blob/main/src/persisted/index.ts#L140

The initial value should be passed, NOT undefined

Hi!
I'm running into a weird issue on my first time using asyncDerived stores.
I have an asyncWritable store called collections defined as such

export const collections = asyncWritable(
    [],
    async () => {
        const response = await fetch('/collections');
        return response.json();
    },
    async (newCollections) => {
        console.log('newCollections', newCollections)
        const postBody = JSON.stringify(newCollections);
        await fetch('/collections', {
            method: 'POST',
            body: postBody
        });
    }
);

From this i derived a collection store that corresponds to the currently selected collection:

export const currentCollection = persisted('', 'currentCollection');

export const collection = derived(
    [currentCollection, collections],
    ([$currentCollection, $collections]) => {
        if ($collections && $collections.length > 0 && $currentCollection && $currentCollection !== '') {
		let collection = $collections.find(({name}) => name === $currentCollection);
		collection.id = $collections.findIndex(({name}) => name === $currentCollection);
		return collection;
	}
    }
)

This setup works wonderfully but I'm having issue trying to create a another derived store that gets all the comments ids from the current collection and maps them after fetching from google APIs :

export const comments = asyncDerived(
    collection,
    async ($collection) => {
        if ($collection && $collection.comments) {
            console.log('collection', $collection)
            let commentLinks = $collection.comments;
            let commentIds = commentLinks.map(link => link.split('&lc=')[1]);

            await Promise.all(commentIds.map(async (id) => {
                if(id !== undefined) {
                    const response = await fetch(`https://youtube.googleapis.com/youtube/v3/comments?part=snippet&parentId=${id}`);
                    const json = await response.json();
                    return json.items[0];
                }
            })).then((comments) => {
                // here the comments object correctly contains all the data
                return comments;
            })
        }
    }
)

In fact when I try to run

console.log(await comments.load())
//or
comments.load().then(($comments) => {
   console.log($comments)
 })

Both show that the store is undefined.
I'm probably missing something trivial, but i feel like this should work.
Thanks in advance for any help!

Errror at demo code at https://codesandbox.io/embed/square-svelte-store-demo-tbvonh?file=/App.svelte&codemirror=1

When click on x icon, there is error:

_stores.suggestedBlogs.reload is not a function

Can the latest version be published to remove the peer dependency warnings

➤ YN0060: │ svelte is listed by your project with version 4.2.10, which doesn't satisfy what @square/svelte-store (pf597d) requests (^3.0.0).

I have two stores, and I'm trying to figure out how to sync them up correctly. Using MockServiceWorkerJS, I seem to get into a problem that I'm requesting my updated Posts object before the starredStore has had the chance to finish its update handler.

Is there a way to delay updating downstream stores until the upstream ones have completed their updates?

export const starredStore: WritableLoadable<string[]> = asyncWritable(
  [],
  async () => {
    const response = await fetch(`/starred`);
    // Error handling
    return await response.json();
  },
  async (newStarred) => {
    const postBody = JSON.stringify(newStarred);
    const response = await fetch(`/starred`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: postBody,
    });
    // Error handling
    return newStarred;
  }
);


export const starredPosts: Loadable<any[]> = asyncDerived(
  starredStore,
  async (_) => {
    const response = await fetch(`/posts`);
    // Error handling
    return await response.json();
  }
);

After migration to v1 I got some warnings and errors... webpack can't compile page now ;/

 WARN  Compiled with 3 warnings                                                                                                                                                                            
 warn  in ./assets/svelte/apps/x1/stores/authMethodsStore.ts                                                                                                                                     
export 'asyncDerived' (imported as 'asyncDerived') was not found in '@square/svelte-store' (possible exports: get)

 warn  in ./assets/svelte/apps/x1/stores/configStore.ts                                                                                                                                          
export 'asyncReadable' (imported as 'asyncReadable') was not found in '@square/svelte-store' (possible exports: get)

 warn  in ./assets/svelte/apps/x1/stores/userStore.ts                                                                                                                                           
export 'persisted' (imported as 'persisted') was not found in '@square/svelte-store' (possible exports: get)

 ERROR  Failed to compile with 5 errors                                                                                                                                                                   

Module build failed: Module not found:
"./node_modules/@square/svelte-store/lib/index.js" contains a reference to the file "./async-client".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@square/svelte-store/lib/index.js" contains a reference to the file "./async-stores".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@square/svelte-store/lib/index.js" contains a reference to the file "./persisted".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@square/svelte-store/lib/index.js" contains a reference to the file "./standard-stores".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@square/svelte-store/lib/index.js" contains a reference to the file "./utils".
This file can not be found, please check it for typos or update it if the file got moved.

webpack compiled with 5 errors and 3 warnings

Any tips?

Hi,
in my project I had a writable store containing a Map with number as keys, that map is a dependency of an asyncDerived store, but I realized my derived store was not triggering the update.
I tried to compare it with the svelte "standard" stores and it works

<script>
	import { writable, derived, asyncWritable, asyncDerived } from '@square/svelte-store';

	// Standard
	const stdSet = writable(new Set([Math.random()]));
	const stdMap = writable(new Map([[Math.random(), Math.random()]]));
	const stdDer = derived([stdSet, stdMap], ([$set, $map]) => ({ set: $set, map: $map }));

	function editStdSet() {
		stdSet.update((set) => set.add(Math.random()));
	}
	function editStdMap() {
		stdMap.update((map) => map.set(Math.random(), Math.random()));
	}

	$: console.log('standard set', $stdSet.size);
	$: console.log('standard map', $stdMap.size);
	$: console.log('standard derived', { set: $stdDer.set.size, map: $stdDer.map.size });

	// Async
	const asySet = asyncWritable([], async () => new Set([Math.random()]));
	const asyMap = asyncWritable([], async () => new Map([[Math.random(), Math.random()]]));
	const asyDer = asyncDerived([asySet, asyMap], async ([$set, $map]) => ({ set: $set, map: $map }));
	function editAsySet() {
		asySet.update((set) => set.add(Math.random()));
	}
	function editAsyMap() {
		asyMap.update((map) => map.set(Math.random(), Math.random()));
	}

	$: asySet.load().then(() => console.log('async set', $asySet.size));
	$: asyMap.load().then(() => console.log('async map', $asyMap.size));
	$: asyDer.load().then(() => console.log('async derived', { set: $asyDer.set.size, map: $asyDer.map.size }));

	// Standard writable w/ async derived
	const stdAsyDer = asyncDerived([stdSet, stdMap], async ([$set, $map]) => ({ set: $set, map: $map }));

	$: stdAsyDer.load().then(() => console.log('standard writable w/ async derived', { set: $stdAsyDer.set.size, map: $stdAsyDer.map.size }));
</script>

<p>
	<button on:click={editStdSet}>Reset Std Set</button>
	<button on:click={editStdMap}>Reset Std Map</button>
</p>

<p>
	<button on:click={editAsySet}>Reset Asy Set</button>
	<button on:click={editAsyMap}>Reset Asy Map</button>
</p>

I'm using a 3rd party library which exposes a Svelte store, and I was wondering if it could be modified or consumed by the Loadable stores, while maintaining the same level of reactivity?

This i18n library (https://github.com/kaisermann/svelte-i18n) exposes a locale store, and I was trying to use persisted to clean up my local storage handling for languages. However, when I change my language, nothing seems to happen (e.g. the cascade of store updates don't appear to occur).

So, this got me thinking I was supposed to wrap that i18n store in a derived or something else first? Or somehow pull it into this Loadable ecosystem?

Hi! I recently discovered this awesome library and started rewriting my webapp using it as it facilitates async state management a lot. However, I'm having some trouble making the asyncDerived store work correctly.

I have an asyncDerived store that depends on another (synchronous) store which is updated over time. When the sync store is updated I would expect the asyncDerived store to fire off an update, but that's not the case. Here's a code snippet:

const blockNumber = writable<bigint | null>(null); /* updated over time by an external module */

const balance = asyncDerived(
    [blockNumber],
    async ([$blockNumber]) => {
        if (!$blockNumber) return; /* needed because blockNumber is first set in the browser context (bigint is not serializable) */
        return await getBalance();
    });

The problem is that the load function runs only once (and it won't load the balance even the first time, because blockNumber is initially null). So then I tried to change asyncDerived to derived, without touching anything else, and surprisingly it works, the store gets updated on every new blockNumber. I thought you couldn't run an async function in this case?

The problem with a regular derived store is that I cannot reload it at will (unless I create a dummy store as a dependency and update it to force a refresh). But in the case of the asyncDerived store shown above, if I set reloadable: true and do the following, the store actually gets updated on new blockNumber values:

if (browser} {
        blockNumber.subscribe(async () => {
        await balance.reload?.();
    });
}

Although, in this case, the first good value for the balance store will only get loaded after the first new blockNumber value.

Any insights on what I'm doing wrong with the async store?

I came to this project after the Svelte Summit talk and it looks very promising (pun intended).

I just wanted to ask what would be the canonical way to handle errors? For example, when your post request to update fails how do you restore to the state before the optimistic update without refetching all the data from an api? Is it done automatically on a failed promise? Also, what happens if a get request fails due to network issues? Will load promise still resolve with the previous data?

By the way, the idea behind this project is awesome. I’ve been thinking to build something myself to solve similar problems. You did a great work :)

I see svelte 4 support was added via 44341f5. Please update npm to the latest commit :)

After migration to v1.0.11 I have one more issue when running webpack build

 ERROR  Failed to compile with 3 errors                                                         

error  in ./node_modules/@square/svelte-store/lib/persisted/storage-utils.js
export 'get' (imported as 'Cookies') was not found in 'js-cookie' (possible exports: default)

error  in ./node_modules/@square/svelte-store/lib/persisted/storage-utils.js
export 'set' (imported as 'Cookies') was not found in 'js-cookie' (possible exports: default)

error  in ./node_modules/@square/svelte-store/lib/persisted/storage-utils.js
export 'remove' (imported as 'Cookies') was not found in 'js-cookie' (possible exports: default)

webpack compiled with 3 errors and 3 warnings

It looks like js-cookie has old typescript mappings in "@types/js-cookie" module?

More info here:
js-cookie/js-cookie#717

I just noticed that until I passed trackState: true, my attempts to use isLoading or isPending were failing. But typescript didn't warn me about it. So I thought that it actually can be typed in some whey similar to this snipped

But, then question. Is this desired?

Firstly thank you for this superb store extension.

I would like to preload/prefetch the data in the store during the SSR. Is this the recommended way to do it?

import type { PageLoad } from './$types';
import { productsStore } from '$lib/stores/products';

export const load = (() => {
    productsStore.load();
}) satisfies PageLoad;

Maybe a weird workflow here, but I persist a handful of strings to my local storage. Just vanilla strings.

When I reload my page, the persisted store appears to try to serialize/deserialize to/from JSON (which is stated in the docs), but it leads to this after 3 reloads

current:locale = "\"\\\"\\\\\\\"fr\\\\\\\"\\\"\""

I was just wondering if there was any way (or if it's simple enough), to set the JSON part of the serialization as an optional thing, and otherwise just read/persist flat strings.

I've been trying to get enableStoreTestingMode running on my tests, however, I can't seem to figure out where it can be placed to not cause an exception.

I've tried to place it in my setup file, in various unit test files, or anywhere else. I'm wondering if it's related to when vitest runs its setupFiles. Maybe my application is being launched before setupFiles runs?

Working on a small reproduction repo.

Using vitest, in vite.config.ts, I have setup-dom-env.ts in setupFiles, so it should run before any of my tests:

test: {
      include: ["src/**/*.{test,spec}.{js,ts}"],
      environment: "jsdom",
      environmentMatchGlobs: [["**/*.dom.test.{js,ts}", "jsdom"]], // TODO: happy-dom not working with MSWjs
      globals: true,
      setupFiles: "./tests/setup-dom-env.ts",
    },

In setup-dom-test.ts:

// Enable Svelte Store testing mode (adds a "reset" method to all stores)
import { enableStoreTestingMode } from "@square/svelte-store";
enableStoreTestingMode();

---

Error: Testing mode MUST be enabled before store creation
 ❯ Module.enableStoreTestingMode node_modules/.pnpm/@square+svelte-store@1.0.15/node_modules/@square/svelte-store/src/config.ts:17:3
 ❯ tests/setup-dom-env.ts:10:1
      8| // Enable Svelte Store testing mode (adds a "reset" method to all stores)
      9| import { enableStoreTestingMode } from "@square/svelte-store";
     10| enableStoreTestingMode();

Alternate approach, using the beforeAll hook.

beforeAll(() => enableStoreTestingMode());

---

Error: Testing mode MUST be enabled before store creation
 ❯ Module.enableStoreTestingMode node_modules/.pnpm/@square+svelte-store@1.0.15/node_modules/@square/svelte-store/src/config.ts:17:3
 ❯ tests/setup-dom-env.ts:28:17
     28| beforeAll(() => enableStoreTestingMode());

Amazing project, congratulations!

Is there a way to persist to IndexedDB?

My app has projects each project has it's own id and a project can have members. So in SvelteKit it looks something like: (app)/projects/[id]/members/[id] . In my members +page.svelte I use an await block for the asyncWritable store. What I want to know is how to rerun the await block inside the members +page.svelte and also pass some arbitrary data argument to the asyncWritable which can be used as the project id filter in my API URL so it only list the members of current project something like members.load($page.params.id) .

Currently, I access project id inside the store file using get(page).params.id but when I navigate to a different project ($page.params.id has changed) the members list doesn't update. I want the members.load() to rerun when $page.params.id changes. I know something similar can be achieved using combination of SvelteKit's native load() and invalidate() but how to do above in context of square svelte stores?

Example: {#await safeLoad(myStore) then loadedSuccessfully}
This generates a single promise that resolves on the first load of the store.
If that resolves successfully but then the store is reloaded and fails, the template does not have any access to this new state information.

I have a Typescript problem when recreating your examples.

{#await myLoadable.load()}
[...]

Typescripts complains that load might be undefined. I wonder why the interface is like that.

I would have to wrap each Loadable in an #if, like

{#if myLoadable.load}
  {#await myLoadable.load()}

But that is rather cumbersome.

Love the the idea of the package - any other way I am missing to fix this? Thanks!

Using a normal svelte store, the return value from a readable or writable would be a function thats being called on unsubscribe.
But I cannot figure out how to return a unsubscribe function with asyncReadable or asyncWritable.

Thanks for this great tool! It's a big help in organizing things and makes it easier to manage and reason about.

Just wondering what's the recommended approach for handling individual items in a store?
For example, updating a single item stored inside an AsyncWritable store, sending it back to the server, etc. instead of a whole list of items.
I've noticed the example of removing an item from a store and it would be nice if there's also an example of how to use it when adding / updating items.

Thanks

When using the current version 0.1.3, I have the following error. Rolling back to 0.1.1 fixes the problem.

Error message:

exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Dev\[...]\node_modules\.pnpm\@[email protected]\node_modules\@square\svelte-store\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Hi, compliments for this great library.
Just a hint: Your Changelog.md seems to show year 2022 instead of 2023 for the latest versions, so I thought I let you know.
Greetings!

Example:

const getData = (): Promise<Data[]> => { /* ... */ }
const store = asyncDerived([], getData)

<script lang="ts">
    import {store} from '$lib/stores'
    import {derived} from '@square/svelte-store'
    const transformedData = derived(store, data => {
        // according to TypeScript, data here has type of Data[], when in reality it's Data[] | undefined
    })
</script>

is there any way to enforce undefined checks inside the derived stores?

one way of doing it that i have in mind is by defining a wrapper similar to how nanostores suggest to do it:

import { atom, onMount } from 'nanostores'

type Posts = { isLoading: true } | { isLoading: false, posts: Post[] }

let posts = atom<Posts>({ isLoading: true })

onMount(posts, () => {
  fetch('/posts').then(async response => {
    let data = await response.json()
    posts.set({ isLoading: false, posts: data })
  })
  return () => {
    posts.set({ isLoading: true })
  }
})

how would you approach this?

Hello from Poland :)
I really appreciate what you are doing :) your module helps me keep my code as clean as possible :)

What do you think about adding sessionStorage and localStorage functionality?

I did something like that for myself and I'm quite happy about that. This is how this can look for asyncReadable function:

export const asyncSessionReadable = <T>(sessionItemName: string, initial: T, loadFunction: () => Promise<T>, reloadable?: boolean): Loadable<T> => {
    const finalLoadFunction = async () => {
        const result = await loadFunction();
        sessionStorage.setItem(sessionItemName, JSON.stringify(result));
        return result;
    };

    const { subscribe, load } = asyncReadable(
        {},
        async () => {
            if (sessionStorage.getItem(sessionItemName)) {
                return JSON.parse(sessionStorage.getItem(sessionItemName));
            }
            const result = await finalLoadFunction();
            return result;
        },
        reloadable,
    );

    return {
        subscribe,
        load,
        reload: finalLoadFunction,
    };
};

Hi! Love this library, just started using it, but I'm getting a "Directory import 'node_modules/@square/svelte-store/lib/async-client' is not supported resolving ES modules imported from node_modules/@square/svelte-store/lib/index.js." Any ideas how I can fix this? Thanks!

I'm importing it like so:

import { asyncDerived } from "@square/svelte-store"

currently we have the following in the documentation (which is reactive)

{#await myLoadableStore.load()}
 <p>Currently loading...</p>
{:then}
 <p>Your loaded data is: {$myLoadableStore}</p>
{/await}

we could warn that the following won't be reactive

{#await myLoadableStore.load()}
 <p>Currently loading...</p>
{:then myValue}
 <p>Your loaded data is: {myValue}</p>
{/await}

It is possible to want to access the contents of a single async store from multiple places. Is it necessary for application code to prevent multiple concurrent (async concurrent, not thread) calls to its load function to prevent duplicate fetches, for example? This of course extends to the entire derived tree and becomes much more complicated for the application.

Having looked at the source I think this is correctly prevented. Having done some basic testing it also looks to avoid duplicate processing. Still, I thought it was better to ask to make it clear.

Thanks so much guys for creating this. It makes my business logic so much better. Keep it up!

(There were no Github discussions, so I figured I'd throw it here).

Hi,

I'm using TypeScript and since load and reload are optional in stores, I need to write my code like this:

export let asyncStore: Loadable<unknown>

asyncStore.reload?.()

{#await asyncStore.load?.()}
    <div />
{:then} 
    <div />
{/await}

What is the point they are optional? Is there some use case when your store doesn't have them?

After installing and using the package my dev console started priting this:

@square/svelte-store doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
Sourcemap for "/Users/sarcevicantonio/dev/priv/kcalCalc/node_modules/.pnpm/@[email protected]/node_modules/@square/svelte-store/lib/index.js" points to missing source files

Since the package is using ESM and isn't using .mjs extensions, the package.json type field should be set to type.

Since Sourcemaps point to missing .ts Sourcefiles, maybe the .ts files could be shipped as well?

Love the package btw! Helps me handle async data cleanly with such little code 🤯

Existing functionality works well for happy-path but unhappy-path could use some work.

As is, if an async store fails to load it will return the promise rejection with its load function. This can be caught in templates by using safeLoad but if this is done then the error is not exposed in the console or caught by automatic error logging.

This can be worked around by adding a try catch block to every async store and manually logging any errors before re-throwing. Instead of doing this every time this should be an option in this package.

Allow for the passing in of an error logger callback in a configuration step that will be called whenever there is an error in the load function of an async store.

Hi,

As far as I understand, this library is extremely useful when you want to retrieve some data on a page load. But I tried to make it work for another pretty common use case - user action. For example, button click:

<script lang="ts">
  import { asyncReadable } from "@square/svelte-store"

  const data = asyncReadable(undefined, async () => {
    const resp = await fetch("https://catfact.ninja/fact")
    console.log(resp)
    return await resp.json()
  })
</script>

<button on:click={() => data.load && data.load()}>Fetch data</button>

<div>{JSON.stringify($data)}</div>

Unfortunately, the server (I'm using SvelteKit) is issuing the network request during the render, not on click handler. It seems like the problem is in the template, cause when I comment out this line:

<div>{JSON.stringify($data)}</div>

Then it doesn't try to load content on a first load. I somehow expected that it would use default value, until you call .load() somewhere, either in one of callbacks, or in template using {#await}. But seems that it calls a load under the hood when I access the store (what's the point of initial value then?).

I also tried something like this (which didn't help either)

<script lang="ts">
  import { asyncReadable } from "@square/svelte-store"

  let requestIsLoading = false
  const data = asyncReadable(undefined, async () => {
    const resp = await fetch("https://catfact.ninja/fact")
    return await resp.json()
  })
</script>

<button on:click={() => (requestIsLoading = true)}>Fetch data</button>

{#if requestIsLoading}
  {#await data.load?.()}
    <div>loading</div>
  {:then}
    <div>{JSON.stringify($data)}</div>
  {/await}
{/if}

Would appreciate any feedback regarding this direction. Thanks in advance.

This package looks rad & I'd love to try it.

i'd like some kind of quickstart at the top of the readme, with the npm install command y'know!

How do I set an initial value in an asyncWritable?

I have read in the docs:

asyncWritable

Our first two arguments work just like an asyncDerived store--we can pass any number of stores and we can use their values to set the value of the store once the parents have loaded.

asyncDerived

However, while regular derived stores will invoke that function whenever any of the parent values changes (including initialization) an asyncDerived store will only do so after all of the parents have finished loading.

Intended use:

{#await my_store.load() then}
	<ul>
	    {#each $my_store as val}
	      <li>
	        {...val}
	      </li>
	    {/each}
	</ul>
{/await}

And sometimes getting the error Uncaught (in promise) Error: {#each} only iterates over array-like objects.

This package was not written in typescript's strict mode, and as such consumers that are in strict mode run into some inconsistent typing, particularly when it comes to potentially undefined values. This package should be overhauled to be strict mode compatible, at which point further typing issues will be easier to identify and resolve.

Svelte 5 will be released sometime this year with the new runes API (Preview Docs) and while stores are not deprecated, $runes will allow you to do all the same things. So, are there plans to eventually support Svelte 5 when it's officially released? I really like this package's ideas and its svelte API compared to the competitors and hope it stays maintained ❤️