@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/hooks/presentation/solid/sensors/useProximity.ts

@@ -0,0 +1,38 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useProximity(): {
+	near: Accessor<boolean>;
+	distance: Accessor<number | null>;
+	isSupported: Accessor<boolean>;
+} {
+	const [near, setNear] = createSignal(false);
+	const [distance, setDistance] = createSignal<number | null>(null);
+	const [isSupported, setIsSupported] = createSignal(
+		"ProximitySensor" in window,
+	);
+	let sensor: any = null;
+
+	onMount(() => {
+		if (isSupported()) {
+			try {
+				sensor = new (window as any).ProximitySensor();
+				sensor.onreading = (): void => {
+					setNear(sensor.near);
+					setDistance(sensor.distance);
+				};
+				sensor.onerror = (_event: any): void => {};
+				sensor.start();
+			} catch (_err) {
+				setIsSupported(false);
+			}
+		}
+	});
+
+	onCleanup(() => {
+		if (sensor) {
+			sensor.stop();
+		}
+	});
+
+	return { near, distance, isSupported };
+}

package/src/hooks/presentation/solid/sensors/useRelativeOrientation.ts

@@ -0,0 +1,41 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useRelativeOrientation(): {
+	alpha: Accessor<number>;
+	beta: Accessor<number>;
+	gamma: Accessor<number>;
+	isSupported: Accessor<boolean>;
+} {
+	const [alpha, setAlpha] = createSignal(0);
+	const [beta, setBeta] = createSignal(0);
+	const [gamma, setGamma] = createSignal(0);
+	const [isSupported, setIsSupported] = createSignal(
+		"RelativeOrientationSensor" in window,
+	);
+	let sensor: any = null;
+
+	onMount(() => {
+		if (isSupported()) {
+			try {
+				sensor = new (window as any).RelativeOrientationSensor();
+				sensor.onreading = (): void => {
+					setAlpha(sensor.quaternion[3] || 0);
+					setBeta(sensor.quaternion[2] || 0);
+					setGamma(sensor.quaternion[1] || 0);
+				};
+				sensor.onerror = (_event: any): void => {};
+				sensor.start();
+			} catch (_err) {
+				setIsSupported(false);
+			}
+		}
+	});
+
+	onCleanup(() => {
+		if (sensor) {
+			sensor.stop();
+		}
+	});
+
+	return { alpha, beta, gamma, isSupported };
+}

package/src/hooks/presentation/solid/sensors/useSerial.ts

@@ -0,0 +1,18 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useSerial(): {
+	isSupported: Accessor<boolean>;
+	requestPort: (options?: any[]) => Promise<any>;
+} {
+	const [isSupported] = createSignal("serial" in navigator);
+
+	const requestPort = async (options: any[] = []): Promise<any> => {
+		if (!isSupported()) {
+			throw new Error("Serial API is not supported");
+		}
+
+		return await (navigator as any).serial.requestPort({ filters: options });
+	};
+
+	return { isSupported, requestPort };
+}

package/src/hooks/presentation/solid/sensors/useShake.ts

@@ -0,0 +1,54 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useShake(
+	options: { threshold?: number; timeout?: number } = {},
+): {
+	isShaking: Accessor<boolean>;
+} {
+	const { threshold = 15, timeout = 500 } = options;
+	const [isShaking, setIsShaking] = createSignal(false);
+	let lastX = 0;
+	let lastY = 0;
+	let lastZ = 0;
+	let lastTime = 0;
+
+	const handleMotion = (
+		event: DeviceMotionEvent,
+		now: number = Date.now(),
+	): void => {
+		const currentX = event.accelerationIncludingGravity?.x ?? 0;
+		const currentY = event.accelerationIncludingGravity?.y ?? 0;
+		const currentZ = event.accelerationIncludingGravity?.z ?? 0;
+		const currentTime = now;
+
+		if (currentTime - lastTime < timeout) {
+			return;
+		}
+
+		const deltaX = Math.abs(currentX - lastX);
+		const deltaY = Math.abs(currentY - lastY);
+		const deltaZ = Math.abs(currentZ - lastZ);
+
+		if (deltaX > threshold || deltaY > threshold || deltaZ > threshold) {
+			setIsShaking(true);
+			setTimeout(() => {
+				setIsShaking(false);
+			}, timeout);
+		}
+
+		lastX = currentX;
+		lastY = currentY;
+		lastZ = currentZ;
+		lastTime = currentTime;
+	};
+
+	onMount(() => {
+		window.addEventListener("devicemotion", handleMotion);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("devicemotion", handleMotion);
+	});
+
+	return { isShaking };
+}

