fix: Fixed some edge cases for the hooks.

Author: Blankeos

CHANGELOG.md

@@ -0,0 +1,11 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### 0.0.1
+
+- feat: initial commit + Added the use-hotkeys hook. [`fe858db`](https://github.com/Blankeos/bagon-hooks/commit/fe858db9cd1b626886bcb3b0e95cb798ebb15cee)
+- Format [`5b9e02a`](https://github.com/Blankeos/bagon-hooks/commit/5b9e02a0fd0cc7eeff8a6c078410dca0fa85639c)
+- chore: Changed formatting. [`f7e9f2b`](https://github.com/Blankeos/bagon-hooks/commit/f7e9f2b205091ddf0caff29693c7ba8aa60d654a)

dev/App.tsx renamed to dev/pages/index/+Page.tsx

@@ -0,0 +1,3 @@
+import getTitle from 'dev/utils/get-title';
+
+export const title = getTitle('Home');

dev/pages/index/+title.ts

@@ -0,0 +1,44 @@
+@import url('../fonts/geist.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Dark/Light Agnostic Colors */
+    --primary: 206 73% 64%; /* hsl(206 73% 64%) */
+    --primary-foreground: 204 100% 79%; /* hsl(204 100% 79%) */
+    --primary-secondary: 53 80% 67%; /* hsl(53 80% 67%) */
+
+    --background: 240 10% 4%; /* hsl(240 10% 4%) */
+
+    --muted: 0 0% 96.1%; /* hsl(0 0% 96.1%) */
+
+    --typography: 0 0% 25%; /* hsl(0 0% 25%) */
+
+    /* Static Colors */
+    --static-white: 240 100% 98%; /* hsl(240 100% 98%) */
+  }
+
+  .dark {
+    
+  }
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-family: 'Geist', sans-serif;
+
+  @apply bg-primary;
+  @apply text-typography;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}

dev/styles/app.css

@@ -0,0 +1,5 @@
+const TITLE_TEMPLATE = '%s | Bagon Hooks';
+
+export default function getTitle(title: string = 'Home') {
+  return TITLE_TEMPLATE.replace('%s', title);
+}

dev/utils/get-title.ts

@@ -4,9 +4,6 @@ const DEFAULT_EVENTS = ['mousedown', 'touchstart'];
 
 /**
  * A hook that listens to click events outside of a specified element or elements.
- *
- * @example
- *
  */
 export function useClickOutside<T extends HTMLElement = any>(
   handler: () => void,
@@ -23,7 +20,6 @@ export function useClickOutside<T extends HTMLElement = any>(
   const [ref, setRef] = createSignal<T>();
 
   createEffect(() => {
-    console.log(ref, 'wowowow');
     const listener = (event: any) => {
       const { target } = event ?? {};
       if (Array.isArray(nodes)) {

src/use-click-outside/use-click-outside.ts

@@ -1,4 +1,4 @@
-import { Accessor, createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';
+import { createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';
 
 const DEFAULT_EVENTS: (keyof DocumentEventMap)[] = [
   'keypress',
@@ -20,7 +20,7 @@ const DEFAULT_OPTIONS = {
  * @param options - An options object to configure the hook.
  */
 export function useIdle(
-  timeout: Accessor<number>,
+  timeout: number,
   options?: Partial<{ events: (keyof DocumentEventMap)[]; initialState: boolean }>,
 ) {
   const _options = mergeProps(DEFAULT_OPTIONS, options);
@@ -38,15 +38,15 @@ export function useIdle(
 
       timer = window.setTimeout(() => {
         setIdle(true);
-      }, timeout());
+      }, timeout);
     };
 
     _options.events.forEach(event => document.addEventListener(event, handleEvents));
 
     // Start the timer immediately instead of waiting for the first event to happen
     timer = window.setTimeout(() => {
       setIdle(true);
-    }, timeout());
+    }, timeout);
 
     onCleanup(() => {
       _options.events.forEach(event => document.removeEventListener(event, handleEvents));

src/use-idle/use-idle.ts

@@ -47,6 +47,7 @@ export function useNetwork() {
   onMount(() => {
     const onlineListener = () => setStatus({ online: true, ...getConnection() });
     const offlineListener = () => setStatus({ online: false, ...getConnection() });
+    window.addEventListener('online', onlineListener);
     window.addEventListener('offline', offlineListener);
 
     onCleanup(() => {

src/use-network/use-network.ts

@@ -87,7 +87,7 @@ export function useElementSize<T extends HTMLElement = any>(options?: ResizeObse
 
   return {
     ref,
-    width: createMemo(() => rectStore.rect.width),
-    height: createMemo(() => rectStore.rect.height),
+    width: createMemo(() => rectStore?.rect?.width),
+    height: createMemo(() => rectStore?.rect?.height),
   };
 }

src/use-resize-observer/use-resize-observer.ts

@@ -2,6 +2,8 @@ import { createMemo, createSignal } from 'solid-js';
 
 /**
  * A hook that toggles between two or multiple values (by implementing a common state pattern).
+ *
+ * Dev Note: Personally this can be called `useCycle` instead since it cycles through the options.
  */
 export function useToggle<T = boolean>(options: readonly T[] = [false, true] as any) {
   const [_options, _setOptions] = createSignal<typeof options>(options);