@shivaedev/react 0.0.0 → 0.18.1

package/src/internal/useSubmissionCallbacks.ts

@@ -0,0 +1,57 @@
+import { Effect, type Schema } from "effect";
+import type * as Atom from "effect/reactivity/Atom";
+import { useInsertionEffect, useMemo, useRef } from "react";
+import type { Decoded, Fields } from "@shivaedev/form/shape.ts";
+import { type AtomServices, fieldRejectionOf, type RejectField } from "#fieldRejection.ts";
+import type { NoticeFeedback } from "#notices.ts";
+import { useNoticePublisher } from "./useNoticePublisher.ts";
+
+export function useSubmissionCallbacks<TFields extends Fields, A, E, R, TRuntime, TRuntimeError>(
+	fields: Schema.Struct<TFields>,
+	save: (values: Decoded<TFields>) => Effect.Effect<A, E, AtomServices<R>>,
+	rejectField: RejectField<TFields, E> | undefined,
+	runtime: Atom.AtomRuntime<TRuntime, TRuntimeError>,
+	notices: NoticeFeedback<Decoded<TFields>, A, E, TRuntime> | undefined,
+) {
+	const publish = useNoticePublisher(runtime);
+	const latestRef = useRef({ notices, rejectField, save });
+	useInsertionEffect(() => {
+		latestRef.current = { notices, rejectField, save };
+	}, [notices, rejectField, save]);
+	const callbacks = useMemo(() => {
+		const automatic = fieldRejectionOf(fields);
+		function rejected(error: E, values: Decoded<TFields>) {
+			return Effect.sync(() => {
+				if (callbacks.active) {
+					publish(latestRef.current.notices?.onFailure?.(error, values));
+				}
+			}).pipe(Effect.andThen(Effect.fail(error)));
+		}
+		function completed(value: A, values: Decoded<TFields>) {
+			return Effect.sync(() => {
+				if (callbacks.active) {
+					publish(latestRef.current.notices?.onSuccess?.(value, values));
+				}
+				return value;
+			});
+		}
+		return {
+			active: false,
+			rejectField: (error: E) => (latestRef.current.rejectField ?? automatic)(error),
+			save: (values: Decoded<TFields>): Effect.Effect<A, E, AtomServices<R>> =>
+				Effect.suspend(() => latestRef.current.save(values)).pipe(
+					Effect.matchEffect({
+						onFailure: (error) => rejected(error, values),
+						onSuccess: (value) => completed(value, values),
+					}),
+				),
+		};
+	}, [fields, publish]);
+	useInsertionEffect(() => {
+		callbacks.active = true;
+		return () => {
+			callbacks.active = false;
+		};
+	}, [callbacks]);
+	return callbacks;
+}

package/src/loadQuery.ts

@@ -0,0 +1,34 @@
+import type { LoaderFnContext } from "@tanstack/react-router";
+import { Effect } from "effect";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import { keepLoaderQuery } from "#internal/queryHandoff.ts";
+import { recheckUnauthorized } from "#internal/sessionRecheck.ts";
+
+export async function loadQuery<A, E>(
+	registry: AtomRegistry.AtomRegistry,
+	atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>,
+	{ abortController }: Pick<LoaderFnContext, "abortController">,
+): Promise<A> {
+	const { signal } = abortController;
+	const handoff = keepLoaderQuery(registry, atom, signal);
+	try {
+		const result = await Effect.runPromise(Effect.result(AtomRegistry.getResult(registry, atom, { suspendOnWaiting: true })), { signal });
+		if (result._tag === "Failure") {
+			await recheckUnauthorized(registry, result.failure);
+			throw result.failure;
+		}
+		return result.success;
+	} catch (error) {
+		handoff.release();
+		if (signal.aborted) {
+			const canceled = new Error("Query loading canceled", { cause: error });
+			canceled.name = "AbortError";
+			throw canceled;
+		}
+		throw error;
+	} finally {
+		handoff.complete();
+	}
+}

package/src/notices.ts

