floppy-disk 2.8.0 → 2.9.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -282,9 +282,15 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
282
282
  }>;
283
283
  Render: (props: {
284
284
  queryKey?: Maybe<TKey>;
285
- loading?: FunctionComponent<TKey>;
286
- success?: FunctionComponent<TKey>;
287
- error?: FunctionComponent<TKey>;
285
+ loading?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
286
+ status: 'loading';
287
+ }>>;
288
+ success?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
289
+ status: 'success';
290
+ }>>;
291
+ error?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
292
+ status: 'error';
293
+ }>>;
288
294
  }) => JSX.Element;
289
295
  };
290
296
  /**
@@ -31,6 +31,7 @@ const useQueryDefaultDeps = (state) => [
31
31
  state.isWaitingNextPage,
32
32
  state.hasNextPage,
33
33
  ];
34
+ const defaultElement = () => null;
34
35
  /**
35
36
  * @see https://floppy-disk.vercel.app/docs/api#createquery
36
37
  */
@@ -406,14 +407,13 @@ export const createQuery = (queryFn, options = {}) => {
406
407
  throw state.error;
407
408
  return state;
408
409
  };
409
- const defaultElement = () => null;
410
410
  useQuery.Render = (props) => {
411
411
  const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
412
412
  // eslint-disable-next-line react-hooks/rules-of-hooks
413
413
  const state = useQuery(queryKey);
414
414
  if (state.data)
415
- return createElement(success, state.key);
416
- return createElement(state.isLoading ? loading : error, state.key);
415
+ return createElement(success, state);
416
+ return createElement(state.isLoading ? loading : error, state);
417
417
  };
418
418
  return useQuery;
419
419
  };
@@ -25,21 +25,19 @@ export const createStores = (initializer, options = {}) => {
25
25
  const keyHash = hashKeyFn(key);
26
26
  // eslint-disable-next-line react-hooks/exhaustive-deps
27
27
  const { get, subscribe } = useMemo(() => getStore(key), [keyHash]);
28
- const [state, setState] = useState(get);
29
- const isFirstRender = useRef(true);
28
+ const [, setState] = useState(get);
30
29
  const prevKey = useRef(key);
30
+ const prevKeyHash = useRef(keyHash);
31
31
  useEffect(() => {
32
- if (!isFirstRender.current) {
33
- onBeforeChangeKey(key, prevKey.current);
34
- setState(get);
35
- }
36
- isFirstRender.current = false;
37
32
  prevKey.current = key;
33
+ prevKeyHash.current = keyHash;
38
34
  const unsubs = subscribe(setState, selectDeps);
39
35
  return unsubs;
40
36
  // eslint-disable-next-line react-hooks/exhaustive-deps
41
37
  }, [keyHash]);
42
- return state;
38
+ if (keyHash !== prevKeyHash.current)
39
+ onBeforeChangeKey(key, prevKey.current);
40
+ return get();
43
41
  };
44
42
  useStores.get = (key) => {
45
43
  const store = getStore(key);
@@ -282,9 +282,15 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
282
282
  }>;
283
283
  Render: (props: {
284
284
  queryKey?: Maybe<TKey>;
285
- loading?: FunctionComponent<TKey>;
286
- success?: FunctionComponent<TKey>;
287
- error?: FunctionComponent<TKey>;
285
+ loading?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
286
+ status: 'loading';
287
+ }>>;
288
+ success?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
289
+ status: 'success';
290
+ }>>;
291
+ error?: FunctionComponent<Extract<QueryState<TKey, TResponse, TData, TError, TPageParam>, {
292
+ status: 'error';
293
+ }>>;
288
294
  }) => JSX.Element;
289
295
  };
290
296
  /**
@@ -34,6 +34,7 @@ const useQueryDefaultDeps = (state) => [
34
34
  state.isWaitingNextPage,
35
35
  state.hasNextPage,
36
36
  ];
37
+ const defaultElement = () => null;
37
38
  /**
38
39
  * @see https://floppy-disk.vercel.app/docs/api#createquery
39
40
  */
@@ -409,14 +410,13 @@ const createQuery = (queryFn, options = {}) => {
409
410
  throw state.error;
410
411
  return state;
411
412
  };
412
- const defaultElement = () => null;
413
413
  useQuery.Render = (props) => {
414
414
  const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
415
415
  // eslint-disable-next-line react-hooks/rules-of-hooks
416
416
  const state = useQuery(queryKey);
417
417
  if (state.data)
418
- return (0, react_1.createElement)(success, state.key);
419
- return (0, react_1.createElement)(state.isLoading ? loading : error, state.key);
418
+ return (0, react_1.createElement)(success, state);
419
+ return (0, react_1.createElement)(state.isLoading ? loading : error, state);
420
420
  };
421
421
  return useQuery;
422
422
  };
@@ -28,21 +28,19 @@ const createStores = (initializer, options = {}) => {
28
28
  const keyHash = hashKeyFn(key);
29
29
  // eslint-disable-next-line react-hooks/exhaustive-deps
30
30
  const { get, subscribe } = (0, react_1.useMemo)(() => getStore(key), [keyHash]);
31
- const [state, setState] = (0, react_1.useState)(get);
32
- const isFirstRender = (0, react_1.useRef)(true);
31
+ const [, setState] = (0, react_1.useState)(get);
33
32
  const prevKey = (0, react_1.useRef)(key);
33
+ const prevKeyHash = (0, react_1.useRef)(keyHash);
34
34
  (0, react_1.useEffect)(() => {
35
- if (!isFirstRender.current) {
36
- onBeforeChangeKey(key, prevKey.current);
37
- setState(get);
38
- }
39
- isFirstRender.current = false;
40
35
  prevKey.current = key;
36
+ prevKeyHash.current = keyHash;
41
37
  const unsubs = subscribe(setState, selectDeps);
42
38
  return unsubs;
43
39
  // eslint-disable-next-line react-hooks/exhaustive-deps
44
40
  }, [keyHash]);
45
- return state;
41
+ if (keyHash !== prevKeyHash.current)
42
+ onBeforeChangeKey(key, prevKey.current);
43
+ return get();
46
44
  };
47
45
  useStores.get = (key) => {
48
46
  const store = getStore(key);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "floppy-disk",
3
- "version": "2.8.0",
3
+ "version": "2.9.0-beta.1",
4
4
  "description": "FloppyDisk - lightweight, simple, and powerful state management library",
5
5
  "keywords": [
6
6
  "state",