feat: Added use-debounced-callback, use-debounced-signal, use-debounced-value, use-did-update, use-document-visibility, use-in-viewport, use-input-state, use-intersection.

Author: Blankeos

README.md

@@ -53,21 +53,21 @@ We want to achieve as 1:1 as possible with Mantine's original hooks. So you can
 
 Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/hooks/src) library.
 
-- [ ] use-callback-ref
+- [x] ~~use-callback-ref~~ (Not needed, only used internally by mantine for preventing re-renders on a function)
 - [x] use-click-outside
 - [x] use-clipboard
 - [ ] use-color-scheme
 - [x] use-counter
-- [ ] use-debounced-callback
-- [ ] ~~use-debounced-state~~ use-debounced-signal
-- [ ] use-debounced-value
-- [ ] use-did-update
+- [x] use-debounced-callback
+- [x] ~~use-debounced-state~~ use-debounced-signal
+- [x] use-debounced-value
+- [x] use-did-update
 - [ ] use-disclosure
 - [ ] use-document-title
-- [ ] use-document-visibility
+- [x] use-document-visibility
 - [ ] use-event-listener
-- [x] use-eye-dropper (improved, state management is inside the hook)
-- [x] use-favicon (improved, more flexible)
+- [x] use-eye-dropper (✨ improved, state management is inside the hook)
+- [x] use-favicon (✨ improved, more flexible, better control)
 - [ ] use-fetch
 - [ ] use-focus-return
 - [ ] use-focus-trap
