@constela/server 4.0.0 → 4.1.0

package/README.md

@@ -92,6 +92,46 @@ Pass external data at render time:
 }
 ```
 
+### Style Evaluation
+
+Style expressions are evaluated during SSR, producing CSS class strings:
+
+```json
+{
+  "styles": {
+    "button": {
+      "base": "px-4 py-2 rounded",
+      "variants": {
+        "variant": {
+          "primary": "bg-blue-500 text-white",
+          "secondary": "bg-gray-200 text-gray-800"
+        }
+      },
+      "defaultVariants": { "variant": "primary" }
+    }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "button",
+    "props": {
+      "className": {
+        "expr": "style",
+        "name": "button",
+        "variants": { "variant": { "expr": "lit", "value": "primary" } }
+      }
+    }
+  }
+}
+```
+
+↓ SSR
+
+```html
+<button class="px-4 py-2 rounded bg-blue-500 text-white">...</button>
+```
+
+Pass style presets via `RenderOptions.styles` for evaluation.
+
 ## Output Structure
 
 ### Code Block HTML
@@ -142,6 +182,18 @@ const html = await renderToString(compiledProgram, {
   imports: {
     config: { siteName: 'My Site' },
   },
+  styles: {
+    button: {
+      base: 'px-4 py-2 rounded',
+      variants: {
+        variant: {
+          primary: 'bg-blue-500 text-white',
+          secondary: 'bg-gray-200 text-gray-800',
+        },
+      },
+      defaultVariants: { variant: 'primary' },
+    },
+  },
 });
 ```
 
@@ -155,6 +207,13 @@ interface RenderOptions {
     path?: string;
   };
   imports?: Record<string, unknown>;
+  styles?: Record<string, StylePreset>;
+}
+
+interface StylePreset {
+  base: string;
+  variants?: Record<string, Record<string, string>>;
+  defaultVariants?: Record<string, string>;
 }
 ```
 

package/dist/index.d.ts

@@ -6,6 +6,17 @@ import { CompiledProgram } from '@constela/compiler';
  * Renders CompiledProgram to HTML string for Server-Side Rendering.
  */
 
+/**
+ * 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;
+    }>;
+}
 /**
  * Options for renderToString
  */
@@ -16,6 +27,7 @@ interface RenderOptions {
         path?: string;
     };
     imports?: Record<string, unknown>;
+    styles?: Record<string, StylePreset>;
 }
 /**
  * Renders a CompiledProgram to an HTML string.

package/dist/index.js

@@ -217,7 +217,7 @@ function evaluate(expr, ctx) {
       return void 0;
     }
     case "style": {
-      return "";
+      return evaluateStyle(expr, ctx);
     }
     default: {
       const _exhaustiveCheck = expr;
@@ -310,6 +310,36 @@ function evaluateBinary(op, left, right, ctx) {
       throw new Error("Unknown binary operator: " + op);
   }
 }
+function evaluateStyle(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 = evaluate(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 formatValue(value) {
   if (value === null || value === void 0) {
     return "";
@@ -438,7 +468,8 @@ async function renderToString(program, options) {
       query: options.route.query ?? {},
       path: options.route.path ?? ""
     } : void 0,
-    imports: options?.imports ?? program.importData
+    imports: options?.imports ?? program.importData,
+    styles: options?.styles
   };
   return await renderNode(program.view, ctx);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/server",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Server-side rendering for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",