@peachy/hooks 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @peachy/hooks
 
+## 0.0.12
+
+## 0.0.11
+
+### Patch Changes
+
+- 3e37e37: Improve types for useBinding hook
+
 ## 0.0.10
 
 ### Patch Changes

package/README.md

@@ -24,11 +24,7 @@ import { useNetworkMonitor } from "@peachy/hooks";
 const App = () => {
   const { connected } = useNetworkMonitor();
 
-  return (
-    <Gtk.Label>
-      {connected ? "Connected" : "Disconnected"}
-    </Gtk.Label>
-  );
+  return <Gtk.Label>{connected ? "Connected" : "Disconnected"}</Gtk.Label>;
 };
 ```
 
@@ -51,12 +47,8 @@ const App = () => {
 
   return (
     <Gtk.Box>
-      <Gtk.Label>
-        Theme: {value}
-      </Gtk.Label>
-      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>
-        Change Theme
-      </Gtk.Button>
+      <Gtk.Label>Theme: {value}</Gtk.Label>
+      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>Change Theme</Gtk.Button>
     </Gtk.Box>
   );
 };
@@ -68,6 +60,8 @@ const App = () => {
 
 Bind to a property, and listen for changes.
 
+NOTE: You can provide a default value for the hook as third parameter
+
 ```tsx
 import Adw from "gi://Adw?version=1";
 
@@ -81,13 +75,9 @@ const App = () => {
 
   return (
     <Gtk.Box>
-      <Gtk.Label>
-        Theme: {darkMode ? "Dark" : "Light"}
-      </Gtk.Label>
-      
-      <Gtk.Label>
-        Accent Color: {accentColor}
-      </Gtk.Label>
+      <Gtk.Label>Theme: {darkMode ? "Dark" : "Light"}</Gtk.Label>
+
+      <Gtk.Label>Accent Color: {accentColor}</Gtk.Label>
     </Gtk.Box>
   );
 };

package/dist/adw/index.mjs

@@ -1,4 +1,3 @@
 import { useAccentColor } from "./use-accent-color.mjs";
 import { useDarkMode } from "./use-dark-mode.mjs";
-
-export { useAccentColor, useDarkMode };
+export { useAccentColor, useDarkMode };

package/dist/adw/use-accent-color.d.mts

@@ -1,8 +1,8 @@
 //#region src/adw/use-accent-color.d.ts
 /**
- * Query the system's accent color if supported
- * @returns [accentColor] - accent color or null
- */
-declare function useAccentColor(): any[];
+* Query the system's accent color if supported
+* @returns [accentColor] - accent color or null
+*/
+declare function useAccentColor(): [accentColor: number | null];
 //#endregion
 export { useAccentColor };

package/dist/adw/use-accent-color.mjs

@@ -2,7 +2,6 @@ import { useBinding } from "../gobject/use-binding.mjs";
 import "../gobject/index.mjs";
 import { useRef } from "react";
 import Adw from "gi://Adw?version=1";
-
 //#region src/adw/use-accent-color.ts
 /**
 * Query the system's accent color if supported
@@ -10,10 +9,9 @@ import Adw from "gi://Adw?version=1";
 */
 function useAccentColor() {
 	const styleManager = useRef(Adw.StyleManager.get_default());
-	const [accentColor] = useBinding(styleManager, "accentColor");
-	const [systemSupportsAccentColors] = useBinding(styleManager, "systemSupportsAccentColors");
+	const [accentColor] = useBinding(styleManager, "accent-color");
+	const [systemSupportsAccentColors] = useBinding(styleManager, "system-supports-accent-colors");
 	return [systemSupportsAccentColors ? accentColor : null];
 }
-
 //#endregion
-export { useAccentColor };
+export { useAccentColor };

package/dist/adw/use-dark-mode.d.mts

@@ -1,4 +1,4 @@
 //#region src/adw/use-dark-mode.d.ts
-declare function useDarkMode(): any[];
+declare function useDarkMode(): [isDark: boolean, setDarkMode: (value: boolean) => void];
 //#endregion
 export { useDarkMode };

package/dist/adw/use-dark-mode.mjs

@@ -2,15 +2,13 @@ import { useBinding } from "../gobject/use-binding.mjs";
 import "../gobject/index.mjs";
 import { useCallback, useRef } from "react";
 import Adw from "gi://Adw?version=1";
