@lyeve-labs/client-svelte 0.1.3 → 0.1.5

package/README.md

@@ -1,20 +1,20 @@
-# @lyeve/cms-client-svelte
+# @lyeve-labs/client-svelte
 
 Svelte 5 reactive stores for the LyEve CMS API. Thin wrapper around
-`@lyeve/cms-client` using Svelte 5 runes (`$state`).
+`@lyeve-labs/client` using Svelte 5 runes (`$state`).
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Svelte 5](https://img.shields.io/badge/svelte-5-ff3e00.svg)](https://svelte.dev)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.7-3178c6.svg)](https://www.typescriptlang.org)
 
 ```bash
-pnpm add @lyeve/cms-client @lyeve/cms-client-svelte
+pnpm add @lyeve-labs/client @lyeve-labs/client-svelte
 ```
 
 ```svelte
 <script lang="ts">
-  import { createCmsClient, createAsyncStore } from '@lyeve/cms-client-svelte';
-  import { getSchemas } from '@lyeve/cms-client-rest';
+  import { createCmsClient, createAsyncStore } from '@lyeve-labs/client-svelte';
+  import { getSchemas } from '@lyeve-labs/client-rest';
 
   const client = createCmsClient({
     baseUrl: 'https://cms.example.com',
@@ -55,24 +55,27 @@ No Provider needed. Create a client, pass it in, done.
 
 - **Node 20** or newer
 - **Svelte 5.0** or newer
-- **[@lyeve/cms-client](https://www.npmjs.com/package/@lyeve/cms-client)** `>=0.1.0`
+- **[@lyeve-labs/client](https://www.npmjs.com/package/@lyeve-labs/client)** `>=0.2.1`
 
 ## Install
 
 ```bash
-pnpm add @lyeve/cms-client @lyeve/cms-client-svelte
-# or npm install @lyeve/cms-client @lyeve/cms-client-svelte
-# or yarn add @lyeve/cms-client @lyeve/cms-client-svelte
+pnpm add @lyeve-labs/client @lyeve-labs/client-svelte
+# or npm install @lyeve-labs/client @lyeve-labs/client-svelte
+# or yarn add @lyeve-labs/client @lyeve-labs/client-svelte
 ```
 
+The examples below fetch through the REST helpers, which ship separately. Add
+`@lyeve-labs/client-rest` if you want them, or pass any fetcher of your own.
+
 ## Use
 
 ### Data fetching
 
 ```svelte
 <script lang="ts">
-  import { createCmsClient, createAsyncStore } from '@lyeve/cms-client-svelte';
-  import { getSchemas } from '@lyeve/cms-client-rest';
+  import { createCmsClient, createAsyncStore } from '@lyeve-labs/client-svelte';
+  import { getSchemas } from '@lyeve-labs/client-rest';
 
   const client = createCmsClient({
     baseUrl: 'https://cms.example.com',
@@ -101,7 +104,7 @@ pnpm add @lyeve/cms-client @lyeve/cms-client-svelte
 
 ```svelte
 <script lang="ts">
-  import { createCmsClient, createAuthStore } from '@lyeve/cms-client-svelte';
+  import { createCmsClient, createAuthStore } from '@lyeve-labs/client-svelte';
 
   const client = createCmsClient({ baseUrl: 'https://cms.example.com' });
   const auth = createAuthStore(client);
@@ -193,7 +196,7 @@ tests/               # vitest test suite
 
 ## Versioning
 
-`@lyeve/cms-client-svelte` follows [SemVer](https://semver.org). While under `1.0`,
+`@lyeve-labs/client-svelte` follows [SemVer](https://semver.org). While under `1.0`,
 breaking changes bump the **minor** version; additive changes bump the **patch**.
 Every release is logged in [`CHANGELOG.md`](CHANGELOG.md).
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lyeve-labs/client-svelte",
-  "version": "0.1.3",
+  "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@9.15.0",
+  "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": {
@@ -46,11 +49,11 @@
     "format:check": "prettier --check ."
   },
   "peerDependencies": {
-    "@lyeve-labs/client": ">=0.1.0",
+    "@lyeve-labs/client": ">=0.2.1",
     "svelte": ">=5.0.0"
   },
   "devDependencies": {
-    "@lyeve-labs/client": "^0.2.0",
+    "@lyeve-labs/client": "^0.3.0",
     "svelte": "^5.0.0",
     "tsup": "^8.4.0",
     "typescript": "^5.7.0",

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 */
+      }
+    },
+  };
+}