feat(SyncExternalStore): Add StatefulSyncExternalStore to extend and provide structure

Author: Nich Secord

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - Added `ISyncExternalStore<T>` and `SyncExternalStore<T>` to make creating external stores for `React.useSyncExternalStore` easier (Requires React@18 or higher)
+- Add `StatefulSyncExternalStore` to provide structured extension of `SyncExternalStore`.
 
 ## [1.1.1] - 2022-10-13
 

src/index.tsx

@@ -6,6 +6,7 @@ import {
 } from "./context-store--stateful-indexable/index.js";
 import { getNotImplementedPromise } from "./shared/index.js";
 export * from "./sync-external-store/index.js";
+export * from "./sync-external-store--stateful-store/index.js";
 
 export {
   ContextStore,

src/shared/index.ts

@@ -16,3 +16,19 @@ export const errorMessages = {
 };
 
 export const getNotImplementedPromise = () => Promise.reject("Not Implemented");
+
+export function normalizeError(error: unknown): null | string {
+  if (error == null) {
+    return null;
+  }
+
+  if (typeof error === "string") {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return JSON.stringify(error);
+}

src/sync-external-store--stateful-store/create-snapshot.ts

@@ -0,0 +1,47 @@
+import { normalizeError } from "../shared/index.js";
+import { StoreState } from "./store-item.js";
+
+export type CreateLoadingSnapshot = typeof createLoadingSnapshot;
+export function createLoadingSnapshot<TStoreData extends StoreState>(key: keyof TStoreData) {
+  return (snapshot: TStoreData) => {
+    return {
+      ...snapshot,
+      [key]: {
+        ...snapshot[key],
+        state: "loading",
+      },
+    };
+  };
+}
+
+export type CreateErrorSnapshot = typeof createErrorSnapshot;
+export function createErrorSnapshot<TStoreData extends StoreState>(key: keyof TStoreData, error: unknown) {
+  const errorMessage = normalizeError(error);
+  return (snapshot: TStoreData) => {
+    return {
+      ...snapshot,
+      [key]: {
+        ...snapshot[key],
+        error: errorMessage,
+        state: "error",
+      },
+    };
+  };
+}
+
+export type CreateSuccessSnapshot = typeof createSuccessSnapshot;
+export function createSuccessSnapshot<TStoreData extends StoreState, TData = unknown>(
+  key: keyof TStoreData,
+  data: TData,
+) {
+  return (snapshot: TStoreData) => {
+    return {
+      ...snapshot,
+      [key]: {
+        ...snapshot[key],
+        data,
+        state: "success",
+      },
+    };
+  };
+}

src/sync-external-store--stateful-store/index.ts

@@ -0,0 +1,3 @@
+export * from "./create-snapshot.js";
+export * from "./store-item.js";
+export * from "./store.js";

src/sync-external-store--stateful-store/store-item.ts

@@ -0,0 +1,9 @@
+import { statefulStates } from "../shared/index.js";
+
+export type StoreState = Record<string, StoreItem<unknown>>;
+
+export type StoreItem<TData> = {
+  data: TData;
+  error: null | string;
+  state: typeof statefulStates;
+};

src/sync-external-store--stateful-store/store.ts

@@ -0,0 +1,44 @@
+import { SyncExternalStore } from "../sync-external-store/index.js";
+import {
+  CreateErrorSnapshot,
+  CreateLoadingSnapshot,
+  CreateSuccessSnapshot,
+  createErrorSnapshot,
+  createLoadingSnapshot,
+  createSuccessSnapshot,
+} from "./create-snapshot.js";
+import { StoreState } from "./store-item.js";
+
+type UpdateStoreParams<TStore extends StoreState, TParams = void, TResponse = void> = {
+  key: keyof TStore;
+  params?: TParams;
+  service: (params: TParams) => Promise<TResponse>;
+  updateSnapshot?: {
+    loading: CreateLoadingSnapshot;
+    success: CreateSuccessSnapshot;
+    error: CreateErrorSnapshot;
+  };
+};
+
+export abstract class StatefulSyncExternalStore<TStore extends StoreState> extends SyncExternalStore<TStore> {
+  async updateStore<TParams, TResponse>(params: UpdateStoreParams<TStore, TParams, TResponse>) {
+    const {
+      key,
+      params: serviceParams,
+      service,
+      updateSnapshot = {
+        loading: createLoadingSnapshot,
+        success: createSuccessSnapshot,
+        error: createErrorSnapshot,
+      },
+    } = params;
+
+    this.updateSnapshot(updateSnapshot.loading(key));
+    try {
+      const data = await service(serviceParams as TParams);
+      this.updateSnapshot(updateSnapshot.success(key, data));
+    } catch (error) {
+      this.updateSnapshot(updateSnapshot.error(key, error));
+    }
+  }
+}