eraspace 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eraspace",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "eraspace: build, deploy and manage eraspace capsules",
   "type": "module",
   "keywords": [

package/sdk/src/client/client.ts

@@ -13,7 +13,7 @@ import { Pager } from "./pagination.ts";
 
 export { readConfig, type EraspaceConfig, type ClientOptions } from "./config.ts";
 export { subKey } from "./sub-key.ts";
-export type { EraspaceClient, Room, PresenceEntry, MutationOptions, OptimisticStore, PaginatedQueryName, PaginatedQueryResult } from "./types.ts";
+export type { EraspaceClient, Room, PresenceEntry, MutationOptions, OptimisticStore, PaginatedQueryName, PaginatedQueryResult, Status } from "./types.ts";
 
 type Fn = (...args: any[]) => any;
 
@@ -114,11 +114,8 @@ export function createClient<C>(options: ClientOptions = {}): EraspaceClient<C>
 
   function useRoom(room: string, meta?: Record<string, unknown>): Room<any, any> {
     const r = useRoomConn(room, meta);
-    return {
-      presence: r.members.value,
-      self: r.self.value,
-      state: r.state.value,
-      error: r.error.value,
+    // Stable per room, so effects and memoized children that depend on them do not rerun every render.
+    const methods = useMemo(() => ({
       broadcast: (event: string, payload?: unknown) => {
         void r.channel.push("broadcast", { event, payload: payload ?? null }).catch(error => { r.error.value = EraspaceError.from(error); });
       },
@@ -131,6 +128,13 @@ export function createClient<C>(options: ClientOptions = {}): EraspaceClient<C>
       setState: (key: string, value: unknown) => {
         r.setState(key, value);
       },
+    }), [r]);
+    return {
+      presence: r.members.value,
+      self: r.self.value,
+      state: r.state.value,
+      error: r.error.value,
+      ...methods,
     };
   }
 

package/sdk/src/client/files.ts

@@ -343,6 +343,8 @@ export function FilePreview(props: FilePreviewProps) {
   if (meta === undefined || meta === null || meta === "failed" || broken === key) {
     // A media error cannot tell a missing file from a failed request, so every failure offers a retry.
     const retry = () => {
+      // Found metadata stays cached, so a file deleted since would show as found again and fail the same way.
+      infoCache.delete(client.storage.url(key));
       setBroken(null);
       setFetched(undefined);
       setAttempt((n) => n + 1);

package/sdk/src/client/index.ts

@@ -10,6 +10,7 @@ export {
   type PaginatedQueryResult,
   type PresenceEntry,
   type Room,
+  type Status,
   type EraspaceClient,
   type EraspaceConfig,
 } from "./client.ts";

package/sdk/src/client/sub-key.ts

@@ -18,9 +18,12 @@ function canonical(v: unknown): unknown {
   // Own data properties, so a `__proto__` key stays a key rather than setting the prototype.
   return Object.fromEntries(Object.keys(o).sort().map((k) => [k, canonical(o[k])]));
 }
+/** Sorted-key JSON. Like `JSON.stringify` and `canonicalArgs`, it serializes what `toJSON` returns, so two Dates differ. */
 export function stableStringify(v: unknown): string {
   if (v === undefined) return "null";
   if (v === null || typeof v !== "object") return JSON.stringify(v);
+  const json = (v as { toJSON?: unknown }).toJSON;
+  if (typeof json === "function") return stableStringify(json.call(v));
   if (Array.isArray(v)) return "[" + v.map(stableStringify).join(",") + "]";
   const o = v as Record<string, unknown>;
   const keys = Object.keys(o).filter((k) => o[k] !== undefined).sort();

package/templates/chat/client/index.tsx

@@ -1,5 +1,5 @@
 import { createClient, FilePreview, FileUpload, type FileRef } from "eraspace/client";
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect, useRef } from "preact/hooks";
 import type app from "../server/index";
 const client = createClient<typeof app>();
 export default function App() {
@@ -12,7 +12,12 @@ export default function App() {
   const [file, setFile] = useState<FileRef | null>(null);
   const messages = client.useQuery("messages", room);
   const send = client.useMutation("send");
-  const channel = client.useRoom<{ name: string }> (room, { name: author });
+  // Room messages share the app's request budget, so presence takes the name once typing pauses and the typing
+  // notice goes out at most once a second; the 1.5 s display below bridges the gap.
+  const [shownName, setShownName] = useState(author);
+  useEffect(() => { const timer = setTimeout(() => setShownName(author), 500); return () => clearTimeout(timer); }, [author]);
+  const lastTyping = useRef(0);
+  const channel = client.useRoom<{ name: string }> (room, { name: shownName });
   useEffect(() => channel.on("typing", (payload: unknown) => {
     if (typeof payload === "string") setTyping(payload);
   }), [room]);
@@ -29,7 +34,10 @@ export default function App() {
       try { await send(room, author, body, file); setBody(""); setFile(null); } catch (err) { setError(err instanceof Error ? err.message : String(err)); } finally { setSending(false); }
     }}>
       <input aria-label="Your name" value={author} maxLength={40} onInput={e => setAuthor(e.currentTarget.value)}/>
-      <input aria-label="Message" placeholder="Message" value={body} maxLength={2000} required={!file} onInput={e => { setBody(e.currentTarget.value); channel.broadcast("typing", author); }}/>
+      <input aria-label="Message" placeholder="Message" value={body} maxLength={2000} required={!file} onInput={e => {
+        setBody(e.currentTarget.value);
+        if (Date.now() - lastTyping.current >= 1000) { lastTyping.current = Date.now(); channel.broadcast("typing", author); }
+      }}/>
       <button disabled={sending || (!body.trim() && !file)}>Send</button>
       {file
         ? <div class="pending"><FilePreview client={client} file={file} caption={false} class="attachment"/><span>{file.name}</span><button type="button" class="subtle" disabled={sending} onClick={() => { void client.storage.delete(file.key).catch(() => {}); setFile(null); }}>Remove</button></div>