@void/svelte 0.22.0 → 0.23.0

package/README.md

@@ -37,7 +37,7 @@ Main runtime APIs live at `@void/svelte`:
 - `useParams()`
 - `useNavigation()`
 - `useShared()`
-- `useForm()`
+- `Form` and `useForm()`
 - `useIslandForm()`
 - `action()`
 
@@ -109,6 +109,12 @@ Export `ssr = false` from a page's `.server.ts` file to skip server-rendered
 component HTML for that route while still running its loader on the first
 request.
 
+## Form
+
+Use `Form` with `useForm()` to display action and validation errors automatically. It preserves controlled input after a failed submission and announces errors accessibly. Structured usage-limit responses display the application's message and an optional retry time. Submissions are blocked while pending and before that deadline; inputs remain editable and requests are never retried automatically.
+
+`method` selects `post` (the default), `put`, `patch`, or `delete`. Use `renderError` to customize action-error presentation (a snippet in Svelte). Native forms remain available when you manage error presentation yourself.
+
 ## Tests
 
 - `test/integration/svelte-pages-client.test.ts`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/svelte",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/voidzero-dev/void.git",
@@ -37,12 +37,12 @@
     "svelte": "^5.57.1",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
     "vite-plus": "1.0.0",
-    "void": "0.22.0"
+    "void": "0.23.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "vite": "^8.0.0",
-    "void": "0.22.0"
+    "void": "0.23.0"
   },
   "scripts": {
     "build": "vp pack",

package/src/runtime/Form.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { formErrorMessage, formRetryMessage, formSubmissionBlocked, scheduleFormRetry, type FormModel, type FormMethod, type VoidActionError } from 'void/pages-client';
+  let { form, method='post', renderError, children, ...rest }: {
+    form: FormModel;
+    method?: FormMethod;
+    renderError?: Snippet<[VoidActionError]>;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+  let now=$state(Date.now());
+  const message=$derived(formErrorMessage(form));
+  const retry=$derived(formRetryMessage(form.error));
+  $effect(()=>scheduleFormRetry(form.error,()=>{now=Date.now();}));
+</script>
+
+<form {...rest} aria-busy={form.pending} onsubmit={async event=>{
+  event.preventDefault();
+  if (!formSubmissionBlocked(form,now)) await form[method]();
+}}>
+  {#if message}
+    <div role="alert" data-void-form-error>
+      {#if form.error && renderError}{@render renderError(form.error)}{:else}{message}{/if}
+      {#if retry}<p>{retry}</p>{/if}
+    </div>
+  {/if}
+  {@render children?.()}
+</form>

package/src/runtime/action.ts

@@ -1,50 +1,6 @@
-import { submitAction, type ActionResult, type VoidRouter } from 'void/pages-client';
-import type { ActionUrl, ResolveActionBody, ResolveActionParams } from 'void/routes';
+import { createActionClient, type ActionClient } from 'void/pages-client';
 
-type ActionMethod = 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+const client = createActionClient();
 
-type HasParams<U extends string> = [ResolveActionParams<U>] extends [never] ? false : true;
-
-type ActionOptions<U extends string> = {
-  data?: ResolveActionBody<U>;
-  method?: ActionMethod;
-} & (HasParams<U> extends true ? { params: ResolveActionParams<U> } : { params?: never });
-
-let _router: VoidRouter | null = null;
-
-/** Called during app initialization to store the router instance */
-export function setActionRouter(router: VoidRouter): void {
-  _router = router;
-}
-
-/** Programmatic one-shot page action call with Inertia page update */
-export async function action<U extends ActionUrl & string>(
-  url: U,
-  ...args: HasParams<U> extends true ? [options: ActionOptions<U>] : [options?: ActionOptions<U>]
-): Promise<ActionResult> {
-  if (!_router) {
-    throw new Error('action(): called before router initialization.');
-  }
-
-  const options = args[0] as ActionOptions<U> | undefined;
-  const data = options?.data;
-  const method = options?.method || 'POST';
-
-  let resolvedUrl: string = url;
-  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 as string));
-    }
-  }
-
-  resolvedUrl = resolvedUrl + actionQuery;
-  return submitAction(_router, resolvedUrl, { method, data });
-}
+export const action: ActionClient['action'] = client.action;
+export const setActionRouter: ActionClient['setActionRouter'] = client.setActionRouter;

package/src/runtime/index.ts

@@ -1,3 +1,4 @@
+export { default as Form } from './Form.svelte';
 export { default as Link } from './Link.svelte';
 export { useRouter } from './use-router.ts';
 export { useParams } from './use-params.ts';