Cannot use to create a custom store

[freb]

This library appeared to be exactly what I was looking for (and trying to implement myself), but as I tried to use it I ran into issues.

My goal is to keep my store strongly typed and provide setters for each field that should be editable. Something like the following:

const Key = "settings"

type Settings = {
	recording: boolean;
	recordTabId: string;
	onSettingsPage: boolean;
	settingsUrl: string;
}

function settingsStore() {
	// Causes more issues
	// const { subscribe, update } = chromeStorageLocal<Settings>(Key)

	const settings = chromeStorageLocal<Settings>(Key)

	return {
		subscribe: settings.subscribe,
		startRecording: () => settings.update(state => ({...state, recording: true})),
		stopRecording: () => settings.update(state => ({...state, recording: false})),
		setRecordTabId: (id: string) => settings.update(state => ({...state, recordTabId: id})),
		clearRecordTabId: () => settings.update(state => ({...state, recordTabId: ""})),
	}
}

Doing this, I run into issues where this is not defined when subscribing. If I pull the subscribe and update methods off of chromeStorageLocal, I run into similar issues when calling update from my setters (i.e. update(...) instead of settings.update(...)).

I was going to try extending the ChromeStorageStoreAdapter class, but it is not exported.

Likely this approach just is not compatible with the library. And assuming it isn't and isn't meant to be, I'm wondering if you have any other guidance on a way to type the store with an object and allow callers to set individual keys without having to pass back in the entire object themselves.

I'm trying to avoid doing the following from the callers:

let settingsStore = chromeStorageLocal<Settings>(Key)
settingsStore.update(state => ({...state, recording: false}))

[freb]

I'm tried a different approach and am very happy with the results. Instead of trying to manage one object I decided to use a separated key for each property. It looks like the following:

class SettingsStorageLocal {
	constructor() {
		this.recording = chromeStorageLocal("recording")
		this.recordTabId = chromeStorageLocal("recordTabId")
		this.onSettingsPage = chromeStorageLocal("onSettingsPage")
		this.settingsUrl = chromeStorageLocal("settingsUrl")
	}
	// We could also make the Readable and the define setters
	recording: Writable<boolean>
	recordTabId: Writable<string>
	onSettingsPage: Writable<boolean>
	settingsUrl: Writable<string>

	init(): void {
		this.recording.set(false)
		this.recordTabId.set("")
		this.onSettingsPage.set(false)
		this.settingsUrl.set(`chrome://extensions/?id=${chrome.runtime.id}#allow-incognito`)
	}
}

const store = new SettingsStorageLocal()
export default store
export const {recording, recordTabId, onSettingsPage, settingsUrl} = store

I'm happy to discuss the previous issues I was having but am going to go ahead and close this.