@constela/server 5.0.1 → 7.0.0

package/README.md

@@ -38,6 +38,32 @@ JSON program → HTML string
 
 ## Features
 
+### String Concatenation (concat)
+
+Build dynamic strings during SSR:
+
+```json
+{
+  "kind": "element",
+  "tag": "a",
+  "props": {
+    "href": {
+      "expr": "concat",
+      "items": [
+        { "expr": "lit", "value": "/posts/" },
+        { "expr": "data", "name": "post", "path": "slug" }
+      ]
+    }
+  }
+}
+```
+
+↓ SSR
+
+```html
+<a href="/posts/hello-world">...</a>
+```
+
 ### Markdown Rendering
 
 ```json

package/dist/index.js

@@ -225,6 +225,9 @@ function evaluate(expr, ctx) {
         return val == null ? "" : String(val);
       }).join("");
     }
+    case "validity": {
+      return false;
+    }
     default: {
       const _exhaustiveCheck = expr;
       throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -371,6 +374,10 @@ async function renderNode(node, ctx) {
       return await renderCode(node, ctx);
     case "slot":
       return "";
+    case "portal":
+      return await renderPortal(node, ctx);
+    case "localState":
+      return await renderLocalState(node, ctx);
     default: {
       const _exhaustiveCheck = node;
       throw new Error(`Unknown node kind: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -461,6 +468,26 @@ async function renderCode(node, ctx) {
   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>`;
   return `<div class="constela-code" data-code-content="${escapeHtml(content)}"><div class="group relative">${languageBadge}${copyButton}${highlightedCode}</div></div>`;
 }
+async function renderPortal(node, ctx) {
+  const childrenHtml = await Promise.all(
+    node.children.map((child) => renderNode(child, ctx))
+  );
+  return `<!--portal:${node.target}-->${childrenHtml.join("")}<!--/portal-->`;
+}
+async function renderLocalState(node, ctx) {
+  const localStateValues = {};
+  for (const [name, field] of Object.entries(node.state)) {
+    localStateValues[name] = field.initial;
+  }
+  const childCtx = {
+    ...ctx,
+    locals: {
+      ...ctx.locals,
+      ...localStateValues
+    }
+  };
+  return await renderNode(node.child, childCtx);
+}
 async function renderToString(program, options) {
   const state = /* @__PURE__ */ new Map();
   for (const [name, field] of Object.entries(program.state)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/server",
-  "version": "5.0.1",
+  "version": "7.0.0",
   "description": "Server-side rendering for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@constela/compiler": "^0.9.1"
+    "@constela/compiler": "^0.11.0"
   },
   "dependencies": {
     "isomorphic-dompurify": "^2.35.0",
@@ -28,7 +28,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/compiler": "0.9.1"
+    "@constela/compiler": "0.11.0"
   },
   "engines": {
     "node": ">=20.0.0"