@c9up/aurora 0.1.5 → 0.1.7

package/src/http.ts

@@ -0,0 +1,278 @@
+/**
+ * `HttpClient` — a small typed wrapper over `fetch` so call sites read
+ * `await http.get<User>("/auth/me")` instead of hand-rolling headers,
+ * `res.json()`, and status checks.
+ *
+ * - Auto JSON: a plain-object/array body is `JSON.stringify`-d with a
+ *   `Content-Type: application/json` header; a JSON response is parsed.
+ *   `FormData`/`Blob`/`URLSearchParams`/`string`/binary bodies pass through
+ *   untouched.
+ * - Bearer auth: a `token` (string or getter, read fresh per request) is sent
+ *   as `Authorization: Bearer …` unless the caller set the header themselves.
+ * - Errors: a non-2xx response rejects with an {@link HttpError} carrying the
+ *   status, the `Response`, and the parsed body.
+ *
+ * Node-free and isomorphic — uses the global `fetch` (browsers, Node 18+,
+ * Workers, Bun, Deno). Part of the client barrel.
+ */
+
+export interface HttpClientOptions {
+	/** Prepended to every request URL, unless the URL is already absolute. */
+	baseURL?: string;
+	/** Headers merged into every request. */
+	headers?: Record<string, string>;
+	/**
+	 * Bearer token sent as `Authorization: Bearer <token>`. A getter is read
+	 * fresh on each request (so a rotated/late-set token is always current);
+	 * a `null`/`undefined` result omits the header.
+	 */
+	token?: string | null | (() => string | null | undefined);
+	/** Default `credentials` mode (e.g. `"include"` to send cookies). */
+	credentials?: RequestCredentials;
+}
+
+export interface HttpRequestOptions<T = unknown> {
+	/** Query params appended to the URL. `null`/`undefined` values are skipped. */
+	query?: Record<string, string | number | boolean | null | undefined>;
+	/** Extra headers for this request (override the client defaults). */
+	headers?: Record<string, string>;
+	/** Per-request bearer token override (`null` to force-omit). */
+	token?: string | null;
+	/** Abort signal. */
+	signal?: AbortSignal;
+	/** `credentials` mode for this request. */
+	credentials?: RequestCredentials;
+	/**
+	 * Runtime validator/mapper for the parsed body. When provided, the return
+	 * type is whatever it returns — no unchecked cast. When omitted, the parsed
+	 * body is returned as `T` (an UNCHECKED assertion of the response shape).
+	 */
+	parse?: (raw: unknown) => T;
+}
+
+/** Thrown on a non-2xx response. Carries the status, the `Response`, and the parsed body. */
+export class HttpError extends Error {
+	readonly status: number;
+	readonly response: Response;
+	readonly data: unknown;
+
+	constructor(response: Response, data: unknown) {
+		super(`HTTP ${response.status} ${response.statusText} for ${response.url}`);
+		this.name = "HttpError";
+		this.status = response.status;
+		this.response = response;
+		this.data = data;
+	}
+}
+
+/** Whether `body` should be JSON-encoded (vs. passed to `fetch` untouched). */
+function shouldJsonEncode(body: unknown): boolean {
+	if (body === null || typeof body !== "object") {
+		return typeof body !== "string";
+	}
+	if (
+		body instanceof FormData ||
+		body instanceof Blob ||
+		body instanceof URLSearchParams ||
+		body instanceof ArrayBuffer ||
+		ArrayBuffer.isView(body)
+	) {
+		return false;
+	}
+	if (typeof ReadableStream !== "undefined" && body instanceof ReadableStream) {
+		return false;
+	}
+	return true;
+}
+
+/** Case-insensitive header presence check. */
+function hasHeader(headers: Record<string, string>, name: string): boolean {
+	const lower = name.toLowerCase();
+	for (const key of Object.keys(headers)) {
+		if (key.toLowerCase() === lower) return true;
+	}
+	return false;
+}
+
+/** Parse a response by content-type; `null` for empty / no-content bodies. */
+async function parseBody(response: Response): Promise<unknown> {
+	if (response.status === 204 || response.status === 205) return null;
+	const type = response.headers.get("content-type") ?? "";
+	const text = await response.text();
+	if (text === "") return null;
+	if (type.includes("application/json")) return JSON.parse(text);
+	return text;
+}
+
+export class HttpClient {
+	readonly #baseURL: string;
+	readonly #headers: Record<string, string>;
+	readonly #token?: string | null | (() => string | null | undefined);
+	readonly #credentials?: RequestCredentials;
+
+	constructor(options: HttpClientOptions = {}) {
+		this.#baseURL = options.baseURL ?? "";
+		this.#headers = { ...options.headers };
+		this.#token = options.token;
+		this.#credentials = options.credentials;
+	}
+
+	/** Set a default header for every subsequent request (case-insensitive replace). Chainable. */
+	setHeader(name: string, value: string): this {
+		this.#deleteHeader(name);
+		this.#headers[name] = value;
+		return this;
+	}
+
+	/** Merge several default headers at once. Chainable. */
+	setHeaders(headers: Record<string, string>): this {
+		for (const [name, value] of Object.entries(headers)) {
+			this.setHeader(name, value);
+		}
+		return this;
+	}
+
+	/** Remove a default header (case-insensitive). Chainable. */
+	removeHeader(name: string): this {
+		this.#deleteHeader(name);
+		return this;
+	}
+
+	/** A copy of the current default headers. */
+	getHeaders(): Record<string, string> {
+		return { ...this.#headers };
+	}
+
+	#deleteHeader(name: string): void {
+		const lower = name.toLowerCase();
+		for (const key of Object.keys(this.#headers)) {
+			if (key.toLowerCase() === lower) delete this.#headers[key];
+		}
+	}
+
+	get<T>(url: string, options?: HttpRequestOptions<T>): Promise<T> {
+		return this.#request("GET", url, undefined, options);
+	}
+
+	delete<T>(url: string, options?: HttpRequestOptions<T>): Promise<T> {
+		return this.#request("DELETE", url, undefined, options);
+	}
+
+	post<T>(
+		url: string,
+		body?: unknown,
+		options?: HttpRequestOptions<T>,
+	): Promise<T> {
+		return this.#request("POST", url, body, options);
+	}
+
+	put<T>(
+		url: string,
+		body?: unknown,
+		options?: HttpRequestOptions<T>,
+	): Promise<T> {
+		return this.#request("PUT", url, body, options);
+	}
+
+	patch<T>(
+		url: string,
+		body?: unknown,
+		options?: HttpRequestOptions<T>,
+	): Promise<T> {
+		return this.#request("PATCH", url, body, options);
+	}
+
+	/** Send a request and return the raw `Response` (no parsing, no throw on non-2xx). */
+	raw(
+		method: string,
+		url: string,
+		body?: unknown,
+		options: HttpRequestOptions = {},
+	): Promise<Response> {
+		return this.#send(method, url, body, options);
+	}
+
+	/** Derive a new client with merged defaults (e.g. a scope that adds a token). */
+	extend(options: HttpClientOptions): HttpClient {
+		return new HttpClient({
+			baseURL: options.baseURL ?? this.#baseURL,
+			headers: { ...this.#headers, ...options.headers },
+			token: options.token ?? this.#token,
+			credentials: options.credentials ?? this.#credentials,
+		});
+	}
+
+	#resolveToken(override?: string | null): string | null | undefined {
+		if (override !== undefined) return override;
+		return typeof this.#token === "function" ? this.#token() : this.#token;
+	}
+
+	#buildUrl(url: string, query?: HttpRequestOptions["query"]): string {
+		const base = /^[a-z][a-z\d+\-.]*:\/\//i.test(url)
+			? url
+			: this.#baseURL + url;
+		if (!query) return base;
+		const params = new URLSearchParams();
+		for (const [key, value] of Object.entries(query)) {
+			if (value !== null && value !== undefined)
+				params.append(key, String(value));
+		}
+		const qs = params.toString();
+		if (qs === "") return base;
+		return `${base}${base.includes("?") ? "&" : "?"}${qs}`;
+	}
+
+	#send(
+		method: string,
+		url: string,
+		body: unknown,
+		options: HttpRequestOptions,
+	): Promise<Response> {
+		const headers: Record<string, string> = {
+			...this.#headers,
+			...options.headers,
+		};
+		const token = this.#resolveToken(options.token);
+		if (token != null && !hasHeader(headers, "authorization")) {
+			headers.Authorization = `Bearer ${token}`;
+		}
+
+		let payload: BodyInit | undefined;
+		if (body !== undefined && body !== null) {
+			if (shouldJsonEncode(body)) {
+				payload = JSON.stringify(body);
+				if (!hasHeader(headers, "content-type")) {
+					headers["Content-Type"] = "application/json";
+				}
+			} else {
+				// Already a valid BodyInit (string / FormData / Blob / …).
+				payload = body as BodyInit;
+			}
+		}
+
+		return fetch(this.#buildUrl(url, options.query), {
+			method,
+			headers,
+			body: payload,
+			signal: options.signal,
+			credentials: options.credentials ?? this.#credentials,
+		});
+	}
+
+	async #request<T>(
+		method: string,
+		url: string,
+		body: unknown,
+		options: HttpRequestOptions<T> = {},
+	): Promise<T> {
+		const response = await this.#send(method, url, body, options);
+		const data = await parseBody(response);
+		if (!response.ok) throw new HttpError(response, data);
+		// `parse` validates at runtime; without it, `T` is the caller's
+		// unchecked assertion of the response shape (the usual HTTP boundary).
+		return options.parse ? options.parse(data) : (data as T);
+	}
+}
+
+/** Default same-origin client. Configure your own via `new HttpClient({ … })`. */
+export const http = new HttpClient();

