-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Introducing useSyncExternalStore (#127)
* Updated useAreModuleRegistered and Ready * Using useSyncExternalStore also for MSW
- Loading branch information
1 parent
8fb1b4b
commit 7f4cdc5
Showing
10 changed files
with
190 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| export * from "./mswPlugin.ts"; | ||
| export * from "./mswState.ts"; | ||
| export * from "./requestHandlerRegistry.ts"; | ||
| export * from "./setMswAsStarted.ts"; | ||
| export * from "./useIsMswStarted.ts"; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| export type MswStateChangedListener = () => void; | ||
|
|
||
| export class MswState { | ||
| #isStarted = false; | ||
|
|
||
| readonly #stateChangedListeners = new Set<MswStateChangedListener>(); | ||
|
|
||
| addStateChangedListener(callback: MswStateChangedListener) { | ||
| this.#stateChangedListeners.add(callback); | ||
| } | ||
|
|
||
| removeStateChangedListener(callback: MswStateChangedListener) { | ||
| this.#stateChangedListeners.delete(callback); | ||
| } | ||
|
|
||
| setAsStarted() { | ||
| if (!this.#isStarted) { | ||
| this.#isStarted = true; | ||
|
|
||
| this.#stateChangedListeners.forEach(x => { | ||
| x(); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| get isStarted() { | ||
| return this.#isStarted; | ||
| } | ||
|
|
||
| // Strictly for Jest tests, this is NOT ideal. | ||
| _reset() { | ||
| this.#isStarted = false; | ||
| } | ||
| } | ||
|
|
||
| const mswState = new MswState(); | ||
|
|
||
| export function setMswAsStarted() { | ||
| mswState.setAsStarted(); | ||
| } | ||
|
|
||
| export function isMswStarted() { | ||
| return mswState.isStarted; | ||
| } | ||
|
|
||
| export function addMswStateChangedListener(callback: MswStateChangedListener) { | ||
| mswState.addStateChangedListener(callback); | ||
| } | ||
|
|
||
| export function removeMswStateChangedListener(callback: MswStateChangedListener) { | ||
| mswState.removeStateChangedListener(callback); | ||
| } | ||
|
|
||
| // Strictly for Jest tests, this is NOT ideal. | ||
| export function __resetMswStatus() { | ||
| mswState._reset(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,23 @@ | ||
| import { useLogger } from "@squide/core"; | ||
| import { useEffect, useState } from "react"; | ||
| import { isMswStarted } from "./setMswAsStarted.ts"; | ||
| import { useEffect, useSyncExternalStore } from "react"; | ||
| import { addMswStateChangedListener, isMswStarted, removeMswStateChangedListener } from "./mswState.ts"; | ||
|
|
||
| export interface UseIsMswStartedOptions { | ||
| // The interval is in milliseconds. | ||
| interval?: number; | ||
| function subscribe(callback: () => void) { | ||
| addMswStateChangedListener(callback); | ||
|
|
||
| return () => removeMswStateChangedListener(callback); | ||
| } | ||
|
|
||
| export function useIsMswStarted(enabled: boolean, { interval = 10 }: UseIsMswStartedOptions = {}) { | ||
| const logger = useLogger(); | ||
| export function useIsMswStarted(enabled: boolean) { | ||
| const isStarted = useSyncExternalStore(subscribe, isMswStarted); | ||
|
|
||
| // Using a state hook to force a rerender once MSW is started. | ||
| const [value, setIsStarted] = useState(!enabled); | ||
| const logger = useLogger(); | ||
|
|
||
| // Perform a reload once MSW is started. | ||
| useEffect(() => { | ||
| if (enabled) { | ||
| const intervalId = setInterval(() => { | ||
| if (isMswStarted()) { | ||
| logger.debug("[squide] %cMSW is ready%c.", "color: white; background-color: green;", ""); | ||
|
|
||
| clearInterval(intervalId); | ||
| setIsStarted(true); | ||
| } | ||
| }, interval); | ||
|
|
||
| return () => { | ||
| if (intervalId) { | ||
| clearInterval(intervalId); | ||
| } | ||
| }; | ||
| if (isStarted) { | ||
| logger.debug("[squide] %cMSW is ready%c.", "color: white; background-color: green;", ""); | ||
| } | ||
| }, [enabled, interval, logger]); | ||
| }, [isStarted, logger]); | ||
|
|
||
| return value; | ||
| return isStarted || !enabled; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.