@qlever-llc/trellis-svelte 0.6.0 → 0.7.0-rc.2

package/README.md

@@ -4,6 +4,10 @@ Svelte integration for Trellis browser applications.
 
 Provides `TrellisProvider` for app-level wiring, along with reactive helpers for auth state, NATS connection state, and Trellis client state.
 
-Prefer `createTrellisApp(...)` for app-scoped auth creation and typed `app.getTrellis()` access without passing the contract around at every call site.
+Use `TrellisProvider` as the primary integration surface:
+
+- pass `trellisUrl`, `contract`, and `loginPath`
+- read the live client with `getTrellis<typeof contract>()`
+- use `createAuthState(...)` only for lower-level sign-in flows when needed
 
 Uses the contract/runtime model from `@qlever-llc/trellis/contracts` and `@qlever-llc/trellis`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlever-llc/trellis-svelte",
-  "version": "0.6.0",
+  "version": "0.7.0-rc.2",
   "type": "module",
   "description": "Svelte components and state helpers for Trellis browser applications.",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Qlever-LLC/trellis"
+    "url": "git+https://github.com/Qlever-LLC/trellis.git"
   },
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@nats-io/nats-core": "^3.3.1",
-    "@qlever-llc/trellis": "^0.6.0",
+    "@qlever-llc/trellis": "^0.7.0-rc.2",
     "typebox": "^1.0.15"
   },
   "peerDependencies": {

package/src/components/TrellisProvider.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
   import type { NatsConnection } from "@nats-io/nats-core";
   import { AsyncResult } from "@qlever-llc/result";
+  import type { Trellis, TrellisAPI } from "@qlever-llc/trellis";
   import { onDestroy } from "svelte";
   import type { Snippet } from "svelte";
   import {
-    setAppContext,
     setAuthContext,
     setNatsStateContext,
     setTrellisContext,
   } from "../context.svelte.ts";
-  import type { AuthState, BindErrorResult } from "../state/auth.svelte.ts";
-  import { createNatsState, type NatsState } from "../state/nats.svelte.ts";
-  import { createTrellisState, type TrellisState } from "../state/trellis.svelte.ts";
-
-  type TrellisApp = {
-    auth: AuthState;
-  };
+  import { createAuthState, type BindErrorResult } from "../state/auth.svelte.ts";
+  import { createConnectedNatsState, type NatsState } from "../state/nats.svelte.ts";
+  import {
+    type TrellisClientContract,
+  } from "../state/trellis.svelte.ts";
+  import { TrellisClient } from "@qlever-llc/trellis";
 
   type Props = {
     children: Snippet;
     loading?: Snippet;
     bindError?: Snippet<[BindErrorResult]>;
-    app: TrellisApp;
+    trellisUrl: string;
+    loginPath?: string;
+    contract: TrellisClientContract;
     onAuthExpired?: () => void;
     onAuthFailed?: (error: unknown) => void;
     onAuthRequired?: (redirectTo: string) => void;
@@ -38,7 +39,9 @@
     children,
     loading,
     bindError,
-    app,
+    trellisUrl,
+    loginPath,
+    contract,
     onAuthExpired,
     onAuthFailed,
     onAuthRequired,
@@ -52,14 +55,35 @@
   }: Props = $props();
 
   let bindErrorResult = $state<BindErrorResult | null>(null);
+  let providerAuth = $state<ReturnType<typeof createAuthState> | null>(null);
+
+  function getProviderAuth() {
+    if (providerAuth === null) {
+      providerAuth = createAuthState({ authUrl: trellisUrl, loginPath, contract });
+    }
+
+    providerAuth.setAuthUrl(trellisUrl);
+
+    return providerAuth;
+  }
 
   type InitContext = {
-    auth: AuthState;
+    auth: ReturnType<typeof createAuthState>;
     nats: NatsState;
-    trellis: TrellisState;
+    trellis: Trellis<TrellisAPI>;
   };
   const isBrowser = typeof window !== "undefined";
 
+  function requireTrellisUrl(): string {
+    const auth = getProviderAuth();
+    const resolvedTrellisUrl = auth.authUrl;
+    if (!resolvedTrellisUrl) {
+      throw new Error("Trellis URL is not configured");
+    }
+
+    return resolvedTrellisUrl;
+  }
+
   function getRedirectTo(): string {
     if (typeof window === "undefined") {
       return "/";
@@ -71,7 +95,8 @@
   function redirectToLogin(redirectTo: string): void {
     if (typeof window === "undefined") return;
 
-    const url = new URL(app.auth.loginPath, window.location.origin);
+    const auth = getProviderAuth();
+    const url = new URL(auth.loginPath, window.location.origin);
     url.searchParams.set("redirectTo", redirectTo);
     window.location.href = url.toString();
   }
@@ -86,11 +111,10 @@
 
   async function initialize(): Promise<InitContext | null> {
     const result = await AsyncResult.try(async () => {
-      const authState = app.auth;
+      const auth = getProviderAuth();
 
-      await authState.init();
-      const bindResult = await authState.handleCallback();
-      authState.cleanupCallbackUrl();
+      await auth.init();
+      const bindResult = await auth.handleCallback();
 
       if (bindResult !== null && bindResult.status !== "bound") {
         bindErrorResult = bindResult;
@@ -98,12 +122,28 @@
         return null;
       }
 
-      if (!authState.isAuthenticated) {
+      if (!auth.isAuthenticated) {
         handleAuthRequired();
         return null;
       }
 
-      const natsState = await createNatsState(authState, {
+      const trellis = await TrellisClient.connect({
+        trellisUrl: requireTrellisUrl(),
+        contract,
+        auth: {
+          handle: auth.handle ?? undefined,
+        },
+        onAuthRequired: ({ loginUrl }) => {
+          onAuthExpired?.();
+          const redirectTo = getRedirectTo();
+          onAuthRequired?.(redirectTo);
+          if (!onAuthRequired && typeof window !== "undefined") {
+            window.location.href = loginUrl;
+          }
+        },
+      });
+
+      const natsState = await createConnectedNatsState(trellis.natsConnection, auth, {
         onConnecting: onNatsConnecting,
         onConnected: onNatsConnected,
         onDisconnect: onNatsDisconnect,
@@ -116,20 +156,16 @@
         },
       });
 
-      const trellisState = await createTrellisState(authState, natsState, {
-        contract: authState.contract,
-      });
-
       return {
-        auth: authState,
+        auth,
         nats: natsState,
-        trellis: trellisState,
+        trellis,
       };
     });
 
     if (result.isErr()) {
       const error = result.error;
-      app.auth.clearAuth();
+      getProviderAuth().clearAuth();
       onAuthFailed?.(error);
       throw error;
     }
@@ -150,13 +186,12 @@
     return ctx;
   }) ?? null;
   const natsStatePromise: Promise<NatsState> | null = readyPromise?.then((ctx) => ctx.nats) ?? null;
-  const trellisPromise: Promise<TrellisState["trellis"]> | null = readyPromise?.then((ctx) => ctx.trellis.trellis) ?? null;
+  const trellisPromise: Promise<Trellis<TrellisAPI>> | null = readyPromise?.then((ctx) => ctx.trellis) ?? null;
   const natsPromise: Promise<NatsConnection> | null = readyPromise?.then((ctx) => ctx.nats.nc) ?? null;
 
   if (readyPromise && natsStatePromise && trellisPromise && natsPromise) {
     void readyPromise.catch(() => {});
-    setAppContext(() => app);
-    setAuthContext(() => app.auth);
+    setAuthContext(() => getProviderAuth());
     setNatsStateContext(natsStatePromise);
     setTrellisContext({
       trellis: trellisPromise,
@@ -168,7 +203,6 @@
     if (!readyPromise) return;
 
     void readyPromise.then((ctx) => {
-      ctx.trellis.stop();
       void ctx.nats.disconnect();
     });
   });

package/src/context.svelte.ts

@@ -1,52 +1,23 @@
-import type { BaseError, Result } from "@qlever-llc/result";
 import type { NatsConnection } from "@nats-io/nats-core";
-import type { InferSchemaType, Trellis, TrellisAPI } from "@qlever-llc/trellis";
+import type { TrellisAPI } from "@qlever-llc/trellis";
 import { createContext } from "svelte";
-import { createAuthState, type AuthState, type AuthStateConfig, type SignInOptions } from "./state/auth.svelte.ts";
+import type { AuthState } from "./state/auth.svelte.ts";
 import type { NatsState } from "./state/nats.svelte.ts";
 
 type TrellisContext = {
-  trellis: Promise<Trellis<TrellisAPI>>;
+  trellis: Promise<unknown>;
   nats: Promise<NatsConnection>;
 };
 
-type TrellisContractLike<TA extends TrellisAPI = TrellisAPI> = {
+export type TrellisContractLike<TA extends TrellisAPI = TrellisAPI> = {
   API: {
     trellis: TA;
   };
 };
 
-type RequestOpts = {
-  timeout?: number;
-};
-
-type TypedTrellis<TA extends TrellisAPI> = Omit<Trellis<TrellisAPI>, "request" | "requestOrThrow"> & {
-  request<M extends keyof TA["rpc"] & string>(
-    method: M,
-    input: InferSchemaType<TA["rpc"][M]["input"]>,
-    opts?: RequestOpts,
-  ): Promise<Result<InferSchemaType<TA["rpc"][M]["output"]>, BaseError>>;
-  requestOrThrow<M extends keyof TA["rpc"] & string>(
-    method: M,
-    input: InferSchemaType<TA["rpc"][M]["input"]>,
-    opts?: RequestOpts,
-  ): Promise<InferSchemaType<TA["rpc"][M]["output"]>>;
-};
-
-function createTypedTrellis<TA extends TrellisAPI>(trellis: Trellis<TrellisAPI>): TypedTrellis<TA> {
-  return trellis as TypedTrellis<TA>;
-}
-
-export type BoundTrellisApp<TContract extends TrellisContractLike> = {
-  auth: AuthState;
-  signIn: (options?: SignInOptions) => Promise<never>;
-  getTrellis: () => Promise<TypedTrellis<TContract["API"]["trellis"]>>;
-};
-
 const [getTrellisContext, setTrellisContextValue] = createContext<TrellisContext>();
 const [getNatsStateContext, setNatsStateContextValue] = createContext<Promise<NatsState>>();
 const [getAuthContext, setAuthContextValue] = createContext<() => AuthState>();
-const [getAppContext, setAppContextValue] = createContext<() => unknown>();
 
 export function setTrellisContext(
   ctx: TrellisContext,
@@ -62,31 +33,8 @@ export function setAuthContext(getAuth: () => AuthState): void {
   setAuthContextValue(getAuth);
 }
 
-export function setAppContext(getApp: () => unknown): void {
-  setAppContextValue(getApp);
-}
-
-export function createTrellisApp<TContract extends TrellisContractLike>(
-  config: AuthStateConfig & { contract: TContract },
-): BoundTrellisApp<TContract> {
-  const auth = createAuthState(config);
-
-  let app!: BoundTrellisApp<TContract>;
-  app = {
-    auth,
-    signIn: (options) => auth.signIn(options),
-    getTrellis: () => {
-      if (getAppContext()() !== app) {
-        throw new Error("getTrellis() was called outside the matching TrellisProvider");
-      }
-
-      return getTrellisContext().trellis.then((trellis) =>
-        createTypedTrellis<TContract["API"]["trellis"]>(trellis)
-      );
-    },
-  };
-
-  return app;
+export function getTrellis<T = unknown>(): Promise<T> {
+  return getTrellisContext().trellis as Promise<T>;
 }
 
 export function getNats(): Promise<NatsConnection> {

package/src/index.ts

@@ -1,9 +1,9 @@
 export { default as TrellisProvider } from "./components/TrellisProvider.svelte";
-export { createTrellisApp, getAuth, getNats, getNatsState, setTrellisContext } from "./context.svelte.ts";
-export type { BoundTrellisApp } from "./context.svelte.ts";
+export { getAuth, getNats, getNatsState, getTrellis } from "./context.svelte.ts";
+export type { TrellisContractLike } from "./context.svelte.ts";
 export { createPortalFlow, PortalFlowController, type CreatePortalFlowConfig } from "./portal_flow.svelte.ts";
 export { AuthState, type BindErrorResult, type BindResult, createAuthState, type SignInOptions } from "./state/auth.svelte.ts";
 export type { NatsStateConfig, Status as NatsStatus } from "./state/nats.svelte.ts";
-export { createNatsState, NatsState } from "./state/nats.svelte.ts";
+export { createConnectedNatsState, createNatsState, NatsState } from "./state/nats.svelte.ts";
 export type { TrellisClientContract, TrellisStateConfig } from "./state/trellis.svelte.ts";
 export { createTrellisState, TrellisState } from "./state/trellis.svelte.ts";

package/src/state/auth.svelte.ts

@@ -344,13 +344,15 @@ export class AuthState {
   /**
    * Clean up the callback URL by removing the auth flow query params.
    */
-  cleanupCallbackUrl(url: string = window.location.href): void {
+  cleanupCallbackUrl(url: string = window.location.href): string | null {
     const parsed = new URL(url);
     if (parsed.searchParams.has("flowId") || parsed.searchParams.has("authError")) {
       parsed.searchParams.delete("flowId");
       parsed.searchParams.delete("authError");
-      window.history.replaceState({}, "", parsed.pathname + parsed.search);
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
     }
+
+    return null;
   }
 
   /**

package/src/state/nats.svelte.ts

@@ -3,7 +3,7 @@ import {
   type NatsConnection,
   wsconnect,
 } from "@nats-io/nats-core";
-import { createClient, type Trellis } from "@qlever-llc/trellis";
+import type { Trellis } from "@qlever-llc/trellis";
 import {
   getPublicSessionKey,
   natsConnectSigForBindingToken,
@@ -18,6 +18,7 @@ import {
   type AuthRenewBindingTokenOutput,
 } from "@qlever-llc/trellis/sdk/auth";
 import type { AuthState } from "./auth.svelte.ts";
+import { createClient } from "../../../trellis/client.ts";
 
 const AUTH_RENEW_API = {
   rpc: {
@@ -202,6 +203,44 @@ export class NatsState {
     return state;
   }
 
+  static async fromConnection(
+    nc: NatsConnection,
+    authState: AuthState,
+    config: NatsStateConfig,
+  ): Promise<NatsState> {
+    config.onConnecting?.();
+
+    await authState.init();
+
+    if (!authState.isAuthenticated) {
+      config.onAuthRequired?.();
+      throw new Error("Not authenticated: missing binding token or sentinel");
+    }
+
+    const { handle, sentinel } = requireBrowserAuth(authState);
+    const servers = resolveServers(authState, config);
+    const bindingToken = authState.bindingToken;
+    if (!bindingToken) {
+      throw new Error("Not authenticated: missing binding token or sentinel");
+    }
+
+    const state = new NatsState(
+      nc,
+      "connected",
+      servers,
+      authState,
+      config,
+      handle,
+      { value: await buildNatsAuthToken(handle, bindingToken) },
+      sentinel,
+    );
+
+    config.onConnected?.();
+    await state.#renewBindingToken();
+
+    return state;
+  }
+
   /**
    * Reconnect to NATS with the existing binding token (if still valid).
    * Uses stored sentinel credentials with jwtAuthenticator per ADR.
@@ -361,3 +400,11 @@ export async function createNatsState(
 ): Promise<NatsState> {
   return NatsState.connect(authState, config);
 }
+
+export async function createConnectedNatsState(
+  nc: NatsConnection,
+  authState: AuthState,
+  config: NatsStateConfig,
+): Promise<NatsState> {
+  return NatsState.fromConnection(nc, authState, config);
+}

package/src/state/trellis.svelte.ts

@@ -1,10 +1,11 @@
 import {
-  createClient,
   defineContract,
   type Trellis,
   type TrellisAPI,
   type TrellisContractV1,
 } from "@qlever-llc/trellis";
+import { TrellisClient } from "../../../trellis/client_connect.ts";
+import { createClient } from "../../../trellis/client.ts";
 import { getPublicSessionKey, signBytes } from "@qlever-llc/trellis/auth";
 import type { AuthState } from "./auth.svelte.ts";
 import type { NatsState } from "./nats.svelte.ts";
@@ -25,7 +26,7 @@ const DEFAULT_TRELLIS_CONTRACT = defineContract({
   id: "trellis.svelte.browser@v1",
   displayName: "Trellis Svelte Browser Client",
   description: "Represent a browser client that only uses its locally declared Trellis APIs.",
-  kind: "browser",
+  kind: "app",
 }) satisfies TrellisClientContract<TrellisAPI>;
 
 /**
@@ -67,6 +68,10 @@ export class TrellisState<TApi extends TrellisAPI = TrellisAPI> {
     return new TrellisState<TApi>(trellis);
   }
 
+  static fromTrellis<TApi extends TrellisAPI>(trellis: Trellis<TApi>): TrellisState<TApi> {
+    return new TrellisState<TApi>(trellis);
+  }
+
   stop(): void {
     // no-op (kept for convenience)
   }