From 309079981bdb59086ded4cbd66d932631a1abea3 Mon Sep 17 00:00:00 2001 From: Ridwan Olanrewaju Date: Wed, 27 Dec 2023 23:45:53 +0100 Subject: [PATCH] Update portal implementation and utility functions --- README.md | 37 +++-- src/builder/createBuilder.ts | 10 +- src/definition/portal.ts | 32 ++++- src/portal/index.ts | 2 +- src/portal/makePortal.ts | 140 +++++++++++++++++++ src/portal/makeUsePortal.ts | 91 ------------ src/portal/portal.ts | 17 ++- src/portal/useCookieImplementation.ts | 8 +- src/portal/useLocalImplementation.ts | 6 +- src/portal/usePortal.ts | 146 -------------------- src/portal/usePortalImplementation.ts | 31 +---- src/portal/useSessionImplementation.ts | 6 +- src/utilities/getResolvedState.ts | 4 +- tests/{usePortal.test.ts => portal.test.ts} | 30 ++-- tests/usePortalImplementation.test.ts | 16 +-- 15 files changed, 237 insertions(+), 339 deletions(-) create mode 100644 src/portal/makePortal.ts delete mode 100644 src/portal/makeUsePortal.ts delete mode 100644 src/portal/usePortal.ts rename tests/{usePortal.test.ts => portal.test.ts} (82%) diff --git a/README.md b/README.md index dcae78b..2692790 100644 --- a/README.md +++ b/README.md @@ -33,13 +33,10 @@ The following is an overview of the utility functions and hooks available in the | Function | Description | |--------------------|------------------------------------------------------------------| | `atom` | A utility for creating isolated states outside a component | -| `usePortal` | Create a portal for accessing and updating states | -| `usePortal.local` | A hook to persist state in Local Storage | -| `usePortal.session` | A hook to persist state in Session Storage | -| `usePortal.cookie` | A hook to persist state in `document.cookie` | -| `createBuilder` | Create a builder object for defining keys and values | -| `cookieStorage` | An object representing the Cookie Storage API | -| `debounceEffect` | A utility for creating a debounced effect in React | +| `portal` | Create a portal for accessing and updating states | +| `createBuilder` | Create a builder object for defining keys and values | +| `cookieStorage` | An object representing the Cookie Storage API | +| `debounceEffect` | A utility for creating a debounced effect in React | ## Usage @@ -52,18 +49,18 @@ import { atom, createBuilder, cookieStorage, - usePortal, + portal, debounceEffect } from "@ibnlanre/portal"; ``` -### To create a `portal` for managing state, use the `usePortal` function +### To create a `portal` for managing state, use the `portal` function Here is an example: ```typescript // Setting an initial state is optional. -const [name, setName] = usePortal("client", { +const [name, setName] = portal.use("client", { state: { name: "John Doe", age: 54, @@ -74,7 +71,7 @@ const [name, setName] = usePortal("client", { The state can also be retrieved from a browser store. A good practice is to define the `get` function before the `set` function, because of type inference. ```typescript -const [token, setToken] = usePortal("token", { +const [token, setToken] = portal.use("token", { // Fallback initial state state: "", @@ -94,13 +91,13 @@ const [token, setToken] = usePortal("token", { }); ``` -### To create a typed `portal` with a defined store, you can use the `usePortal.make` function +### To create a typed `portal` with a defined store, you can use the `portal.make` function -This allows you to manage and access the store value outside of a React component. Here's an example of how to use `usePortal.make`: +This allows you to manage and access the store value outside of a React component. Here's an example of how to use `portal.make`: ```typescript // Create a store for type safety -const store = { +const record = { foo: { bar: { baz: "qux" @@ -109,12 +106,12 @@ const store = { }, }; -// Create the portal outside the React Component, +// Make typed portals outside of React Components, // so that it can be exported and used elsewhere. -export const useStorePortal = usePortal.make(store); +export const store = portal.make(record); // Manage and access the store value -const [state, setState] = useStorePortal("foo"); +const [state, setState] = store.use("foo"); ``` ### Persist the state by utilizing browser storage mechanisms @@ -122,19 +119,19 @@ const [state, setState] = useStorePortal("foo"); To persist the state in `localStorage`: ```typescript -const [state, setState] = useStorePortal.local("foo.bar"); +const [state, setState] = store.local("foo.bar"); ``` To persist the state in `sessionStorage`: ```typescript -const [state, setState] = useStorePortal.session("foo.bar.baz"); +const [state, setState] = store.session("foo.bar.baz"); ``` To persist the state in `document.cookie`: ```typescript -const [state, setState] = useStorePortal.cookie("foo.rim", { +const [state, setState] = store.cookie("foo.rim", { path: "/" }); ``` diff --git a/src/builder/createBuilder.ts b/src/builder/createBuilder.ts index 831be24..103d579 100644 --- a/src/builder/createBuilder.ts +++ b/src/builder/createBuilder.ts @@ -5,7 +5,7 @@ import type { Builder, KeyBuilder } from "@/definition"; * * @template T The type of the object. * - * @param {T} obj The object to traverse and retrieve the nested keys. + * @param {T} register The object to traverse and retrieve the nested keys. * @param {string[]} [prefix=[]] An optional prefix to prepend to keys array in the builder object. * * @returns {Builder} A builder object with callable functions representing the nested keys. @@ -16,11 +16,11 @@ import type { Builder, KeyBuilder } from "@/definition"; export function createBuilder< T extends Record, P extends readonly string[] = [] ->(obj: T, ...prefix: P): Builder { - const keys = Object.keys(obj) as Array; +>(register: T, ...prefix: P): Builder { + const keys = Object.keys(register) as Array; const builder = keys.reduce((acc, key) => { - const value = obj[key]; + const value = register[key]; const newPath = prefix ? prefix.concat([key as string]) : [key as string]; if (typeof value === "function") { @@ -55,5 +55,5 @@ export function createBuilder< }; }, {} as KeyBuilder); - return Object.assign({ use: () => obj }, builder) as Builder; + return Object.assign({ use: () => register }, builder) as Builder; } diff --git a/src/definition/portal.ts b/src/definition/portal.ts index 9feab34..3f65fac 100644 --- a/src/definition/portal.ts +++ b/src/definition/portal.ts @@ -220,7 +220,7 @@ export interface UsePortal> { * @template Data The type of the data. * * @param {Path} path The path to the store value. - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ local< Path extends Paths, @@ -239,7 +239,7 @@ export interface UsePortal> { * @template Data The type of the data. * * @param {Path} path The path to the store value. - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ session< Path extends Paths, @@ -260,7 +260,7 @@ export interface UsePortal> { * @param {Path} path The path to the store value. * @param {CookieOptions} cookieOptions The options for the cookie. * - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ cookie< Path extends Paths, @@ -272,6 +272,26 @@ export interface UsePortal> { ): PortalState; } +/** + * Represents the properties of the `usePortalImplemenation` hook. + * + * @template State The type of the state. + * @template Path The type of the path. + * @template Store The type of the store. + * @template Data The type of the data. + */ +export interface UsePortalImplementation< + Store extends Record, + Path extends Paths, + State extends GetValueByPath, + Data +> { + path: Path; + store: Portal; + initialState?: State; + options?: PortalOptions; +} + /** * Represents the properties of the `useLocalImplementation` hook. * @@ -287,7 +307,7 @@ export interface UseLocalImplementation< Data > { path: Path; - portal: Portal; + store: Portal; config?: Config; initialState: State; } @@ -307,7 +327,7 @@ export interface UseSessionImplementation< Data > { path: Path; - portal: Portal; + store: Portal; initialState: State; config?: Config; } @@ -327,7 +347,7 @@ export interface UseCookieImplementation< Data > { path: Path; - portal: Portal; + store: Portal; initialState: State; config?: CookieConfig; } diff --git a/src/portal/index.ts b/src/portal/index.ts index 38deb3a..1f11eba 100644 --- a/src/portal/index.ts +++ b/src/portal/index.ts @@ -1,4 +1,4 @@ export * from "./behaviorSubject"; export * from "./usePortalImplementation"; -export * from "./usePortal"; +export * from "./makePortal"; export * from "./portal"; diff --git a/src/portal/makePortal.ts b/src/portal/makePortal.ts new file mode 100644 index 0000000..360f280 --- /dev/null +++ b/src/portal/makePortal.ts @@ -0,0 +1,140 @@ +import { + Config, + CookieConfig, + GetValueByPath, + Paths, + PortalOptions, +} from "@/definition"; +import { getResolvedState, getValue } from "@/utilities"; + +import { Portal } from "./portal"; +import { useCookieImplementation } from "./useCookieImplementation"; +import { useLocalImplementation } from "./useLocalImplementation"; +import { usePortalImplementation } from "./usePortalImplementation"; +import { useSessionImplementation } from "./useSessionImplementation"; + +function makePortal>(register: Store) { + /** + * Represents a mapping of keys (stringified) to portal entries. + * @type {PortalMap} + */ + const store = new Portal(); + + /** + * A map of portal entries. + * @type {PortalMap} + */ + const portal = { + /** + * A hook for managing the portal states. + * + * @param path The path of the portal's state + * @param {PortalOptions} [options] The options of the portal's state + * + * @returns {PortalState} A tuple containing the current state and a function to update the state. + */ + use: function usePortalWithStore< + Path extends Paths, + State extends GetValueByPath, + Data = State + >(path: Path, options?: PortalOptions) { + const initialState = options?.state + ? getResolvedState(options.state) + : getValue(register, path); + + return usePortalImplementation({ + path, + initialState, + options, + store, + }); + }, + + /** + * A hook for managing the portal states with local storage. + * + * @param path The path of the portal's state + * @param {Config} [config] The config of the portal's state + * + * @returns {PortalState} A tuple containing the current state and a function to update the state. + */ + local: function useLocalWithStore< + Path extends Paths, + State extends GetValueByPath, + Data = State + >(path: Path, config?: Config) { + const initialState = config?.state + ? getResolvedState(config.state) + : getValue(register, path); + + return useLocalImplementation({ + path, + initialState, + config, + store, + }); + }, + + /** + * A hook for managing the portal states with session storage. + * + * @param path The path of the portal's state + * @param {Config} [config] The config of the portal's state + * + * @returns {PortalState} A tuple containing the current state and a function to update the state. + */ + session: function useSessionWithStore< + Path extends Paths, + State extends GetValueByPath, + Data = State + >(path: Path, config?: Config) { + const initialState = config?.state + ? getResolvedState(config.state) + : getValue(register, path); + + return useSessionImplementation({ + path, + initialState, + config, + store, + }); + }, + + /** + * A hook for managing the portal states with cookie storage. + * + * @param path The path of the portal's state + * @param {CookieConfig} [config] The config of the portal's state + * + * @returns {PortalState} A tuple containing the current state and a function to update the state. + */ + cookie: function useCookieWithStore< + Path extends Paths, + State extends GetValueByPath, + Data = State + >(path: Path, config?: CookieConfig) { + const initialState = config?.state + ? getResolvedState(config.state) + : getValue(register, path); + + return useCookieImplementation({ + path, + initialState, + config, + store, + }); + }, + + make: makePortal, + entries: store.entries, + removeItem: store.removeItem, + hasItem: store.hasItem, + getItem: store.getItem, + setItem: store.setItem, + clear: store.clear, + }; + + return portal; +} + +export const portal = makePortal({} as Record); diff --git a/src/portal/makeUsePortal.ts b/src/portal/makeUsePortal.ts deleted file mode 100644 index 57696c5..0000000 --- a/src/portal/makeUsePortal.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { - UsePortal, - Paths, - GetValueByPath, - PortalOptions, - CookieConfig, - Config, -} from "@/definition"; -import { getValue } from "@/utilities"; - -import { useCookieImplementation } from "./useCookieImplementation"; -import { useLocalImplementation } from "./useLocalImplementation"; -import { usePortalImplementation } from "./usePortalImplementation"; -import { useSessionImplementation } from "./useSessionImplementation"; -import { Portal } from "./portal"; - -/** - * Creates a portal that serves as a hook for accessing a store value at a given path. - * - * @template Store The type of the store. - * - * @param {Store} store The object that represents the store. - * @returns A function that takes a path and returns a hook for accessing the store value at that path. - */ -export function makeUsePortal>( - store: Store -): UsePortal { - const portal = new Portal(); - - function usePortalWithStore< - Path extends Paths, - State extends GetValueByPath, - Data = State - >(path: Path, options?: PortalOptions) { - const initialState = getValue(store, path); - - return usePortalImplementation({ - path, - initialState, - options, - portal, - }); - } - - usePortalWithStore.local = function useLocalWithStore< - Path extends Paths, - State extends GetValueByPath, - Data = State - >(path: Path, config?: Config) { - const initialState = getValue(store, path); - - return useLocalImplementation({ - path, - initialState, - config, - portal, - }); - }; - - usePortalWithStore.session = function useSessionWithStore< - Path extends Paths, - State extends GetValueByPath, - Data = State - >(path: Path, config?: Config) { - const initialState = getValue(store, path); - - return useSessionImplementation({ - path, - initialState, - config, - portal, - }); - }; - - usePortalWithStore.cookie = function useCookieWithStore< - Path extends Paths, - State extends GetValueByPath, - Data = State - >(path: Path, config?: CookieConfig) { - const initialState = getValue(store, path); - - return useCookieImplementation({ - path, - initialState, - config, - portal, - }); - }; - - return usePortalWithStore; -} diff --git a/src/portal/portal.ts b/src/portal/portal.ts index ceb11dd..e91e1d0 100644 --- a/src/portal/portal.ts +++ b/src/portal/portal.ts @@ -1,7 +1,6 @@ import { handleSSRError } from "@/utilities"; import { cookieStorage } from "@/cookies"; - -import type { PortalMap, PortalValue, StorageType } from "@/definition"; +import { PortalMap, PortalValue, StorageType } from "@/definition"; import { BehaviorSubject } from "./behaviorSubject"; @@ -13,7 +12,13 @@ export class Portal { * @type {PortalMap} */ get entries() { - return this.portalMap; + const result: Record = {}; + + this.portalMap.forEach(({ observable }, key) => { + result[key] = observable.value; + }); + + return result; } /** @@ -216,9 +221,3 @@ export class Portal { } }; } - -// /** -// * Represents a mapping of keys (stringified) to portal entries. -// * @type {PortalMap} -// */ -// export const portal = new Portal(); diff --git a/src/portal/useCookieImplementation.ts b/src/portal/useCookieImplementation.ts index 005b11b..084666c 100644 --- a/src/portal/useCookieImplementation.ts +++ b/src/portal/useCookieImplementation.ts @@ -1,6 +1,6 @@ import { Paths, GetValueByPath, UseCookieImplementation } from "@/definition"; - import { cookieStorage } from "@/cookies"; + import { usePortalImplementation } from "./usePortalImplementation"; /** @@ -18,7 +18,7 @@ import { usePortalImplementation } from "./usePortalImplementation"; * @property {CookieConfig} [config] The config of the portal's state * @property {State} initialState The initial state of the portal * - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ export function useCookieImplementation< Store extends Record, @@ -26,7 +26,7 @@ export function useCookieImplementation< State extends GetValueByPath, Data >(properties: UseCookieImplementation) { - const { path, portal, config, initialState } = properties; + const { path, store, config, initialState } = properties; const { key = path, set = (value: State) => JSON.stringify(value), @@ -53,6 +53,6 @@ export function useCookieImplementation< path, initialState, options, - portal, + store, }); } diff --git a/src/portal/useLocalImplementation.ts b/src/portal/useLocalImplementation.ts index cbe6ad5..fc608e0 100644 --- a/src/portal/useLocalImplementation.ts +++ b/src/portal/useLocalImplementation.ts @@ -16,7 +16,7 @@ import { usePortalImplementation } from "./usePortalImplementation"; * @property {Config} [config] The config of the portal's state * @property {State} initialState The initial state of the portal * - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ export function useLocalImplementation< Store extends Record, @@ -24,7 +24,7 @@ export function useLocalImplementation< State extends GetValueByPath, Data >(properties: UseLocalImplementation) { - const { path, portal, config, initialState } = properties; + const { path, store, config, initialState } = properties; const { key = path, set = (value: State) => JSON.stringify(value), @@ -50,6 +50,6 @@ export function useLocalImplementation< path, initialState, options, - portal, + store, }); } diff --git a/src/portal/usePortal.ts b/src/portal/usePortal.ts deleted file mode 100644 index d2692ba..0000000 --- a/src/portal/usePortal.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { - Config, - CookieConfig, - GetValueByPath, - Paths, - PortalOptions, -} from "@/definition"; -import { getResolvedState } from "@/utilities"; - -import { Portal } from "./portal"; -import { makeUsePortal } from "./makeUsePortal"; -import { useCookieImplementation } from "./useCookieImplementation"; -import { useLocalImplementation } from "./useLocalImplementation"; -import { usePortalImplementation } from "./usePortalImplementation"; -import { useSessionImplementation } from "./useSessionImplementation"; - -const portal = new Portal(); - -/** - * A hook for managing the portal states. - * - * @template Store The store of the portal - * @template Path The path to the portal's state - * @template State The state of the portal - * @template Data The data of the portal - * - * @param path The path of the portal's state - * @param {PortalOptions} [options] The options of the portal's state - * - * @returns {PortalState} A tuple containing the current state and a function to update the state. - */ -export function usePortal< - Store extends Record, - Path extends Paths, - State extends GetValueByPath, - Data = State ->(path: Path, options?: PortalOptions) { - const initialState = getResolvedState(options?.state); - - return usePortalImplementation({ - path, - portal, - initialState, - options, - }); -} - -/** - * A hook for managing the portal states with local storage. - * - * @template Store The store of the portal - * @template Path The path to the portal's state - * @template State The state of the portal - * @template Data The data of the portal - * - * @param path The path of the portal's state - * @param {Config} [config] The config of the portal's state - * - * @returns {PortalState} A tuple containing the current state and a function to update the state. - */ -function useLocal< - Store extends Record, - Path extends Paths, - State extends GetValueByPath, - Data = State ->(path: Path, config?: Config) { - const initialState = getResolvedState(config?.state) as State; - - return useLocalImplementation({ - path, - portal, - initialState, - config, - }); -} - -/** - * A hook for managing the portal states with session storage. - * - * @template Store The store of the portal - * @template Path The path to the portal's state - * @template State The state of the portal - * @template Data The data of the portal - * - * @param path The path of the portal's state - * @param {Config} [config] The config of the portal's state - * - * @returns {PortalState} A tuple containing the current state and a function to update the state. - */ -function useSession< - Store extends Record, - Path extends Paths, - State extends GetValueByPath, - Data = State ->(path: Path, config?: Config) { - const initialState = getResolvedState(config?.state) as State; - - return useSessionImplementation({ - path, - portal, - initialState, - config, - }); -} - -/** - * A hook for managing the portal states with cookie storage. - * - * @template Store The store of the portal - * @template Path The path to the portal's state - * @template State The state of the portal - * @template Data The data of the portal - * - * @param path The path of the portal's state - * @param {CookieConfig} [config] The config of the portal's state - * - * @returns {PortalState} A tuple containing the current state and a function to update the state. - */ -function useCookie< - Store extends Record, - Path extends Paths, - State extends GetValueByPath, - Data = State ->(path: Path, config?: CookieConfig) { - const initialState = getResolvedState(config?.state) as State; - - return useCookieImplementation({ - path, - portal, - initialState, - config, - }); -} - -// Hook functions -usePortal.local = useLocal; -usePortal.session = useSession; -usePortal.cookie = useCookie; -usePortal.make = makeUsePortal; - -// Utility functions -usePortal.clear = portal.clear; -usePortal.removeItem = portal.removeItem; -usePortal.hasItem = portal.hasItem; -usePortal.getItem = portal.getItem; -usePortal.setItem = portal.setItem; diff --git a/src/portal/usePortalImplementation.ts b/src/portal/usePortalImplementation.ts index 485f2b8..2ddb034 100644 --- a/src/portal/usePortalImplementation.ts +++ b/src/portal/usePortalImplementation.ts @@ -1,33 +1,12 @@ import { useState, useEffect } from "react"; import type { + UsePortalImplementation, GetValueByPath, Paths, - PortalOptions, PortalState, Subscription, } from "@/definition"; -import { Portal } from "./portal"; - -/** - * Represents the properties of the `usePortalImplemenation` hook. - * - * @template State The type of the state. - * @template Path The type of the path. - * @template Store The type of the store. - * @template Data The type of the data. - */ -interface UsePortalImplementation< - Store extends Record, - Path extends Paths, - State extends GetValueByPath, - Data -> { - path: Path; - portal: Portal; - initialState?: State; - options?: PortalOptions; -} /** * Internal function to handle state and subscriptions for the `usePortal` hook. @@ -44,7 +23,7 @@ interface UsePortalImplementation< * @property {Config} [config] The config of the portal's state * @property {State} initialState The initial state of the portal * - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ export function usePortalImplementation< Store extends Record, @@ -54,7 +33,7 @@ export function usePortalImplementation< >( properties: UsePortalImplementation ): PortalState { - const { path, portal, options, initialState } = properties; + const { path, store, options, initialState } = properties; const { set, select = (value: State) => value as unknown as Data, @@ -72,7 +51,7 @@ export function usePortalImplementation< * Retrieve the portal entry associated with the specified key or create a new one if not found. * @type {PortalValue} */ - const { observable } = portal.getItem(path, resolvedState); + const { observable } = store.getItem(path, resolvedState); /** * Subscribe to state changes and update the component's state accordingly. @@ -113,7 +92,7 @@ export function usePortalImplementation< /** * Return an array containing the current state and the setter function for state updates. - * @type {PortalState} + * @type {PortalState} */ return [select(observable.value), observable.set]; } diff --git a/src/portal/useSessionImplementation.ts b/src/portal/useSessionImplementation.ts index 76a0d29..2f5ab35 100644 --- a/src/portal/useSessionImplementation.ts +++ b/src/portal/useSessionImplementation.ts @@ -16,7 +16,7 @@ import { usePortalImplementation } from "./usePortalImplementation"; * @property {Config} [config] The config of the portal's state * @property {State} initialState The initial state of the portal * - * @returns {PortalState} A tuple containing the current state and a function to update the state. + * @returns {PortalState} A tuple containing the current state and a function to update the state. */ export function useSessionImplementation< Store extends Record, @@ -24,7 +24,7 @@ export function useSessionImplementation< State extends GetValueByPath, Data >(properties: UseSessionImplementation) { - const { path, portal, config, initialState } = properties; + const { path, store, config, initialState } = properties; const { key = path, set = (value: State) => JSON.stringify(value), @@ -50,6 +50,6 @@ export function useSessionImplementation< path, initialState, options, - portal, + store, }); } diff --git a/src/utilities/getResolvedState.ts b/src/utilities/getResolvedState.ts index dba6603..9ae6c1b 100644 --- a/src/utilities/getResolvedState.ts +++ b/src/utilities/getResolvedState.ts @@ -7,8 +7,8 @@ import { isFunction } from "./isFunction"; * @returns {State} The actual state value. */ export function getResolvedState( - initialState: State | (() => State) + initialState?: State | (() => State) ): State { if (isFunction(initialState)) return initialState(); - return initialState; + return initialState as State; } diff --git a/tests/usePortal.test.ts b/tests/portal.test.ts similarity index 82% rename from tests/usePortal.test.ts rename to tests/portal.test.ts index de96122..67df386 100644 --- a/tests/usePortal.test.ts +++ b/tests/portal.test.ts @@ -1,15 +1,15 @@ import { act, renderHook } from "@testing-library/react"; import { afterEach, describe, expect, expectTypeOf, it } from "vitest"; -import { usePortal } from "@/portal"; +import { portal } from "@/portal"; -describe("usePortal", () => { +describe("portal.use", () => { const path = "is-open"; const initialState = { isOpen: true }; it("should return the portal state", () => { const { result } = renderHook(() => - usePortal(path, { state: initialState }) + portal.use(path, { state: initialState }) ); const [state] = result.current; expect(state).toMatchObject(initialState); @@ -17,7 +17,7 @@ describe("usePortal", () => { it("should update the portal state", () => { const { result } = renderHook(() => - usePortal(path, { state: initialState }) + portal.use(path, { state: initialState }) ); const [, setState] = result.current; @@ -30,7 +30,7 @@ describe("usePortal", () => { }); it("should return the correct value for a given path", () => { - const { result } = renderHook(() => usePortal("count", { state: 0 })); + const { result } = renderHook(() => portal.use("count", { state: 0 })); const [count, setCount] = result.current; expect(count).toBe(0); @@ -45,7 +45,7 @@ describe("usePortal", () => { it("should return the correct type selected", () => { const { result } = renderHook(() => - usePortal("name", { + portal.use("name", { state: "John", select: (state) => (state === "John" ? 5 : 10), }) @@ -65,7 +65,7 @@ describe("usePortal", () => { }); }); -describe("usePortal.local", () => { +describe("portal.local", () => { afterEach(() => { localStorage.clear(); }); @@ -73,14 +73,14 @@ describe("usePortal.local", () => { localStorage.setItem("foo", JSON.stringify("baz")); it("should set initial state from local storage", () => { - const { result } = renderHook(() => usePortal.local("foo")); + const { result } = renderHook(() => portal.local("foo")); const [state] = result.current; expect(state).toEqual("baz"); }); it("should set local storage on state change", () => { - const { result } = renderHook(() => usePortal.local("foo")); + const { result } = renderHook(() => portal.local("foo")); const [, setState] = result.current; act(() => { @@ -94,7 +94,7 @@ describe("usePortal.local", () => { }); }); -describe("usePortal.make", () => { +describe("portal.make", () => { afterEach(() => { localStorage.clear(); sessionStorage.clear(); @@ -113,11 +113,11 @@ describe("usePortal.make", () => { }, }; - const userPortal = usePortal.make(userStore); + const userPortal = portal.make(userStore); expect(userPortal).toBeDefined(); }); - it("should update the state of the portal using usePortal.local", () => { + it("should update the state of the portal using portal.local", () => { const userStore = { name: "John Doe", email: "johndoe@jmail.com", @@ -130,7 +130,7 @@ describe("usePortal.make", () => { }, }; - const userPortal = usePortal.make(userStore); + const userPortal = portal.make(userStore); const { result, unmount } = renderHook(() => userPortal.local("name")); const [user, setUser] = result.current; @@ -146,7 +146,7 @@ describe("usePortal.make", () => { unmount(); }); - it("should update the state of the portal using usePortal.session with custom initial state", () => { + it("should update the state of the portal using portal.session with custom initial state", () => { const userStore = { name: "John Doe", email: "johndoe@jmail.com", @@ -161,7 +161,7 @@ describe("usePortal.make", () => { sessionStorage.setItem("oh-my", JSON.stringify("uncle")); - const userPortal = usePortal.make(userStore); + const userPortal = portal.make(userStore); const { result } = renderHook(() => userPortal.session("name", { key: "oh-my", diff --git a/tests/usePortalImplementation.test.ts b/tests/usePortalImplementation.test.ts index 9a0dac2..b38ff91 100644 --- a/tests/usePortalImplementation.test.ts +++ b/tests/usePortalImplementation.test.ts @@ -3,17 +3,17 @@ import { expect, describe, afterEach, it } from "vitest"; import { usePortalImplementation, Portal } from "@/portal"; -const portal = new Portal(); +const store = new Portal(); afterEach(() => { - portal.clear(); + store.clear(); }); describe("usePortalImplementation", () => { it("should return the initial state", () => { const initialState = { count: 0 }; const { result } = renderHook(() => - usePortalImplementation({ path: "test", initialState, portal }) + usePortalImplementation({ path: "test", initialState, store }) ); const [state] = result.current; @@ -23,7 +23,7 @@ describe("usePortalImplementation", () => { it("should update the state when the setter is called", () => { const initialState = { count: 0 }; const { result } = renderHook(() => - usePortalImplementation({ path: "test", initialState, portal }) + usePortalImplementation({ path: "test", initialState, store }) ); const [, setState] = result.current; @@ -43,7 +43,7 @@ describe("usePortalImplementation", () => { usePortalImplementation({ path: "test", initialState, - portal, + store, options: { get: (value) => { const val = localStorage.getItem("test"); @@ -63,7 +63,7 @@ describe("usePortalImplementation", () => { usePortalImplementation({ path: "test", initialState, - portal, + store, options: { set: (value) => localStorage.setItem("test", JSON.stringify(value)), get: (value) => { @@ -91,7 +91,7 @@ describe("usePortalImplementation", () => { usePortalImplementation({ path: "test", initialState, - portal, + store, options: { set: (value) => localStorage.setItem("test", JSON.stringify(value)), get: (value) => { @@ -120,7 +120,7 @@ describe("usePortalImplementation", () => { usePortalImplementation({ path: "test", initialState, - portal, + store, options: { select: ({ count }) => count, },