Corrected StoreName: it can be specified by type argument

recruit-tech · Sep 9, 2023 · d3bac24 · d3bac24
1 parent 54aeeeb
commit d3bac24
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/apps/example-next/src/components/Counter.tsx b/apps/example-next/src/components/Counter.tsx
@@ -1,6 +1,10 @@
 "use client";
 
-import { useLocationState, StoreName, Refine } from "@location-state/core";
+import {
+  useLocationState,
+  DefaultStoreNames,
+  Refine,
+} from "@location-state/core";
 import { z, ZodType } from "zod";
 
 const zodRefine =
@@ -10,7 +14,7 @@ const zodRefine =
     return result.success ? result.data : undefined;
   };
 
-export function Counter({ storeName }: { storeName: StoreName }) {
+export function Counter({ storeName }: { storeName: DefaultStoreNames }) {
   const [counter, setCounter] = useLocationState({
     name: "counter",
     defaultValue: 0,

diff --git a/apps/example-next/src/components/List.tsx b/apps/example-next/src/components/List.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useLocationState, StoreName } from "@location-state/core";
+import { useLocationState, DefaultStoreNames } from "@location-state/core";
 
-export function List({ storeName }: { storeName: StoreName }) {
+export function List({ storeName }: { storeName: DefaultStoreNames }) {
   const [displayList, setDisplayList] = useLocationState({
     name: "display-list",
     defaultValue: false,

diff --git a/packages/location-state-core/src/hooks.ts b/packages/location-state-core/src/hooks.ts
@@ -1,21 +1,24 @@
 import { LocationStateContext } from "./context";
-import { StoreName } from "./types";
+import { DefaultStoreNames } from "./types";
 import { useCallback, useContext, useState, useSyncExternalStore } from "react";
 
 export type Refine<T> = (value: unknown) => T | undefined;
 
-export type LocationStateDefinition<T> = {
+export type LocationStateDefinition<
+  T,
+  StoreName extends string = DefaultStoreNames,
+> = {
   name: string;
   defaultValue: T;
-  storeName: StoreName | string;
+  storeName: StoreName;
   refine?: Refine<T>;
 };
 
 type Updater<T> = (prev: T) => T;
 type UpdaterOrValue<T> = T | Updater<T>;
 type SetState<T> = (updaterOrValue: UpdaterOrValue<T>) => void;
 
-const useStore = (storeName: StoreName | string) => {
+const useStore = <StoreName extends string>(storeName: StoreName) => {
   const { stores } = useContext(LocationStateContext);
   const store = stores[storeName];
   if (!store) {
@@ -25,16 +28,22 @@ const useStore = (storeName: StoreName | string) => {
   return store;
 };
 
-export const useLocationState = <T>(
-  definition: LocationStateDefinition<T>,
+export const useLocationState = <
+  T,
+  StoreName extends string = DefaultStoreNames,
+>(
+  definition: LocationStateDefinition<T, StoreName>,
 ): [T, SetState<T>] => {
   const storeState = useLocationStateValue(definition);
   const setStoreState = useLocationSetState(definition);
   return [storeState, setStoreState];
 };
 
-export const useLocationStateValue = <T>(
-  definition: LocationStateDefinition<T>,
+export const useLocationStateValue = <
+  T,
+  StoreName extends string = DefaultStoreNames,
+>(
+  definition: LocationStateDefinition<T, StoreName>,
 ): T => {
   const { name, defaultValue, storeName, refine } = useState(definition)[0];
   const store = useStore(storeName);
@@ -56,8 +65,11 @@ export const useLocationStateValue = <T>(
   return storeState;
 };
 
-export const useLocationSetState = <T>(
-  definition: LocationStateDefinition<T>,
+export const useLocationSetState = <
+  T,
+  StoreName extends string = DefaultStoreNames,
+>(
+  definition: LocationStateDefinition<T, StoreName>,
 ): SetState<T> => {
   const { name, defaultValue, storeName, refine } = useState(definition)[0];
   const store = useStore(storeName);

diff --git a/packages/location-state-core/src/types.ts b/packages/location-state-core/src/types.ts
@@ -1,6 +1,6 @@
 /// <reference types="navigation-api-types" />
 
-export type StoreName = "session" | "url";
+export type DefaultStoreNames = "session" | "url";
 
 export type Syncer = {
   key(): string | undefined;