package/src/hooks/presentation/solid/sensors/useTilt.ts

@@ -0,0 +1,31 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+import { TILT_CONFIG } from "#hooks/adapters/config";
+
+export function useTilt(): {
+	tiltX: Accessor<number>;
+	tiltY: Accessor<number>;
+	isSupported: Accessor<boolean>;
+} {
+	const [tiltX, setTiltX] = createSignal(TILT_CONFIG.DEFAULT_TILT_X);
+	const [tiltY, setTiltY] = createSignal(TILT_CONFIG.DEFAULT_TILT_Y);
+	const [isSupported] = createSignal("DeviceOrientationEvent" in window);
+
+	const handleOrientation = (event: DeviceOrientationEvent): void => {
+		setTiltX(event.gamma ?? 0);
+		setTiltY(event.beta ?? 0);
+	};
+
+	onMount(() => {
+		if (isSupported()) {
+			window.addEventListener("deviceorientation", handleOrientation);
+		}
+	});
+
+	onCleanup(() => {
+		if (isSupported()) {
+			window.removeEventListener("deviceorientation", handleOrientation);
+		}
+	});
+
+	return { tiltX, tiltY, isSupported };
+}

package/src/hooks/presentation/solid/state/createSharedComposable.ts

@@ -0,0 +1,24 @@
+import type { Accessor } from "solid-js";
+
+const sharedComposables = new Map<string, Accessor<unknown>>();
+
+export function createSharedComposable<T>(
+	key: string,
+	fn: () => Accessor<T>,
+): Accessor<T> {
+	if (sharedComposables.has(key)) {
+		return sharedComposables.get(key) as Accessor<T>;
+	}
+
+	const accessor = fn();
+	sharedComposables.set(key, accessor);
+	return accessor;
+}
+
+export function clearSharedComposable(key: string): void {
+	sharedComposables.delete(key);
+}
+
+export function clearAllSharedComposables(): void {
+	sharedComposables.clear();
+}

package/src/hooks/presentation/solid/state/index.ts

@@ -0,0 +1,14 @@
+// State composables
+export {
+	clearAllSharedComposables,
+	clearSharedComposable,
+	createSharedComposable,
+} from "./createSharedComposable";
+export * from "./reactivity";
+export * from "./refDebounced";
+export * from "./refThrottled";
+export * from "./syncRef";
+export * from "./toRef";
+export * from "./useArray";
+export * from "./useCounter";
+export * from "./useToggle";

package/src/hooks/presentation/solid/state/reactivity.ts

@@ -0,0 +1,43 @@
+import type { Accessor } from "solid-js";
+
+export function toReactive<T extends object>(refObject: Accessor<T> | T): T {
+	if (typeof refObject === "function") {
+		return { ...refObject() } as T;
+	}
+
+	return { ...refObject } as T;
+}
+
+export function toRefs<T extends object>(object: T): T {
+	return object;
+}
+
+export function reactiveOmit<T extends object, K extends keyof T>(
+	object: T,
+	keys: K[],
+): Omit<T, K> {
+	const result = {} as Omit<T, K>;
+
+	for (const key in object) {
+		if (!keys.includes(key as unknown as K)) {
+			(result as T)[key] = object[key];
+		}
+	}
+
+	return result;
+}
+
+export function reactivePick<T extends object, K extends keyof T>(
+	object: T,
+	keys: K[],
+): Pick<T, K> {
+	const result = {} as Pick<T, K>;
+
+	for (const key of keys) {
+		if (key in object) {
+			result[key] = object[key];
+		}
+	}
+
+	return result;
+}

