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

@cloudwerk/ui 0.1.0 → 0.3.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

@@ -74,6 +74,21 @@ interface HtmlOptions {
      */
     headers?: Record<string, string>;
 }
+/**
+ * Options for streaming render.
+ */
+interface StreamRenderOptions {
+    /**
+     * HTTP status code for the response.
+     * @default 200
+     */
+    status?: number;
+    /**
+     * Additional response headers.
+     * These are merged with the default Content-Type and Transfer-Encoding headers.
+     */
+    headers?: Record<string, string>;
+}
 /**
  * Props for components that receive children.
  *
@@ -162,6 +177,12 @@ declare function registerRenderer(name: string, renderer: Renderer): void;
  * // ['hono-jsx']
  */
 declare function getAvailableRenderers(): string[];
+/**
+ * Reset renderers to default state.
+ *
+ * @internal Used for testing only - ensures test isolation.
+ */
+declare function _resetRenderers(): void;
 /**
  * @cloudwerk/ui - Hono JSX Renderer
@@ -184,6 +205,33 @@ declare function getAvailableRenderers(): string[];
  * Note: Streaming support via renderToReadableStream will be added in issue #38.
  */
 declare const honoJsxRenderer: Renderer;
+/**
+ * Create a streaming HTML Response that sends loading UI immediately,
+ * then streams the final content when the content promise resolves.
+ *
+ * This uses a chunked transfer encoding to send HTML in two parts:
+ * 1. Loading UI (sent immediately)
+ * 2. Final content with script to replace loading UI (sent when ready)
+ *
+ * Note: The innerHTML assignment in the client script is safe because we only
+ * use server-rendered content that we control. No user input is directly
+ * inserted into the HTML.
+ *
+ * @param loadingElement - Loading UI to show immediately (JSX element)
+ * @param contentPromise - Promise that resolves to final content (JSX element)
+ * @param options - Streaming render options
+ * @returns Response object with streaming HTML content
+ *
+ * @example
+ * const loadingElement = <Loading params={{}} searchParams={{}} pathname="/dashboard" />
+ * const contentPromise = (async () => {
+ *   const data = await loader()
+ *   return <Page {...data} />
+ * })()
+ *
+ * return renderStream(loadingElement, contentPromise)
+ */
+declare function renderStream(loadingElement: unknown, contentPromise: Promise<unknown>, options?: StreamRenderOptions): Response;
 /**
  * @cloudwerk/ui
@@ -267,4 +315,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, getActiveRenderer, getActiveRendererName, getAvailableRenderers, honoJsxRenderer, html, hydrate, registerRenderer, render, setActiveRenderer };
+export { type HtmlOptions, type PropsWithChildren, type RenderOptions, type Renderer, type StreamRenderOptions, _resetRenderers, getActiveRenderer, getActiveRendererName, getAvailableRenderers, honoJsxRenderer, html, hydrate, registerRenderer, render, renderStream, setActiveRenderer };

package/dist/index.js CHANGED Viewed

@@ -58,6 +58,50 @@ var honoJsxRenderer = {
     );
   }
 };
+function renderStream(loadingElement, contentPromise, options = {}) {
+  const { status = 200, headers = {} } = options;
+  const stream = new ReadableStream({
+    async start(controller) {
+      const encoder = new TextEncoder();
+      try {
+        const loadingHtml = String(loadingElement);
+        const loadingWrapper = `<!DOCTYPE html><div id="__cloudwerk_loading">${loadingHtml}</div>`;
+        controller.enqueue(encoder.encode(loadingWrapper));
+        const finalElement = await contentPromise;
+        const finalHtml = String(finalElement);
+        const replacementScript = `
+<script>
+(function() {
+  var loading = document.getElementById('__cloudwerk_loading');
+  if (loading) {
+    var content = document.getElementById('__cloudwerk_content');
+    if (content) {
+      document.body.innerHTML = content.innerHTML;
+    }
+  }
+})();
+</script>
+<div id="__cloudwerk_content" style="display:none">${finalHtml}</div>
+`;
+        controller.enqueue(encoder.encode(replacementScript));
+        controller.close();
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorHtml = `<div style="color:red;padding:20px;">Error loading content: ${errorMessage}</div>`;
+        controller.enqueue(encoder.encode(errorHtml));
+        controller.close();
+      }
+    }
+  });
+  return new Response(stream, {
+    status,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+      "Transfer-Encoding": "chunked",
+      ...headers
+    }
+  });
+}
 // src/renderer.ts
 var renderers = {
@@ -91,6 +135,15 @@ function registerRenderer(name, renderer) {
 function getAvailableRenderers() {
   return Object.keys(renderers);
 }
+function _resetRenderers() {
+  for (const name of Object.keys(renderers)) {
+    if (name !== "hono-jsx") {
+      delete renderers[name];
+    }
+  }
+  activeRenderer = honoJsxRenderer;
+  activeRendererName = "hono-jsx";
+}
 // src/index.ts
 function render(element, options) {
@@ -103,6 +156,7 @@ function hydrate(element, root) {
   return getActiveRenderer().hydrate(element, root);
 }
 export {
+  _resetRenderers,
   getActiveRenderer,
   getActiveRendererName,
   getAvailableRenderers,
@@ -111,5 +165,6 @@ export {
   hydrate,
   registerRenderer,
   render,
+  renderStream,
   setActiveRenderer
 };

package/package.json CHANGED Viewed

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