@@ -0,0 +1,65 @@
+import { RegistryContext, useAtomValue } from "@effect/atom-react";
+import type { Duration, Effect } from "effect";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import { createElement, Fragment, type ReactNode, useContext, useLayoutEffect, useMemo } from "react";
+import type { AtomServices } from "#fieldRejection.ts";
+import { NoticeContext } from "#internal/NoticeContext.ts";
+import type { NoticeEntry } from "#internal/noticeEntry.ts";
+import { noticeStore } from "#internal/noticeStore.ts";
+
+export interface NoticeDescriptor<R = never> {
+	readonly action?:
+		| {
+				readonly label: ReactNode;
+				readonly run: Effect.Effect<unknown, unknown, AtomServices<R>>;
+		  }
+		| undefined;
+	readonly expiresIn?: Duration.Input | undefined;
+	readonly message: ReactNode;
+}
+export interface Notice {
+	readonly action?:
+		| {
+				readonly label: ReactNode;
+				readonly pending: boolean;
+				readonly result: AsyncResult.AsyncResult<unknown, unknown>;
+				readonly run: () => void;
+		  }
+		| undefined;
+	readonly dismiss: () => void;
+	readonly id: number;
+	readonly message: ReactNode;
+}
+export interface NoticeFeedback<TInput, A, E, R = never> {
+	readonly onFailure?: (error: E, input: TInput) => NoticeDescriptor<R> | undefined;
+	readonly onSuccess?: (value: A, input: TInput) => NoticeDescriptor<R> | undefined;
+}
+function Entry({ entry, render }: { readonly entry: NoticeEntry; readonly render: (notice: Notice) => ReactNode }) {
+	const result = useAtomValue(entry.status);
+	return render({
+		action: entry.action === undefined ? undefined : { ...entry.action, pending: result.waiting, result },
+		dismiss: entry.dismiss,
+		id: entry.id,
+		message: entry.message,
+	});
+}
+function Entries({ store, render }: { readonly store: ReturnType<typeof noticeStore>; readonly render: (notice: Notice) => ReactNode }) {
+	const entries = useAtomValue(store.entries);
+	return entries.map((entry) => createElement(Entry, { entry, key: entry.id, render }));
+}
+export function NoticeHost({ children, render }: { readonly children: ReactNode; readonly render: (notice: Notice) => ReactNode }): ReactNode {
+	const registry = useContext(RegistryContext);
+	const store = useMemo(() => noticeStore(registry), [registry]);
+	useLayoutEffect(() => {
+		store.active = true;
+		return () => {
+			store.active = false;
+			queueMicrotask(() => {
+				if (!store.active) {
+					store.close();
+				}
+			});
+		};
+	}, [store]);
+	return createElement(NoticeContext.Provider, { value: store }, createElement(Fragment, null, children, createElement(Entries, { render, store })));
+}

package/src/queryRoute.ts

@@ -0,0 +1,30 @@
+import { type LoaderFnContext, notFound } from "@tanstack/react-router";
+import { Predicate } from "effect";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import { loadQuery } from "./loadQuery.ts";
+
+export function queryRoute<TParams extends object, TSearch extends object, A, E>(
+	query: (route: { readonly params: TParams; readonly search: TSearch }) => Atom.Atom<AsyncResult.AsyncResult<A, E>>,
+) {
+	return {
+		loader: async (
+			context: Pick<LoaderFnContext, "abortController"> & {
+				readonly context: { readonly registry: AtomRegistry.AtomRegistry };
+				readonly deps: TSearch;
+				readonly params: TParams;
+			},
+		): Promise<A> => {
+			try {
+				return await loadQuery(context.context.registry, query({ params: context.params, search: context.deps }), context);
+			} catch (error) {
+				if (Predicate.isTagged(error, "NotFound")) {
+					throw notFound();
+				}
+				throw error;
+			}
+		},
+		loaderDeps: ({ search }: { readonly search: TSearch }) => search,
+	};
+}

package/src/resumeSignal.ts

@@ -0,0 +1,13 @@
+import {
+	type ResumeOptions as ContractOptions,
+	type ResumeSource as ContractSource,
+	type ResumeWindow as ContractWindow,
+	resumeSignal as contractResumeSignal,
+} from "@shivaedev/contract/resume.ts";
+
+export type ResumeSource = ContractSource;
+export type ResumeWindow = ContractWindow;
+export type ResumeOptions = ContractOptions;
+export function resumeSignal(options: ResumeOptions) {
+	return contractResumeSignal(options);
+}

package/src/submission.ts

@@ -0,0 +1,39 @@
+import type { Effect, Schema } from "effect";
+import type * as Atom from "effect/reactivity/Atom";
+import { form } from "@shivaedev/form/form.ts";
+import type { PersistedDraftConfig } from "@shivaedev/form/persistence.ts";
+import type { Decoded, Encoded, FieldFailure, Fields, Form, Services } from "@shivaedev/form/shape.ts";
+import { actionTrace } from "#actionTrace.ts";
+import { type AtomServices, type RejectField, rejecting } from "./fieldRejection.ts";
+
+export interface SubmissionConfig<TFields extends Fields, A, E, R, TRuntimeError> {
+	readonly fields: Schema.Struct<TFields>;
+	readonly initialValues: Encoded<TFields>;
+	readonly persistedDraft?: PersistedDraftConfig | undefined;
+	readonly rejectField: RejectField<TFields, E> | undefined;
+	readonly runtime: Atom.AtomRuntime<Services<TFields, R>, TRuntimeError>;
+	readonly save: (values: Decoded<TFields>) => Effect.Effect<A, E, AtomServices<R>>;
+}
+
+export interface Submission<TFields extends Fields, A, E, TRuntimeError> {
+	readonly form: Form<TFields, A, E | FieldFailure, TRuntimeError>;
+	readonly submitted: () => Encoded<TFields> | undefined;
+}
+
+export function submission<TFields extends Fields, A, E, R, TRuntimeError>(
+	config: SubmissionConfig<TFields, A, E, R, TRuntimeError>,
+): Submission<TFields, A, E, TRuntimeError> {
+	const { fields, initialValues, runtime } = config;
+	const save = rejecting(fields, config.save, config.rejectField);
+	let submitted: Encoded<TFields> | undefined;
+	const currentForm: Form<TFields, A, E | FieldFailure, TRuntimeError> = form(fields, {
+		initialValues,
+		onSubmit: (values, submitter, snapshot) => {
+			submitted = snapshot;
+			return actionTrace(save(values, submitter), "ui.submit");
+		},
+		persistedDraft: config.persistedDraft,
+		runtime,
+	});
+	return { form: currentForm, submitted: () => submitted };
+}