@void/svelte 0.0.0

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

@@ -0,0 +1,205 @@
+import { getContext } from 'svelte';
+import {
+  VoidActionError,
+  isAbortError,
+  isEqualFormValue,
+  submitAction,
+  type VisitOptions,
+  type VoidRouter,
+} from 'void/pages-client';
+import type { ActionUrl, ResolveActionBody, ActionFormOptions } from 'void/routes';
+
+type FormSubmitOptions = Omit<VisitOptions, 'method' | 'data'> & {
+  data?: Record<string, unknown>;
+};
+type UntypedForm = {
+  readonly data: Record<string, unknown>;
+  readonly errors: Record<string, string>;
+  readonly error: VoidActionError | null;
+  readonly pending: boolean;
+  readonly hasChanges: boolean;
+  readonly wasSuccessful: boolean;
+  readonly 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>,
+): {
+  readonly data: ResolveActionBody<U>;
+  readonly errors: Partial<Record<keyof ResolveActionBody<U> & string, string>>;
+  readonly error: VoidActionError | null;
+  readonly pending: boolean;
+  readonly hasChanges: boolean;
+  readonly wasSuccessful: boolean;
+  readonly 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 = getContext<VoidRouter>('__void_router');
+
+  let data = $state({ ...defaults });
+  let errors: Record<string, string> = $state({});
+  let error: VoidActionError | null = $state(null);
+  let pending = $state(false);
+  let wasSuccessful = $state(false);
+  let recentlySuccessful = $state(false);
+
+  let defaults_ = { ...defaults };
+  let successTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const hasChanges = $derived(
+    Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key])),
+  );
+
+  function reset(...fields: Array<string>) {
+    if (fields.length === 0) {
+      data = { ...defaults_ };
+    } else {
+      for (const field of fields) {
+        data[field] = defaults_[field];
+      }
+    }
+  }
+
+  function clearErrors(...fields: Array<string>) {
+    if (fields.length === 0) {
+      errors = {};
+    } else {
+      for (const field of fields) {
+        delete errors[field];
+      }
+    }
+  }
+
+  function clearError() {
+    error = null;
+  }
+
+  async function submit(method: string, opts: FormSubmitOptions = {}) {
+    pending = true;
+    wasSuccessful = false;
+    recentlySuccessful = false;
+    if (successTimeout) {
+      clearTimeout(successTimeout);
+    }
+    clearErrors();
+    clearError();
+
+    try {
+      const result = await submitAction(router, resolvedUrl, {
+        method,
+        data: { ...data },
+        ...opts,
+      });
+
+      if (!result.ok) {
+        const validationErrors = getValidationErrors(result.error);
+        if (validationErrors) {
+          Object.assign(errors, validationErrors);
+        } else {
+          error = result.error;
+        }
+        return;
+      }
+
+      wasSuccessful = true;
+      recentlySuccessful = true;
+      defaults_ = { ...data };
+      successTimeout = setTimeout(() => {
+        recentlySuccessful = false;
+      }, 2000);
+    } catch (submitError) {
+      if (isAbortError(submitError)) {
+        return;
+      }
+      throw submitError;
+    } finally {
+      pending = false;
+    }
+  }
+
+  return {
+    get data() {
+      return data;
+    },
+    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.svelte.ts

@@ -0,0 +1,175 @@
+import { VoidActionError, categorizeActionError, isEqualFormValue } from 'void/pages-client';
+
+type UntypedIslandForm = {
+  readonly data: Record<string, unknown>;
+  readonly errors: Record<string, string>;
+  readonly error: VoidActionError | null;
+  readonly pending: boolean;
+  readonly hasChanges: boolean;
+  readonly wasSuccessful: boolean;
+  readonly recentlySuccessful: boolean;
+  submit(url: string, method: string): Promise<void>;
+  post(url: string): Promise<void>;
+  put(url: string): Promise<void>;
+  patch(url: string): Promise<void>;
+  delete(url: string): Promise<void>;
+  reset(...fields: Array<string>): void;
+  clearErrors(...fields: Array<string>): void;
+  clearError(): void;
+};
+
+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;
+  }
+}
+
+/**
+ * Form composable for island pages. Uses fetch + page reload instead of the
+ * Void Router (which is not available in island mode).
+ */
+export function useIslandForm(defaults: Record<string, unknown>): UntypedIslandForm {
+  let data: Record<string, unknown> = $state({ ...defaults });
+  let errors: Record<string, string> = $state({});
+  let error: VoidActionError | null = $state(null);
+  let pending = $state(false);
+  let wasSuccessful = $state(false);
+  let recentlySuccessful = $state(false);
+
+  let defaults_ = { ...defaults };
+  let successTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const hasChanges = $derived(
+    Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key])),
+  );
+
+  function reset(...fields: Array<string>) {
+    if (fields.length === 0) {
+      data = { ...defaults_ };
+    } else {
+      for (const field of fields) {
+        data[field] = defaults_[field];
+      }
+    }
+  }
+
+  function clearErrors(...fields: Array<string>) {
+    if (fields.length === 0) {
+      errors = {};
+    } else {
+      for (const field of fields) {
+        delete errors[field];
+      }
+    }
+  }
+
+  function clearError() {
+    error = null;
+  }
+
+  async function submit(url: string, method: string) {
+    pending = true;
+    wasSuccessful = false;
+    recentlySuccessful = false;
+    if (successTimeout) {
+      clearTimeout(successTimeout);
+    }
+    clearErrors();
+    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) {
+        wasSuccessful = true;
+        recentlySuccessful = true;
+        defaults_ = { ...data };
+        successTimeout = setTimeout(() => {
+          recentlySuccessful = 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) {
+          Object.assign(errors, validationErrors);
+          return;
+        }
+        if (categorizeActionError(response.status) === 'boundary') {
+          throw actionError;
+        }
+        error = actionError;
+      }
+    } finally {
+      pending = false;
+    }
+  }
+
+  return {
+    get data() {
+      return data;
+    },
+    get errors() {
+      return errors;
+    },
+    get error() {
+      return error;
+    },
+    get pending() {
+      return pending;
+    },
+    get hasChanges() {
+      return hasChanges;
+    },
+    get wasSuccessful() {
+      return wasSuccessful;
+    },
+    get recentlySuccessful() {
+      return recentlySuccessful;
+    },
+    submit,
+    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,22 @@
+import { getContext } from 'svelte';
+import { idleNavigationState, type NavigationState } from 'void/pages-client';
+
+export type { NavigationState } from 'void/pages-client';
+
+export function useNavigation(): NavigationState {
+  const ctx = getContext<{ value: NavigationState }>('__void_navigation');
+  if (!ctx) {
+    return idleNavigationState();
+  }
+  return {
+    get state() {
+      return ctx.value.state;
+    },
+    get location() {
+      return ctx.value.location;
+    },
+    get method() {
+      return ctx.value.method;
+    },
+  };
+}

package/src/runtime/use-router.ts

@@ -0,0 +1,9 @@
+import { getContext } from 'svelte';
+import { ssrProxy } from 'void/pages-client';
+import type { VoidRouter } from 'void/pages-client';
+
+export type { VoidRouter } from 'void/pages-client';
+
+export function useRouter(): VoidRouter {
+  return getContext<VoidRouter>('__void_router') ?? ssrProxy;
+}

package/src/runtime/use-shared.ts

@@ -0,0 +1,10 @@
+import { getContext } from 'svelte';
+import type { CloudContextVariables } from 'void';
+
+export function useShared<T = CloudContextVariables['shared']>(): T {
+  const ctx = getContext<{ value: T }>('__void_shared');
+  if (!ctx) {
+    throw new Error('useShared(): must be used inside a Void page.');
+  }
+  return ctx.value;
+}