@constela/server 12.0.2 → 14.0.0

package/README.md

@@ -201,6 +201,104 @@ Pass style presets via `RenderOptions.styles` for evaluation.
 .dark .shiki span { color: var(--shiki-dark); }
 ```
 
+## Streaming SSR
+
+Render to a ReadableStream for progressive HTML delivery:
+
+```typescript
+import { renderToStream, createHtmlTransformStream } from '@constela/server';
+
+// Render program to stream
+const contentStream = renderToStream(compiledProgram, {
+  flushStrategy: 'batched',
+}, {
+  route: { params: { id: '123' }, query: {}, path: '/posts/123' },
+  imports: { config: siteConfig },
+});
+
+// Wrap with HTML document structure
+const htmlStream = contentStream.pipeThrough(
+  createHtmlTransformStream({
+    title: 'My Page',
+    lang: 'en',
+    stylesheets: ['/styles.css'],
+    scripts: ['/client.js'],
+  })
+);
+
+// Use with Response (Edge/Workers)
+return new Response(htmlStream, {
+  headers: { 'Content-Type': 'text/html; charset=utf-8' },
+});
+```
+
+**Flush Strategies:**
+
+| Strategy | Description |
+|----------|-------------|
+| `immediate` | Flush each chunk as soon as it's ready |
+| `batched` | Flush when buffer exceeds 1KB threshold |
+| `manual` | Only flush at the end (for small pages) |
+
+**StreamingRenderOptions:**
+
+```typescript
+interface StreamingRenderOptions {
+  flushStrategy: 'immediate' | 'batched' | 'manual';
+}
+```
+
+### Abort Signal Support
+
+Cancel streaming when the client disconnects:
+
+```typescript
+const controller = new AbortController();
+
+const stream = renderToStream(program, { flushStrategy: 'batched' }, {
+  signal: controller.signal,
+});
+
+// Cancel on client disconnect
+request.signal.addEventListener('abort', () => {
+  controller.abort();
+});
+```
+
+## Suspense Boundaries
+
+Server-side suspense for async content:
+
+```json
+{
+  "view": {
+    "kind": "suspense",
+    "id": "user-data",
+    "fallback": {
+      "kind": "element",
+      "tag": "div",
+      "props": { "className": { "expr": "lit", "value": "skeleton" } },
+      "children": []
+    },
+    "content": {
+      "kind": "component",
+      "name": "UserProfile",
+      "props": { "user": { "expr": "data", "name": "user" } }
+    }
+  }
+}
+```
+
+Renders with markers for client-side hydration:
+
+```html
+<div data-suspense-id="user-data">
+  <!-- Fallback content first -->
+  <div class="skeleton"></div>
+</div>
+<!-- Resolved content follows -->
+```
+
 ## Security
 
 - **HTML Escaping** - All text output is escaped

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { CompiledProgram } from '@constela/compiler';
+import { StreamingRenderOptions } from '@constela/core';
 
 /**
  * SSR Renderer
@@ -9,7 +10,7 @@ import { CompiledProgram } from '@constela/compiler';
 /**
  * Style preset definition for SSR
  */
-interface StylePreset {
+interface StylePreset$1 {
     base: string;
     variants?: Record<string, Record<string, string>>;
     defaultVariants?: Record<string, string>;
@@ -27,7 +28,7 @@ interface RenderOptions {
         path?: string;
     };
     imports?: Record<string, unknown>;
-    styles?: Record<string, StylePreset>;
+    styles?: Record<string, StylePreset$1>;
     stateOverrides?: Record<string, unknown>;
     cookies?: Record<string, string>;
 }
@@ -40,4 +41,70 @@ interface RenderOptions {
  */
 declare function renderToString(program: CompiledProgram, options?: RenderOptions): Promise<string>;
 
-export { type RenderOptions, renderToString };
+/**
+ * Streaming SSR Renderer
+ *
+ * Renders CompiledProgram to a ReadableStream for Server-Side Rendering.
+ * Uses Web Streams API for Edge Runtime compatibility.
+ *
+ * Features:
+ * - Three flush strategies: immediate, batched, manual
+ * - Backpressure support via controller.desiredSize
+ * - AbortSignal support for cancellation
+ * - Suspense boundary support for async content
+ */
+
+/**
+ * Style preset definition for SSR
+ */
+interface StylePreset {
+    base: string;
+    variants?: Record<string, Record<string, string>>;
+    defaultVariants?: Record<string, string>;
+    compoundVariants?: Array<Record<string, string> & {
+        class: string;
+    }>;
+}
+/**
+ * Extended options for streaming render
+ */
+interface StreamRenderOptions {
+    route?: {
+        params?: Record<string, string>;
+        query?: Record<string, string>;
+        path?: string;
+    };
+    imports?: Record<string, unknown>;
+    styles?: Record<string, StylePreset>;
+    stateOverrides?: Record<string, unknown>;
+    cookies?: Record<string, string>;
+    signal?: AbortSignal;
+}
+/**
+ * Options for HTML transform stream
+ */
+interface HtmlTransformOptions {
+    title: string;
+    lang?: string;
+    meta?: Record<string, string>;
+    stylesheets?: string[];
+    scripts?: string[];
+}
+/**
+ * Renders a CompiledProgram to a ReadableStream.
+ *
+ * @param program - The compiled program to render
+ * @param streamOptions - Streaming options (flush strategy, etc.)
+ * @param options - Optional render options including route context
+ * @returns ReadableStream of HTML strings
+ */
+declare function renderToStream(program: CompiledProgram, streamOptions: StreamingRenderOptions, options?: StreamRenderOptions): ReadableStream<string>;
+/**
+ * Creates a TransformStream that wraps content with HTML document structure.
+ *
+ * @param options - HTML document options (title, meta, stylesheets, scripts)
+ * @returns TransformStream that wraps content with HTML structure
+ */
+declare function createHtmlTransformStream(options: HtmlTransformOptions): TransformStream<string, string>;
+
+export { type HtmlTransformOptions, type RenderOptions, type StreamRenderOptions, createHtmlTransformStream, renderToStream, renderToString };

package/dist/index.js

@@ -502,6 +502,9 @@ function evaluate(expr, ctx) {
     }
     case "call": {
       const callExpr = expr;
+      if (callExpr.target === null) {
+        return void 0;
+      }
       const target = evaluate(callExpr.target, ctx);
       if (target == null) return void 0;
       const args = callExpr.args?.map((arg) => {
@@ -682,6 +685,12 @@ async function renderNode(node, ctx) {
       return await renderPortal(node, ctx);
     case "localState":
       return await renderLocalState(node, ctx);
+    case "island":
+      return await renderIsland(node, ctx);
+    case "suspense":
+      return await renderNode(node.content, ctx);
+    case "errorBoundary":
+      return await renderNode(node.content, ctx);
     default: {
       const _exhaustiveCheck = node;
       throw new Error(`Unknown node kind: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -794,6 +803,34 @@ async function renderLocalState(node, ctx) {
   };
   return await renderNode(node.child, childCtx);
 }