@@ -79,13 +79,13 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] use-hotkeys
 - [x] use-hover
 - [x] use-id (Added, but note that there is [`createUniqueId`](https://docs.solidjs.com/reference/component-apis/create-unique-id) in Solid)
-- [x] use-idle (Added, but note that there is [`createIdleTimer`](https://primitives.solidjs.community/package/idle/) solid-primitives as well)
-- [ ] use-in-viewport
-- [ ] use-input-state
-- [ ] use-intersection
+- [x] use-idle (Added, but note that there is [`createIdleTimer`](https://primitives.solidjs.community/package/idle/) the official solid-primitives as well)
+- [x] use-in-viewport
+- [x] use-input-state
+- [x] use-intersection (Added, but note that there is [`createIntersectionObserver`](https://primitives.solidjs.community/package/intersection-observer/) in the official solid-primitives as well)
 - [ ] use-interval
-- [ ] use-is-first-render
-- [x] ~~use-isomorphic-effect~~ (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is actually isomorphic - it works in browser and server).
+- [x] ~~use-is-first-render~~ (Every component function in SolidJS runs only once! Every component is first render only 🙂)
+- [x] use-isomorphic-effect (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is actually isomorphic - it works in browser and server).
 - [ ] use-list-state
 - [x] use-local-storage
 - [ ] use-logger

dev/components/examples/example-base.tsx

@@ -12,7 +12,7 @@ export function ExampleBase(props: FlowProps<ExampleBaseProps>) {
   const [viewing, setViewing] = createSignal<'code' | 'result'>('result');
 
   return (
-    <div class="flex h-full max-h-[500px] w-full flex-col items-start gap-y-3 overflow-hidden rounded-xl border bg-white p-5">
+    <div class="flex h-full max-h-[500px] w-full flex-col items-start gap-y-3 overflow-hidden rounded-lg bg-white p-5">
       <div class="flex w-full items-center justify-between">
         <h2 class="text-xl font-bold">{props.title}</h2>
         <button
@@ -25,7 +25,7 @@ export function ExampleBase(props: FlowProps<ExampleBaseProps>) {
         </button>
       </div>
 
-      <p class="text-sm text-opacity-70">{props.description}</p>
+      <div class="text-sm text-opacity-70">{props.description}</div>
 
       <Show when={viewing() === 'result'}>
         <div class="w-full flex-1 rounded-md">{props.children}</div>

dev/components/examples/use-debounced-callback/use-debounced-callback.code.mdx

@@ -0,0 +1,26 @@
+```tsx
+const [search, setSearch] = createSignal('');
+const [searchResults, setSearchResults] = createSignal<{ id: number; title: string }[]>([]);
+const [loading, setLoading] = createSignal(false);
+
+const debouncedSearch = useDebouncedCallback(async (query: string) => {
+    setLoading(true);
+    setSearchResults(await getSearchResults(query));
+    setLoading(false);
+}, 500);
+
+const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = event => {
+    setSearch(event.currentTarget.value);
+    debouncedSearch(event.currentTarget.value);
+};
+
+return (
+    <div>
+        <input type="text" value={search} onInput={handleInput} />
+        <Show when={loading()}
+            children={<div>Loading...</div>}
+            fallback={<For each={searchResults()}>{result => <div>{result.title}</div>}</For>}
+        />
+    </div>;
+)
+```

dev/components/examples/use-debounced-callback/use-debounced-callback.example.tsx

@@ -0,0 +1,65 @@
+import { useDebouncedCallback } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-debounced-callback.code.mdx';
+
+import { createSignal, For, JSX, Show } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+
+function getSearchResults(query: string): Promise<{ id: number; title: string }[]> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(
+        query.trim() === ''
+          ? []
+          : Array(5)
+              .fill(0)
+              .map((_, index) => ({ id: index, title: `${query} ${index + 1}` })),
+      );
+    }, 1000);
+  });
+}
+
+export function UseDebouncedCallbackExample() {
+  const [search, setSearch] = createSignal('');
+  const [searchResults, setSearchResults] = createSignal<{ id: number; title: string }[]>([]);
+  const [loading, setLoading] = createSignal(false);
+
+  const debouncedSearch = useDebouncedCallback(async (query: string) => {
+    setLoading(true);
+    setSearchResults(await getSearchResults(query));
+    setLoading(false);
+  }, 500);
+
+  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = event => {
+    setSearch(event.currentTarget.value);
+    debouncedSearch(event.currentTarget.value);
+  };
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useDebouncedCallback"
+      description="Creates a debounced version of a callback function, delaying its execution until a specified time has elapsed since the last invocation."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+        <input
+          value={search()}
+          onInput={handleInput}
+          class="rounded-md border p-2"
+          placeholder="Search..."
+        />
+
+        <Show
+          when={loading()}
+          children={<>Loading...</>}
+          fallback={
+            <For each={searchResults()}>{result => <div class="text-xs">{result.title}</div>}</For>
+          }
+        />
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-debounced-signal/use-debounced-signal.code.mdx

@@ -0,0 +1,9 @@
+```tsx
+const [signal, setSignal] = useDebouncedSignal('', 500);
+return (
+  <>
+    <input value={signal()} onInput={e => setSignal(e.currentTarget.value)} />
+    <span>State: {JSON.stringify(signal())}</span>
+  </>
+);
+```

dev/components/examples/use-debounced-signal/use-debounced-signal.example.tsx

@@ -0,0 +1,29 @@
+import { useDebouncedSignal } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-debounced-signal.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseDebouncedSignalExample() {
+  const [signal, setSignal] = useDebouncedSignal('', 500);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useDebouncedSignal"
+      description="Creates a signal that is debounced with a given wait time."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+        <input
+          value={signal()}
+          onInput={e => setSignal(e.currentTarget.value)}
+          class="rounded-md border p-2"
+        />
+        <span>State: {JSON.stringify(signal())}</span>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-debounced-value/use-debounced-value.code.mdx

@@ -0,0 +1,9 @@
+```tsx
+const id = useId();
+
+return (
+    <div>
+        Random ID: {id()}
+    </div>;
+)
+```

dev/components/examples/use-debounced-value/use-debounced-value.example.tsx

@@ -0,0 +1,35 @@
+import { useDebouncedValue } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-debounced-value.code.mdx';
+
+import { createSignal } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseDebouncedValueExample() {
+  const [signal, setSignal] = createSignal('');
+  const [value, cancel] = useDebouncedValue(signal, 500);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useDebouncedValue"
+      description="Debounced value from an existing signal."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+        <input
+          value={signal()}
+          onInput={e => setSignal(e.currentTarget.value)}
+          class="rounded-md border p-2"
+        />
+        <div class="flex items-center gap-x-2">
+          <span>State: {JSON.stringify(signal())}</span>
+          <span>|</span>
+          <span>Value: {JSON.stringify(value())}</span>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-did-update/use-did-update.code.mdx

@@ -0,0 +1,13 @@
+```tsx
+const [signal, setSignal] = createSignal(0);
+
+useDidUpdate(() => {
+    console.log('Did Update', signal());
+}, signal);
+
+return (
+    <div>
+        <button onClick={setSignal(prev => prev + 1)}>Simulate Update {signal()}</button>
+    </div>;
+)
+```

dev/components/examples/use-did-update/use-did-update.example.tsx

@@ -0,0 +1,50 @@
+import { useDidUpdate } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-did-update.code.mdx';
+
+import { createSignal } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseDidUpdateExample() {
+  const [signal, setSignal] = createSignal(0);
+
+  useDidUpdate(() => {
+    console.log('Did Update', signal());
+  }, signal);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useDidUpdate"
+      description={
+        <>
+          This hook works the same way as createEffect but it is not called when component is
+          mounted.
+          <br />
+          <br />
+          Unlike createEffect, this always has a dependency of signals (like React's useEffect) for
+          the reason that the only way to do this in Solid is using the on() + defer property under
+          the hood.
+        </>
+      }
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+        <p class="max-w-xs text-center text-xs">
+          This logs "Did Update {signal() === 0 ? 'X' : signal()}" to the console. Notice that it
+          doesn't log "Did Update 0" since it happens on mount.
+        </p>
+        <button
+          class="rounded-md bg-primary p-2 text-white transition active:scale-95"
+          onClick={() => {
+            setSignal(signal() + 1);
+          }}
+        >
+          Simulate an Update {signal()}
+        </button>
+      </div>
+    </ExampleBase>
+  );
+}