@octanejs/inertia 0.0.1

package/src/useHttp.ts

@@ -0,0 +1,457 @@
+import {
+	CancelToken,
+	Errors,
+	ErrorValue,
+	FormDataConvertible,
+	FormDataErrors,
+	FormDataKeys,
+	FormDataType,
+	FormDataValues,
+	hasFiles,
+	http,
+	HttpCancelledError,
+	HttpProgressEvent,
+	HttpResponseError,
+	mergeDataIntoQueryString,
+	Method,
+	objectToFormData,
+	Progress,
+	UrlMethodPair,
+	UseFormArguments,
+	UseFormTransformCallback,
+	UseFormUtils,
+	UseFormWithPrecognitionArguments,
+	UseHttpSubmitArguments,
+	UseHttpSubmitOptions,
+} from '@inertiajs/core';
+import { cloneDeep } from 'es-toolkit';
+import {
+	NamedInputEvent,
+	toSimpleValidationErrors,
+	ValidationConfig,
+	Validator,
+} from 'laravel-precognition';
+import { useCallback, useMemo, useRef, useState } from 'octane';
+import useFormState, { SetDataAction } from './useFormState';
+import useRemember from './useRemember';
+
+const slots = Object.fromEntries(
+	[
+		'abortController',
+		'excludeKeys',
+		'pendingOptimistic',
+		'response',
+		'submit',
+		'cancel',
+		'submitWithArgs',
+		'submitMethods',
+	].map((name) => [name, Symbol(`Inertia.useHttp.${name}`)]),
+) as Record<string, symbol>;
+
+type PrecognitionValidationConfig<TKeys> = ValidationConfig & {
+	only?: TKeys[] | Iterable<TKeys> | ArrayLike<TKeys>;
+};
+
+export interface UseHttpProps<TForm extends object, TResponse = unknown> {
+	data: TForm;
+	isDirty: boolean;
+	errors: FormDataErrors<TForm>;
+	hasErrors: boolean;
+	processing: boolean;
+	progress: Progress | null;
+	wasSuccessful: boolean;
+	recentlySuccessful: boolean;
+	response: TResponse | null;
+	setData: SetDataAction<TForm>;
+	transform: (callback: UseFormTransformCallback<TForm>) => void;
+	setDefaults: {
+		(): void;
+		<T extends FormDataKeys<TForm>>(field: T, value: FormDataValues<TForm, T>): void;
+		(fields: Partial<TForm>): void;
+	};
+	reset: <K extends FormDataKeys<TForm>>(...fields: K[]) => void;
+	clearErrors: <K extends FormDataKeys<TForm>>(...fields: K[]) => void;
+	resetAndClearErrors: <K extends FormDataKeys<TForm>>(...fields: K[]) => void;
+	setError: {
+		<K extends FormDataKeys<TForm>>(field: K, value: ErrorValue): void;
+		(errors: FormDataErrors<TForm>): void;
+	};
+	submit: (...args: UseHttpSubmitArguments<TResponse, TForm>) => Promise<TResponse>;
+	get: (url: string, options?: UseHttpSubmitOptions<TResponse, TForm>) => Promise<TResponse>;
+	post: (url: string, options?: UseHttpSubmitOptions<TResponse, TForm>) => Promise<TResponse>;
+	put: (url: string, options?: UseHttpSubmitOptions<TResponse, TForm>) => Promise<TResponse>;
+	patch: (url: string, options?: UseHttpSubmitOptions<TResponse, TForm>) => Promise<TResponse>;
+	delete: (url: string, options?: UseHttpSubmitOptions<TResponse, TForm>) => Promise<TResponse>;
+	cancel: () => void;
+	dontRemember: <K extends FormDataKeys<TForm>>(...fields: K[]) => UseHttpProps<TForm, TResponse>;
+	optimistic: (callback: (currentData: TForm) => Partial<TForm>) => UseHttpProps<TForm, TResponse>;
+	withAllErrors: () => UseHttpProps<TForm, TResponse>;
+	withPrecognition: (
+		...args: UseFormWithPrecognitionArguments
+	) => UseHttpPrecognitiveProps<TForm, TResponse>;
+}
+
+export interface UseHttpValidationProps<TForm extends object, TResponse = unknown> {
+	invalid: <K extends FormDataKeys<TForm>>(field: K) => boolean;
+	setValidationTimeout: (duration: number) => UseHttpPrecognitiveProps<TForm, TResponse>;
+	touch: <K extends FormDataKeys<TForm>>(
+		field: K | NamedInputEvent | Array<K>,
+		...fields: K[]
+	) => UseHttpPrecognitiveProps<TForm, TResponse>;
+	touched: <K extends FormDataKeys<TForm>>(field?: K) => boolean;
+	valid: <K extends FormDataKeys<TForm>>(field: K) => boolean;
+	validate: <K extends FormDataKeys<TForm>>(
+		field?: K | NamedInputEvent | PrecognitionValidationConfig<K>,
+		config?: PrecognitionValidationConfig<K>,
+	) => UseHttpPrecognitiveProps<TForm, TResponse>;
+	validateFiles: () => UseHttpPrecognitiveProps<TForm, TResponse>;
+	validating: boolean;
+	validator: () => Validator;
+	withAllErrors: () => UseHttpPrecognitiveProps<TForm, TResponse>;
+	withoutFileValidation: () => UseHttpPrecognitiveProps<TForm, TResponse>;
+	setErrors: (errors: FormDataErrors<TForm>) => UseHttpPrecognitiveProps<TForm, TResponse>;
+	forgetError: <K extends FormDataKeys<TForm> | NamedInputEvent>(
+		field: K,
+	) => UseHttpPrecognitiveProps<TForm, TResponse>;
+}
+
+export type UseHttp<TForm extends object, TResponse = unknown> = UseHttpProps<TForm, TResponse>;
+export type UseHttpPrecognitiveProps<TForm extends object, TResponse = unknown> = UseHttpProps<
+	TForm,
+	TResponse
+> &
+	UseHttpValidationProps<TForm, TResponse>;
+
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(
+	method: Method | (() => Method),
+	url: string | (() => string),
+	data: TForm | (() => TForm),
+): UseHttpPrecognitiveProps<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(
+	urlMethodPair: UrlMethodPair | (() => UrlMethodPair),
+	data: TForm | (() => TForm),
+): UseHttpPrecognitiveProps<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(
+	rememberKey: string,
+	data: TForm | (() => TForm),
+): UseHttp<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(
+	data: TForm | (() => TForm),
+): UseHttp<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(): UseHttp<
+	TForm,
+	TResponse
+>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(
+	...args: UseFormArguments<TForm>
+): UseHttp<TForm, TResponse> | UseHttpPrecognitiveProps<TForm, TResponse> {
+	const publicArgs =
+		typeof args[args.length - 1] === 'symbol'
+			? (args.slice(0, -1) as UseFormArguments<TForm>)
+			: args;
+	const { rememberKey, data, precognitionEndpoint } = UseFormUtils.parseUseFormArguments<TForm>(
+		...publicArgs,
+	);
+
+	// Resolve initial data for remember functionality hooks
+	const initialDefaults = typeof data === 'function' ? cloneDeep(data()) : cloneDeep(data);
+
+	const abortController = useRef<AbortController | null>(null, slots.abortController);
+	const excludeKeysRef = useRef<FormDataKeys<TForm>[]>([], slots.excludeKeys);
+	const pendingOptimisticRef = useRef<((currentData: TForm) => Partial<TForm>) | null>(
+		null,
+		slots.pendingOptimistic,
+	);
+	const [response, setResponse] = useState<TResponse | null>(null, slots.response);
+
+	// For remember functionality, we need custom state hooks
+	const useDataState = rememberKey
+		? () => useRemember<TForm>(initialDefaults, `${rememberKey}:data`, excludeKeysRef)
+		: undefined;
+
+	const useErrorsState = rememberKey
+		? () => useRemember<FormDataErrors<TForm>>({} as FormDataErrors<TForm>, `${rememberKey}:errors`)
+		: undefined;
+
+	const {
+		form: baseForm,
+		setDefaultsState,
+		transformRef,
+		dataRef,
+		precognitionEndpointRef,
+		isMounted,
+		setProcessing,
+		setProgress,
+		markAsSuccessful,
+		clearErrors,
+		setError,
+		defaultsCalledInOnSuccessRef,
+		resetBeforeSubmit,
+		finishProcessing,
+		withAllErrors,
+	} = useFormState<TForm>({
+		data,
+		precognitionEndpoint,
+		useDataState,
+		useErrorsState,
+	});
+
+	const submit = useCallback(
+		async (
+			method: Method,
+			url: string,
+			options: UseHttpSubmitOptions<TResponse, TForm>,
+		): Promise<TResponse> => {
+			const onBefore = options.onBefore?.();
+
+			if (onBefore === false) {
+				return Promise.reject(new Error('Request cancelled by onBefore'));
+			}
+
+			defaultsCalledInOnSuccessRef.current = false;
+
+			if (isMounted.current) {
+				resetBeforeSubmit();
+			}
+
+			abortController.current = new AbortController();
+
+			const cancelToken: CancelToken = {
+				cancel: () => abortController.current?.abort(),
+			};
+
+			options.onCancelToken?.(cancelToken);
+
+			options.optimistic = options.optimistic ?? pendingOptimisticRef.current ?? undefined;
+			pendingOptimisticRef.current = null;
+
+			let snapshot: TForm | undefined;
+
+			if (options.optimistic) {
+				snapshot = cloneDeep(dataRef.current);
+				const optimisticData = options.optimistic(cloneDeep(snapshot));
+
+				baseForm.setData((current: TForm) => ({ ...current, ...optimisticData }));
+			}
+
+			if (isMounted.current) {
+				setProcessing(true);
+			}
+
+			options.onStart?.();
+
+			const transformedData = transformRef.current(dataRef.current);
+			const useFormData = hasFiles(transformedData as Record<string, FormDataConvertible>);
+
+			let requestUrl = url;
+			let requestData: FormData | string | undefined;
+			let contentType: string | undefined;
+
+			if (method === 'get') {
+				const [urlWithParams] = mergeDataIntoQueryString(
+					method,
+					url,
+					transformedData as Record<string, FormDataConvertible>,
+				);
+				requestUrl = urlWithParams;
+			} else {
+				if (useFormData) {
+					requestData = objectToFormData(transformedData as Record<string, FormDataConvertible>);
+				} else {
+					requestData = JSON.stringify(transformedData);
+					contentType = 'application/json';
+				}
+			}
+
+			try {
+				const httpResponse = await http.getClient().request({
+					method,
+					url: requestUrl,
+					data: requestData,
+					headers: {
+						Accept: 'application/json',
+						...(contentType ? { 'Content-Type': contentType } : {}),
+						...options.headers,
+					},
+					signal: abortController.current.signal,
+					onUploadProgress: (event: HttpProgressEvent) => {
+						if (isMounted.current) {
+							setProgress(event);
+						}
+
+						options.onProgress?.(event);
+					},
+				});
+
+				const responseData = (
+					httpResponse.data ? JSON.parse(httpResponse.data) : null
+				) as TResponse;
+
+				if (httpResponse.status >= 200 && httpResponse.status < 300) {
+					if (isMounted.current) {
+						markAsSuccessful();
+						setResponse(responseData);
+					}
+
+					options.onSuccess?.(responseData, httpResponse);
+
+					if (isMounted.current && !defaultsCalledInOnSuccessRef.current) {
+						baseForm.setData((data: TForm) => {
+							setDefaultsState(cloneDeep(data));
+							return data;
+						});
+					}
+
+					return responseData;
+				}
+
+				throw new HttpResponseError(
+					`Request failed with status ${httpResponse.status}`,
+					httpResponse,
+				);
+			} catch (error: unknown) {
+				if (snapshot && isMounted.current) {
+					baseForm.setData(snapshot);
+				}
+
+				if (error instanceof HttpResponseError) {
+					if (error.response.status === 422) {
+						const responseData = JSON.parse(error.response.data);
+						const validationErrors = responseData.errors || {};
+						const processedErrors = (
+							withAllErrors.enabled()
+								? validationErrors
+								: toSimpleValidationErrors(validationErrors)
+						) as FormDataErrors<TForm>;
+
+						if (isMounted.current) {
+							clearErrors();
+							setError(processedErrors);
+						}
+
+						options.onError?.(processedErrors as Errors);
+
+						return undefined as TResponse;
+					}
+
+					options.onHttpException?.(error.response);
+
+					throw error;
+				}
+
+				if (
+					error instanceof HttpCancelledError ||
+					(error instanceof Error && error.name === 'AbortError')
+				) {
+					options.onCancel?.();
+					throw new HttpCancelledError('Request was cancelled', url);
+				}
+
+				options.onNetworkError?.(error instanceof Error ? error : new Error('Unknown error'));
+
+				throw error;
+			} finally {
+				if (isMounted.current) {
+					finishProcessing();
+				}
+
+				abortController.current = null;
+				options.onFinish?.();
+			}
+		},
+		[clearErrors, setError],
+		slots.submit,
+	);
+
+	const cancel = useCallback(
+		() => {
+			if (abortController.current) {
+				abortController.current.abort();
+			}
+		},
+		[],
+		slots.cancel,
+	);
+
+	const submitWithArgs = useCallback(
+		(...args: UseHttpSubmitArguments<TResponse, TForm>): Promise<TResponse> => {
+			const parsed = UseFormUtils.parseSubmitArguments(
+				args as any,
+				precognitionEndpointRef.current,
+			);
+
+			return submit(
+				parsed.method,
+				parsed.url,
+				parsed.options as UseHttpSubmitOptions<TResponse, TForm>,
+			);
+		},
+		[submit],
+		slots.submitWithArgs,
+	);
+
+	const submitMethods = useMemo(
+		() => ({
+			get: async (
+				url: string,
+				options: UseHttpSubmitOptions<TResponse, TForm> = {},
+			): Promise<TResponse> => submit('get', url, options),
+			post: async (
+				url: string,
+				options: UseHttpSubmitOptions<TResponse, TForm> = {},
+			): Promise<TResponse> => submit('post', url, options),
+			put: async (
+				url: string,
+				options: UseHttpSubmitOptions<TResponse, TForm> = {},
+			): Promise<TResponse> => submit('put', url, options),
+			patch: async (
+				url: string,
+				options: UseHttpSubmitOptions<TResponse, TForm> = {},
+			): Promise<TResponse> => submit('patch', url, options),
+			delete: async (
+				url: string,
+				options: UseHttpSubmitOptions<TResponse, TForm> = {},
+			): Promise<TResponse> => submit('delete', url, options),
+		}),
+		[submit],
+		slots.submitMethods,
+	);
+
+	// Add useHttp-specific methods to the form object
+	Object.assign(baseForm, {
+		response,
+		submit: submitWithArgs,
+		...submitMethods,
+		cancel,
+		dontRemember: <K extends FormDataKeys<TForm>>(...keys: K[]) => {
+			excludeKeysRef.current = keys;
+			return form;
+		},
+
+		optimistic: (callback: (currentData: TForm) => Partial<TForm>) => {
+			pendingOptimisticRef.current = callback;
+			return form;
+		},
+
+		withAllErrors: () => {
+			withAllErrors.enable();
+			return form;
+		},
+	});
+
+	// Cast to the full form type (baseForm now has HTTP methods)
+	const form = baseForm as unknown as UseHttpProps<TForm, TResponse>;
+
+	// Wrap withPrecognition to return the correct type with HTTP methods
+	const originalWithPrecognition = baseForm.withPrecognition;
+	form.withPrecognition = (
+		...args: UseFormWithPrecognitionArguments
+	): UseHttpPrecognitiveProps<TForm, TResponse> => {
+		originalWithPrecognition(...args);
+		return form as UseHttpPrecognitiveProps<TForm, TResponse>;
+	};
+
+	return precognitionEndpointRef.current
+		? (form as UseHttpPrecognitiveProps<TForm, TResponse>)
+		: form;
+}

