@void/solid 0.0.0

package/src/runtime/use-form.ts

@@ -0,0 +1,244 @@
+import { createSignal, createMemo, useContext } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
+import {
+  VoidActionError,
+  isAbortError,
+  isEqualFormValue,
+  submitAction,
+  type VisitOptions,
+} from 'void/pages-client';
+import type { ActionUrl, ResolveActionBody, ActionFormOptions } from 'void/routes';
+import { RouterContext, ErrorsContext } from './context.ts';
+
+type FormSubmitOptions = Omit<VisitOptions, 'method' | 'data'> & {
+  data?: Record<string, unknown>;
+};
+type UntypedForm = {
+  data: Record<string, unknown>;
+  setData(field: string, value: unknown): void;
+  errors: Record<string, string>;
+  error: VoidActionError | null;
+  pending: boolean;
+  hasChanges: boolean;
+  wasSuccessful: boolean;
+  recentlySuccessful: boolean;
+  post(opts?: FormSubmitOptions): Promise<void>;
+  put(opts?: FormSubmitOptions): Promise<void>;
+  patch(opts?: FormSubmitOptions): Promise<void>;
+  delete(opts?: FormSubmitOptions): Promise<void>;
+  reset(...fields: Array<string>): void;
+  clearErrors(...fields: Array<string>): void;
+  clearError(): void;
+};
+
+function getValidationErrors(error: VoidActionError): Record<string, string> | null {
+  const body = error.body;
+  if (
+    body &&
+    typeof body === 'object' &&
+    'errors' in body &&
+    body.errors &&
+    typeof body.errors === 'object' &&
+    !Array.isArray(body.errors)
+  ) {
+    return body.errors as Record<string, string>;
+  }
+  return null;
+}
+
+// Typed overload — full inference from PageActionMap (requires codegen)
+export function useForm<U extends ActionUrl & string>(
+  url: U,
+  defaults: ResolveActionBody<U>,
+  options?: ActionFormOptions<U>,
+): {
+  data: ResolveActionBody<U>;
+  setData: <K extends keyof ResolveActionBody<U> & string>(
+    field: K,
+    value: ResolveActionBody<U>[K],
+  ) => void;
+  errors: Partial<Record<keyof ResolveActionBody<U> & string, string>>;
+  error: VoidActionError | null;
+  pending: boolean;
+  hasChanges: boolean;
+  wasSuccessful: boolean;
+  recentlySuccessful: boolean;
+  post(opts?: FormSubmitOptions): Promise<void>;
+  put(opts?: FormSubmitOptions): Promise<void>;
+  patch(opts?: FormSubmitOptions): Promise<void>;
+  delete(opts?: FormSubmitOptions): Promise<void>;
+  reset(...fields: Array<keyof ResolveActionBody<U> & string>): void;
+  clearErrors(...fields: Array<keyof ResolveActionBody<U> & string>): void;
+  clearError(): void;
+};
+
+export function useForm(
+  url: string,
+  defaults: Record<string, unknown>,
+  options?: { params?: Record<string, string> },
+): UntypedForm {
+  let resolvedUrl = url;
+
+  // Strip ?action query before param resolution, then re-append
+  let actionQuery = '';
+  const qIdx = resolvedUrl.indexOf('?');
+  if (qIdx !== -1) {
+    actionQuery = resolvedUrl.slice(qIdx);
+    resolvedUrl = resolvedUrl.slice(0, qIdx);
+  }
+
+  if (options?.params) {
+    for (const [key, value] of Object.entries(options.params)) {
+      resolvedUrl = resolvedUrl.replace(`:${key}`, encodeURIComponent(value));
+    }
+  }
+
+  resolvedUrl = resolvedUrl + actionQuery;
+
+  const router = useContext(RouterContext);
+  // ErrorsContext provides the errors signal accessor — a reactive function
+  // that returns the current global errors object. This allows useForm to
+  // derive errors from the global state, surviving component re-creation
+  // during Solid's reactive tree rebuild after router.visit().
+  const globalErrors: Record<string, string> | (() => Record<string, string>) | null =
+    useContext(ErrorsContext);
+  const [data, setDataStore] = createStore<Record<string, unknown>>({ ...defaults });
+  const [localErrors, setLocalErrors] = createSignal<Record<string, string>>({});
+  const errors = createMemo(() => {
+    const local = localErrors();
+    if (Object.keys(local).length > 0) {
+      return local;
+    }
+    // globalErrors is a signal accessor (function) on the client, or a plain
+    // object on the server. Handle both cases.
+    if (!globalErrors) {
+      return {};
+    }
+    if (typeof globalErrors === 'function') {
+      return globalErrors();
+    }
+    return globalErrors as unknown as Record<string, string>;
+  });
+  const [pending, setPending] = createSignal(false);
+  const [error, setError] = createSignal<VoidActionError | null>(null);
+  const [wasSuccessful, setWasSuccessful] = createSignal(false);
+  const [recentlySuccessful, setRecentlySuccessful] = createSignal(false);
+
+  let defaults_ = { ...defaults };
+  let successTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const hasChanges = createMemo(() => {
+    return Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key]));
+  });
+
+  function setData(field: string, value: unknown) {
+    setDataStore(field, value);
+  }
+
+  function reset(...fields: Array<string>) {
+    if (fields.length === 0) {
+      setDataStore(reconcile({ ...defaults_ }));
+    } else {
+      for (const field of fields) {
+        setDataStore(field, defaults_[field]);
+      }
+    }
+  }
+
+  function clearErrors(...fields: Array<string>) {
+    if (fields.length === 0) {
+      setLocalErrors({});
+    } else {
+      setLocalErrors((prev) => {
+        const next = { ...prev };
+        for (const field of fields) {
+          delete next[field];
+        }
+        return next;
+      });
+    }
+  }
+
+  function clearError() {
+    setError(null);
+  }
+
+  async function submit(method: string, opts: FormSubmitOptions = {}) {
+    setPending(true);
+    setWasSuccessful(false);
+    setRecentlySuccessful(false);
+    if (successTimeout) {
+      clearTimeout(successTimeout);
+    }
+    setLocalErrors({});
+    clearError();
+
+    try {
+      if (!router) {
+        throw new Error('useForm(): requires the Void Router.');
+      }
+
+      const result = await submitAction(router, resolvedUrl, {
+        method,
+        data: { ...data },
+        ...opts,
+      });
+
+      if (!result.ok) {
+        const validationErrors = getValidationErrors(result.error);
+        if (validationErrors) {
+          setLocalErrors(validationErrors);
+        } else {
+          setError(result.error);
+        }
+        return;
+      }
+
+      setWasSuccessful(true);
+      setRecentlySuccessful(true);
+      defaults_ = { ...data };
+      successTimeout = setTimeout(() => {
+        setRecentlySuccessful(false);
+      }, 2000);
+    } catch (submitError) {
+      if (isAbortError(submitError)) {
+        return;
+      }
+      throw submitError;
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return {
+    get data() {
+      return data;
+    },
+    setData,
+    get errors() {
+      return errors();
+    },
+    get error() {
+      return error();
+    },
+    get pending() {
+      return pending();
+    },
+    get hasChanges() {
+      return hasChanges();
+    },
+    get wasSuccessful() {
+      return wasSuccessful();
+    },
+    get recentlySuccessful() {
+      return recentlySuccessful();
+    },
+    reset,
+    clearErrors,
+    clearError,
+    post: (opts?: FormSubmitOptions) => submit('POST', opts),
+    put: (opts?: FormSubmitOptions) => submit('PUT', opts),
+    patch: (opts?: FormSubmitOptions) => submit('PATCH', opts),
+    delete: (opts?: FormSubmitOptions) => submit('DELETE', opts),
+  };
+}

package/src/runtime/use-island-form.ts

@@ -0,0 +1,183 @@
+import { createSignal, createMemo } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
+import { VoidActionError, categorizeActionError, isEqualFormValue } from 'void/pages-client';
+
+function getValidationErrors(body: unknown): Record<string, string> | null {
+  if (
+    body &&
+    typeof body === 'object' &&
+    'errors' in body &&
+    body.errors &&
+    typeof body.errors === 'object' &&
+    !Array.isArray(body.errors)
+  ) {
+    return body.errors as Record<string, string>;
+  }
+  return null;
+}
+
+async function readActionErrorBody(response: Response): Promise<unknown> {
+  const contentType = response.headers.get('content-type') || '';
+  try {
+    if (contentType.includes('application/json')) {
+      return await response.json();
+    }
+    const text = await response.text();
+    return text || null;
+  } catch {
+    return null;
+  }
+}
+
+export interface IslandFormReturn<T extends Record<string, unknown>> {
+  data: T;
+  setData: <K extends keyof T & string>(field: K, value: T[K]) => void;
+  errors: Record<string, string>;
+  error: VoidActionError | null;
+  pending: boolean;
+  hasChanges: boolean;
+  wasSuccessful: boolean;
+  recentlySuccessful: boolean;
+  reset: (...fields: Array<keyof T & string>) => void;
+  clearErrors: (...fields: Array<string>) => void;
+  clearError: () => void;
+  post: (url: string) => Promise<void>;
+  put: (url: string) => Promise<void>;
+  patch: (url: string) => Promise<void>;
+  delete: (url: string) => Promise<void>;
+}
+
+/**
+ * Form composable for island pages. Uses fetch + page reload instead of the
+ * Void Router (which is not available in island mode).
+ */
+export function useIslandForm<T extends Record<string, unknown>>(defaults: T): IslandFormReturn<T> {
+  const [data, setDataStore] = createStore<Record<string, unknown>>({ ...defaults });
+  const [errors, setErrors] = createSignal<Record<string, string>>({});
+  const [error, setError] = createSignal<VoidActionError | null>(null);
+  const [pending, setPending] = createSignal(false);
+  const [wasSuccessful, setWasSuccessful] = createSignal(false);
+  const [recentlySuccessful, setRecentlySuccessful] = createSignal(false);
+
+  let defaults_ = { ...defaults };
+  let successTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const hasChanges = createMemo(() => {
+    return Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key]));
+  });
+
+  function setData(field: string, value: unknown) {
+    setDataStore(field, value);
+  }
+
+  function reset(...fields: Array<string>) {
+    if (fields.length === 0) {
+      setDataStore(reconcile({ ...defaults_ }));
+    } else {
+      for (const field of fields) {
+        setDataStore(field, defaults_[field]);
+      }
+    }
+  }
+
+  function clearErrors(...fields: Array<string>) {
+    if (fields.length === 0) {
+      setErrors({});
+    } else {
+      setErrors((prev) => {
+        const next = { ...prev };
+        for (const f of fields) {
+          delete next[f];
+        }
+        return next;
+      });
+    }
+  }
+
+  function clearError() {
+    setError(null);
+  }
+
+  async function submit(url: string, method: string) {
+    setPending(true);
+    setWasSuccessful(false);
+    setRecentlySuccessful(false);
+    if (successTimeout) {
+      clearTimeout(successTimeout);
+    }
+    setErrors({});
+    clearError();
+
+    try {
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      if (response.redirected) {
+        window.location.href = response.url;
+        return;
+      }
+
+      if (response.ok) {
+        setWasSuccessful(true);
+        setRecentlySuccessful(true);
+        defaults_ = { ...data } as typeof defaults_;
+        successTimeout = setTimeout(() => setRecentlySuccessful(false), 2000);
+        window.location.reload();
+      } else if (!response.ok) {
+        const body = await readActionErrorBody(response);
+        const actionError = new VoidActionError({
+          body,
+          status: response.status,
+          statusText: response.statusText,
+          url,
+        });
+        const validationErrors = response.status === 422 ? getValidationErrors(body) : null;
+        if (validationErrors) {
+          setErrors(validationErrors);
+          return;
+        }
+        if (categorizeActionError(response.status) === 'boundary') {
+          throw actionError;
+        }
+        setError(actionError);
+      }
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return {
+    get data() {
+      return data as T;
+    },
+    setData: setData as IslandFormReturn<T>['setData'],
+    get errors() {
+      return errors();
+    },
+    get error() {
+      return error();
+    },
+    get pending() {
+      return pending();
+    },
+    get hasChanges() {
+      return hasChanges();
+    },
+    get wasSuccessful() {
+      return wasSuccessful();
+    },
+    get recentlySuccessful() {
+      return recentlySuccessful();
+    },
+    reset,
+    clearErrors,
+    clearError,
+    post: (url: string) => submit(url, 'POST'),
+    put: (url: string) => submit(url, 'PUT'),
+    patch: (url: string) => submit(url, 'PATCH'),
+    delete: (url: string) => submit(url, 'DELETE'),
+  };
+}

package/src/runtime/use-navigation.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'solid-js';
+import { idleNavigationState, type NavigationState } from 'void/pages-client';
+import { NavigationContext } from './context.ts';
+
+export type { NavigationState } from 'void/pages-client';
+
+export function useNavigation(): NavigationState {
+  const navigation = useContext(NavigationContext);
+  if (!navigation) {
+    return idleNavigationState();
+  }
+  return {
+    get state() {
+      return navigation().state;
+    },
+    get location() {
+      return navigation().location;
+    },
+    get method() {
+      return navigation().method;
+    },
+  };
+}

package/src/runtime/use-router.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'solid-js';
+import { ssrProxy } from 'void/pages-client';
+import type { VoidRouter } from 'void/pages-client';
+import { RouterContext } from './context.ts';
+
+export type { VoidRouter } from 'void/pages-client';
+
+export function useRouter(): VoidRouter {
+  return useContext(RouterContext) ?? ssrProxy;
+}

package/src/runtime/use-shared.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'solid-js';
+import type { CloudContextVariables } from 'void';
+import { SharedContext } from './context.ts';
+
+export function useShared<T = CloudContextVariables['shared']>(): T {
+  const shared = useContext(SharedContext);
+  if (shared === null) {
+    throw new Error('useShared(): must be used inside a pages component.');
+  }
+  return shared as T;
+}