@lyeve-labs/client-svelte 0.1.4 → 0.1.5

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lyeve-labs/client-svelte",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Svelte 5 reactive stores for the LyEve Core API - thin wrapper around @lyeve-labs/client using $state runes",
   "license": "MIT",
   "author": "LyEve <info@lyeve.com>",
   "type": "module",
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@11.25.0",
   "engines": {
     "node": ">=20"
   },
@@ -29,8 +29,11 @@
   },
   "files": [
     "dist",
+    "src",
     "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "!dist/**/*.spec.*",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*"
   ],
   "sideEffects": false,
   "publishConfig": {

package/src/ambient.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Ambient type declarations for Svelte 5 runes used in `.ts` source files.
+ *
+ * When the Svelte compiler processes these files (via the esbuild plugin at
+ * build time, or the consumer's SvelteKit pipeline from the `svelte` export
+ * condition), `$state`, `$derived`, and `$effect` are transformed into
+ * compiler-managed reactive primitives. These declarations allow TypeScript
+ * to type-check the source without the Svelte preprocessor.
+ *
+ * @see https://svelte.dev/docs/svelte/runes
+ */
+
+/**
+ * Declares a reactive state variable.
+ * @template T - The type of the state value.
+ * @param initial - The initial value.
+ */
+declare function $state<T>(initial: T): T;
+
+/**
+ * Declares a derived value that updates when its dependencies change.
+ * @template T - The type of the derived value.
+ * @param expression - The expression to derive.
+ */
+declare function $derived<T>(expression: T): T;
+
+/**
+ * Runs a side-effect function when its dependencies change.
+ * @param fn - The effect function, optionally returning a cleanup function.
+ */
+declare function $effect(fn: () => void | (() => void)): void;

package/src/index.svelte.ts

@@ -0,0 +1,12 @@
+// SvelteKit entry point (svelte export condition).
+// Svelte's compiler handles $state runes from this file.
+export {
+  createCmsClient,
+  createAsyncStore,
+  createMutation,
+  createAuthStore,
+  type SvelteCmsConfig,
+  type AsyncStore,
+  type AuthState,
+  type AuthStore,
+} from "./runes.svelte.js";

package/src/index.ts

@@ -0,0 +1,13 @@
+// Re-exports for non-Svelte consumers (bundled by tsup).
+// Implementation lives in runes.svelte.ts so Svelte's compiler handles
+// $state runes natively via the "svelte" export condition.
+export {
+  createCmsClient,
+  createAsyncStore,
+  createMutation,
+  createAuthStore,
+  type SvelteCmsConfig,
+  type AsyncStore,
+  type AuthState,
+  type AuthStore,
+} from "./runes.svelte.js";

package/src/runes.svelte.ts

@@ -0,0 +1,209 @@
+import { createClient, type HttpClient } from "@lyeve-labs/client";
+
+// Client factory
+
+export interface SvelteCmsConfig {
+  /** Base URL prepended to every request path. */
+  baseUrl?: string;
+  /**
+   * Callback returning headers added to every request.
+   * Called on every request so auth tokens can be refreshed without
+   * recreating the client.
+   */
+  getHeaders?: () => Record<string, string>;
+}
+
+/**
+ * Creates an HttpClient pre-configured with base URL and dynamic request
+ * headers. No Provider needed - Svelte callers just pass the client around.
+ *
+ * @example
+ * ```ts
+ * const client = createCmsClient({
+ *   baseUrl: 'https://cms.example.com',
+ *   getHeaders: () => ({ Authorization: `Bearer ${token}` }),
+ * });
+ * ```
+ */
+export function createCmsClient(config: SvelteCmsConfig): HttpClient {
+  const base = config.baseUrl ?? "";
+  return createClient((url, init) => {
+    const fullUrl = typeof url === "string" ? `${base}${url}` : url;
+    return fetch(fullUrl, {
+      ...init,
+      headers: { ...init?.headers, ...config.getHeaders?.() },
+    });
+  });
+}
+
+// Generic async store
+
+export interface AsyncStore<T> {
+  readonly data: T | null;
+  readonly error: Error | null;
+  readonly loading: boolean;
+  refetch: () => void;
+}
+
+/**
+ * Reactive async data store using the $state rune.
+ * Fires the fetcher immediately and exposes reactive loading/data/error
+ * getters that Svelte components can read directly in markup.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const schemas = createAsyncStore((c) => getSchemas(c), client);
+ * </script>
+ * {#if schemas.loading}...{/if}
+ * ```
+ */
+export function createAsyncStore<T>(
+  fetcher: (client: HttpClient) => Promise<T>,
+  client: HttpClient,
+): AsyncStore<T> {
+  let data = $state<T | null>(null);
+  let error = $state<Error | null>(null);
+  let loading = $state(true);
+
+  async function fetch() {
+    loading = true;
+    try {
+      data = await fetcher(client);
+      error = null;
+    } catch (e) {
+      error = e as Error;
+    } finally {
+      loading = false;
+    }
+  }
+
+  fetch();
+
+  return {
+    get data() {
+      return data;
+    },
+    get error() {
+      return error;
+    },
+    get loading() {
+      return loading;
+    },
+    refetch: fetch,
+  };
+}
+
+/**
+ * Reactive mutation primitive using the $state rune.
+ * Returns data/error/loading state and a run function that triggers the
+ * mutation. Unlike createAsyncStore, the mutation does not fire immediately.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const createArticle = createMutation(
+ *     (c, vars: { title: string }) => createArticle(c, vars),
+ *     client,
+ *   );
+ * </script>
+ * <button onclick={() => createArticle.run({ title: 'Hello' })}>
+ *   {createArticle.loading ? 'Saving...' : 'Create'}
+ * </button>
+ * ```
+ */
+export function createMutation<T, V>(
+  mutator: (client: HttpClient, vars: V) => Promise<T>,
+  client: HttpClient,
+) {
+  let data = $state<T | null>(null);
+  let error = $state<Error | null>(null);
+  let loading = $state(false);
+
+  async function run(vars: V): Promise<T> {
+    loading = true;
+    error = null;
+    try {
+      const result = await mutator(client, vars);
+      data = result;
+      return result;
+    } catch (e) {
+      error = e as Error;
+      throw e;
+    } finally {
+      loading = false;
+    }
+  }
+
+  return {
+    get data() {
+      return data;
+    },
+    get error() {
+      return error;
+    },
+    get loading() {
+      return loading;
+    },
+    run,
+  };
+}
+
+// Auth store
+
+export interface AuthState {
+  user: { id: string; email: string; roles: string[] } | null;
+  token: string | null;
+}
+
+export interface AuthStore {
+  readonly user: AuthState["user"];
+  readonly token: string | null;
+  readonly isAuthenticated: boolean;
+  /** Set the current user and token after a successful login. */
+  setUser: (user: AuthState["user"], token: string | null) => void;
+  /** Clear auth state (e.g. after logout). */
+  clear: () => void;
+  /** Try to load the current user from the server using the stored token. */
+  load: () => Promise<void>;
+}
+
+/**
+ * Simple reactive auth store. The caller is responsible for calling
+ * {@link AuthStore.setUser} after login and {@link AuthStore.clear} after
+ * logout. Use {@link AuthStore.load} on app start to restore a session
+ * from an existing cookie.
+ */
+export function createAuthStore(client: HttpClient): AuthStore {
+  let state = $state<AuthState>({ user: null, token: null });
+
+  return {
+    get user() {
+      return state.user;
+    },
+    get token() {
+      return state.token;
+    },
+    get isAuthenticated() {
+      return state.token !== null;
+    },
+    setUser(user: AuthState["user"], token: string | null) {
+      state = { user, token };
+    },
+    clear() {
+      state = { user: null, token: null };
+    },
+    async load() {
+      try {
+        const user = await client.get<{
+          id: string;
+          email: string;
+          roles: string[];
+        }>("/api/admin/auth/me");
+        state = { ...state, user };
+      } catch {
+        /* not logged in */
+      }
+    },
+  };
+}