@shivaedev/form 0.13.1 → 0.15.0

package/src/adapters/persistence.ts

@@ -1,87 +1,121 @@
-import { Schema, SchemaParser } from "effect";
-import type { PersistedDraftConfig, Persistence } from "#persistence.ts";
+import { Data, Effect, type Schema, Semaphore } from "effect";
+import type { DraftOperation, PersistedDraftConfig, Persistence } from "#persistence.ts";
+import { draftCodec } from "./draftCodec.ts";
+
+class DraftStorageUnavailable extends Data.TaggedError("DraftStorageUnavailable")<{ readonly cause: unknown }> {}
+
+function operation<A>(run: () => DraftOperation<A>): Effect.Effect<A, DraftStorageUnavailable> {
+	return Effect.suspend(() => {
+		const value = run();
+		return Effect.isEffect(value) ? value : Effect.succeed(value);
+	}).pipe(Effect.catchCause((cause) => Effect.fail(new DraftStorageUnavailable({ cause }))));
+}
 
 export function persistence<TSchema extends Schema.Constraint>(schema: TSchema, config: PersistedDraftConfig): Persistence<TSchema["Encoded"]> {
-	const encoded = Schema.toEncoded(schema);
-	const StoredDraft = Schema.Struct({
-		baseline: Schema.Unknown,
-		edited: Schema.Array(Schema.String),
-		session: Schema.String,
-		updatedAt: Schema.Number,
-		values: Schema.Unknown,
-		version: Schema.Literal(1),
-	});
-	const valid = Schema.is(StoredDraft);
-	const decode = SchemaParser.decodeUnknownSync(encoded, { disableChecks: true });
-	const maxAgeMs = config.maxAgeMs ?? 7 * 24 * 60 * 60 * 1000;
-	const maxBytes = config.maxBytes ?? 256 * 1024;
-	function bytes(value: string) {
-		return new TextEncoder().encode(value).byteLength;
-	}
-	const storage = config.storage;
-	const session = config.session?.id ?? "";
+	const codec = draftCodec(schema, config);
+	const serial = Semaphore.makeUnsafe(1);
+	let revision: { value: string | undefined } = { value: undefined };
 	function active() {
 		return config.session?.active !== false;
 	}
-	function attempt<A>(run: () => A, failed?: () => void): A | undefined {
+	function run(effect: Effect.Effect<unknown, DraftStorageUnavailable>) {
+		return Effect.runCallback(serial.withPermit(effect).pipe(Effect.catchTag("DraftStorageUnavailable", () => Effect.void)));
+	}
+	function clear(expected = revision.value) {
+		if (expected !== undefined) {
+			run(operation(() => config.storage().removeItem(config.key, expected)));
+		}
+	}
+	function read(raw: string | null) {
 		try {
-			return run();
+			return { values: raw === null ? undefined : codec.read(raw) };
 		} catch {
-			failed?.();
+			if (raw !== null) {
+				clear(raw);
+			}
 			return undefined;
 		}
 	}
-	function clear() {
-		attempt(() => storage().removeItem(config.key));
-	}
-	config.session?.track(config.key, clear);
+	config.session?.track(config.key, () =>
+		run(
+			Effect.gen(function* () {
+				const storage = yield* operation(config.storage);
+				const raw = yield* operation(() => storage.getItem(config.key));
+				if (raw !== null) {
+					yield* operation(() => codec.read(raw));
+					yield* operation(() => storage.removeItem(config.key, raw));
+				}
+			}),
+		),
+	);
 	return {
-		clear: () => {
+		clear: (expected = revision.value) => {
 			if (active()) {
-				clear();
+				clear(expected);
 			}
 		},
-		read: () =>
-			attempt(() => {
-				if (!active()) {
-					return undefined;
+		observe: (receive) => {
+			let stopped = false;
+			let changes = 0;
+			function changed(raw: string | null, loaded = false) {
+				if (stopped || !active()) {
+					return;
 				}
-				const raw = storage().getItem(config.key);
-				if (raw === null) {
-					return undefined;
+				if (!loaded && revision.value === (raw ?? undefined)) {
+					return;
 				}
-				const value: unknown = bytes(raw) <= maxBytes ? JSON.parse(raw) : undefined;
-				const now = config.now();
-				if (
-					valid(value)
-					&& value.session === session
-					&& Number.isFinite(maxAgeMs)
-					&& Number.isFinite(maxBytes)
-					&& maxAgeMs > 0
-					&& maxBytes > 0
-					&& now - value.updatedAt <= maxAgeMs
-					&& value.updatedAt <= now
-				) {
-					return { baseline: decode(value.baseline), edited: value.edited, values: decode(value.values) };
+				const parsed = read(raw);
+				if (parsed && receive(parsed.values)) {
+					revision = { value: raw ?? undefined };
 				}
-				clear();
-				return undefined;
-			}, clear),
-		write: (baseline, values, edited) => {
+			}
+			let unsubscribe: (() => void) | undefined;
+			const stop = Effect.runCallback(
+				Effect.gen(function* () {
+					if (!active()) {
+						return;
+					}
+					const storage = yield* operation(config.storage);
+					unsubscribe = yield* operation(() =>
+						storage.subscribe?.(config.key, (incoming) => {
+							changes += 1;
+							changed(incoming);
+						}),
+					);
+					const before = changes;
+					const captured = revision;
+					const raw = yield* operation(() => storage.getItem(config.key));
+					if (before === changes && captured === revision) {
+						changed(raw, true);
+					}
+				}).pipe(Effect.catchTag("DraftStorageUnavailable", () => Effect.void)),
+			);
+			return () => {
+				stopped = true;
+				unsubscribe?.();
+				stop();
+			};
+		},
+		revision: () => {
+			const captured = revision;
+			return () => captured.value;
+		},
+		write: (baseline, values, edited, sameInput) => {
 			if (!active()) {
 				return;
 			}
-			attempt(() => {
-				const raw = JSON.stringify({ baseline, edited, session, updatedAt: config.now(), values, version: 1 });
-				const parsed: unknown = JSON.parse(raw);
-				if (!(maxAgeMs > 0 && Number.isFinite(maxAgeMs) && Number.isFinite(maxBytes) && bytes(raw) <= maxBytes && valid(parsed))) {
-					clear();
-					return;
+			try {
+				const expected = sameInput ? revision.value : undefined;
+				const raw = codec.write(baseline, values, edited);
+				if (sameInput) {
+					revision.value = raw;
+				} else {
+					revision = { value: raw };
 				}
-				decode(parsed.baseline);
-				decode(parsed.values);
-				storage().setItem(config.key, raw);
-			}, clear);
+				run(operation(() => (active() ? config.storage().setItem(config.key, raw, expected) : undefined)));
+			} catch {
+				clear();
+			}
 		},
 	};
 }

package/src/adapters/react.ts

@@ -1,4 +1,4 @@
-import { useAtomRef, useAtomSet, useAtomValue } from "@effect/atom-react";
+import { useAtomMount, useAtomRef, useAtomSet, useAtomValue } from "@effect/atom-react";
 import type * as AsyncResult from "effect/reactivity/AsyncResult";
 import { createContext, useCallback, useContext, useMemo } from "react";
 import type { DraftSession } from "#draftSession.ts";
@@ -23,6 +23,7 @@ export function useField<TFields extends Fields, A, E, TRuntimeError, TKey exten
 	form: Form<TFields, A, E, TRuntimeError>,
 	name: TKey,
 ): Field<TFields, TKey> {
+	useAtomMount(form.dirty);
 	const value = useAtomRef(form.field(name));
 	const error = useAtomValue(form.error(name));
 	const onChange = useCallback((next: Encoded<TFields>[TKey]) => form.change(name, next), [form, name]);
@@ -38,6 +39,7 @@ export interface Submit<A, E> {
 export function useSubmit<TFields extends Fields, A, E, TRuntimeError>(
 	form: Form<TFields, A, E, TRuntimeError>,
 ): Submit<A, E | TRuntimeError | FieldFailure | Invalid> {
+	useAtomMount(form.dirty);
 	const result = useAtomValue(form.submit);
 	const set = useAtomSet(form.submit);
 	const run = useCallback(() => set(), [set]);

package/src/adapters/useList.ts

@@ -0,0 +1,39 @@
+import { useAtomMount, useAtomRef, useAtomValue } from "@effect/atom-react";
+import * as Atom from "effect/reactivity/Atom";
+import type * as AtomRef from "effect/reactivity/AtomRef";
+import { useMemo } from "react";
+
+interface ListForm<TKey extends string, TItem> {
+	readonly blur: (name: TKey) => void;
+	readonly change: (name: TKey, value: readonly TItem[]) => void;
+	readonly dirty: Atom.Atom<boolean>;
+	readonly error: (name: TKey) => Atom.Atom<string | undefined>;
+	readonly errorAt: (path: readonly [TKey, ...PropertyKey[]]) => Atom.Atom<string | undefined>;
+	readonly field: (name: TKey) => AtomRef.ReadonlyRef<readonly TItem[]>;
+}
+
+export function useList<TKey extends string, TItem>(form: ListForm<NoInfer<TKey>, TItem>, name: TKey) {
+	useAtomMount(form.dirty);
+	const values = useAtomRef(form.field(name));
+	const error = useAtomValue(form.error(name));
+	const errors = useAtomValue(
+		useMemo(() => Atom.readable((get) => values.map((_, index) => get(form.errorAt([name, index])))), [form, name, values]),
+	);
+	function change(next: readonly TItem[]) {
+		form.change(name, next);
+	}
+	function current() {
+		return form.field(name).value;
+	}
+	return {
+		add: (value: TItem) => change([...current(), value]),
+		error,
+		items: values.map((value, index) => ({
+			error: errors[index],
+			onChange: (next: TItem) => change(current().map((item, at) => (at === index ? next : item))),
+			onRemove: () => change(current().filter((_, at) => at !== index)),
+			value,
+		})),
+		onBlur: () => form.blur(name),
+	};
+}

package/src/draft.ts

@@ -1,63 +1,66 @@
-import { Equal } from "effect";
 import * as Atom from "effect/reactivity/Atom";
 import * as AtomRef from "effect/reactivity/AtomRef";
-import type { Persistence } from "./persistence.ts";
-
-type Entries = Readonly<Record<string, unknown>>;
-
-interface Draft<TValues> {
-	readonly baseline: TValues;
-	readonly current: TValues;
-	readonly settled: Entries;
-}
-
-const none: Entries = {};
-
-function untouched({ baseline, current, settled }: Draft<Entries>, name: string): boolean {
-	return Equal.equals(current[name], baseline[name]) || (Object.hasOwn(settled, name) && Equal.equals(current[name], settled[name]));
-}
-
-function changed(held: Draft<Entries>): boolean {
-	return Object.keys({ ...held.baseline, ...held.current }).some((name) => !untouched(held, name));
-}
-
-function merged<TValues>(held: Draft<TValues>, incoming: TValues): TValues;
-function merged(held: Draft<Entries>, incoming: Entries): unknown {
-	const result: Record<string, unknown> = {};
-	for (const name of Object.keys({ ...held.current, ...incoming })) {
-		const source = untouched(held, name) ? incoming : held.current;
-		if (Object.hasOwn(source, name)) {
-			result[name] = source[name];
-		}
-	}
-	return result;
-}
-
-function matching(current: Entries, submitted: Entries): Entries {
-	return Object.fromEntries(
-		Object.keys({ ...current, ...submitted })
-			.filter((name) => Equal.equals(current[name], submitted[name]))
-			.map((name) => [name, submitted[name]]),
-	);
-}
+import { accepted, changed, changedFields, type Draft, type Entries, merged, mergeObserved, untouched } from "./draftValues.ts";
+import type { Persistence, StoredValues } from "./persistence.ts";
 
 export function draft<TValues extends Entries>(initial: TValues, persistence?: Persistence<TValues>) {
-	const restored = persistence?.read();
-	const loaded = {
-		baseline: restored?.baseline ?? initial,
-		current: restored?.values ?? initial,
-		settled: restored ? Object.fromEntries(Object.entries(restored.values).filter(([name]) => !restored.edited.includes(name))) : none,
-	};
-	const state = AtomRef.make<Draft<TValues>>({
-		baseline: initial,
-		current: restored ? merged(loaded, initial) : initial,
-		settled: none,
+	const none: Entries = {};
+	const state = AtomRef.make<Draft<TValues>>({ baseline: initial, current: initial, settled: none });
+	const local = new Set<string>();
+	let previous = initial;
+	let receiving = false;
+	let refreshing = false;
+	function withoutWriting(run: () => void) {
+		receiving = true;
+		run();
+		receiving = false;
+	}
+	function restore(restored: StoredValues<TValues> | undefined) {
+		const held = state.value;
+		const incoming = restored
+			? merged(
+					{
+						baseline: restored.baseline,
+						current: restored.values,
+						settled: Object.fromEntries(Object.entries(restored.values).filter(([name]) => !restored.edited.includes(name))),
+					},
+					held.baseline,
+				)
+			: held.baseline;
+		withoutWriting(() => state.update((value) => ({ ...value, current: mergeObserved(value.current, incoming, local) })));
+		return local.size === 0;
+	}
+	const mounted = Atom.readable((get) => {
+		if (persistence) {
+			get.addFinalizer(persistence.observe(restore));
+		}
 	});
+	function releaseCleanFields() {
+		for (const name of local) {
+			if (untouched(state.value, name)) {
+				local.delete(name);
+			}
+		}
+	}
+	function store(value: Draft<TValues>, sameInput = refreshing) {
+		const edited = Object.keys({ ...value.baseline, ...value.current }).filter((name) => !untouched(value, name));
+		persistence?.write({ ...value.baseline, ...value.settled }, value.current, edited, sameInput);
+	}
 	if (persistence) {
 		state.subscribe((value) => {
+			const before = previous;
+			previous = value.current;
+			if (receiving) {
+				return;
+			}
+			if (!refreshing) {
+				for (const name of changedFields(before, value.current)) {
+					local.add(name);
+				}
+			}
+			releaseCleanFields();
 			if (changed(value)) {
-				const edited = Object.keys({ ...value.baseline, ...value.current }).filter((name) => !untouched(value, name));
-				persistence.write({ ...value.baseline, ...value.settled }, value.current, edited);
+				store(value);
 			} else {
 				persistence.clear();
 			}
@@ -65,15 +68,20 @@ export function draft<TValues extends Entries>(initial: TValues, persistence?: P
 	}
 	return {
 		dirty: Atom.readable((get) => {
+			get(mounted);
 			get.addFinalizer(state.subscribe((value) => get.setSelf(changed(value))));
 			return changed(state.value);
 		}),
+		mounted,
 		receive: (incoming: TValues): void => {
+			refreshing = true;
 			state.update((held) => ({
 				baseline: incoming,
 				current: changed(held) ? merged(held, incoming) : incoming,
 				settled: none,
 			}));
+			refreshing = false;
+			releaseCleanFields();
 		},
 		revert: (): void => {
 			state.update((held) => ({
@@ -84,19 +92,19 @@ export function draft<TValues extends Entries>(initial: TValues, persistence?: P
 		},
 		submission: () => {
 			const { baseline, current: submitted } = state.value;
+			const revision = persistence?.revision();
 			return {
 				accept: (incoming?: TValues): void => {
-					state.update((held) => {
-						if (held.baseline !== baseline) {
-							return { ...held, settled: matching(held.current, submitted) };
+					withoutWriting(() => state.update((held) => accepted(held, baseline, submitted, incoming)));
+					releaseCleanFields();
+					if (changed(state.value)) {
+						store(state.value, true);
+					} else {
+						const expected = revision?.();
+						if (expected !== undefined) {
+							persistence?.clear(expected);
 						}
-						return {
-							...held,
-							baseline: incoming ?? submitted,
-							current: incoming === undefined ? held.current : merged({ ...held, baseline: submitted, settled: none }, incoming),
-							settled: none,
-						};
-					});
+					}
 				},
 				values: submitted,
 			};

package/src/draftValues.ts

@@ -0,0 +1,65 @@
+import { Equal } from "effect";
+
+export type Entries = Readonly<Record<string, unknown>>;
+
+export interface Draft<TValues> {
+	readonly baseline: TValues;
+	readonly current: TValues;
+	readonly settled: Entries;
+}
+
+export function untouched({ baseline, current, settled }: Draft<Entries>, name: string): boolean {
+	return Equal.equals(current[name], baseline[name]) || (Object.hasOwn(settled, name) && Equal.equals(current[name], settled[name]));
+}
+
+export function changed(held: Draft<Entries>): boolean {
+	return Object.keys({ ...held.baseline, ...held.current }).some((name) => !untouched(held, name));
+}
+
+export function merged<TValues>(held: Draft<TValues>, incoming: TValues): TValues;
+export function merged(held: Draft<Entries>, incoming: Entries): unknown {
+	const result: Record<string, unknown> = {};
+	for (const name of Object.keys({ ...held.current, ...incoming })) {
+		const source = untouched(held, name) ? incoming : held.current;
+		if (Object.hasOwn(source, name)) {
+			result[name] = source[name];
+		}
+	}
+	return result;
+}
+
+function matching(current: Entries, submitted: Entries): Entries {
+	return Object.fromEntries(
+		Object.keys({ ...current, ...submitted })
+			.filter((name) => Equal.equals(current[name], submitted[name]))
+			.map((name) => [name, submitted[name]]),
+	);
+}
+
+export function mergeObserved<TValues>(current: TValues, incoming: TValues, local: ReadonlySet<string>): TValues;
+export function mergeObserved(current: Entries, incoming: Entries, local: ReadonlySet<string>): unknown {
+	const result: Record<string, unknown> = {};
+	for (const name of Object.keys({ ...current, ...incoming })) {
+		const source = local.has(name) ? current : incoming;
+		if (Object.hasOwn(source, name)) {
+			result[name] = source[name];
+		}
+	}
+	return result;
+}
+
+export function changedFields(previous: Entries, current: Entries): readonly string[] {
+	return Object.keys({ ...previous, ...current }).filter((name) => !Equal.equals(previous[name], current[name]));
+}
+
+export function accepted<TValues extends Entries>(held: Draft<TValues>, baseline: TValues, submitted: TValues, incoming?: TValues): Draft<TValues> {
+	if (held.baseline !== baseline) {
+		return { ...held, settled: matching(held.current, submitted) };
+	}
+	return {
+		...held,
+		baseline: incoming ?? submitted,
+		current: incoming === undefined ? held.current : merged({ ...held, baseline: submitted, settled: {} }, incoming),
+		settled: {},
+	};
+}

package/src/field.ts

@@ -0,0 +1,34 @@
+import { Schema } from "effect";
+import { emptyAsNull } from "./emptyAsNull.ts";
+
+export interface NumberOptions {
+	readonly integer?: boolean;
+	readonly max?: number;
+	readonly min?: number;
+	readonly optional?: boolean;
+}
+export function number(options?: NumberOptions & { readonly optional?: false }): Schema.Codec<number, string>;
+export function number(options: NumberOptions): Schema.Codec<number | null, string>;
+export function number(options: NumberOptions = {}): Schema.Codec<number | null, string> {
+	let populated = Schema.NonEmptyString.pipe(Schema.decodeTo(Schema.FiniteFromString));
+	if (options.min !== undefined) {
+		populated = populated.check(Schema.isGreaterThanOrEqualTo(options.min));
+	}
+	if (options.max !== undefined) {
+		populated = populated.check(Schema.isLessThanOrEqualTo(options.max));
+	}
+	if (options.integer) {
+		populated = populated.check(Schema.isInt());
+	}
+	return Schema.Trim.pipe(Schema.decodeTo(options.optional ? emptyAsNull(populated) : populated));
+}
+
+export interface ListOptions {
+	readonly max: number;
+	readonly min?: number;
+}
+
+export function list<TItem extends Schema.Constraint>(item: TItem, options: ListOptions) {
+	const values = Schema.Array(item).check(Schema.isMaxLength(options.max));
+	return options.min === undefined ? values : values.check(Schema.isMinLength(options.min));
+}

package/src/form.ts

@@ -49,7 +49,11 @@ export function form<TFields extends Fields, TValue, TError, TServices = never,
 		return made;
 	}
 
-	const valuesAtom = fromRef(values);
+	const fromValues = fromRef(values);
+	const valuesAtom = Atom.readable((get) => {
+		get(editing.mounted);
+		return get(fromValues);
+	});
 
 	const decoded = runtime.atom((get) =>
 		decode(get(valuesAtom)).pipe(
@@ -77,13 +81,15 @@ export function form<TFields extends Fields, TValue, TError, TServices = never,
 		fail: (path, message) => Effect.fail(new FieldFailure(typeof path === "string" ? { message, path } : { message, path: path[0], segments: path })),
 	};
 
-	const validate = runtime.fn<void>()(() => {
+	const validate = runtime.fn<void>()((_, get) => {
+		get.mount(editing.mounted);
 		status.attempt();
 		return snapshot(values.value);
 	});
 
-	const submit = runtime.fn<void>()(() =>
-		Effect.gen(function* () {
+	const submit = runtime.fn<void>()((_, get) => {
+		get.mount(editing.mounted);
+		return Effect.gen(function* () {
 			status.attempt();
 			const submission = editing.submission();
 			const submitted = submission.values;
@@ -92,8 +98,8 @@ export function form<TFields extends Fields, TValue, TError, TServices = never,
 				Effect.tapError(noted(submitted)),
 				Effect.tap((saved) => Effect.sync(() => submission.accept(config.savedValues?.(saved)))),
 			);
-		}),
-	);
+		});
+	});
 
 	return {
 		blur: status.touch,

package/src/persistence.ts

@@ -1,10 +1,13 @@
-import { Context } from "effect";
+import { Context, type Effect } from "effect";
 import type { DraftSession } from "./draftSession.ts";
 
+export type DraftOperation<A> = A | Effect.Effect<A, unknown>;
+
 export interface DraftStorage {
-	readonly getItem: (key: string) => string | null;
-	readonly removeItem: (key: string) => void;
-	readonly setItem: (key: string, value: string) => void;
+	readonly getItem: (key: string) => DraftOperation<string | null>;
+	readonly removeItem: (key: string, expected: string) => DraftOperation<void>;
+	readonly setItem: (key: string, value: string, expected?: string) => DraftOperation<void>;
+	readonly subscribe?: (key: string, listener: (value: string | null) => void) => () => void;
 }
 
 export class DraftStorageProvider extends Context.Service<DraftStorageProvider, () => DraftStorage>()("@shivaedev/form/DraftStorageProvider") {}
@@ -18,8 +21,15 @@ export interface PersistedDraftConfig {
 	readonly storage: () => DraftStorage;
 }
 
+export interface StoredValues<TValues> {
+	readonly baseline: TValues;
+	readonly edited: readonly string[];
+	readonly values: TValues;
+}
+
 export interface Persistence<TValues> {
-	readonly clear: () => void;
-	readonly read: () => { readonly baseline: TValues; readonly edited: readonly string[]; readonly values: TValues } | undefined;
-	readonly write: (baseline: TValues, values: TValues, edited: readonly string[]) => void;
+	readonly clear: (revision?: string) => void;
+	readonly observe: (receive: (values: StoredValues<TValues> | undefined) => boolean) => () => void;
+	readonly revision: () => () => string | undefined;
+	readonly write: (baseline: TValues, values: TValues, edited: readonly string[], sameInput?: boolean) => void;
 }