-
 //#region src/adw/use-dark-mode.ts
 function useDarkMode() {
 	const styleManager = useRef(Adw.StyleManager.get_default());
-	const [isDark] = useBinding(styleManager, "dark", false);
+	const [isDark] = useBinding(styleManager, "dark");
 	return [isDark, useCallback((value) => {
 		styleManager.current.set_color_scheme(value ? Adw.ColorScheme.PREFER_DARK : Adw.ColorScheme.PREFER_LIGHT);
 	}, [styleManager])];
 }
-
 //#endregion
-export { useDarkMode };
+export { useDarkMode };

package/dist/base/index.mjs

@@ -1,3 +1,2 @@
 import { useReference } from "./use-reference.mjs";
-
-export { useReference };
+export { useReference };

package/dist/base/use-reference.d.mts

@@ -2,8 +2,8 @@ import { RefObject } from "react";
 
 //#region src/base/use-reference.d.ts
 /**
- * Returns the value inside a `ref`, correctly checking it after the initial render
- */
+* Returns the value inside a `ref`, correctly checking it after the initial render
+*/
 declare function useReference<T>(value: T | RefObject<T>, defaultValue?: T): T | null;
 //#endregion
 export { useReference };

package/dist/base/use-reference.mjs

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-
 //#region src/base/use-reference.ts
 /**
 * Returns the value inside a `ref`, correctly checking it after the initial render
@@ -19,6 +18,5 @@ function getValue(object) {
 function isRef(object) {
 	return typeof object === "object" && object !== null && "current" in object;
 }
-
 //#endregion
-export { useReference };
+export { useReference };

package/dist/gio/index.mjs

@@ -1,4 +1,3 @@
 import { useNetworkMonitor } from "./use-network-monitor.mjs";
 import { useSetting } from "./use-setting.mjs";
-
-export { useNetworkMonitor, useSetting };
+export { useNetworkMonitor, useSetting };

package/dist/gio/use-network-monitor.mjs

@@ -1,28 +1,27 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Gio from "gi://Gio?version=2.0";
-
 //#region src/gio/use-network-monitor.ts
 function useNetworkMonitor() {
-	const monitor = Gio.NetworkMonitor.get_default();
+	const monitor = useRef(Gio.NetworkMonitor.get_default());
 	const [state, setState] = useState(() => calculateState());
 	const calculateState = useCallback(() => {
 		return {
-			available: monitor.network_available,
-			connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
-			state: monitor.connectivity,
-			metered: monitor.network_metered
+			available: monitor.current.networkAvailable,
+			connected: monitor.current.connectivity === Gio.NetworkConnectivity.FULL,
+			state: monitor.current.connectivity,
+			metered: monitor.current.networkMetered
 		};
-	}, []);
+	}, [monitor]);
 	useEffect(() => {
-		const id = monitor.connect("network-changed", () => {
+		const monitorObj = monitor.current;
+		const id = monitorObj.connect("network-changed", () => {
 			setState(calculateState());
 		});
 		return () => {
-			monitor.disconnect(id);
+			monitorObj.disconnect(id);
 		};
-	}, []);
+	}, [calculateState]);
 	return state;
 }
-
 //#endregion
-export { useNetworkMonitor };
+export { useNetworkMonitor };

package/dist/gio/use-setting.mjs

@@ -1,22 +1,24 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Gio from "gi://Gio?version=2.0";
-
 //#region src/gio/use-setting.ts
 function useSetting(schema, key) {
-	const settings = Gio.Settings.new(schema);
-	const getValue = () => settings.get_value(key).recursiveUnpack();
+	const settings = useRef(Gio.Settings.new(schema));
+	const getValue = useCallback(() => settings.current.get_value(key).recursiveUnpack(), [key, settings]);
 	const [value, setValue] = useState(() => getValue());
 	useEffect(() => {
-		const handler = settings.connect("changed::" + key, () => {
+		let settingsObj = settings.current;
+		const handler = settingsObj.connect(`changed::${key}`, () => {
 			setValue(getValue());
 		});
-		return () => settings.disconnect(handler);
-	}, [settings, key]);
-	const changeValue = (newValue) => {
-		settings.set_value(key, newValue);
-	};
-	return [value, changeValue];
+		return () => settingsObj.disconnect(handler);
+	}, [
+		settings,
+		key,
+		getValue
+	]);
+	return [value, useCallback(() => (newValue) => {
+		settings.current.set_value(key, newValue);
+	}, [key])];
 }
-
 //#endregion
-export { useSetting };
+export { useSetting };

package/dist/gobject/index.mjs

@@ -1,3 +1,2 @@
 import { useBinding } from "./use-binding.mjs";
-
-export { useBinding };
+export { useBinding };

package/dist/gobject/use-binding.d.mts

@@ -2,8 +2,10 @@ import { RefObject } from "react";
 import GObject from "gi://GObject?version=2.0";
 
 //#region src/gobject/use-binding.d.ts
-type NonFunctionKeys<T> = { [K in keyof T]: T[K] extends Function ? never : K extends Symbol ? never : K extends number ? never : K }[keyof T];
-declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>>(object: T | RefObject<T | null>, property: Prop, defaultValue?: T[Prop], converter?: undefined): [T[Prop]];
-declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>, Converter extends (value: T[Prop]) => any>(object: T | RefObject<T>, property: Prop, defaultValue: T[Prop] | undefined, converter: Converter): [ReturnType<Converter>];
+type PropertyOf<T extends GObject.Object> = Extract<keyof T["$readableProperties"], string>;
+type PropertyType<T, Prop extends keyof T> = T["$readableProperties"][Prop];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T>, property: Prop, defaultValue?: null): [PropType];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T | null>, property: Prop, defaultValue: PropType): [PropType];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T | null>, property: Prop, defaultValue?: null): [PropType | null];
 //#endregion
 export { useBinding };

package/dist/gobject/use-binding.mjs

@@ -1,15 +1,12 @@
 import { useReference } from "../base/use-reference.mjs";
 import "../base/index.mjs";
 import { useEffect, useState } from "react";
-
 //#region src/gobject/use-binding.ts
-function useBinding(object, _property, defaultValue, converter) {
-	const property = toKebabCase(_property);
+function useBinding(object, property, defaultValue) {
 	const value = useReference(object);
 	const [result, setResult] = useState(() => {
-		if (!value) return defaultValue;
-		const initialResult = value[property];
-		return converter ? converter(initialResult) : initialResult;
+		if (!value) return defaultValue ?? null;
+		return value[property];
 	});
 	useEffect(() => {
 		if (!value) return;
@@ -19,12 +16,8 @@ function useBinding(object, _property, defaultValue, converter) {
 		return () => {
 			value.disconnect(id);
 		};
-	}, [value]);
+	}, [value, property]);
 	return [result];
 }
-function toKebabCase(str) {
-	return str.replace(/([A-Z])/g, "-$1").replace(/_/g, "-").toLowerCase();
-}
-
 //#endregion
-export { useBinding };
+export { useBinding };

package/dist/index.d.mts

@@ -1,7 +1,5 @@
 import { useAccentColor } from "./adw/use-accent-color.mjs";
 import { useDarkMode } from "./adw/use-dark-mode.mjs";
 import { useReference } from "./base/use-reference.mjs";
-import "./base/index.mjs";
 import { useBinding } from "./gobject/use-binding.mjs";
-import "./gobject/index.mjs";
 export { useAccentColor, useBinding, useDarkMode, useReference };

package/dist/index.mjs

@@ -5,5 +5,4 @@ import "./gobject/index.mjs";
 import { useAccentColor } from "./adw/use-accent-color.mjs";
 import { useDarkMode } from "./adw/use-dark-mode.mjs";
 import "./adw/index.mjs";
-
-export { useAccentColor, useBinding, useDarkMode, useReference };
+export { useAccentColor, useBinding, useDarkMode, useReference };

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@peachy/hooks",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "",
+  "license": "MIT",
+  "author": "",
   "main": "./dist/index.mjs",
   "exports": {
     ".": {
@@ -13,14 +15,12 @@
       "types": "./dist/*/index.d.mts"
     }
   },