+async function renderIsland(node, ctx) {
+  const islandStateValues = {};
+  if (node.state) {
+    for (const [name, field] of Object.entries(node.state)) {
+      islandStateValues[name] = field.initial;
+    }
+  }
+  const islandState = new Map(ctx.state);
+  for (const [name, value] of Object.entries(islandStateValues)) {
+    islandState.set(name, value);
+  }
+  const islandCtx = {
+    ...ctx,
+    state: islandState
+  };
+  const content = await renderNode(node.content, islandCtx);
+  const dataAttrs = [
+    `data-island-id="${escapeHtml(node.id)}"`,
+    `data-island-strategy="${escapeHtml(node.strategy)}"`
+  ];
+  if (node.strategyOptions) {
+    dataAttrs.push(`data-island-options="${escapeHtml(JSON.stringify(node.strategyOptions))}"`);
+  }
+  if (node.state) {
+    dataAttrs.push(`data-island-state="${escapeHtml(JSON.stringify(islandStateValues))}"`);
+  }
+  return `<div ${dataAttrs.join(" ")}>${content}</div>`;
+}
 async function renderToString(program, options) {
   const state = /* @__PURE__ */ new Map();
   for (const [name, field] of Object.entries(program.state)) {
@@ -820,6 +857,861 @@ async function renderToString(program, options) {
   };
   return await renderNode(program.view, ctx);
 }
+
+// src/streaming.ts
+import { isCookieInitialExpr as isCookieInitialExpr2 } from "@constela/core";
+var VOID_ELEMENTS2 = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var SAFE_ARRAY_METHODS2 = /* @__PURE__ */ new Set([
+  "length",
+  "at",
+  "includes",
+  "slice",
+  "indexOf",
+  "join",
+  "filter",
+  "map",
+  "find",
+  "findIndex",
+  "some",
+  "every"
+]);
+var SAFE_STRING_METHODS2 = /* @__PURE__ */ new Set([
+  "length",
+  "charAt",
+  "substring",
+  "slice",
+  "split",
+  "trim",
+  "toUpperCase",
+  "toLowerCase",
+  "replace",
+  "includes",
+  "startsWith",
+  "endsWith",
+  "indexOf"
+]);
+var SAFE_MATH_METHODS2 = /* @__PURE__ */ new Set([
+  "min",
+  "max",
+  "round",
+  "floor",
+  "ceil",
+  "abs",
+  "sqrt",
+  "pow",
+  "random",
+  "sin",
+  "cos",
+  "tan"
+]);
+var SAFE_DATE_STATIC_METHODS2 = /* @__PURE__ */ new Set(["now", "parse"]);
+var SAFE_DATE_INSTANCE_METHODS2 = /* @__PURE__ */ new Set([
+  "toISOString",
+  "toDateString",
+  "toTimeString",
+  "getTime",
+  "getFullYear",
+  "getMonth",
+  "getDate",
+  "getHours",
+  "getMinutes",
+  "getSeconds",
+  "getMilliseconds"
+]);
+var CHUNK_SIZE_THRESHOLD = 1024;
+function isEventHandler2(value) {
+  return typeof value === "object" && value !== null && "event" in value && "action" in value;
+}
+function createLambdaFunction2(lambda, ctx) {
+  return (item, index) => {
+    const lambdaLocals = {
+      ...ctx.locals,
+      [lambda.param]: item
+    };
+    if (lambda.index !== void 0) {
+      lambdaLocals[lambda.index] = index;
+    }
+    return evaluate2(lambda.body, { ...ctx, locals: lambdaLocals });
+  };
+}
+function callArrayMethod2(target, method, args, ctx, rawArgs) {
+  if (!SAFE_ARRAY_METHODS2.has(method)) return void 0;
+  switch (method) {
+    case "length":
+      return target.length;
+    case "at": {
+      const index = typeof args[0] === "number" ? args[0] : 0;
+      return target.at(index);
+    }
+    case "includes": {
+      const searchElement = args[0];
+      const fromIndex = typeof args[1] === "number" ? args[1] : void 0;
+      return target.includes(searchElement, fromIndex);
+    }
+    case "slice": {
+      const start = typeof args[0] === "number" ? args[0] : void 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.slice(start, end);
+    }
+    case "indexOf": {
+      const searchElement = args[0];
+      const fromIndex = typeof args[1] === "number" ? args[1] : void 0;
+      return target.indexOf(searchElement, fromIndex);
+    }
+    case "join": {
+      const separator = typeof args[0] === "string" ? args[0] : ",";
+      return target.join(separator);
+    }
+    case "filter": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.filter((item, index) => !!fn(item, index));
+    }
+    case "map": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.map((item, index) => fn(item, index));
+    }
+    case "find": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.find((item, index) => !!fn(item, index));
+    }
+    case "findIndex": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.findIndex((item, index) => !!fn(item, index));
+    }
+    case "some": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.some((item, index) => !!fn(item, index));
+    }
+    case "every": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction2(lambdaExpr, ctx);
+      return target.every((item, index) => !!fn(item, index));
+    }
+    default:
+      return void 0;
+  }
+}
+function callStringMethod2(target, method, args) {
+  if (!SAFE_STRING_METHODS2.has(method)) return void 0;
+  switch (method) {
+    case "length":
+      return target.length;
+    case "charAt": {
+      const index = typeof args[0] === "number" ? args[0] : 0;
+      return target.charAt(index);
+    }
+    case "substring": {
+      const start = typeof args[0] === "number" ? args[0] : 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.substring(start, end);
+    }
+    case "slice": {
+      const start = typeof args[0] === "number" ? args[0] : void 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.slice(start, end);
+    }
+    case "split": {
+      const separator = typeof args[0] === "string" ? args[0] : "";
+      return target.split(separator);
+    }
+    case "trim":
+      return target.trim();
+    case "toUpperCase":
+      return target.toUpperCase();
+    case "toLowerCase":
+      return target.toLowerCase();
+    case "replace": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const replace = typeof args[1] === "string" ? args[1] : "";
+      return target.replace(search, replace);
+    }
+    case "includes": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.includes(search, position);
+    }
+    case "startsWith": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.startsWith(search, position);
+    }
+    case "endsWith": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const length = typeof args[1] === "number" ? args[1] : void 0;
+      return target.endsWith(search, length);
+    }
+    case "indexOf": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.indexOf(search, position);
+    }
+    default:
+      return void 0;
+  }
+}
+function callMathMethod2(method, args) {
+  if (!SAFE_MATH_METHODS2.has(method)) return void 0;
+  const numbers = args.filter((a) => typeof a === "number");
+  switch (method) {
+    case "min":
+      return numbers.length > 0 ? Math.min(...numbers) : void 0;
+    case "max":
+      return numbers.length > 0 ? Math.max(...numbers) : void 0;
+    case "round":
+      return numbers[0] !== void 0 ? Math.round(numbers[0]) : void 0;
+    case "floor":
+      return numbers[0] !== void 0 ? Math.floor(numbers[0]) : void 0;
+    case "ceil":
+      return numbers[0] !== void 0 ? Math.ceil(numbers[0]) : void 0;
+    case "abs":
+      return numbers[0] !== void 0 ? Math.abs(numbers[0]) : void 0;
+    case "sqrt":
+      return numbers[0] !== void 0 ? Math.sqrt(numbers[0]) : void 0;
+    case "pow":
+      return numbers[0] !== void 0 && numbers[1] !== void 0 ? Math.pow(numbers[0], numbers[1]) : void 0;
+    case "random":
+      return Math.random();
+    case "sin":
+      return numbers[0] !== void 0 ? Math.sin(numbers[0]) : void 0;
+    case "cos":
+      return numbers[0] !== void 0 ? Math.cos(numbers[0]) : void 0;
+    case "tan":
+      return numbers[0] !== void 0 ? Math.tan(numbers[0]) : void 0;
+    default:
+      return void 0;
+  }
+}
+function callDateStaticMethod2(method, args) {
+  if (!SAFE_DATE_STATIC_METHODS2.has(method)) return void 0;
+  switch (method) {
+    case "now":
+      return Date.now();
+    case "parse": {
+      const dateString = args[0];
+      return typeof dateString === "string" ? Date.parse(dateString) : void 0;
+    }
+    default:
+      return void 0;
+  }
+}
+function callDateInstanceMethod2(target, method) {
+  if (!SAFE_DATE_INSTANCE_METHODS2.has(method)) return void 0;
+  switch (method) {
+    case "toISOString":
+      return target.toISOString();
+    case "toDateString":
+      return target.toDateString();
+    case "toTimeString":
+      return target.toTimeString();
+    case "getTime":
+      return target.getTime();
+    case "getFullYear":
+      return target.getFullYear();
+    case "getMonth":
+      return target.getMonth();
+    case "getDate":
+      return target.getDate();
+    case "getHours":
+      return target.getHours();
+    case "getMinutes":
+      return target.getMinutes();
+    case "getSeconds":
+      return target.getSeconds();
+    case "getMilliseconds":
+      return target.getMilliseconds();
+    default:
+      return void 0;
+  }
+}
+function evaluate2(expr, ctx) {
+  switch (expr.expr) {
+    case "lit":
+      return expr.value;
+    case "state":
+      return ctx.state.get(expr.name);
+    case "var": {
+      let varName = expr.name;
+      let pathParts = [];
+      if (varName.includes(".")) {
+        const parts = varName.split(".");
+        varName = parts[0];
+        pathParts = parts.slice(1);
+      }
+      if (expr.path) {
+        pathParts = pathParts.concat(expr.path.split("."));
+      }
+      const forbiddenKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+      for (const part of pathParts) {
+        if (forbiddenKeys.has(part)) {
+          return void 0;
+        }
+      }
+      let value = ctx.locals[varName];
+      for (const part of pathParts) {
+        if (value == null) break;
+        value = value[part];
+      }
+      return value;
+    }
+    case "bin":
+      return evaluateBinary2(expr.op, expr.left, expr.right, ctx);
+    case "not":
+      return !evaluate2(expr.operand, ctx);
+    case "cond":
+      return evaluate2(expr.if, ctx) ? evaluate2(expr.then, ctx) : evaluate2(expr.else, ctx);
+    case "get": {
+      const baseValue = evaluate2(expr.base, ctx);
+      if (baseValue == null) return void 0;
+      const pathParts = expr.path.split(".");
+      const forbiddenKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+      let value = baseValue;
+      for (const part of pathParts) {
+        if (forbiddenKeys.has(part)) return void 0;
+        if (value == null) return void 0;
+        value = value[part];
+      }
+      return value;
+    }
+    case "route": {
+      const source = expr.source ?? "param";
+      const routeCtx = ctx.route;
+      if (!routeCtx) return "";
+      switch (source) {
+        case "param":
+          return routeCtx.params[expr.name] ?? "";
+        case "query":
+          return routeCtx.query[expr.name] ?? "";
+        case "path":
+          return routeCtx.path;
+        default:
+          return "";
+      }
+    }
+    case "import": {
+      const importData = ctx.imports?.[expr.name];
+      if (importData === void 0) return void 0;
+      if (expr.path) {
+        return getNestedValue2(importData, expr.path);
+      }
+      return importData;
+    }
+    case "data": {
+      const dataValue = ctx.imports?.[expr.name];
+      if (dataValue === void 0) return void 0;
+      if (expr.path) {
+        return getNestedValue2(dataValue, expr.path);
+      }
+      return dataValue;
+    }
+    case "ref":
+      return null;
+    case "index": {
+      const forbiddenKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+      const base = evaluate2(expr.base, ctx);
+      const key = evaluate2(expr.key, ctx);
+      if (base == null || key == null) return void 0;
+      if (typeof key === "string" && forbiddenKeys.has(key)) return void 0;
+      return base[key];
+    }
+    case "param": {
+      return void 0;
+    }
+    case "style": {
+      return evaluateStyle2(expr, ctx);
+    }
+    case "concat": {
+      return expr.items.map((item) => {
+        const val = evaluate2(item, ctx);
+        return val == null ? "" : String(val);
+      }).join("");
+    }
+    case "validity": {
+      return false;
+    }
+    case "call": {
+      const callExpr = expr;
+      if (callExpr.target === null) {
+        return void 0;
+      }
+      const target = evaluate2(callExpr.target, ctx);
+      if (target == null) return void 0;
+      const args = callExpr.args?.map((arg) => {
+        if (arg.expr === "lambda") return arg;
+        return evaluate2(arg, ctx);
+      }) ?? [];
+      if (Array.isArray(target)) {
+        return callArrayMethod2(target, callExpr.method, args, ctx, callExpr.args);
+      }
+      if (typeof target === "string") {
+        return callStringMethod2(target, callExpr.method, args);
+      }
+      if (target === Math) {
+        return callMathMethod2(callExpr.method, args);
+      }
+      if (target === Date) {
+        return callDateStaticMethod2(callExpr.method, args);
+      }
+      if (target instanceof Date) {
+        return callDateInstanceMethod2(target, callExpr.method);
+      }
+      return void 0;
+    }
+    case "lambda": {
+      return void 0;
+    }
+    case "array": {
+      const arrayExpr = expr;
+      return arrayExpr.elements.map((elem) => evaluate2(elem, ctx));
+    }
+    default: {
+      return void 0;
+    }
+  }
+}
+function getNestedValue2(obj, path) {
+  const forbiddenKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+  const parts = path.split(".");
+  let value = obj;
+  for (const part of parts) {
+    if (forbiddenKeys.has(part)) {
+      return void 0;
+    }
+    if (value == null) {
+      return void 0;
+    }
+    if (Array.isArray(value)) {
+      const index = Number(part);
+      if (Number.isInteger(index) && index >= 0) {
+        value = value[index];
+      } else {
+        value = value[part];
+      }
+    } else if (typeof value === "object") {
+      value = value[part];
+    } else {
+      return void 0;
+    }
+  }
+  return value;
+}
+function evaluateBinary2(op, left, right, ctx) {
+  if (op === "&&") {
+    const leftVal2 = evaluate2(left, ctx);
+    if (!leftVal2) return leftVal2;
+    return evaluate2(right, ctx);
+  }
+  if (op === "||") {
+    const leftVal2 = evaluate2(left, ctx);
+    if (leftVal2) return leftVal2;
+    return evaluate2(right, ctx);
+  }
+  const leftVal = evaluate2(left, ctx);
+  const rightVal = evaluate2(right, ctx);
+  switch (op) {
+    case "+":
+      if (typeof leftVal === "number" && typeof rightVal === "number") {
+        return leftVal + rightVal;
+      }
+      return String(leftVal) + String(rightVal);
+    case "-":
+      return (typeof leftVal === "number" ? leftVal : 0) - (typeof rightVal === "number" ? rightVal : 0);
+    case "*":
+      return (typeof leftVal === "number" ? leftVal : 0) * (typeof rightVal === "number" ? rightVal : 0);
+    case "/": {
+      const dividend = typeof leftVal === "number" ? leftVal : 0;
+      const divisor = typeof rightVal === "number" ? rightVal : 0;
+      if (divisor === 0) {
+        return dividend === 0 ? NaN : dividend > 0 ? Infinity : -Infinity;
+      }
+      return dividend / divisor;
+    }
+    case "==":
+      return leftVal === rightVal;
+    case "!=":
+      return leftVal !== rightVal;
+    case "<":
+      if (typeof leftVal === "number" && typeof rightVal === "number") {
+        return leftVal < rightVal;
+      }
+      return String(leftVal) < String(rightVal);
+    case "<=":
+      if (typeof leftVal === "number" && typeof rightVal === "number") {
+        return leftVal <= rightVal;
+      }
+      return String(leftVal) <= String(rightVal);
+    case ">":
+      if (typeof leftVal === "number" && typeof rightVal === "number") {
+        return leftVal > rightVal;
+      }
+      return String(leftVal) > String(rightVal);
+    case ">=":
+      if (typeof leftVal === "number" && typeof rightVal === "number") {
+        return leftVal >= rightVal;
+      }
+      return String(leftVal) >= String(rightVal);
+    default:
+      throw new Error("Unknown binary operator: " + op);
+  }
+}
+function evaluateStyle2(expr, ctx) {
+  const preset = ctx.styles?.[expr.name];
+  if (!preset) return "";
+  let classes = preset.base;
+  if (preset.variants) {
+    for (const variantKey of Object.keys(preset.variants)) {
+      let variantValueStr = null;
+      if (expr.variants?.[variantKey]) {
+        let variantValue;
+        try {
+          variantValue = evaluate2(expr.variants[variantKey], ctx);
+        } catch {
+          continue;
+        }
+        if (variantValue != null) {
+          variantValueStr = String(variantValue);
+        }
+      } else if (preset.defaultVariants?.[variantKey] !== void 0) {
+        variantValueStr = preset.defaultVariants[variantKey];
+      }
+      if (variantValueStr !== null) {
+        const variantClasses = preset.variants[variantKey]?.[variantValueStr];
+        if (variantClasses) {
+          classes += " " + variantClasses;
+        }
+      }
+    }
+  }
+  return classes.trim();
+}
+function formatValue2(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+function flush(ctx, force = false) {
+  if (ctx.aborted) return;
+  const { buffer, options, controller } = ctx;
+  if (buffer.length === 0) return;
+  switch (options.flushStrategy) {
+    case "immediate":
+      controller.enqueue(buffer);
+      ctx.buffer = "";
+      break;
+    case "batched":
+      if (force || buffer.length >= CHUNK_SIZE_THRESHOLD) {
+        controller.enqueue(buffer);
+        ctx.buffer = "";
+      }
+      break;
+    case "manual":
+      if (force) {
+        controller.enqueue(buffer);
+        ctx.buffer = "";
+      }
+      break;
+  }
+}
+function write(ctx, content) {
+  if (ctx.aborted) return;
+  ctx.buffer += content;
+  flush(ctx);
+}
+function checkAbort(ctx) {
+  if (ctx.signal?.aborted) {
+    ctx.aborted = true;
+    return true;
+  }
+  return false;
+}
+async function renderNodeToStream(node, ctx) {
+  if (checkAbort(ctx)) return;
+  switch (node.kind) {
+    case "element":
+      await renderElementToStream(node, ctx);
+      break;
+    case "text":
+      renderTextToStream(node, ctx);
+      break;
+    case "if":
+      await renderIfToStream(node, ctx);
+      break;
+    case "each":
+      await renderEachToStream(node, ctx);
+      break;
+    case "markdown":
+      await renderMarkdownToStream(node, ctx);
+      break;
+    case "code":
+      await renderCodeToStream(node, ctx);
+      break;
+    case "slot":
+      break;
+    case "portal":
+      await renderPortalToStream(node, ctx);
+      break;
+    case "localState":
+      await renderLocalStateToStream(node, ctx);
+      break;
+    default: {
+      const unknownNode = node;
+      if (unknownNode.kind === "suspense") {
+        await renderSuspenseToStream(unknownNode, ctx);
+      }
+    }
+  }
+}
+async function renderSuspenseToStream(node, ctx) {
+  write(ctx, '<div data-suspense-id="' + escapeHtml(node.id) + '">');
+  await renderNodeToStream(node.fallback, ctx);
+  write(ctx, "</div>");
+  if (node.children && node.children.length > 0) {
+    for (const child of node.children) {
+      await renderNodeToStream(child, ctx);
+    }
+  }
+}
+async function renderElementToStream(node, ctx) {
+  if (checkAbort(ctx)) return;
+  const tag = node.tag;
+  const isVoid = VOID_ELEMENTS2.has(tag);
+  let attrs = "";
+  if (node.props) {
+    for (const [propName, propValue] of Object.entries(node.props)) {
+      if (isEventHandler2(propValue)) {
+        continue;
+      }
+      const value = evaluate2(propValue, ctx);
+      if (value === false) {
+        continue;
+      }
+      if (value === true) {
+        attrs += " " + propName;
+        continue;
+      }
+      if (value === null || value === void 0) {
+        continue;
+      }
+      attrs += " " + propName + '="' + escapeHtml(String(value)) + '"';
+    }
+  }
+  if (isVoid) {
+    write(ctx, "<" + tag + attrs + " />");
+    return;
+  }
+  write(ctx, "<" + tag + attrs + ">");
+  if (node.children) {
+    for (const child of node.children) {
+      await renderNodeToStream(child, ctx);
+    }
+  }
+  write(ctx, "</" + tag + ">");
+}
+function renderTextToStream(node, ctx) {
+  const value = evaluate2(node.value, ctx);
+  write(ctx, escapeHtml(formatValue2(value)));
+}
+async function renderIfToStream(node, ctx) {
+  if (checkAbort(ctx)) return;
+  const condition = evaluate2(node.condition, ctx);
+  if (condition) {
+    write(ctx, "<!--if:then-->");
+    await renderNodeToStream(node.then, ctx);
+  } else if (node.else) {
+    write(ctx, "<!--if:else-->");
+    await renderNodeToStream(node.else, ctx);
+  } else {
+    write(ctx, "<!--if:none-->");
+  }
+}
+async function renderEachToStream(node, ctx) {
+  if (checkAbort(ctx)) return;
+  const items = evaluate2(node.items, ctx);
+  if (!Array.isArray(items)) {
+    return;
+  }
+  for (let index = 0; index < items.length; index++) {
+    if (checkAbort(ctx)) return;
+    const item = items[index];
+    const itemLocals = {
+      ...ctx.locals,
+      [node.as]: item
+    };
+    if (node.index) {
+      itemLocals[node.index] = index;
+    }
+    const itemCtx = {
+      ...ctx,
+      locals: itemLocals
+    };
+    await renderNodeToStream(node.body, itemCtx);
+    if (index > 0 && index % 10 === 0) {
+      flush(ctx);
+    }
+  }
+}
+async function renderMarkdownToStream(node, ctx) {
+  const content = evaluate2(node.content, ctx);
+  write(ctx, '<div class="constela-markdown">' + escapeHtml(formatValue2(content)) + "</div>");
+}
+async function renderCodeToStream(node, ctx) {
+  const language = formatValue2(evaluate2(node.language, ctx));
+  const content = formatValue2(evaluate2(node.content, ctx));
+  const languageBadge = language ? '<div class="absolute right-12 top-3 z-10 rounded bg-muted-foreground/20 px-2 py-0.5 text-xs font-medium text-muted-foreground">' + escapeHtml(language) + "</div>" : "";
+  const copyButton = '<button class="constela-copy-btn absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background/80 opacity-0 transition-opacity hover:bg-muted group-hover:opacity-100" data-copy-target="code" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>';
+  write(ctx, '<div class="constela-code" data-code-content="' + escapeHtml(content) + '"><div class="group relative">' + languageBadge + copyButton + "<pre><code>" + escapeHtml(content) + "</code></pre></div></div>");
+}
+async function renderPortalToStream(node, ctx) {
+  write(ctx, "<!--portal:" + node.target + "-->");
+  for (const child of node.children) {
+    await renderNodeToStream(child, ctx);
+  }
+  write(ctx, "<!--/portal-->");
+}
+async function renderLocalStateToStream(node, ctx) {
+  const localStateValues = {};
+  for (const [name, field] of Object.entries(node.state)) {
+    localStateValues[name] = field.initial;
+  }
+  const childCtx = {
+    ...ctx,
+    locals: {
+      ...ctx.locals,
+      ...localStateValues
+    }
+  };
+  await renderNodeToStream(node.child, childCtx);
+}
+function renderToStream(program, streamOptions, options) {
+  const state = /* @__PURE__ */ new Map();
+  for (const [name, field] of Object.entries(program.state)) {
+    const stateField = field;
+    const overrideValue = options?.stateOverrides?.[name];
+    if (overrideValue !== void 0) {
+      state.set(name, overrideValue);
+    } else if (isCookieInitialExpr2(stateField.initial)) {
+      const cookieInitial = stateField.initial;
+      const cookieValue = options?.cookies?.[cookieInitial.key];
+      state.set(name, cookieValue !== void 0 ? cookieValue : cookieInitial.default);
+    } else {
+      state.set(name, stateField.initial);
+    }
+  }
+  const signal = options?.signal;
+  return new ReadableStream({
+    async start(controller) {
+      const baseCtx = {
+        state,
+        locals: {},
+        route: options?.route ? {
+          params: options.route.params ?? {},
+          query: options.route.query ?? {},
+          path: options.route.path ?? ""
+        } : void 0,
+        imports: options?.imports ?? program.importData,
+        styles: options?.styles,
+        controller,
+        options: streamOptions,
+        buffer: "",
+        aborted: false
+      };
+      const ctx = signal ? { ...baseCtx, signal } : baseCtx;
+      if (signal) {
+        signal.addEventListener("abort", () => {
+          ctx.aborted = true;
+          try {
+            controller.close();
+          } catch {
+          }
+        });
+      }
+      try {
+        await renderNodeToStream(program.view, ctx);
+        flush(ctx, true);
+        if (!ctx.aborted) {
+          controller.close();
+        }
+      } catch (error) {
+        if (!ctx.aborted) {
+          controller.error(error);
+        }
+      }
+    },
+    cancel() {
+    }
+  });
+}
+function createHtmlTransformStream(options) {
+  let isFirstChunk = true;
+  return new TransformStream({
+    transform(chunk, controller) {
+      if (isFirstChunk) {
+        const shell = buildDocumentShell(options);
+        controller.enqueue(shell + chunk);
+        isFirstChunk = false;
+      } else {
+        controller.enqueue(chunk);
+      }
+    },
+    flush(controller) {
+      const scripts = buildScriptTags(options.scripts);
+      controller.enqueue(scripts + "</body></html>");
+    }
+  });
+}
+function buildDocumentShell(options) {
+  const lang = options.lang ?? "en";
+  let head = "<head>";
+  head += '<meta charset="UTF-8">';
+  head += "<title>" + escapeHtml(options.title) + "</title>";
+  if (options.meta) {
+    for (const [name, content] of Object.entries(options.meta)) {
+      head += '<meta name="' + escapeHtml(name) + '" content="' + escapeHtml(content) + '">';
+    }
+  }
+  if (options.stylesheets) {
+    for (const href of options.stylesheets) {
+      head += '<link rel="stylesheet" href="' + escapeHtml(href) + '">';
+    }
+  }
+  head += "</head>";
+  return '<!DOCTYPE html><html lang="' + escapeHtml(lang) + '">' + head + "<body>";
+}
+function buildScriptTags(scripts) {
+  if (!scripts || scripts.length === 0) return "";
+  return scripts.map((src) => '<script src="' + escapeHtml(src) + '"></script>').join("");
+}
 export {
+  createHtmlTransformStream,
+  renderToStream,
   renderToString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/server",
-  "version": "12.0.2",
+  "version": "14.0.0",
   "description": "Server-side rendering for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,8 +15,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "@constela/compiler": "^0.14.7",
-    "@constela/core": "^0.16.2"
+    "@constela/compiler": "^0.15.6",
+    "@constela/core": "^0.18.0"
   },
   "dependencies": {
     "isomorphic-dompurify": "^2.35.0",
@@ -29,8 +29,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/compiler": "0.14.7",
-    "@constela/core": "0.16.2"
+    "@constela/core": "0.18.0",
+    "@constela/compiler": "0.15.6"
   },
   "engines": {
     "node": ">=20.0.0"