@cloudwerk/ui 0.6.0 → 0.7.0

package/dist/chunk-C4MFDUV4.js

@@ -0,0 +1,27 @@
+// src/clientWrapper.tsx
+import { serializeProps, escapeHtmlAttribute } from "@cloudwerk/utils";
+import { jsx } from "hono/jsx/jsx-runtime";
+function createClientComponentWrapper(Component, meta) {
+  if (typeof window !== "undefined") {
+    return Component;
+  }
+  const { componentId, bundlePath } = meta;
+  return function WrappedClientComponent(props) {
+    const rendered = Component(props);
+    const serializedProps = serializeProps(props);
+    const escapedProps = escapeHtmlAttribute(serializedProps);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hydrate-id": componentId,
+        "data-hydrate-props": escapedProps,
+        "data-hydrate-bundle": bundlePath,
+        children: rendered
+      }
+    );
+  };
+}
+
+export {
+  createClientComponentWrapper
+};

package/dist/client.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @cloudwerk/ui - Client Component Wrapper
+ *
+ * Wraps client components with hydration metadata for server-side rendering.
+ * This wrapper is used by the esbuild plugin to transform imports of client components.
+ */
+/**
+ * Metadata for a wrapped client component.
+ */
+interface ClientComponentMeta {
+    /** Unique component ID for hydration */
+    componentId: string;
+    /** Path to the client bundle */
+    bundlePath: string;
+}
+/**
+ * Creates a wrapper component that adds hydration metadata.
+ *
+ * The wrapper:
+ * 1. Server-renders the original component
+ * 2. Wraps the output with a div containing hydration attributes
+ * 3. The client-side hydration script uses these attributes to hydrate
+ *
+ * @param Component - The original client component
+ * @param meta - Component metadata for hydration
+ * @returns Wrapped component that includes hydration metadata
+ *
+ * @example
+ * ```tsx
+ * // Original import:
+ * import Counter from './components/counter'
+ *
+ * // Transformed to:
+ * import _Counter from './components/counter'
+ * const Counter = createClientComponentWrapper(_Counter, {
+ *   componentId: 'components_counter',
+ *   bundlePath: '/__cloudwerk/components_counter.js'
+ * })
+ * ```
+ */
+declare function createClientComponentWrapper<P extends Record<string, unknown>>(Component: (props: P) => unknown, meta: ClientComponentMeta): (props: P) => unknown;
+/**
+ * Type for a client component wrapper function.
+ */
+type ClientComponentWrapper = typeof createClientComponentWrapper;
+
+export { type ClientComponentMeta, type ClientComponentWrapper, createClientComponentWrapper };

package/dist/client.js

@@ -0,0 +1,6 @@
+import {
+  createClientComponentWrapper
+} from "./chunk-C4MFDUV4.js";
+export {
+  createClientComponentWrapper
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { HydrationManifest } from '@cloudwerk/core';
+import { HydrationManifest } from '@cloudwerk/core/build';
+export { ClientComponentMeta, ClientComponentWrapper, createClientComponentWrapper } from './client.js';
 
 /**
  * @cloudwerk/ui - Type Definitions
@@ -212,9 +213,12 @@ declare function generateHydrationScript(manifest: HydrationManifest, options?:
  * This adds modulepreload hints for better performance.
  *
  * @param manifest - Hydration manifest with component metadata
+ * @param options - Options for generating hints
  * @returns Link tags for modulepreload
  */
-declare function generatePreloadHints(manifest: HydrationManifest): string;
+declare function generatePreloadHints(manifest: HydrationManifest, options?: {
+    hydrationEndpoint?: string;
+}): string;
 /**
  * Generate the hydration runtime module for Hono JSX.
  *

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  createClientComponentWrapper
+} from "./chunk-C4MFDUV4.js";
+
 // src/renderers/hono-jsx.ts
 import { renderToReadableStream } from "hono/jsx/streaming";
 var honoJsxRenderer = {
@@ -205,7 +209,7 @@ function _resetRenderers() {
 }
 
 // src/hydration.ts
-import { serializeProps } from "@cloudwerk/core";
+import { serializeProps } from "@cloudwerk/core/build";
 function wrapForHydration(html2, options) {
   const { componentId, props, wrapperTag = "div" } = options;
   const serializedProps = serializeProps(props);
@@ -234,6 +238,10 @@ function generateHydrationScript(manifest, options = {}) {
   const elements = document.querySelectorAll('[data-hydrate-id]');
   if (elements.length === 0) return;
 
+  // Import the runtime which includes jsx function and render
+  const runtime = await import('${hydrationEndpoint}/runtime.js');
+  const { render, jsx } = runtime;
+
   // Cache for loaded modules
   const moduleCache = new Map();
 
@@ -271,12 +279,13 @@ function generateHydrationScript(manifest, options = {}) {
         continue;
       }
 
-      // Import hono/jsx/dom for hydration
-      const { render } = await import('${hydrationEndpoint}/runtime.js');
+      // Create a proper JSX element using the jsx runtime function
+      // This allows hono/jsx/dom to manage the component lifecycle and re-renders
+      const element = jsx(Component, props);
 
       // Hydrate the component using hono/jsx/dom render
       // This safely replaces content using virtual DOM diffing
-      render(Component(props), el);
+      render(element, el);
 
       // Remove hydration attributes after successful hydration
       el.removeAttribute('data-hydrate-id');
@@ -290,11 +299,21 @@ function generateHydrationScript(manifest, options = {}) {
 `.trim();
   return script;
 }
-function generatePreloadHints(manifest) {
+function generatePreloadHints(manifest, options = {}) {
+  const { hydrationEndpoint = "/__cloudwerk" } = options;
   if (manifest.components.size === 0) {
     return "";
   }
   const hints = [];
+  const importMap = {
+    imports: {
+      "hono/jsx/dom": `${hydrationEndpoint}/runtime.js`,
+      "hono/jsx/dom/jsx-runtime": `${hydrationEndpoint}/runtime.js`,
+      "hono/jsx/dom/jsx-dev-runtime": `${hydrationEndpoint}/runtime.js`
+    }
+  };
+  hints.push(`<script type="importmap">${JSON.stringify(importMap)}</script>`);
+  hints.push(`<link rel="modulepreload" href="${hydrationEndpoint}/runtime.js">`);
   for (const meta of manifest.components.values()) {
     hints.push(`<link rel="modulepreload" href="${meta.bundlePath}">`);
   }
@@ -476,6 +495,7 @@ function hydrate(element, root) {
 }
 export {
   _resetRenderers,
+  createClientComponentWrapper,
   generateHydrationRuntime,
   generateHydrationScript,
   generatePreloadHints,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "UI rendering abstraction for Cloudwerk",
   "repository": {
     "type": "git",
@@ -12,13 +12,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@cloudwerk/core": "0.6.0"
+    "@cloudwerk/utils": "0.6.0",
+    "@cloudwerk/core": "0.7.0"
   },
   "peerDependencies": {
     "hono": "^4.0.0",