@sigx/server-renderer 0.1.3 → 0.1.5

package/dist/server/stream.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Streaming SSR renderer with hydration markers
+ */
+import { JSXElement } from '@sigx/runtime-core';
+import { SSRContext } from './context.js';
+/**
+ * Render JSX element to a ReadableStream with streaming async support
+ */
+export declare function renderToStream(element: JSXElement, context?: SSRContext): ReadableStream<string>;
+/**
+ * Streaming callbacks interface
+ */
+export interface StreamCallbacks {
+    /** Called when the initial shell (synchronous content) is ready */
+    onShellReady: (html: string) => void;
+    /** Called for each async chunk (replacement scripts, hydration data) */
+    onAsyncChunk: (chunk: string) => void;
+    /** Called when all streaming is complete */
+    onComplete: () => void;
+    /** Called on error */
+    onError: (error: Error) => void;
+}
+/**
+ * Render with callbacks for fine-grained streaming control.
+ * This allows the server to inject scripts between shell and async content.
+ */
+export declare function renderToStreamWithCallbacks(element: JSXElement, callbacks: StreamCallbacks, context?: SSRContext): Promise<void>;
+/**
+ * Render JSX element to string (convenience wrapper around stream)
+ * For renderToString, we wait for all async components to complete,
+ * then include the replacement scripts inline so the final HTML is complete.
+ */
+export declare function renderToString(element: JSXElement, context?: SSRContext): Promise<string>;
+//# sourceMappingURL=stream.d.ts.map

package/dist/server/stream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream.d.ts","sourceRoot":"","sources":["../../src/server/stream.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAGH,UAAU,EAOb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAA0E,MAAM,cAAc,CAAC;AA8clH;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CA8DhG;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,mEAAmE;IACnE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wEAAwE;IACxE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,sBAAsB;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAsB,2BAA2B,CAC7C,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,eAAe,EAC1B,OAAO,CAAC,EAAE,UAAU,GACrB,OAAO,CAAC,IAAI,CAAC,CA4Ef;AAED;;;;GAIG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CA+C/F"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sigx/server-renderer",
-  "version": "0.1.3",
-  "description": "Server-side renderer for SignalX",
+  "version": "0.1.5",
+  "description": "Server-side rendering and client hydration for SigX",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -9,17 +9,31 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server/index.js",
+      "types": "./dist/server/index.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts"
+    },
+    "./jsx": {
+      "types": "./src/jsx.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/jsx.d.ts"
   ],
   "keywords": [
     "sigx",
     "ssr",
     "server-side-rendering",
     "server",
-    "renderer"
+    "renderer",
+    "hydration",
+    "islands"
   ],
   "author": "Andreas Ekdahl",
   "license": "MIT",
@@ -33,8 +47,9 @@
     "url": "https://github.com/signalxjs/core/issues"
   },
   "dependencies": {
-    "@sigx/runtime-core": "^0.1.3",
-    "@sigx/reactivity": "^0.1.3"
+    "@sigx/runtime-core": "^0.1.5",
+    "@sigx/reactivity": "^0.1.5",
+    "@sigx/runtime-dom": "^0.1.5"
   },
   "devDependencies": {
     "rolldown": "^1.0.0-beta.52",

package/src/jsx.d.ts

@@ -0,0 +1,62 @@
+/**
+ * JSX type augmentation for SSR client directives.
+ * 
+ * Import this module to enable client:* directive types in your JSX.
+ * These directives control selective hydration behavior.
+ * 
+ * Usage:
+ * ```tsx
+ * import '@sigx/server-renderer/jsx';
+ * 
+ * <Counter client:visible />
+ * <HeavyWidget client:idle />
+ * <Modal client:load />
+ * <Sidebar client:media="(min-width: 768px)" />
+ * <ClientOnlyMap client:only />
+ * ```
+ */
+
+/**
+ * Client hydration directive props
+ */
+export interface ClientDirectives {
+    /**
+     * Hydrate this component immediately when the page loads.
+     * Use for critical interactive components above the fold.
+     */
+    'client:load'?: boolean;
+
+    /**
+     * Hydrate this component during browser idle time (requestIdleCallback).
+     * Use for non-critical components that don't need immediate interactivity.
+     */
+    'client:idle'?: boolean;
+
+    /**
+     * Hydrate this component when it enters the viewport (IntersectionObserver).
+     * Use for below-the-fold components to improve initial load performance.
+     */
+    'client:visible'?: boolean;
+
+    /**
+     * Hydrate this component when the media query matches.
+     * Pass the media query string as the value.
+     * @example <Sidebar client:media="(min-width: 768px)" />
+     */
+    'client:media'?: string;
+
+    /**
+     * Skip server rendering entirely; only render on client.
+     * Use for components that cannot run on the server (e.g., use browser APIs).
+     * A placeholder will be rendered on the server.
+     */
+    'client:only'?: boolean;
+}
+
+// Augment the component attribute extensions in runtime-core
+// This adds client directives to all components using the pluggable type system
+declare module '@sigx/runtime-core' {
+    interface ComponentAttributeExtensions extends ClientDirectives { }
+}
+
+export { };