Large objects

[Jakobud]

So this package takes all your preferences in a single persistent object. And whenever any value in your preferences gets updated, the entire object is changed and it triggers subscription events every place it's used. How do I set a subscription only on a single value and not the entire object?

What I'm thinking is that lets say you build a complicated web app, something with 100+ different settings and preferences that can be adjusted and stored. That means that your UI menus/windows in your app are going to have various HTML input controls to make those changes. And every single one of those HTML input components will be subscribed to your preferences object changing. And thus, anytime any single value in your preferences changes, it will trigger a subscription event on every single UI control, which could be hundreds depending on the complexity of the web app. I would think that would have a lot of opportunity to introduce some frontend lag.

Any thoughts on this? Is it possible to even subscribe to individual values?

[joshnuss]

Hi Jakobud,

Svelte Stores are designed to notify subscribers when the entire state changes.

But you can break up your state into multiple Svelte stores.

Alternatively, you can use derived stores to break up a bigger object, but all derived stores would be notified of changes. But it would reduce the messages to UI components.

[pjtpj]

This worked for me:

import { persisted } from 'svelte-local-storage-store';
export const showDebugLog = persisted('showDebugLog', false);

I plan to put all my settings into a file, $/lib/stores/settings.ts. I'm not sure how this will impact the total size of my localStorage vs using a single object with multiple keys/properties and values. I guess it depends on if/how keys count against localStorage usage. For TypeScript, it will require a longer import statement, but result in better type safety and about the same number of total code characters since I won't have to use an object name prefix on every value used in the code.