diff --git a/package.json b/package.json index 79a914a..c6ca5be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chrome-extension-toolkit", - "version": "0.0.64", + "version": "0.0.65", "description": "A template for creating npm packages using TypeScript and VSCode", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/storage/createStore.ts b/src/storage/createStore.ts index 64e5fc9..8f60700 100644 --- a/src/storage/createStore.ts +++ b/src/storage/createStore.ts @@ -35,11 +35,16 @@ export type Store = { /** * A unique identifier for the store. This will be prepended to all keys in the store to avoid collisions. */ - storeId: string; + readonly storeId: string; /** * The options that were passed to the createStore function */ - options: StoreOptions; + readonly options: StoreOptions; + + /** + * The default values for the store. These were passed to the createStore function and will be used to initialize the store if the key is not already set. + */ + readonly defaults: StoreDefaults; /** * Initializes the store by setting any keys that are not already set to their default values. This will be called automatically when you first access a getter or setter. */ @@ -58,7 +63,12 @@ export type Store = { * @param value the value to set the key to */ set(key: K, value: Serializable): Promise; - set(values: Partial>): Promise; + + /** + * Sets the store with the values in the object passed in. + * @param values an object containing the keys and values to set in the store + */ + set(values: Partial>): Promise; /** * Returns a promise that resolves to the entire contents of the store. @@ -73,16 +83,19 @@ export type Store = { /** * A react hook that allows you to get and set the value of the specified key in the store from a functional component. * @param key the key to get the value of - * @param defaultValue an optional default value to use if the key is not already set * @returns a tuple containing the value of the specified key, and a function to set the value */ - use | undefined = undefined>( + use>(key: K): [D, (value: D) => Promise]; + + /** + * A react hook that allows you to get and set the value of the specified key in the store from a functional component. + * @param key the key to get the value of + * @param defaultValue the default value to use if the key is not already set + */ + use( key: K, - defaultValue?: D - ): [ - D extends Serializable ? Serializable : Serializable | undefined, - (value: Serializable) => Promise - ]; + defaultValue: Serializable + ): [Serializable, (value: Serializable) => Promise]; /** * Subscribes to changes in the specified key in the store, and calls the specified function when the key changes. @@ -133,6 +146,7 @@ function createStore( } const store = { + defaults, storeId, options, } as Store; @@ -265,7 +279,10 @@ function createStore( // @ts-ignore store.use = (key: keyof T, defaultValue?: T[typeof key]) => { - const [value, setValue] = useState(defaultValue); + // this handles the case where a user might want to explicitly pass undefined as a default value + // if the defaultValue is not passed, we will use the default value from the defaults object. + // This way `value` will always be of the correct type that is expected. + const [value, setValue] = useState(arguments.length === 2 ? defaultValue : defaults[key]); useEffect(() => { store.get(key).then(setValue as any); @@ -345,3 +362,14 @@ export function createManagedStore(storeId: string, defaults: StoreDefaults(storeId: string, defaults: StoreDefaults, options?: StoreOptions): Store { return createStore(storeId, defaults, 'session', options); } + +// interface MyStore { +// name: string; +// age: number; +// isCool: boolean; +// } +// const store = createLocalStore('my-store', { +// age: 0, +// isCool: false, +// name: 'John Doe', +// });