package/src/usePage.ts

@@ -0,0 +1,15 @@
+import { Page, PageProps, SharedPageProps } from '@inertiajs/core';
+import { useContext } from 'octane';
+import PageContext from './PageContext';
+
+export default function usePage<TPageProps extends PageProps = PageProps>(): Page<
+	TPageProps & SharedPageProps
+> {
+	const page = useContext(PageContext);
+
+	if (!page) {
+		throw new Error('usePage must be used within the Inertia component');
+	}
+
+	return page as Page<TPageProps & SharedPageProps>;
+}

package/src/usePoll.ts

@@ -0,0 +1,49 @@
+import { PollOptions, ReloadOptions, router } from '@inertiajs/core';
+import { useEffect, useRef } from 'octane';
+
+const latestSlot = Symbol('Inertia.usePoll.latest');
+const pollSlot = Symbol('Inertia.usePoll.poll');
+const effectSlot = Symbol('Inertia.usePoll.effect');
+
+export default function usePoll(
+	interval: number,
+	requestOptions: ReloadOptions | (() => ReloadOptions) | symbol = {},
+	options: PollOptions | symbol = {
+		keepAlive: false,
+		autoStart: true,
+	},
+) {
+	requestOptions = typeof requestOptions === 'symbol' ? {} : requestOptions;
+	options =
+		typeof options === 'symbol'
+			? {
+					keepAlive: false,
+					autoStart: true,
+				}
+			: options;
+	const latest = useRef(requestOptions, latestSlot);
+	latest.current = requestOptions;
+
+	const pollRef = useRef<ReturnType<typeof router.poll> | null>(null, pollSlot);
+
+	useEffect(
+		() => {
+			pollRef.current = router.poll(
+				interval,
+				typeof requestOptions === 'function'
+					? () => (latest.current as () => ReloadOptions)()
+					: requestOptions,
+				{ ...options, autoStart: options.autoStart ?? true },
+			);
+
+			return () => pollRef.current?.destroy();
+		},
+		[],
+		effectSlot,
+	);
+
+	return {
+		stop: () => pollRef.current?.stop(),
+		start: () => pollRef.current?.start(),
+	};
+}

