@jant/core 0.2.11 → 0.2.13

package/src/lib/image-processor.ts

@@ -115,7 +115,7 @@ function calculateDimensions(
   width: number,
   height: number,
   maxWidth: number,
-  maxHeight: number
+  maxHeight: number,
 ): { width: number; height: number } {
   if (width <= maxWidth && height <= maxHeight) {
     return { width, height };
@@ -131,7 +131,10 @@ function calculateDimensions(
 /**
  * Process image file
  */
-async function process(file: File, options: ProcessOptions = {}): Promise<Blob> {
+async function process(
+  file: File,
+  options: ProcessOptions = {},
+): Promise<Blob> {
   const opts = { ...DEFAULT_OPTIONS, ...options };
 
   // Read file buffer for EXIF
@@ -152,7 +155,7 @@ async function process(file: File, options: ProcessOptions = {}): Promise<Blob>
     srcWidth,
     srcHeight,
     opts.maxWidth,
-    opts.maxHeight
+    opts.maxHeight,
   );
 
   // Create canvas
@@ -192,7 +195,7 @@ async function process(file: File, options: ProcessOptions = {}): Promise<Blob>
         }
       },
       opts.mimeType,
-      opts.quality
+      opts.quality,
     );
   });
 }
@@ -200,7 +203,10 @@ async function process(file: File, options: ProcessOptions = {}): Promise<Blob>
 /**
  * Process file and create a new File object
  */