package/src/index.ts

@@ -4,9 +4,40 @@
 // node:fs / node:path / node:url live in `@c9up/aurora/server`. Keeping them off
 // this barrel is what lets a browser bundle import the client primitives without
 // the bundler dragging Node built-ins through the import graph.
-export { redirect, reload, replace, storage } from "./browser.js";
+export type {
+	CookieOptions,
+	PersistedSignalOptions,
+	ShareData,
+	StorageArea,
+	WebStorageOptions,
+	WindowSize,
+} from "./browser.js";
+export {
+	back,
+	clipboard,
+	cookie,
+	forward,
+	hash,
+	mediaQuery,
+	navigate,
+	online,
+	persistedSignal,
+	prefersDark,
+	queryParam,
+	redirect,
+	reload,
+	replace,
+	session,
+	share,
+	storage,
+	visibility,
+	WebStorage,
+	windowSize,
+} from "./browser.js";
 export { component, onMount, onUnmount } from "./component.js";
 export { html, isTemplateResult } from "./html.js";
+export type { HttpClientOptions, HttpRequestOptions } from "./http.js";
+export { HttpClient, HttpError, http } from "./http.js";
 export { hydrate } from "./hydrate.js";
 export {
 	batch,

package/src/reactive.ts

@@ -64,6 +64,28 @@ function activeObserver(): Effect | undefined {
 	return observerStack[observerStack.length - 1];
 }
 
+/**
+ * Ambient disposal owner. A non-reactive scope (e.g. a component's setup
+ * run) registers an array here so effects/memos created during its
+ * execution push their disposer into it and are torn down when the scope
+ * ends. `undefined` at top level — no scope, no auto-disposal.
+ */
+let currentOwner: Array<() => void> | undefined;
+
+/**
+ * @internal Swap the ambient owner, returning the previous one so the
+ * caller can restore it. `component()` uses this to own the effects and
+ * memos a setup function creates, so they dispose at unmount instead of
+ * keeping their signal subscriptions alive forever.
+ */
+export function setOwner(
+	owner: Array<() => void> | undefined,
+): Array<() => void> | undefined {
+	const prev = currentOwner;
+	currentOwner = owner;
+	return prev;
+}
+
 /**
  * Create a writable signal seeded with `initial`. Reads register the
  * current observer; writes notify every observer that previously read.
@@ -178,7 +200,13 @@ export function effect(fn: EffectCallback): () => void {
 		},
 	};
 	eff.run();
-	return () => eff.dispose();
+	const dispose = () => eff.dispose();
+	// Register with the ambient owner (e.g. a component's setup scope) so the
+	// effect is torn down when that scope ends. `memo()` builds on this — its
+	// internal recompute effect inherits the same ownership, which is what
+	// stops a memo created in component setup from leaking after unmount.
+	currentOwner?.push(dispose);
+	return dispose;
 }
 
 /**

package/src/relay.ts

@@ -27,14 +27,12 @@ interface RelayState {
 	sse: EventSource | null;
 	uid: string | null;
 	channels: Map<string, Set<(event: unknown) => void>>;
-	pending: Array<() => void>;
 }
 
 const STATE: RelayState = {
 	sse: null,
 	uid: null,
 	channels: new Map(),
-	pending: [],
 };
 
 export interface RelayOptions {
@@ -87,15 +85,15 @@ const CLIENT: RelayClient = {
 		const adapted = handler as (event: unknown) => void;
 		handlers.add(adapted);
 
-		// Subscribe over POST as soon as we have a uid. If the SSE is
-		// still mid-handshake, queue the call and flush on `connected`.
-		const doSubscribe = () => {
+		// Subscribe over POST as soon as we have a uid. Before the first uid (or
+		// during an auto-reconnect) the channel already lives in STATE.channels
+		// and is (re-)subscribed by the `connected` handler — so the server,
+		// which assigns a fresh uid per connection, always learns every channel.
+		if (STATE.uid) {
 			postSubscribe(channel).catch((err: unknown) => {
 				console.warn(`[aurora/relay] subscribe to ${channel} failed:`, err);
 			});
-		};
-		if (STATE.uid) doSubscribe();
-		else STATE.pending.push(doSubscribe);
+		}
 
 		// Detacher — only removes the local listener. The server-side
 		// subscription stays open; closing it would interrupt other
@@ -112,7 +110,6 @@ const CLIENT: RelayClient = {
 		}
 		STATE.uid = null;
 		STATE.channels.clear();
-		STATE.pending.length = 0;
 	},
 };
 
@@ -124,8 +121,19 @@ function open(): void {
 		const data = safeJson<{ uid?: string }>((ev as MessageEvent).data);
 		if (data && typeof data.uid === "string") {
 			STATE.uid = data.uid;
-			const queue = STATE.pending.splice(0);
-			for (const fn of queue) fn();
+			// Re-apply EVERY active subscription on each (re)connect. The server
+			// assigns a fresh uid per connection and has no memory of prior
+			// subscriptions, so both the first connect AND browser auto-reconnects
+			// must re-POST every live channel — otherwise the client silently
+			// stops receiving after a reconnect.
+			for (const channel of STATE.channels.keys()) {
+				postSubscribe(channel).catch((err: unknown) => {
+					console.warn(
+						`[aurora/relay] re-subscribe to ${channel} failed:`,
+						err,
+					);
+				});
+			}
 		}
 	});
 

package/src/server/renderPage.ts

@@ -90,7 +90,7 @@ export async function renderPage<P>(
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<script type="importmap">${JSON.stringify({ imports: importmap })}</script>
+<script type="importmap">${escapeJsonForScript({ imports: importmap })}</script>
 ${options.headExtra ?? ""}
 </head>
 <body>