Merge pull request #108 from gadingnst/v2.3.2

V2.3.2

Author: gadingnst

apps/swr-global-state-demo/components/AsyncProfile.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { useState, useEffect } from 'react';
 import useAsyncProfile from '../states/stores/async-profile';
 

apps/swr-global-state-demo/pages/about.tsx

@@ -54,6 +54,9 @@ const About = () => {
           <Link className="App-link" href="/async-demo">
             Try Async Storage Demo
           </Link>
+          <Link className="App-link" href="/test-input">
+            Test Input
+          </Link>
         </div>
       </header>
     </div>

apps/swr-global-state-demo/pages/index.tsx

@@ -28,6 +28,9 @@ const Home = () => {
           <Link className="App-link" href="/async-demo">
             Try Async Storage Demo
           </Link>
+          <Link className="App-link" href="/test-input">
+            Test Input
+          </Link>
         </div>
       </header>
     </div>

apps/swr-global-state-demo/pages/test-input.tsx

@@ -0,0 +1,64 @@
+import { useStore } from 'swr-global-state';
+
+import Link from 'next/link';
+
+const TestInputPage = () => {
+  const [prompt, setPrompt] = useStore({
+    key: 'agi-creator-gen-image-prompt',
+    initial: ''
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPrompt(e.target.value);
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <p style={{ color: 'aquamarine' }}>
+          This is Test Input Page.
+        </p>
+        <div style={{ marginBottom: '20px', width: '80%' }}>
+          <label htmlFor="prompt-input" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', fontSize: 14 }}>
+            Image Prompt:
+          </label>
+          <textarea
+            id="prompt-input"
+            value={prompt}
+            onChange={handleChange}
+            placeholder="Type your image prompt here..."
+            className="App-input"
+            rows={4}
+          />
+        </div>
+
+        <div style={{ marginBottom: '20px', fontSize: 14 }}>
+          <p><strong>Current Value:</strong> {prompt || '(empty)'}</p>
+          <p><strong>Length:</strong> {prompt.length} characters</p>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            onClick={() => setPrompt('')}
+            className="App-button"
+          >
+            Clear
+          </button>
+          <button
+            onClick={() => setPrompt('A beautiful sunset over mountains')}
+            className="App-button"
+          >
+            Sample Text
+          </button>
+        </div>
+        <div style={{ display: 'flex', gap: '20px', marginTop: '20px' }}>
+          <Link className="App-link" href="/">
+            Go To Home
+          </Link>
+        </div>
+      </header>
+    </div>
+  );
+};
+
+export default TestInputPage;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "swr-global-state",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "author": "Sutan Gading Fadhillah Nasution <contact@gading.dev>",
   "description": "Zero-setup & simple global state management for React Components",
   "license": "MIT",

package.json

@@ -2,7 +2,7 @@
   "name": "swr-global-state",
   "author": "Sutan Gading Fadhillah Nasution <contact@gading.dev>",
   "description": "Zero-setup & simple global state management for React Components",
-  "version": "2.3.1",
+  "version": "0.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

packages/swr-global-state/package.json

@@ -127,41 +127,41 @@ export function useStore<T, E = any>(
 
   const { data: state, mutate, error, isLoading } = swrResponse;
 
-  const setState: StateMutator<T> = useCallback(async(data: T|StateMutatorCallback<T>, opts?: boolean|MutatorOptions<T>) => {
-    return mutate(async(currentData: T | undefined) => {
-      const actualCurrentData = currentData ?? cache.get(cacheKey)?.data ?? state;
+  const setState: StateMutator<T> = useCallback(
+    (data: T | StateMutatorCallback<T>, opts?: boolean | MutatorOptions<T>) => {
+      const mutator = (currentData: T | undefined): T => {
+        const resolvedCurrentData = currentData ?? state;
+
+        const newData = typeof data === 'function'
+          ? (data as (currentState: T) => T)(resolvedCurrentData as T)
+          : data;
+
+        if (JSON.stringify(newData) === JSON.stringify(resolvedCurrentData)) {
+          return resolvedCurrentData as T;
+        }
 
-      const setPersist = async(newState: T) => {
         if (persistor?.onSet) {
           if (rateLimitedPersistRef.current) {
-            // Use rate limited persist
-            rateLimitedPersistRef.current.func(key, newState);
+            rateLimitedPersistRef.current.func(key, newData);
           } else {
-            // Immediate persist for non-rate-limited operations
-            try {
-              await Promise.resolve(persistor.onSet(key, newState));
-            } catch (error) {
+            Promise.resolve(persistor.onSet(key, newData)).catch(error => {
               onError?.(error as Error);
-              if (!retryOnError) {
-                throw error;
-              }
-            }
+            });
           }
         }
+
+        return newData;
       };
 
-      if (typeof data !== 'function') {
-        await setPersist(data);
-        return data;
-      }
+      const mutateOpts = typeof opts === 'boolean'
+        ? { revalidate: opts }
+        : opts ? { ...opts } : { revalidate: false };
 
-      const mutatorCallback = data as StateMutatorCallback<T>;
-      const newData = await Promise.resolve(mutatorCallback(actualCurrentData as T));
-      await setPersist(newData);
-      return newData;
-    }, opts);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mutate, key, persistor?.onSet, onError, retryOnError, cacheKey]);
+      mutate(mutator, mutateOpts);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mutate, key, persistor?.onSet, onError]
+  );
 
   const returnObject = useMemo(() => ({
     ...swrResponse,
@@ -170,7 +170,6 @@ export function useStore<T, E = any>(
     isPersisting
   }), [swrResponse, isLoading, error, isPersisting]);
 
-  // Initialize rate limited persist function dengan proper cleanup
   useEffect(() => {
     if (rateLimit && !rateLimitedPersistRef.current) {
       const rateLimitedPersist = createRateLimitedPersist();
@@ -182,14 +181,14 @@ export function useStore<T, E = any>(
       }
     }
 
-    // Cleanup function
     return () => {
       if (rateLimitedPersistRef.current) {
         rateLimitedPersistRef.current.cleanup();
         rateLimitedPersistRef.current = null;
       }
     };
-  }, [rateLimit, createRateLimitedPersist]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [createRateLimitedPersist]);
 
   return [
     state as T,

packages/swr-global-state/src/lib/useStore.ts

@@ -1,11 +1,11 @@
-import type { Key } from "swr";
+import type { Key } from 'swr';
 
 export type RateLimitType = 'debounce' | 'throttle';
 
 export type RateLimitConfig<T> = {
   type: RateLimitType;
   delay: number;
-  // Optional custom function untuk advanced use cases
+  // Optional custom function for advanced use cases
   customFunction?: (func: (key: Key, data: T) => Promise<void>, delay: number) => (key: Key, data: T) => void;
 };
 
@@ -19,7 +19,7 @@ export function debounceWithCleanup<T extends(...args: any[]) => any>(func: T, d
   debouncedFunc: T;
   cleanup: () => void;
 } {
-  let timeoutId: NodeJS.Timeout;
+  let timeoutId: ReturnType<typeof setTimeout>;
 
   const debouncedFunc = ((...args: any[]) => {
     clearTimeout(timeoutId);
@@ -44,7 +44,7 @@ export function throttleWithCleanup<T extends(...args: any[]) => any>(func: T, d
   cleanup: () => void;
 } {
   let lastCall = 0;
-  let timeoutId: NodeJS.Timeout;
+  let timeoutId: ReturnType<typeof setTimeout>;
 
   const throttledFunc = ((...args: any[]) => {
     const now = Date.now();
@@ -88,6 +88,7 @@ export function createRateLimitedFunctionWithCleanup<T>(
   if (config.customFunction) {
     return {
       rateLimitedFunc: config.customFunction(func, config.delay),
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       cleanup: () => {} // Custom function should handle its own cleanup
     };
   }
@@ -113,6 +114,7 @@ export function createRateLimitedFunctionWithCleanup<T>(
     default:
       return {
         rateLimitedFunc: wrappedFunc as any,
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         cleanup: () => {}
       };
   }

packages/swr-global-state/src/lib/utils.ts

@@ -2,13 +2,13 @@ import '@testing-library/jest-dom';
 import { vi, afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
 
-// Cleanup setelah setiap test
+// Cleanup after every test
 afterEach(() => {
   cleanup();
   vi.clearAllMocks();
 });
 
-// Mock untuk localStorage jika diperlukan
+// Mock for localStorage if needed
 Object.defineProperty(window, 'localStorage', {
   value: {
     getItem: vi.fn(),