package/src/usePrefetch.ts

@@ -0,0 +1,59 @@
+import { router, VisitOptions } from '@inertiajs/core';
+import { useEffect, useState } from 'octane';
+
+const lastUpdatedAtSlot = Symbol('Inertia.usePrefetch.lastUpdatedAt');
+const isPrefetchingSlot = Symbol('Inertia.usePrefetch.isPrefetching');
+const isPrefetchedSlot = Symbol('Inertia.usePrefetch.isPrefetched');
+const effectSlot = Symbol('Inertia.usePrefetch.effect');
+
+export default function usePrefetch(options: VisitOptions | symbol = {}): {
+	lastUpdatedAt: number | null;
+	isPrefetching: boolean;
+	isPrefetched: boolean;
+	flush: () => void;
+} {
+	options = typeof options === 'symbol' ? {} : options;
+	const cached =
+		typeof window === 'undefined' ? null : router.getCached(window.location.pathname, options);
+	const inFlight =
+		typeof window === 'undefined' ? null : router.getPrefetching(window.location.pathname, options);
+
+	const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(
+		cached?.staleTimestamp || null,
+		lastUpdatedAtSlot,
+	);
+	const [isPrefetching, setIsPrefetching] = useState(inFlight !== null, isPrefetchingSlot);
+	const [isPrefetched, setIsPrefetched] = useState(cached !== null, isPrefetchedSlot);
+
+	useEffect(
+		() => {
+			const onPrefetchingListener = router.on('prefetching', (e) => {
+				if (e.detail.visit.url.pathname === window.location.pathname) {
+					setIsPrefetching(true);
+				}
+			});
+
+			const onPrefetchedListener = router.on('prefetched', (e) => {
+				if (e.detail.visit.url.pathname === window.location.pathname) {
+					setIsPrefetching(false);
+					setIsPrefetched(true);
+					setLastUpdatedAt(e.detail.fetchedAt);
+				}
+			});
+
+			return () => {
+				onPrefetchedListener();
+				onPrefetchingListener();
+			};
+		},
+		[],
+		effectSlot,
+	);
+
+	return {
+		lastUpdatedAt,
+		isPrefetching,
+		isPrefetched,
+		flush: () => router.flush(window.location.pathname, options),
+	};
+}