-  "author": "",
-  "license": "MIT",
   "devDependencies": {
-    "@types/react": "^19.2.13",
+    "@types/react": "^19.2.14",
     "react": "^19.2.4",
-    "tsdown": "0.20.3",
+    "tsdown": "0.21.0",
     "typescript": "^5.9.3",
-    "@peachy/react": "0.0.10"
+    "@peachy/react": "0.0.12"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/adw/use-accent-color.ts

@@ -8,14 +8,11 @@ import { useBinding } from "../gobject";
  * Query the system's accent color if supported
  * @returns [accentColor] - accent color or null
  */
-export function useAccentColor() {
+export function useAccentColor(): [accentColor: number | null] {
   const styleManager = useRef(Adw.StyleManager.get_default());
 
-  const [accentColor] = useBinding(styleManager, "accentColor");
-  const [systemSupportsAccentColors] = useBinding(
-    styleManager,
-    "systemSupportsAccentColors",
-  );
+  const [accentColor] = useBinding(styleManager, "accent-color");
+  const [systemSupportsAccentColors] = useBinding(styleManager, "system-supports-accent-colors");
 
   return [systemSupportsAccentColors ? accentColor : null];
 }

package/src/adw/use-dark-mode.ts

@@ -4,12 +4,12 @@ import { useCallback, useRef } from "react";
 
 import { useBinding } from "../gobject";
 
-export function useDarkMode() {
+export function useDarkMode(): [isDark: boolean, setDarkMode: (value: boolean) => void] {
   const styleManager = useRef(Adw.StyleManager.get_default());
 
-  const [isDark] = useBinding(styleManager, "dark", false);
+  const [isDark] = useBinding(styleManager, "dark");
   const setDarkMode = useCallback(
-    (value: boolean) => {
+    (value: boolean): void => {
       styleManager.current.set_color_scheme(
         value ? Adw.ColorScheme.PREFER_DARK : Adw.ColorScheme.PREFER_LIGHT,
       );
@@ -17,5 +17,5 @@ export function useDarkMode() {
     [styleManager],
   );
 
-  return [isDark, setDarkMode];
+  return [isDark, setDarkMode] as const;
 }

package/src/base/use-reference.ts

@@ -3,10 +3,7 @@ import { RefObject, useEffect, useState } from "react";
 /**
  * Returns the value inside a `ref`, correctly checking it after the initial render
  */
-export function useReference<T>(
-  value: T | RefObject<T>,
-  defaultValue?: T,
-): T | null {
+export function useReference<T>(value: T | RefObject<T>, defaultValue?: T): T | null {
   const [result, setResult] = useState<T | null>(() => {
     return getValue(value) ?? (defaultValue || null);
   });

package/src/gio/use-network-monitor.ts

@@ -1,5 +1,6 @@
 import Gio from "gi://Gio?version=2.0";
-import { useCallback, useEffect, useState } from "react";
+
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface NetworkMonitor {
   connected: boolean;
@@ -9,27 +10,29 @@ interface NetworkMonitor {
 }
 
 export function useNetworkMonitor(): NetworkMonitor {
-  const monitor = Gio.NetworkMonitor.get_default();
+  const monitor = useRef(Gio.NetworkMonitor.get_default());
   const [state, setState] = useState(() => calculateState());
 
   const calculateState = useCallback(() => {
     return {
-      available: monitor.network_available,
-      connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
-      state: monitor.connectivity,
-      metered: monitor.network_metered,
+      available: monitor.current.networkAvailable,
+      connected: monitor.current.connectivity === Gio.NetworkConnectivity.FULL,
+      state: monitor.current.connectivity,
+      metered: monitor.current.networkMetered,
     } as NetworkMonitor;
-  }, []);
+  }, [monitor]);
 
   useEffect(() => {
-    const id = monitor.connect("network-changed", () => {
+    const monitorObj = monitor.current;
+
+    const id = monitorObj.connect("network-changed", () => {
       setState(calculateState());
     });
 
     return () => {
-      monitor.disconnect(id);
+      monitorObj.disconnect(id);
     };
-  }, []);
+  }, [calculateState]);
 
   return state;
 }

package/src/gio/use-setting.ts

@@ -1,25 +1,34 @@
 import Gio from "gi://Gio?version=2.0";
 import GLib from "gi://GLib?version=2.0";
-import { useEffect, useState } from "react";
+
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export function useSetting<T = unknown>(schema: string, key: string) {
-  const settings = Gio.Settings.new(schema);
+  const settings = useRef(Gio.Settings.new(schema));
 
-  const getValue = () => settings.get_value(key).recursiveUnpack() as T;
+  const getValue = useCallback(
+    () => settings.current.get_value(key).recursiveUnpack() as T,
+    [key, settings],
+  );
 
   const [value, setValue] = useState<T>(() => getValue());
 
   useEffect(() => {
-    const handler = settings.connect("changed::" + key, () => {
+    let settingsObj = settings.current;
+
+    const handler = settingsObj.connect(`changed::${key}`, () => {
       setValue(getValue());
     });
 
-    return () => settings.disconnect(handler);
-  }, [settings, key]);
+    return () => settingsObj.disconnect(handler);
+  }, [settings, key, getValue]);
 
-  const changeValue = (newValue: GLib.Variant) => {
-    settings.set_value(key, newValue);
-  };
+  const changeValue = useCallback(
+    () => (newValue: GLib.Variant) => {
+      settings.current.set_value(key, newValue);
+    },
+    [key],
+  );
 
   return [value, changeValue] as [T, (newValue: GLib.Variant) => void];
 }

package/src/gobject/use-binding.ts

@@ -1,53 +1,43 @@
 import GObject from "gi://GObject?version=2.0";
+
 import { RefObject, useEffect, useState } from "react";
+
 import { useReference } from "../base";
 
-type NonFunctionKeys<T> = {
-  [K in keyof T]: T[K] extends Function
-    ? never
-    : K extends Symbol
-      ? never
-      : K extends number
-        ? never
-        : K;
-}[keyof T];
+type PropertyOf<T extends GObject.Object> = Extract<keyof T["$readableProperties"], string>;
 
+/// @ts-expect-error broken
+type PropertyType<T, Prop extends keyof T> = T["$readableProperties"][Prop];
+
+// when your ref is non-nullable, the result is never null
 export function useBinding<
   T extends GObject.Object,
-  Prop extends NonFunctionKeys<T>,
->(
-  object: T | RefObject<T | null>,
-  property: Prop,
-  defaultValue?: T[Prop],
-  converter?: undefined,
-): [T[Prop]];
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T>, property: Prop, defaultValue?: null): [PropType];
+// when the ref is nullable but you provided a default value, the result is never null
 export function useBinding<
   T extends GObject.Object,
-  Prop extends NonFunctionKeys<T>,
-  Converter extends (value: T[Prop]) => any,
->(
-  object: T | RefObject<T>,
-  property: Prop,
-  defaultValue: T[Prop] | undefined,
-  converter: Converter,
-): [ReturnType<Converter>];
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T | null>, property: Prop, defaultValue: PropType): [PropType];
+// when you didn't provide a default value, the result can be null
 export function useBinding<
   T extends GObject.Object,
-  Prop extends NonFunctionKeys<T>,
-  Converter extends (value: T[Prop]) => any,
->(
-  object: T | RefObject<T>,
-  _property: Prop,
-  defaultValue?: any,
-  converter?: Converter,
-): any {
-  const property = toKebabCase(_property);
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T | null>, property: Prop, defaultValue?: null): [PropType | null];
+// base implementation
+export function useBinding<
+  T extends GObject.Object,
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T>, property: Prop, defaultValue?: PropType): any {
   const value = useReference(object);
 
   const [result, setResult] = useState(() => {
-    if (!value) return defaultValue;
-    const initialResult = value[property as Prop];
-    return converter ? converter(initialResult) : initialResult;
+    if (!value) return defaultValue ?? null;
+    return value[property];
   });
 
   // run this on initial render
@@ -56,21 +46,15 @@ export function useBinding<
       return;
     }
 
+    // @ts-expect-error trust me, we are listening to a property
     const id = value.connect(`notify::${property}`, () => {
-      setResult(value[property as Prop]);
+      setResult(value[property]);
     });
 
     return () => {
       value.disconnect(id);
     };
-  }, [value]);
+  }, [value, property]);
 
   return [result] as const;
 }
-
-function toKebabCase(str: string): string {
-  return str
-    .replace(/([A-Z])/g, "-$1")
-    .replace(/_/g, "-")
-    .toLowerCase();
-}

package/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "@peachy/react/tsconfig",
+  "extends": "@peachy/react/tsconfig"
 }

package/tsdown.config.mjs

@@ -3,7 +3,9 @@ import { defineConfig } from "tsdown";
 export default defineConfig({
   entry: ["./src/**/*.ts"],
   dts: true,
-  external: [/^gi:\/\/*/],
+  deps: {
+    neverBundle: [/^gi:\/\/*/],
+  },
   outputOptions: {
     preserveModules: true,
   },

package/dist/types.d.mts

@@ -1 +0,0 @@
-export { };

package/dist/types.mjs

@@ -1 +0,0 @@
-export {  };