npm - @cloudwerk/ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@cloudwerk/ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -75,7 +75,7 @@ interface HtmlOptions {
     headers?: Record<string, string>;
 }
 /**
- * Options for streaming render.
+ * Options for streaming render (loading-swap pattern).
  */
 interface StreamRenderOptions {
     /**
@@ -89,6 +89,29 @@ interface StreamRenderOptions {
      */
     headers?: Record<string, string>;
 }
+/**
+ * Options for native progressive streaming render with Suspense boundaries.
+ *
+ * This is used by renderToStream() which uses Hono's renderToReadableStream
+ * for native progressive streaming with Suspense support.
+ */
+interface RenderToStreamOptions {
+    /**
+     * HTTP status code for the response.
+     * @default 200
+     */
+    status?: number;
+    /**
+     * Additional response headers.
+     * These are merged with the default Content-Type header.
+     */
+    headers?: Record<string, string>;
+    /**
+     * Whether to include the <!DOCTYPE html> declaration.
+     * @default true
+     */
+    doctype?: boolean;
+}
 /**
  * Props for components that receive children.
  *
@@ -202,7 +225,8 @@ declare function _resetRenderers(): void;
  * - Automatic doctype handling
  * - Proper Content-Type headers
  *
- * Note: Streaming support via renderToReadableStream will be added in issue #38.
+ * Native progressive streaming is available via renderToStream() using Hono's
+ * renderToReadableStream for Suspense boundary support.
  */
 declare const honoJsxRenderer: Renderer;
 /**
@@ -232,6 +256,46 @@ declare const honoJsxRenderer: Renderer;
  * return renderStream(loadingElement, contentPromise)
  */
 declare function renderStream(loadingElement: unknown, contentPromise: Promise<unknown>, options?: StreamRenderOptions): Response;
+/**
+ * Render a JSX element to a streaming Response using native progressive streaming.
+ *
+ * This uses Hono's renderToReadableStream for native support of React-style
+ * Suspense boundaries. Content inside Suspense components will be progressively
+ * streamed as their async content resolves.
+ *
+ * Unlike renderStream() which uses a loading-swap pattern, this function
+ * provides true progressive streaming where:
+ * - The initial shell is sent immediately
+ * - Suspense fallbacks are shown while async content loads
+ * - Async content is streamed in-place as it resolves
+ * - No JavaScript is required for the initial render
+ *
+ * @param element - Hono JSX element to render (may contain Suspense boundaries)
+ * @param options - Render options
+ * @returns Promise resolving to Response with streaming HTML content
+ *
+ * @example
+ * // In a route handler
+ * import { Suspense } from 'hono/jsx/streaming'
+ *
+ * function Page() {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <h1>Dashboard</h1>
+ *         <Suspense fallback={<p>Loading stats...</p>}>
+ *           <AsyncStats />
+ *         </Suspense>
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ *
+ * export function GET() {
+ *   return renderToStream(<Page />)
+ * }
+ */
+declare function renderToStream(element: unknown, options?: RenderToStreamOptions): Promise<Response>;
 /**
  * @cloudwerk/ui
@@ -315,4 +379,4 @@ declare function html(content: string, options?: HtmlOptions): Response;
  */
 declare function hydrate(element: unknown, root: Element): void;
-export { type HtmlOptions, type PropsWithChildren, type RenderOptions, type Renderer, type StreamRenderOptions, _resetRenderers, getActiveRenderer, getActiveRendererName, getAvailableRenderers, honoJsxRenderer, html, hydrate, registerRenderer, render, renderStream, setActiveRenderer };
+export { type HtmlOptions, type PropsWithChildren, type RenderOptions, type RenderToStreamOptions, type Renderer, type StreamRenderOptions, _resetRenderers, getActiveRenderer, getActiveRendererName, getAvailableRenderers, honoJsxRenderer, html, hydrate, registerRenderer, render, renderStream, renderToStream, setActiveRenderer };

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
 // src/renderers/hono-jsx.ts
+import { renderToReadableStream } from "hono/jsx/streaming";
 var honoJsxRenderer = {
   /**
    * Render a JSX element to an HTML Response.
@@ -102,6 +103,34 @@ function renderStream(loadingElement, contentPromise, options = {}) {
     }
   });
 }
+function prependDoctype(stream) {
+  const encoder = new TextEncoder();
+  const doctypeBytes = encoder.encode("<!DOCTYPE html>");
+  let doctypeSent = false;
+  return stream.pipeThrough(
+    new TransformStream({
+      transform(chunk, controller) {
+        if (!doctypeSent) {
+          controller.enqueue(doctypeBytes);
+          doctypeSent = true;
+        }
+        controller.enqueue(chunk);
+      }
+    })
+  );
+}
+async function renderToStream(element, options = {}) {
+  const { status = 200, headers = {}, doctype = true } = options;
+  const contentStream = renderToReadableStream(element);
+  const stream = doctype ? prependDoctype(contentStream) : contentStream;
+  return new Response(stream, {
+    status,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+      ...headers
+    }
+  });
+}
 // src/renderer.ts
 var renderers = {
@@ -166,5 +195,6 @@ export {
   registerRenderer,
   render,
   renderStream,
+  renderToStream,
   setActiveRenderer
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "UI rendering abstraction for Cloudwerk",
   "repository": {
     "type": "git",