@gateweb/react-utils 1.7.0 → 1.8.0

package/dist/es/queryStore-client-vG-bXFYm.mjs

@@ -0,0 +1,72 @@
+'use client';
+import React, { useRef, useContext, createContext } from 'react';
+import { createStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+
+const createQueryStore = ({ query, handleChangeQuery })=>createStore()((set)=>({
+            query: {
+                ...query
+            },
+            changeQuery: (newQuery)=>{
+                set((pre)=>{
+                    if (handleChangeQuery) {
+                        return {
+                            query: handleChangeQuery(pre.query, newQuery)
+                        };
+                    }
+                    return {
+                        query: {
+                            ...pre.query,
+                            ...newQuery
+                        }
+                    };
+                });
+            }
+        }));
+const QueryContext = /*#__PURE__*/ createContext(null);
+/**
+ * Provider to provide the store to the context
+ */ const QueryProvider = ({ children, query, handleChangeQuery })=>{
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createQueryStore({
+            query,
+            handleChangeQuery
+        });
+    }
+    return /*#__PURE__*/ React.createElement(QueryContext.Provider, {
+        value: storeRef.current
+    }, children);
+};
+/**
+ * hook to get the store from the context
+ *
+ * because we want the return type of `selector` to be inferred by ts, we use HOF to implement the hook
+ *
+ * so you should use it like this:
+ *
+ * ```tsx
+ * const useQuery = useQueryContext<MyObject>(); // => will return the store hook
+ * const result = useQuery(q => q.query); // => will return the query object
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * const result1 = useQueryContext<MyObject>()(q => '1234');
+ * const result2 = useQueryContext<MyObject>()(q => q.changeQuery);
+ * const result3 = useQueryContext<MyObject>()(q => q.query);
+ * ```
+ */ const useQueryContext = ()=>{
+    const store = useContext(QueryContext);
+    if (!store) throw new Error('Missing QueryContext.Provider in the tree');
+    /**
+   *  the hook to get the store
+   *
+   * @param selector - the selector to get the state from the store
+   * @param equalityFn - the equality function to compare the previous and next state, if it returns `true`, the component will not re-render
+   */ const useStore = (selector, equalityFn)=>useStoreWithEqualityFn(store, selector, equalityFn);
+    return useStore;
+};
+
+export { QueryProvider as Q, useQueryContext as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [
@@ -65,7 +65,7 @@
   },
   "scripts": {
     "run-code": "ts-node src/period.ts",
-    "test": "vitest",
+    "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui --coverage.enabled=true",
     "build": "bunchee",