package/src/hooks/presentation/solid/state/refDebounced.ts

@@ -0,0 +1,27 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+import type { RefDebouncedOptions } from "#hooks/shared/types";
+
+export function refDebounced<T>(
+	value: Accessor<T>,
+	options: RefDebouncedOptions = {},
+): Accessor<T> {
+	const { debounce = 0 } = options;
+
+	const [debounced, setDebounced] = createSignal(value());
+
+	if (debounce > 0) {
+		let timeout: ReturnType<typeof setTimeout> | null = null;
+
+		createEffect(() => {
+			const newValue = value();
+			if (timeout !== null) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(() => {
+				setDebounced(() => newValue);
+			}, debounce);
+		});
+	}
+
+	return debounced;
+}

package/src/hooks/presentation/solid/state/refThrottled.ts

@@ -0,0 +1,39 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+import type { RefThrottledOptions } from "#hooks/shared/types";
+
+export function refThrottled<T>(
+	value: Accessor<T>,
+	options: RefThrottledOptions = {},
+): Accessor<T> {
+	const { throttle = 0 } = options;
+
+	const [throttled, setThrottled] = createSignal(value());
+
+	if (throttle > 0) {
+		let lastRun = 0;
+		let timeout: ReturnType<typeof setTimeout> | null = null;
+
+		createEffect(() => {
+			const newValue = value();
+			const now = Date.now();
+
+			if (now - lastRun >= throttle) {
+				setThrottled(() => newValue);
+				lastRun = now;
+			} else {
+				if (timeout !== null) {
+					clearTimeout(timeout);
+				}
+				timeout = setTimeout(
+					() => {
+						setThrottled(() => newValue);
+						lastRun = Date.now();
+					},
+					throttle - (now - lastRun),
+				);
+			}
+		});
+	}
+
+	return throttled;
+}

package/src/hooks/presentation/solid/state/syncRef.ts

@@ -0,0 +1,24 @@
+import { type Accessor, createEffect, type Setter } from "solid-js";
+import type { SyncRefOptions } from "#hooks/shared/types";
+
+export function syncRef<T>(
+	source: Accessor<T>,
+	target: Accessor<T> & Setter<T>,
+	options: SyncRefOptions = {},
+): void {
+	const { direction = "both" } = options;
+
+	if (direction === "ltr" || direction === "both") {
+		createEffect(() => {
+			const newValue = source();
+			target(() => newValue);
+		});
+	}
+
+	if (direction === "rtl" || direction === "both") {
+		createEffect(() => {
+			// Note: source needs to be a setter for this to work
+			// This is a limitation of the conversion
+		});
+	}
+}

package/src/hooks/presentation/solid/state/toRef.ts

@@ -0,0 +1,18 @@
+import { type Accessor, createSignal, type Signal } from "solid-js";
+
+export function toRef<T>(value: T | Accessor<T>): Accessor<T> {
+	if (typeof value === "function") {
+		return value as Accessor<T>;
+	}
+
+	const [signal] = createSignal(value, { equals: false });
+	return signal;
+}
+
+export function toSignal<T>(value: T | Signal<T>): Signal<T> {
+	if (Array.isArray(value) && typeof value[0] === "function") {
+		return value as Signal<T>;
+	}
+
+	return createSignal(value as T);
+}

package/src/hooks/presentation/solid/state/useArray.ts