package/src/useRemember.ts

@@ -0,0 +1,58 @@
+import { router } from '@inertiajs/core';
+import { useEffect, useState } from 'octane';
+
+type SetStateAction<State> = State | ((previousState: State) => State);
+type Dispatch<Action> = (action: Action) => void;
+type MutableRefObject<Value> = { current: Value };
+
+const stateSlotCache = new Map<string, symbol>();
+const effectSlotCache = new Map<string, symbol>();
+
+function slotForRememberKey(
+	cache: Map<string, symbol>,
+	label: string,
+	key: string | undefined,
+): symbol {
+	const cacheKey = key ?? '';
+	let slot = cache.get(cacheKey);
+	if (!slot) {
+		slot = Symbol(`Inertia.useRemember.${label}:${cacheKey}`);
+		cache.set(cacheKey, slot);
+	}
+	return slot;
+}
+
+export default function useRemember<State>(
+	initialState: State,
+	key?: string | symbol,
+	excludeKeysRef?: MutableRefObject<string[]> | symbol,
+): [State, Dispatch<SetStateAction<State>>] {
+	key = typeof key === 'symbol' ? undefined : key;
+	excludeKeysRef = typeof excludeKeysRef === 'symbol' ? undefined : excludeKeysRef;
+	const stateSlot = slotForRememberKey(stateSlotCache, 'state', key);
+	const effectSlot = slotForRememberKey(effectSlotCache, 'effect', key);
+	const [state, setState] = useState(function () {
+		const restored = router.restore(key) as State;
+
+		return restored !== undefined ? restored : initialState;
+	}, stateSlot);
+
+	useEffect(
+		function () {
+			const keys = excludeKeysRef?.current;
+			if (keys && keys.length > 0 && typeof state === 'object' && state !== null) {
+				const filtered = { ...state } as Record<string, unknown>;
+				keys.forEach(function (k) {
+					delete filtered[k];
+				});
+				router.remember(filtered, key);
+			} else {
+				router.remember(state, key);
+			}
+		},
+		[state, key],
+		effectSlot,
+	);
+
+	return [state, setState];
+}