Skip to content

Commit 55cc02e

Browse files
debabindebabin
committed
main 🧊 add use hover test
1 parent bd5f72a commit 55cc02e

55 files changed

Lines changed: 501 additions & 493 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/core/src/bundle/hooks/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@ export * from './useDocumentTitle/useDocumentTitle';
2727
export * from './useDocumentVisibility/useDocumentVisibility';
2828
export * from './useDoubleClick/useDoubleClick';
2929
export * from './useDropZone/useDropZone';
30+
export * from './useDropZone/useDropZone';
3031
export * from './useElementSize/useElementSize';
3132
export * from './useEvent/useEvent';
3233
export * from './useEventListener/useEventListener';
3334
export * from './useEventSource/useEventSource';
35+
export * from './useEventSource/useEventSource';
3436
export * from './useEyeDropper/useEyeDropper';
3537
export * from './useFavicon/useFavicon';
3638
export * from './useField/useField';

‎packages/core/src/bundle/hooks/useEventSource/useEventSource.js‎

Lines changed: 75 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,93 @@
1-
import { useCallback, useEffect, useRef, useState } from 'react';
2-
function resolveNestedOptions(options) {
3-
if (options === true) return {};
4-
return options;
5-
}
1+
import { useEffect, useRef, useState } from 'react';
2+
import { getRetry } from '@/utils/helpers';
63
/**
7-
* Reactive wrapper for EventSource in React
4+
* @name useEventSource
5+
* @description - Hook that provides a reactive wrapper for event source
6+
* @category Browser
87
*
9-
* @param url The URL of the EventSource
10-
* @param events List of events to listen to
11-
* @param options Configuration options
8+
* @browserapi EventSource https://developer.mozilla.org/en-US/docs/Web/API/EventSource
9+
*
10+
* @param {string | URL} url The URL of the EventSource
11+
* @param {string[]} [events=[]] List of events to listen to
12+
* @param {UseEventSourceOptions} [options={}] Configuration options
13+
* @returns {UseEventSourceReturn<Data>} The EventSource state and controls
14+
*
15+
* @example
16+
* const { instance, data, isConnecting, isOpen, isError, close, open } = useEventSource('url', ['message']);
1217
*/
13-
export function useEventSource(url, events = [], options = {}) {
14-
const [data, setData] = useState(null);
15-
const [status, setStatus] = useState('CONNECTING');
16-
const [event, setEvent] = useState(null);
17-
const [error, setError] = useState(null);
18-
const [lastEventId, setLastEventId] = useState(null);
19-
const eventSourceRef = useRef(null);
20-
const explicitlyClosedRef = useRef(false);
21-
const retriedRef = useRef(0);
22-
const { withCredentials = false, immediate = true, autoConnect = true, autoReconnect } = options;
23-
const close = useCallback(() => {
24-
if (eventSourceRef.current) {
25-
eventSourceRef.current.close();
26-
eventSourceRef.current = null;
27-
setStatus('CLOSED');
28-
explicitlyClosedRef.current = true;
29-
}
30-
}, []);
31-
const open = useCallback(() => {
32-
if (!url) return;
18+
export const useEventSource = (url, events = [], options = {}) => {
19+
const [isConnecting, setIsConnecting] = useState(false);
20+
const [isOpen, setIsOpen] = useState(false);
21+
const [isError, setIsError] = useState(false);
22+
const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);
23+
const [error, setError] = useState(undefined);
24+
const [data, setData] = useState(options?.placeholderData);
25+
const eventSourceRef = useRef(undefined);
26+
const immediately = options.immediately ?? true;
27+
const close = () => {
28+
if (!eventSourceRef.current) return;
29+
eventSourceRef.current.close();
30+
eventSourceRef.current = undefined;
31+
setIsOpen(false);
32+
setIsConnecting(false);
33+
setIsError(false);
34+
};
35+
const open = () => {
3336
close();
34-
explicitlyClosedRef.current = false;
35-
retriedRef.current = 0;
36-
const es = new EventSource(url, { withCredentials });
37-
eventSourceRef.current = es;
38-
setStatus('CONNECTING');
39-
es.onopen = () => {
40-
setStatus('OPEN');
41-
setError(null);
37+
const eventSource = new EventSource(url, { withCredentials: options.withCredentials ?? false });
38+
eventSourceRef.current = eventSource;
39+
setIsConnecting(true);
40+
eventSource.onopen = () => {
41+
setIsOpen(true);
42+
setIsConnecting(false);
43+
setError(undefined);
44+
options?.onOpen?.();
4245
};
43-
es.onerror = (e) => {
44-
setStatus('CLOSED');
45-
setError(e);
46-
// Reconnect logic
47-
if (es.readyState === 2 && !explicitlyClosedRef.current && autoReconnect) {
48-
es.close();
49-
const { retries = -1, delay = 1000, onFailed } = resolveNestedOptions(autoReconnect);
50-
retriedRef.current += 1;
51-
if (typeof retries === 'number' && (retries < 0 || retriedRef.current < retries)) {
52-
setTimeout(open, delay);
53-
} else if (typeof retries === 'function' && retries()) {
54-
setTimeout(open, delay);
55-
} else {
56-
onFailed?.();
46+
eventSource.onerror = (event) => {
47+
setIsOpen(false);
48+
setIsConnecting(false);
49+
setIsError(true);
50+
setError(event);
51+
options?.onError?.(event);
52+
if (retryCountRef.current > 0) {
53+
retryCountRef.current -= 1;
54+
const retryDelay =
55+
typeof options?.retryDelay === 'function'
56+
? options?.retryDelay(retryCountRef.current, event)
57+
: options?.retryDelay;
58+
if (retryDelay) {
59+
setTimeout(open, retryDelay);
60+
return;
5761
}
5862
}
63+
retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;
5964
};
60-
es.onmessage = (e) => {
61-
setEvent(null);
62-
setData(e.data);
63-
setLastEventId(e.lastEventId);
65+
eventSource.onmessage = (event) => {
66+
const data = options?.select ? options?.select(event.data) : event.data;
67+
setData(data);
68+
options?.onMessage?.(event);
6469
};
6570
events.forEach((eventName) => {
66-
es.addEventListener(eventName, (e) => {
67-
setEvent(eventName);
68-
setData(e.data || null);
71+
eventSource.addEventListener(eventName, (event) => {
72+
setData(event.data);
6973
});
7074
});
71-
}, [url, withCredentials, autoReconnect, events, close]);
72-
useEffect(() => {
73-
if (immediate) open();
74-
return () => close();
75-
}, [immediate, open, close]);
75+
};
7676
useEffect(() => {
77-
if (autoConnect) open();
78-
}, [url, autoConnect, open]);
77+
if (!immediately) return;
78+
open();
79+
return () => {
80+
close();
81+
};
82+
}, [immediately]);
7983
return {
84+
instance: eventSourceRef.current,
8085
data,
81-
status,
82-
event,
8386
error,
87+
isConnecting,
88+
isOpen,
89+
isError,
8490
close,
85-
open,
86-
lastEventId
91+
open
8792
};
88-
}
93+
};

‎packages/core/src/bundle/hooks/useQuery/useQuery.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ export const useQuery = (callback, options) => {
3030
const [isLoading, setIsLoading] = useState(false);
3131
const [isError, setIsError] = useState(false);
3232
const [isRefetching, setIsRefetching] = useState(false);
33-
const [isSuccess, setIsSuccess] = useState(!!options?.initialData);
33+
const [isSuccess, setIsSuccess] = useState(!!options?.placeholderData);
3434
const [error, setError] = useState(undefined);
35-
const [data, setData] = useState(options?.initialData);
35+
const [data, setData] = useState(options?.placeholderData);
3636
const abortControllerRef = useRef(new AbortController());
3737
const intervalIdRef = useRef(undefined);
3838
const keys = options?.keys ?? [];
@@ -107,13 +107,9 @@ export const useQuery = (callback, options) => {
107107
};
108108
}, [enabled, options?.refetchInterval, options?.retry, ...keys]);
109109
const refetch = () => request('refetch');
110-
const placeholderData =
111-
typeof options?.placeholderData === 'function'
112-
? (options?.placeholderData)()
113-
: options?.placeholderData;
114110
return {
115111
abort,
116-
data: data ?? placeholderData,
112+
data,
117113
error,
118114
refetch,
119115
isFetching,

‎packages/core/src/hooks/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@ export * from './useDocumentTitle/useDocumentTitle';
2727
export * from './useDocumentVisibility/useDocumentVisibility';
2828
export * from './useDoubleClick/useDoubleClick';
2929
export * from './useDropZone/useDropZone';
30+
export * from './useDropZone/useDropZone';
3031
export * from './useElementSize/useElementSize';
3132
export * from './useEvent/useEvent';
3233
export * from './useEventListener/useEventListener';
3334
export * from './useEventSource/useEventSource';
35+
export * from './useEventSource/useEventSource';
3436
export * from './useEyeDropper/useEyeDropper';
3537
export * from './useFavicon/useFavicon';
3638
export * from './useField/useField';

‎packages/core/src/hooks/useActiveElement/useActiveElement.demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ const Demo = () => {
66

77
return (
88
<>
9-
<div className='grid grid-cols-2 gap-1 mt-1'>
9+
<div className='mt-1 grid grid-cols-2 gap-1'>
1010
{Array.from({ length: 6 }, (_, i) => i + 1).map((id) => (
1111
<input
1212
key={id}
13-
className='rounded border p-2 w-min-content'
13+
className='w-min-content rounded border p-2'
1414
data-id={String(id)}
1515
type='text'
1616
placeholder={String(id)}

‎packages/core/src/hooks/useBattery/useBattery.demo.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,20 @@ import { useBattery } from '@siberiacancode/reactuse';
33
const Demo = () => {
44
const battery = useBattery();
55

6-
if (!battery.supported) return <p>Api not supported, make sure to check for compatibility with different browsers when using this <a target="_blank" rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery">api</a></p>;
6+
if (!battery.supported)
7+
return (
8+
<p>
9+
Api not supported, make sure to check for compatibility with different browsers when using
10+
this{' '}
11+
<a
12+
href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery'
13+
rel='noreferrer'
14+
target='_blank'
15+
>
16+
api
17+
</a>
18+
</p>
19+
);
720

821
if (battery.value.loading) {
922
return (

‎packages/core/src/hooks/useBluetooth/useBluetooth.demo.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState } from 'react';
21
import { useBluetooth } from '@siberiacancode/reactuse';
2+
import { useState } from 'react';
33

44
const Demo = () => {
55
const [error, setError] = useState<string>();
@@ -16,7 +16,20 @@ const Demo = () => {
1616
}
1717
};
1818

19-
if (!bluetooth.supported) return <p>Api not supported, make sure to check for compatibility with different browsers when using this <a target="_blank" rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/bluetooth">api</a></p>;
19+
if (!bluetooth.supported)
20+
return (
21+
<p>
22+
Api not supported, make sure to check for compatibility with different browsers when using
23+
this{' '}
24+
<a
25+
href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/bluetooth'
26+
rel='noreferrer'
27+
target='_blank'
28+
>
29+
api
30+
</a>
31+
</p>
32+
);
2033

2134
return (
2235
<>

‎packages/core/src/hooks/useDebounceCallback/useDebounceCallback.demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useDebounceCallback, useCounter } from '@siberiacancode/reactuse';
1+
import { useCounter, useDebounceCallback } from '@siberiacancode/reactuse';
22

33
const Demo = () => {
44
const counter = useCounter();

‎packages/core/src/hooks/useDebounceValue/useDebounceValue.demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useDebounceValue, useCounter } from '@siberiacancode/reactuse';
1+
import { useCounter, useDebounceValue } from '@siberiacancode/reactuse';
22

33
const Demo = () => {
44
const counter = useCounter();

‎packages/core/src/hooks/useDidUpdate/useDidUpdate.demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useEffect, useState } from 'react';
21
import { useCounter, useDidUpdate } from '@siberiacancode/reactuse';
2+
import { useEffect, useState } from 'react';
33

44
const Demo = () => {
55
const counter = useCounter();

0 commit comments

Comments
 (0)