-async function processToFile(file: File, options: ProcessOptions = {}): Promise<File> {
+async function processToFile(
+  file: File,
+  options: ProcessOptions = {},
+): Promise<File> {
   const blob = await process(file, options);
 
   // Generate new filename with .webp extension
@@ -214,5 +220,7 @@ export const ImageProcessor = { process, processToFile };
 
 // Expose globally for inline scripts
 if (typeof window !== "undefined") {
-  (window as unknown as { ImageProcessor: typeof ImageProcessor }).ImageProcessor = ImageProcessor;
+  (
+    window as unknown as { ImageProcessor: typeof ImageProcessor }
+  ).ImageProcessor = ImageProcessor;
 }

package/src/lib/image.ts

@@ -51,7 +51,7 @@ export interface ImageOptions {
 export function getImageUrl(
   originalUrl: string,
   transformUrl?: string,
-  options?: ImageOptions
+  options?: ImageOptions,
 ): string {
   if (!transformUrl || !options || Object.keys(options).length === 0) {
     return originalUrl;
@@ -96,7 +96,7 @@ export function getImageUrl(
 export function getMediaUrl(
   mediaId: string,
   r2Key: string,
-  r2PublicUrl?: string
+  r2PublicUrl?: string,
 ): string {
   if (r2PublicUrl) {
     return `${r2PublicUrl}/${r2Key}`;

package/src/lib/schemas.ts

@@ -39,7 +39,11 @@ export const CreatePostSchema = z.object({
   visibility: VisibilitySchema,
   sourceUrl: z.string().url().optional().or(z.literal("")),
   sourceName: z.string().optional(),
-  path: z.string().regex(/^[a-z0-9-]*$/).optional().or(z.literal("")),
+  path: z
+    .string()
+    .regex(/^[a-z0-9-]*$/)
+    .optional()
+    .or(z.literal("")),
   replyToId: z.string().optional(), // Sqid format
   publishedAt: z.number().int().positive().optional(),
 });
@@ -61,7 +65,7 @@ export const UpdatePostSchema = CreatePostSchema.partial();
 export function parseFormData<T>(
   formData: FormData,
   key: string,
-  schema: z.ZodSchema<T>
+  schema: z.ZodSchema<T>,
 ): T {
   const value = formData.get(key);
   if (value === null) {
@@ -82,7 +86,7 @@ export function parseFormData<T>(
 export function parseFormDataOptional<T>(
   formData: FormData,
   key: string,
-  schema: z.ZodSchema<T>
+  schema: z.ZodSchema<T>,
 ): T | undefined {
   const value = formData.get(key);
   if (value === null || value === "") {

package/src/lib/sse.ts

@@ -1,8 +1,7 @@
 /**
- * Server-Sent Events (SSE) utilities for Datastar
+ * Server-Sent Events (SSE) utilities for Datastar v1.0.0-RC.7
  *
- * Provides helpers for streaming SSE responses that Datastar can consume.
- * Datastar uses SSE for real-time UI updates without page reloads.
+ * Generates SSE events compatible with the Datastar client's expected format.
  *
  * @see https://data-star.dev/
  *
@@ -11,7 +10,8 @@
  * app.post("/api/example", (c) => {
  *   return sse(c, async (stream) => {
  *     await stream.patchSignals({ loading: false });
- *     await stream.patchElements("#result", "<div>Done!</div>");
+ *     await stream.patchElements('<div id="result">Done!</div>');
+ *     await stream.redirect("/success");
  *   });
  * });
  * ```
@@ -20,9 +20,19 @@
 import type { Context } from "hono";
 
 /**
- * Patch modes for DOM updates
+ * Patch modes for DOM element updates
+ *
+ * @see https://data-star.dev/reference/action_plugins/backend/sse
  */
-export type PatchMode = "morph" | "inner" | "outer" | "append" | "prepend" | "remove";
+export type PatchMode =
+  | "outer"
+  | "inner"
+  | "replace"
+  | "prepend"
+  | "append"
+  | "before"
+  | "after"
+  | "remove";
 
 /**
  * SSE stream writer for Datastar events
@@ -32,23 +42,27 @@ export interface SSEStream {
    * Update reactive signals on the client
    *
    * @param signals - Object containing signal values to update
+   * @param options - Optional settings (e.g. onlyIfMissing)
    *
    * @example
    * ```ts
    * await stream.patchSignals({ count: 42, loading: false });
    * ```
    */
-  patchSignals(signals: Record<string, unknown>): Promise<void>;
+  patchSignals(
+    signals: Record<string, unknown>,
+    options?: { onlyIfMissing?: boolean },
+  ): void;
 
   /**
-   * Update DOM elements
+   * Update DOM elements via patching
    *
    * @param html - HTML content (must include element with id for targeting)
-   * @param options - Optional mode and selector
+   * @param options - Optional patch mode, selector, and view transition
    *
    * @example
    * ```ts
-   * // Replace element with matching id (default: morph)
+   * // Outer patch element with matching id (default)
    * await stream.patchElements('<div id="content">New content</div>');
    *
    * // Append to a container
@@ -60,20 +74,54 @@ export interface SSEStream {
    */
   patchElements(
     html: string,
-    options?: { mode?: PatchMode; selector?: string }
-  ): Promise<void>;
+    options?: {
+      mode?: PatchMode;
+      selector?: string;
+      useViewTransition?: boolean;
+    },
+  ): void;
 
   /**
-   * Execute JavaScript on the client
+   * Redirect the client to a new URL
    *
-   * @param script - JavaScript code to execute
+   * Uses patchElements internally to inject a script that navigates the client.
+   *
+   * @param url - The URL to redirect to
    *
    * @example
    * ```ts
-   * await stream.executeScript('console.log("Hello from server")');
+   * await stream.redirect('/dash/posts');
    * ```
    */
-  executeScript(script: string): Promise<void>;
+  redirect(url: string): void;
+
+  /**
+   * Remove elements matching a CSS selector
+   *
+   * @param selector - CSS selector for elements to remove
+   *
+   * @example
+   * ```ts
+   * await stream.remove('#placeholder');
+   * ```
+   */
+  remove(selector: string): void;
+}
+
+/**
+ * Format a single SSE event string
+ *
+ * @param eventType - The Datastar event type (e.g. "datastar-patch-elements")
+ * @param dataLines - Array of "key value" data lines
+ * @returns Formatted SSE event string
+ */
+function formatEvent(eventType: string, dataLines: readonly string[]): string {
+  let event = `event: ${eventType}\n`;
+  for (const line of dataLines) {
+    event += `data: ${line}\n`;
+  }
+  event += "\n";
+  return event;
 }
 
 /**
@@ -81,13 +129,13 @@ export interface SSEStream {
  *
  * @param c - Hono context
  * @param handler - Async function that writes to the SSE stream
+ * @param options - Optional response options (e.g. headers for cookie forwarding)
  * @returns Response with SSE content-type
  *
  * @example
  * ```ts
  * app.post("/api/upload", (c) => {
  *   return sse(c, async (stream) => {
- *     // Process upload...
  *     await stream.patchSignals({ uploading: false });
  *     await stream.patchElements('<div id="new-item">...</div>', {
  *       mode: 'append',
@@ -95,58 +143,92 @@ export interface SSEStream {
  *     });
  *   });
  * });
+ *
+ * // With cookie forwarding (for auth)
+ * app.post("/signin", (c) => {
+ *   return sse(c, async (stream) => {
+ *     await stream.redirect('/dash');
+ *   }, { headers: { 'Set-Cookie': cookieValue } });
+ * });
  * ```
  */
 export function sse(
   c: Context,
-  handler: (stream: SSEStream) => Promise<void>
+  handler: (stream: SSEStream) => Promise<void>,
+  options?: { headers?: Record<string, string> },
 ): Response {
   const encoder = new TextEncoder();
 
-  const stream = new ReadableStream({
+  const body = new ReadableStream({
     async start(controller) {
-      const write = (data: string) => {
-        controller.enqueue(encoder.encode(data));
-      };
-
-      const sseStream: SSEStream = {
-        async patchSignals(signals) {
-          write(`event: datastar-patch-signals\n`);
-          write(`data: signals ${JSON.stringify(signals)}\n\n`);
+      const stream: SSEStream = {
+        patchSignals(signals, opts) {
+          const dataLines: string[] = [`signals ${JSON.stringify(signals)}`];
+          if (opts?.onlyIfMissing) {
+            dataLines.push("onlyIfMissing true");
+          }
+          controller.enqueue(
+            encoder.encode(formatEvent("datastar-patch-signals", dataLines)),
+          );
         },
 
-        async patchElements(html, options = {}) {
-          write(`event: datastar-patch-elements\n`);
-          if (options.mode) {
-            write(`data: mode ${options.mode}\n`);
+        patchElements(html, opts) {
+          const dataLines: string[] = [];
+          // Each line of HTML gets its own "elements <line>" data line
+          for (const line of html.split("\n")) {
+            dataLines.push(`elements ${line}`);
           }
-          if (options.selector) {
-            write(`data: selector ${options.selector}\n`);
+          if (opts?.mode) {
+            dataLines.push(`mode ${opts.mode}`);
           }
-          // Escape newlines in HTML for SSE format
-          const escapedHtml = html.replace(/\n/g, "\ndata: ");
-          write(`data: elements ${escapedHtml}\n\n`);
+          if (opts?.selector) {
+            dataLines.push(`selector ${opts.selector}`);
+          }
+          if (opts?.useViewTransition) {
+            dataLines.push("useViewTransition true");
+          }
+          controller.enqueue(
+            encoder.encode(formatEvent("datastar-patch-elements", dataLines)),
+          );
+        },
+
+        redirect(url) {
+          const escapedUrl = url.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+          const script = `<script data-effect="el.remove()">window.location.href='${escapedUrl}'</script>`;
+          const dataLines: string[] = [
+            `elements ${script}`,
+            "mode append",
+            "selector body",
+          ];
+          controller.enqueue(
+            encoder.encode(formatEvent("datastar-patch-elements", dataLines)),
+          );
         },
 
-        async executeScript(script) {
-          write(`event: datastar-execute-script\n`);
-          write(`data: script ${script}\n\n`);
+        remove(selector) {
+          controller.enqueue(
+            encoder.encode(
+              formatEvent("datastar-patch-elements", [
+                "elements ",
+                `mode remove`,
+                `selector ${selector}`,
+              ]),
+            ),
+          );
         },
       };
 
-      try {
-        await handler(sseStream);
-      } finally {
-        controller.close();
-      }
+      await handler(stream);
+      controller.close();
     },
   });
 
-  return new Response(stream, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache",
-      Connection: "keep-alive",
-    },
-  });
+  const headers: Record<string, string> = {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+    ...options?.headers,
+  };
+
+  return new Response(body, { headers });
 }

package/src/middleware/auth.ts

@@ -21,7 +21,9 @@ export function requireAuth(redirectTo = "/signin"): MiddlewareHandler<Env> {
     }
 
     try {
-      const session = await c.var.auth.api.getSession({ headers: c.req.raw.headers });
+      const session = await c.var.auth.api.getSession({
+        headers: c.req.raw.headers,
+      });
 
       if (!session?.user) {
         return c.redirect(redirectTo);
@@ -45,7 +47,9 @@ export function requireAuthApi(): MiddlewareHandler<Env> {
     }
 
     try {
-      const session = await c.var.auth.api.getSession({ headers: c.req.raw.headers });
+      const session = await c.var.auth.api.getSession({
+        headers: c.req.raw.headers,
+      });
 
       if (!session?.user) {
         return c.json({ error: "Unauthorized" }, 401);

package/src/routes/api/posts.ts

@@ -23,7 +23,7 @@ postsApiRoutes.get("/", async (c) => {
   const posts = await c.var.services.posts.list({
     type,
     visibility: visibility ? [visibility] : ["featured", "quiet"],
-    cursor: cursor ? sqid.decode(cursor) ?? undefined : undefined,
+    cursor: cursor ? (sqid.decode(cursor) ?? undefined) : undefined,
     limit,
   });
 
@@ -32,8 +32,9 @@ postsApiRoutes.get("/", async (c) => {
       ...p,
       sqid: sqid.encode(p.id),
     })),
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Array length check guarantees element exists
-    nextCursor: posts.length === limit ? sqid.encode(posts[posts.length - 1]!.id) : null,
+
+    nextCursor:
+      posts.length === limit ? sqid.encode(posts[posts.length - 1]!.id) : null,
   });
 });
 
@@ -50,7 +51,6 @@ postsApiRoutes.get("/:id", async (c) => {
 
 // Create post (requires auth)
 postsApiRoutes.post("/", requireAuthApi(), async (c) => {
-
   const rawBody = await c.req.json();
 
   // Validate request body
@@ -58,7 +58,7 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
   if (!parseResult.success) {
     return c.json(
       { error: "Validation failed", details: parseResult.error.flatten() },
-      400
+      400,
     );
   }
 
@@ -72,7 +72,9 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
     sourceUrl: body.sourceUrl || undefined,
     sourceName: body.sourceName,
     path: body.path || undefined,
-    replyToId: body.replyToId ? sqid.decode(body.replyToId) ?? undefined : undefined,
+    replyToId: body.replyToId
+      ? (sqid.decode(body.replyToId) ?? undefined)
+      : undefined,
     publishedAt: body.publishedAt,
   });
 
@@ -81,7 +83,6 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
 
 // Update post (requires auth)
 postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
-
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.json({ error: "Invalid ID" }, 400);
 
@@ -92,7 +93,7 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
   if (!parseResult.success) {
     return c.json(
       { error: "Validation failed", details: parseResult.error.flatten() },
-      400
+      400,
     );
   }
 
@@ -116,7 +117,6 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
 
 // Delete post (requires auth)
 postsApiRoutes.delete("/:id", requireAuthApi(), async (c) => {
-
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.json({ error: "Invalid ID" }, 400);
 

package/src/routes/api/upload.ts

@@ -24,9 +24,16 @@ uploadApiRoutes.use("*", requireAuthApi());
  * Render a media card HTML string for SSE response
  */
 function renderMediaCard(
-  media: { id: string; r2Key: string; mimeType: string; originalName: string; alt: string | null; size: number },
+  media: {
+    id: string;
+    r2Key: string;
+    mimeType: string;
+    originalName: string;
+    alt: string | null;
+    size: number;
+  },
   r2PublicUrl?: string,
-  imageTransformUrl?: string
+  imageTransformUrl?: string,
 ): string {
   const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
   const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
@@ -54,7 +61,11 @@ function renderMediaCard(
             loading="lazy"
           />
         </button>
-        <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+        <a
+          href="/dash/media/${media.id}"
+          class="block mt-2 text-xs truncate hover:underline"
+          title="${media.originalName}"
+        >
           ${media.originalName}
         </a>
         <div class="text-xs text-muted-foreground">${sizeStr}</div>
@@ -68,11 +79,17 @@ function renderMediaCard(
         href="/dash/media/${media.id}"
         class="block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary"
       >
-        <div class="w-full h-full flex items-center justify-center text-muted-foreground">
+        <div
+          class="w-full h-full flex items-center justify-center text-muted-foreground"
+        >
           <span class="text-xs">${media.mimeType}</span>
         </div>
       </a>
-      <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+      <a
+        href="/dash/media/${media.id}"
+        class="block mt-2 text-xs truncate hover:underline"
+        title="${media.originalName}"
+      >
         ${media.originalName}
       </a>
       <div class="text-xs text-muted-foreground">${sizeStr}</div>
@@ -89,7 +106,9 @@ function formatSize(bytes: number): string {
 /**
  * Check if request wants SSE response (from Datastar)
  */
-function wantsSSE(c: { req: { header: (name: string) => string | undefined } }): boolean {
+function wantsSSE(c: {
+  req: { header: (name: string) => string | undefined };
+}): boolean {
   const accept = c.req.header("accept") || "";
   return accept.includes("text/event-stream");
 }
@@ -99,7 +118,9 @@ uploadApiRoutes.post("/", async (c) => {
   if (!c.env.R2) {
     if (wantsSSE(c)) {
       return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "R2 storage not configured" });
+        await stream.patchSignals({
+          _uploadError: "R2 storage not configured",
+        });
       });
     }
     return c.json({ error: "R2 storage not configured" }, 500);
@@ -118,7 +139,13 @@ uploadApiRoutes.post("/", async (c) => {
   }
 
   // Validate file type
-  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+  const allowedTypes = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/svg+xml",
+  ];
   if (!allowedTypes.includes(file.type)) {
     if (wantsSSE(c)) {
       return sse(c, async (stream) => {
@@ -133,7 +160,9 @@ uploadApiRoutes.post("/", async (c) => {
   if (file.size > maxSize) {
     if (wantsSSE(c)) {
       return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "File too large (max 10MB)" });
+        await stream.patchSignals({
+          _uploadError: "File too large (max 10MB)",
+        });
       });
     }
     return c.json({ error: "File too large (max 10MB)" }, 400);
@@ -168,7 +197,7 @@ uploadApiRoutes.post("/", async (c) => {
       const cardHtml = renderMediaCard(
         media,
         c.env.R2_PUBLIC_URL,
-        c.env.IMAGE_TRANSFORM_URL
+        c.env.IMAGE_TRANSFORM_URL,
       );
 
       return sse(c, async (stream) => {