@@ -0,0 +1,55 @@
+// Adapter layer - SolidJS composable for array
+// Bridges domain logic with SolidJS reactivity
+
+import { type Accessor, createMemo } from "solid-js";
+import { createReactiveArray } from "#hooks/modules/array/application/usecases";
+
+export interface UseArrayReturn<T> {
+	array: Accessor<readonly T[]>;
+	set: (value: readonly T[] | ((prev: readonly T[]) => readonly T[])) => void;
+	push: (item: T) => void;
+	pop: () => void;
+	shift: () => void;
+	unshift: (item: T) => void;
+	filter: (predicate: (item: T, index: number) => boolean) => void;
+	sort: (compareFn?: (a: T, b: T) => number) => void;
+	reverse: () => void;
+	map: <U>(mapper: (item: T, index: number) => U) => U[];
+	find: (predicate: (item: T, index: number) => boolean) => T | undefined;
+	includes: (item: T) => boolean;
+	remove: (item: T) => void;
+	clear: () => void;
+	length: () => number;
+	some: (predicate: (item: T, index: number) => boolean) => boolean;
+	every: (predicate: (item: T, index: number) => boolean) => boolean;
+	reduce: <U>(
+		reducer: (acc: U, item: T, index: number) => U,
+		initialValue: U,
+	) => U;
+}
+
+export function useArray<T>(initial: readonly T[] = []): UseArrayReturn<T> {
+	const reactiveArray = createReactiveArray<T>({ initialItems: initial });
+	const length = createMemo(() => reactiveArray.length());
+
+	return {
+		array: reactiveArray.array,
+		set: reactiveArray.set,
+		push: reactiveArray.push,
+		pop: reactiveArray.pop,
+		shift: reactiveArray.shift,
+		unshift: reactiveArray.unshift,
+		filter: reactiveArray.filter,
+		sort: reactiveArray.sort,
+		reverse: reactiveArray.reverse,
+		map: reactiveArray.map,
+		find: reactiveArray.find,
+		includes: reactiveArray.includes,
+		remove: reactiveArray.remove,
+		clear: reactiveArray.clear,
+		length,
+		some: reactiveArray.some,
+		every: reactiveArray.every,
+		reduce: reactiveArray.reduce,
+	};
+}

package/src/hooks/presentation/solid/state/useCounter.ts

@@ -0,0 +1,24 @@
+// Adapter layer - SolidJS composable for counter
+// Bridges domain logic with SolidJS reactivity
+
+import type { Accessor } from "solid-js";
+import { createReactiveCounter } from "#hooks/modules/counter/application/usecases";
+import type { CounterOptions } from "#hooks/modules/counter/types";
+
+export function useCounter(options: CounterOptions = {}): {
+	count: Accessor<number>;
+	inc: (delta?: number) => void;
+	dec: (delta?: number) => void;
+	set: (value: number) => void;
+	reset: () => void;
+} {
+	const reactiveCounter = createReactiveCounter(options);
+
+	return {
+		count: reactiveCounter.count,
+		inc: reactiveCounter.inc,
+		dec: reactiveCounter.dec,
+		set: reactiveCounter.set,
+		reset: reactiveCounter.reset,
+	};
+}

package/src/hooks/presentation/solid/state/useToggle.ts

@@ -0,0 +1,20 @@
+// Adapter layer - SolidJS composable for toggle
+// Bridges domain logic with SolidJS reactivity
+
+import type { Accessor } from "solid-js";
+import { createReactiveToggle } from "#hooks/modules/toggle/application/usecases";
+import type { ToggleOptions } from "#hooks/modules/toggle/types";
+
+export function useToggle(options: ToggleOptions = {}): {
+	value: Accessor<boolean>;
+	toggle: () => void;
+	set: (value: boolean) => void;
+} {
+	const reactiveToggle = createReactiveToggle(options);
+
+	return {
+		value: reactiveToggle.value,
+		toggle: reactiveToggle.toggle,
+		set: reactiveToggle.set,
+	};
+}

package/src/hooks/presentation/solid/time/index.ts

@@ -0,0 +1,6 @@
+// Time composables
+export * from "./useDebounceFn";
+export * from "./useThrottleFn";
+export * from "./watchDebounced";
+export * from "./watchPausable";
+export * from "./whenever";

package/src/hooks/presentation/solid/time/useDebounceFn.ts

