@fougere/svelte 0.2.0-alpha.2 → 0.4.0-alpha.0

package/dist/useFormFor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFor.d.ts","sourceRoot":"","sources":["../src/useFormFor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA0B,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEpF,OAAO,EAML,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,WAAW;IAC1B,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,WAAgB;;IAoCjG;kDAC8C;kBACkC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;;;kBAnBlF,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;iBANxB,OAAO;;IA+BvB,sDAAsD;;EAGzD"}
+{"version":3,"file":"useFormFor.d.ts","sourceRoot":"","sources":["../src/useFormFor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA0B,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEpF,OAAO,EAML,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,WAAW;IAC1B,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,WAAgB;;IAqCjG;kDAC8C;kBACkC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;;;kBApBlF,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;iBANxB,OAAO;;IAgCvB,sDAAsD;;EAGzD"}

package/dist/useFormFor.js

@@ -7,7 +7,7 @@
  * holding a value, none of which is a rule.
  */
 import { writable, derived, get } from 'svelte/store';
-import { FougereError, ErrorCode } from '@fougere/core/contract';
+import { validationErrorsOf } from '@fougere/core/contract';
 import { entityKeyOf, errorsByField, formFieldsOf, payloadOf, } from '@fougere/app/client';
 import { useCommand } from './useFougereData.js';
 export function useFormFor(entity, options = {}) {
@@ -31,8 +31,9 @@ export function useFormFor(entity, options = {}) {
             return await command.execute({ params: options.params, body: payloadOf(get(values)) });
         }
         catch (err) {
-            if (err instanceof FougereError && err.code === ErrorCode.VALIDATION_FAILED && Array.isArray(err.details)) {
-                errors.set(errorsByField(err.details));
+            const refusals = validationErrorsOf(err);
+            if (refusals) {
+                errors.set(errorsByField(refusals));
                 return null;
             }
             throw err;

package/dist/useFormFor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFor.js","sourceRoot":"","sources":["../src/useFormFor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAgC,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EACL,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,GAIV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAWjD,MAAM,UAAU,UAAU,CAA8B,MAAkB,EAAE,OAAO,GAAgB,EAAE;IACnG,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,MAAM,GAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE5D,8EAA8E;IAC9E,gFAAgF;IAChF,MAAM,MAAM,GAAsC,QAAQ,CACxD,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACxG,CAAC;IACF,MAAM,MAAM,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,UAAU,CAAI,MAAqB,EAAE,OAAO,CAAC,EAAE,IAAI,QAAQ,CAAC,CAAC;IAE7E,+EAA+E;IAC/E,SAAS,KAAK;QACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAC/D,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,KAAK,UAAU,MAAM;QACnB,IAAI,CAAC,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1B,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;QACzF,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,GAAG,YAAY,YAAY,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC1G,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,OAA8C,CAAC,CAAC,CAAC;gBAC9E,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,GAAG,CAAC;QACZ,CAAC;IACH,CAAC;IAED,MAAM,KAAK,GAAsB,OAAO,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;IAEjG,OAAO;QACL,MAAM;QACN;sDAC8C;QAC9C,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAA8B;QACzG,MAAM;QACN,MAAM;QACN,MAAM;QACN,KAAK;QACL,KAAK;QACL,sDAAsD;QACtD,OAAO;KACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useFormFor.js","sourceRoot":"","sources":["../src/useFormFor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAgC,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,GAIV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAWjD,MAAM,UAAU,UAAU,CAA8B,MAAkB,EAAE,OAAO,GAAgB,EAAE;IACnG,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,MAAM,GAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE5D,8EAA8E;IAC9E,gFAAgF;IAChF,MAAM,MAAM,GAAsC,QAAQ,CACxD,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACxG,CAAC;IACF,MAAM,MAAM,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,UAAU,CAAI,MAAqB,EAAE,OAAO,CAAC,EAAE,IAAI,QAAQ,CAAC,CAAC;IAE7E,+EAA+E;IAC/E,SAAS,KAAK;QACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAC/D,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,KAAK,UAAU,MAAM;QACnB,IAAI,CAAC,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1B,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;QACzF,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;YACzC,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACpC,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,GAAG,CAAC;QACZ,CAAC;IACH,CAAC;IAED,MAAM,KAAK,GAAsB,OAAO,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;IAEjG,OAAO;QACL,MAAM;QACN;sDAC8C;QAC9C,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAA8B;QACzG,MAAM;QACN,MAAM;QACN,MAAM;QACN,KAAK;QACL,KAAK;QACL,sDAAsD;QACtD,OAAO;KACR,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fougere/svelte",
-  "version": "0.2.0-alpha.2",
+  "version": "0.4.0-alpha.0",
   "description": "Fougere's four primitives as Svelte stores — host-independent.",
   "keywords": [
     "fougere",
@@ -26,16 +26,17 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@fougere/core": "0.2.0-alpha.2",
-    "@fougere/app": "0.2.0-alpha.2"
+    "@fougere/app": "0.4.0-alpha.0",
+    "@fougere/core": "0.4.0-alpha.0"
   },
   "devDependencies": {
     "svelte": "^5.53.4",
     "vitest": "^4.1.0",
-    "@fougere/schema": "0.2.0-alpha.2"
+    "@fougere/schema": "0.4.0-alpha.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * `@fougere/svelte` — the four primitives, in Svelte, for any host that renders it.
+ *
+ * There is no `@fougere/sveltekit` beside it, and that is not an omission: SvelteKit
+ * serves Web-standard `Request`/`Response` from `+server.ts`, and it hands every
+ * `load` function its own `event`, so there is no ambient-request lookup to package.
+ * A SvelteKit app mounts `@fougere/app/web` directly, the way the TanStack and React
+ * Router demos do. Next needed 124 lines because `next/headers` exists; SvelteKit
+ * needs none because it does not.
+ *
+ * So: one package per UI framework, and a host package only when the host has
+ * something that is genuinely its own.
+ */
+export { useQuery, useCommand, type QueryState, type QueryStore, type CommandStore } from './useFougereData.js';
+export { useFormFor, type FormOptions } from './useFormFor.js';
+export { useCurrentUser, hydrateSession, refreshSession } from './useCurrentUser.js';
+export { fetcher, CALL_ENDPOINT } from '@fougere/app/client';
+
+export type {
+  CallInput,
+  EntityClass,
+  FormEntity,
+  FormField,
+  SessionView,
+} from '@fougere/app/client';

package/src/useCurrentUser.ts

@@ -0,0 +1,37 @@
+/**
+ * The session: resolved server-side, read here as a store. `refresh()` re-reads it
+ * after a client-side auth change — no page reload, no hand-rolled /api/me.
+ *
+ * SvelteKit hands a `load` function's data down through the page, so a layout that
+ * already resolved the session can `hydrate()` this store and the page arrives
+ * knowing its user. Without it, the store fetches once on first read.
+ */
+import { writable, derived, type Readable } from 'svelte/store';
+import type { SessionView } from '@fougere/app/client';
+
+const session = writable<SessionView>({ user: null });
+let fetched = false;
+
+/** Seed the store from what the server already resolved (a `load` function's data). */
+export function hydrateSession(view: SessionView): void {
+  fetched = true;
+  session.set(view);
+}
+
+export async function refreshSession(): Promise<void> {
+  const response = await fetch('/_fougere/session');
+  fetched = true;
+  session.set((await response.json()) as SessionView);
+}
+
+export function useCurrentUser<TUser = Record<string, unknown>>() {
+  // Only reached in the browser, and only when a layout did not hydrate it.
+  if (!fetched && typeof window !== 'undefined') void refreshSession();
+
+  return {
+    session: session as Readable<SessionView>,
+    user: derived(session, ($session) => ($session.user ?? null) as TUser | null),
+    loggedIn: derived(session, ($session) => $session.user != null),
+    refresh: refreshSession,
+  };
+}

package/src/useFormFor.ts

@@ -0,0 +1,79 @@
+/**
+ * The form contract — state, validation, submission, error mapping. Never a widget.
+ *
+ * `values` is a writable store, so a component binds straight into it with
+ * `bind:value={$form.values[field.name]}`. That is the Svelte equivalent of Vue's
+ * reactive object and of React's `setValue`: the same contract, three ways of
+ * holding a value, none of which is a rule.
+ */
+import { writable, derived, get, type Readable, type Writable } from 'svelte/store';
+import { validationErrorsOf } from '@fougere/core/contract';
+import {
+  entityKeyOf,
+  errorsByField,
+  formFieldsOf,
+  payloadOf,
+  type EntityClass,
+  type FormEntity,
+  type FormField,
+} from '@fougere/app/client';
+import { useCommand } from './useFougereData.js';
+
+export interface FormOptions {
+  /** Command the submit rides. Default: 'create'. */
+  op?: string;
+  /** Initial values (edit mode: the loaded entity). */
+  initial?: Record<string, unknown>;
+  /** Call params designating the target (edit mode: { id }). */
+  params?: Record<string, string>;
+}
+
+export function useFormFor<T = Record<string, unknown>>(entity: FormEntity, options: FormOptions = {}) {
+  const entityKey = entityKeyOf(entity);
+  const fields: FormField[] = formFieldsOf(entity, entityKey);
+
+  // `initial` wins over the declared default: editing a row shows the row. On a
+  // create form there is none, so the field opens on what is about to be written.
+  const values: Writable<Record<string, unknown>> = writable(
+    Object.fromEntries(fields.map((field) => [field.name, options.initial?.[field.name] ?? field.default])),
+  );
+  const errors = writable<Record<string, string>>({});
+  const command = useCommand<T>(entity as EntityClass, options.op ?? 'create');
+
+  /** Local pre-judgment — same rules as the handler, saves a lost round-trip. */
+  function judge(): boolean {
+    const result = entity.validate(payloadOf(get(values)));
+    errors.set(result.success ? {} : errorsByField(result.errors));
+    return result.success;
+  }
+
+  async function submit(): Promise<T | null> {
+    if (!judge()) return null;
+    try {
+      return await command.execute({ params: options.params, body: payloadOf(get(values)) });
+    } catch (err) {
+      const refusals = validationErrorsOf(err);
+      if (refusals) {
+        errors.set(errorsByField(refusals));
+        return null;
+      }
+      throw err;
+    }
+  }
+
+  const valid: Readable<boolean> = derived(errors, ($errors) => Object.keys($errors).length === 0);
+
+  return {
+    fields,
+    /** The same fields, keyed by name — spread `fieldsByName.email.attrs` on an input
+     *  and the page states no rule of its own. */
+    fieldsByName: Object.fromEntries(fields.map((field) => [field.name, field])) as Record<string, FormField>,
+    values,
+    errors,
+    submit,
+    judge,
+    valid,
+    /** `{ loading, error }` of the underlying command. */
+    command,
+  };
+}

package/src/useFougereData.ts

@@ -0,0 +1,120 @@
+/**
+ * The couple — useQuery (reads) and useCommand (writes), in Svelte.
+ *
+ * Stores, not runes, and that is a packaging decision with a reason: a `.svelte.ts`
+ * file needs the Svelte compiler to run over it, so a library shipping runes ships
+ * SOURCE and forces every consumer's bundler to compile it. `svelte/store` is plain
+ * TypeScript, compiles with `tsc` like every other package here, and a store still
+ * auto-subscribes with `$query` inside a component. The consumer's ergonomics are
+ * the same; the packaging is honest.
+ *
+ * The name is `useQuery`, not `createQuery`, on purpose — the four primitives are
+ * one vocabulary across Nuxt, React and Svelte, and renaming them per ecosystem
+ * would make the same gesture read as three different things.
+ */
+import { writable, get, type Readable } from 'svelte/store';
+import type { FougereError } from '@fougere/core/contract';
+import {
+  asFougereError,
+  callOf,
+  entityKeyOf,
+  fetcher,
+  invocationOf,
+  itemsOf,
+  mountedKeys,
+  onRefetch,
+  pageOf,
+  queryKeyOf,
+  revalidate,
+  sendCall,
+  trackQuery,
+  type CallInput,
+  type EntityClass,
+} from '@fougere/app/client';
+
+export interface QueryState<T> {
+  data: T | null;
+  items: T[];
+  total?: number;
+  hasMore?: boolean;
+  loading: boolean;
+  error: FougereError | null;
+}
+
+export interface QueryStore<T> extends Readable<QueryState<T>> {
+  refresh(): Promise<void>;
+  /** Unregister from the link. Call it from `onDestroy` when a component unmounts. */
+  dispose(): void;
+}
+
+export function useQuery<T = Record<string, unknown>>(
+  entity: EntityClass,
+  op: string,
+  input?: CallInput,
+  opts?: { immediate?: boolean },
+): QueryStore<T> {
+  const entityKey = entityKeyOf(entity);
+  const key = queryKeyOf(entityKey, op, input);
+  const immediate = opts?.immediate !== false;
+
+  const store = writable<QueryState<T>>({
+    data: null,
+    items: [],
+    loading: immediate,
+    error: null,
+  });
+
+  async function refresh(): Promise<void> {
+    store.update((state) => ({ ...state, loading: true, error: null }));
+    try {
+      const data = (await sendCall(fetcher, callOf(entity, op), invocationOf(input))) as T;
+      const page = pageOf(data);
+      store.set({ data, items: itemsOf<T>(data), total: page.total, hasMore: page.hasMore, loading: false, error: null });
+    } catch (err) {
+      store.update((state) => ({ ...state, loading: false, error: asFougereError(err, entityKey, op) }));
+    }
+  }
+
+  const untrack = trackQuery(entityKey, key);
+  const off = onRefetch(key, () => void refresh());
+  if (immediate) void refresh();
+
+  return {
+    subscribe: store.subscribe,
+    refresh,
+    dispose() {
+      untrack();
+      off();
+    },
+  };
+}
+
+export interface CommandStore<T> extends Readable<{ loading: boolean; error: FougereError | null }> {
+  execute(input?: CallInput): Promise<T>;
+}
+
+export function useCommand<T = unknown>(entity: EntityClass, op: string): CommandStore<T> {
+  const entityKey = entityKeyOf(entity);
+  const store = writable<{ loading: boolean; error: FougereError | null }>({ loading: false, error: null });
+
+  return {
+    subscribe: store.subscribe,
+    async execute(input?: CallInput): Promise<T> {
+      store.set({ loading: true, error: null });
+      try {
+        const result = (await sendCall(fetcher, callOf(entity, op), invocationOf(input))) as T;
+        // The link: same entity designated on both sides → revalidate its queries.
+        revalidate(mountedKeys(entityKey));
+        store.set({ loading: false, error: null });
+        return result;
+      } catch (err) {
+        const failure = asFougereError(err, entityKey, op);
+        store.set({ loading: false, error: failure });
+        throw failure;
+      }
+    },
+  };
+}
+
+/** Read a store's current value without subscribing — used by `useFormFor`. */
+export { get };