How to deal with changes in the structure of persisted(...)

[gamberoillecito]

Hello, I'm building a website and I'm using this repo to store the user preferences (for example about whether or not to show a popup, notifications and so on). The structure is the following:

export const preferences = persisted('preferences', {
    /**Wether to show the welcome message when the page is first loaded */
    showWelcomeAtStart: true,
    notifications: {
        issuesOpened: false,
        issuesCancelledTimes: 0,
    },
    tutorial: {
        open: false,
    }
})

Let's say that a version of the website with these preferences is already online and used by users. Now I want to add another entry to the preferences to save some info about something else, for example the scroll position of a given page of the tutorial. What I have been doing so far is changing the object above and add scrollPosition: 0 below open:false but this seems to break the functionality for old users (who did not have the scrollPosition entry). How should I deal with this situations?

Example usage of the preferences:

let viewport = .... // The html element containing the scrollable text
viewport?.scrollTo({
	left: 0,
	top: prefs?.scrollPosition,
	behavior: 'smooth'
});

// ...

viewport?.addEventListener('scroll', () => {
	preferences.update((x) => ({
		...x,
		tutorial: { ...x.tutorial, scrollPosition: viewport?.scrollTop }
	}));
});

[joshnuss]

Hi @gamberoillecito,

I believe what you are trying to do is migrate the state of the store.

There are several techniques you can use:

• Use the callback beforeRead to detect if the data stored is an old version and migrate to new version.
• Put a version field in the store and check that when instantiating the store.
• Put a version number in the store's key, ie preferences.v1 and add some migration logic.
• If it's just a simple addition of fields, allow the field to be missing, by checking if the field is undefined

[gamberoillecito]

Hello, thank you very much for your answer, the last three examples are very clear while I'm not sure about the first one. Could you please give me an example?

[joshnuss]

There's an example of beforeRead in the test suite:

svelte-persisted-store/test/localStorageStore.jsdom.test.ts

Line 149 in 3775049

it("allows modifying initial value before reading", () => {

It's a way to modify the store when it's being read