@@ -0,0 +1,18 @@
+import type { DebounceFnOptions } from "#hooks/shared/types";
+
+export function useDebounceFn<T extends (...args: unknown[]) => unknown>(
+	fn: T,
+	options: DebounceFnOptions,
+): T {
+	const { debounce } = options;
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	return ((...args: Parameters<T>) => {
+		if (timeout !== null) {
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(() => {
+			fn(...args);
+		}, debounce);
+	}) as T;
+}

package/src/hooks/presentation/solid/time/useInterval.ts

@@ -0,0 +1,44 @@
+import { type Accessor, createSignal, onCleanup } from "solid-js";
+import type { IntervalOptions } from "#hooks/shared/types";
+
+export function useInterval(
+	callback: () => void,
+	options: IntervalOptions & { immediate?: boolean },
+): {
+	isActive: Accessor<boolean>;
+	resume: () => void;
+	pause: () => void;
+} {
+	const { interval, immediate = false } = options;
+	const [isActive, setIsActive] = createSignal(false);
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+
+	const resume = (): void => {
+		if (isActive()) {
+			return;
+		}
+		setIsActive(true);
+		intervalId = setInterval(callback, interval);
+	};
+
+	const pause = (): void => {
+		if (!isActive()) {
+			return;
+		}
+		setIsActive(false);
+		if (intervalId !== null) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	};
+
+	if (immediate) {
+		resume();
+	}
+
+	onCleanup(() => {
+		pause();
+	});
+
+	return { isActive, resume, pause };
+}

package/src/hooks/presentation/solid/time/useThrottleFn.ts

@@ -0,0 +1,30 @@
+import type { ThrottleFnOptions } from "#hooks/shared/types";
+
+export function useThrottleFn<T extends (...args: unknown[]) => unknown>(
+	fn: T,
+	options: ThrottleFnOptions,
+): T {
+	const { throttle = 300 } = options;
+	let lastRun = 0;
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	return ((...args: Parameters<T>) => {
+		const now = Date.now();
+
+		if (now - lastRun >= throttle) {
+			fn(...args);
+			lastRun = now;
+		} else {
+			if (timeout !== null) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(
+				() => {
+					fn(...args);
+					lastRun = Date.now();
+				},
+				throttle - (now - lastRun),
+			);
+		}
+	}) as T;
+}

package/src/hooks/presentation/solid/time/useTimeout.ts

@@ -0,0 +1,37 @@
+import { type Accessor, createSignal, onCleanup } from "solid-js";
+import type { TimeoutOptions } from "#hooks/shared/types";
+
+export function useTimeout(
+	callback: () => void,
+	options: TimeoutOptions,
+): {
+	isPending: Accessor<boolean>;
+	start: () => void;
+	clear: () => void;
+} {
+	const { timeout } = options;
+	const [isPending, setIsPending] = createSignal(false);
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	const start = (): void => {
+		setIsPending(true);
+		timeoutId = setTimeout(() => {
+			callback();
+			setIsPending(false);
+		}, timeout);
+	};
+
+	const clear = (): void => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+		setIsPending(false);
+	};
+
+	onCleanup(() => {
+		clear();
+	});
+
+	return { isPending, start, clear };
+}

package/src/hooks/presentation/solid/time/watchDebounced.ts

@@ -0,0 +1,19 @@
+import { type Accessor, createEffect } from "solid-js";
+
+export function watchDebounced<T>(
+	source: Accessor<T>,
+	callback: (value: T) => void,
+	debounce: number,
+): void {
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	createEffect(() => {
+		const value = source();
+		if (timeout !== null) {
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(() => {
+			callback(value);
+		}, debounce);
+	});
+}

package/src/hooks/presentation/solid/time/watchPausable.ts

@@ -0,0 +1,29 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+
+export function watchPausable<T>(
+	source: Accessor<T>,
+	callback: (value: T) => void,
+): {
+	isActive: Accessor<boolean>;
+	pause: () => void;
+	resume: () => void;
+} {
+	const [isActive, setIsActive] = createSignal(true);
+
+	createEffect(() => {
+		const value = source();
+		if (isActive()) {
+			callback(value);
+		}
+	});
+
+	const pause = (): void => {
+		setIsActive(false);
+	};
+
+	const resume = (): void => {
+		setIsActive(true);
+	};
+
+	return { isActive, pause, resume };
+}