@constela/server 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Constela Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { CompiledProgram } from '@constela/compiler';
+
+/**
+ * SSR Renderer
+ *
+ * Renders CompiledProgram to HTML string for Server-Side Rendering.
+ */
+
+/**
+ * Renders a CompiledProgram to an HTML string.
+ *
+ * @param program - The compiled program to render
+ * @returns Promise that resolves to HTML string representation
+ */
+declare function renderToString(program: CompiledProgram): Promise<string>;
+
+export { renderToString };

package/dist/index.js

@@ -0,0 +1,328 @@
+// src/markdown.ts
+import { marked } from "marked";
+import DOMPurify from "isomorphic-dompurify";
+marked.setOptions({ gfm: true, breaks: false });
+function parseMarkdownSSR(content) {
+  const rawHtml = marked.parse(content, { async: false });
+  return DOMPurify.sanitize(rawHtml, {
+    USE_PROFILES: { html: true },
+    FORBID_TAGS: ["script", "style", "iframe"],
+    FORBID_ATTR: ["onerror", "onload", "onclick"]
+  });
+}
+
+// src/code.ts
+import { createHighlighter } from "shiki";
+
+// src/utils/escape.ts
+var HTML_ESCAPE_MAP = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var HTML_ESCAPE_REGEX = /[&<>"']/g;
+function escapeHtml(str) {
+  return str.replace(HTML_ESCAPE_REGEX, (char) => HTML_ESCAPE_MAP[char] ?? char);
+}
+
+// src/code.ts
+var highlighter = null;
+var PRELOAD_LANGS = [
+  "javascript",
+  "typescript",
+  "json",
+  "html",
+  "css",
+  "python",
+  "rust",
+  "go",
+  "java",
+  "bash",
+  "markdown"
+];
+async function getHighlighter() {
+  if (!highlighter) {
+    highlighter = await createHighlighter({
+      themes: ["github-dark"],
+      langs: PRELOAD_LANGS
+    });
+  }
+  return highlighter;
+}
+async function renderCodeSSR(code, language) {
+  const hl = await getHighlighter();
+  const loadedLangs = hl.getLoadedLanguages();
+  try {
+    if (language && !loadedLangs.includes(language) && language !== "text") {
+      await hl.loadLanguage(language);
+    }
+    const langToUse = language || "text";
+    return hl.codeToHtml(code, { lang: langToUse, theme: "github-dark" });
+  } catch {
+    const escapedCode = escapeHtml(code);
+    const langClass = language ? ` class="language-${language}"` : "";
+    return `<pre><code${langClass}>${escapedCode}</code></pre>`;
+  }
+}
+
+// src/renderer.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function isEventHandler(value) {
+  return typeof value === "object" && value !== null && "event" in value && "action" in value;
+}
+function evaluate(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 evaluateBinary(expr.op, expr.left, expr.right, ctx);
+    case "not":
+      return !evaluate(expr.operand, ctx);
+    case "cond":
+      return evaluate(expr.if, ctx) ? evaluate(expr.then, ctx) : evaluate(expr.else, ctx);
+    case "get": {
+      const baseValue = evaluate(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;
+    }
+    default: {
+      const _exhaustiveCheck = expr;
+      throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
+    }
+  }
+}
+function evaluateBinary(op, left, right, ctx) {
+  if (op === "&&") {
+    const leftVal2 = evaluate(left, ctx);
+    if (!leftVal2) return leftVal2;
+    return evaluate(right, ctx);
+  }
+  if (op === "||") {
+    const leftVal2 = evaluate(left, ctx);
+    if (leftVal2) return leftVal2;
+    return evaluate(right, ctx);
+  }
+  const leftVal = evaluate(left, ctx);
+  const rightVal = evaluate(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 formatValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+async function renderNode(node, ctx) {
+  switch (node.kind) {
+    case "element":
+      return await renderElement(node, ctx);
+    case "text":
+      return renderText(node, ctx);
+    case "if":
+      return await renderIf(node, ctx);
+    case "each":
+      return await renderEach(node, ctx);
+    case "markdown":
+      return renderMarkdown(node, ctx);
+    case "code":
+      return await renderCode(node, ctx);
+    default: {
+      const _exhaustiveCheck = node;
+      throw new Error(`Unknown node kind: ${JSON.stringify(_exhaustiveCheck)}`);
+    }
+  }
+}
+async function renderElement(node, ctx) {
+  const tag = node.tag;
+  const isVoid = VOID_ELEMENTS.has(tag);
+  let attrs = "";
+  if (node.props) {
+    for (const [propName, propValue] of Object.entries(node.props)) {
+      if (isEventHandler(propValue)) {
+        continue;
+      }
+      const value = evaluate(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) {
+    return `<${tag}${attrs} />`;
+  }
+  let childrenHtml = "";
+  if (node.children) {
+    for (const child of node.children) {
+      childrenHtml += await renderNode(child, ctx);
+    }
+  }
+  return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
+}
+function renderText(node, ctx) {
+  const value = evaluate(node.value, ctx);
+  return escapeHtml(formatValue(value));
+}
+async function renderIf(node, ctx) {
+  const condition = evaluate(node.condition, ctx);
+  if (condition) {
+    return await renderNode(node.then, ctx);
+  }
+  if (node.else) {
+    return await renderNode(node.else, ctx);
+  }
+  return "";
+}
+async function renderEach(node, ctx) {
+  const items = evaluate(node.items, ctx);
+  if (!Array.isArray(items)) {
+    return "";
+  }
+  let result = "";
+  for (let index = 0; index < items.length; index++) {
+    const item = items[index];
+    const itemLocals = {
+      ...ctx.locals,
+      [node.as]: item
+    };
+    if (node.index) {
+      itemLocals[node.index] = index;
+    }
+    const itemCtx = {
+      ...ctx,
+      locals: itemLocals
+    };
+    result += await renderNode(node.body, itemCtx);
+  }
+  return result;
+}
+function renderMarkdown(node, ctx) {
+  const content = evaluate(node.content, ctx);
+  const html = parseMarkdownSSR(formatValue(content));
+  return `<div class="constela-markdown">${html}</div>`;
+}
+async function renderCode(node, ctx) {
+  const language = formatValue(evaluate(node.language, ctx));
+  const content = formatValue(evaluate(node.content, ctx));
+  const html = await renderCodeSSR(content, language);
+  return `<div class="constela-code">${html}</div>`;
+}
+async function renderToString(program) {
+  const state = /* @__PURE__ */ new Map();
+  for (const [name, field] of Object.entries(program.state)) {
+    state.set(name, field.initial);
+  }
+  const ctx = {
+    state,
+    locals: {}
+  };
+  return await renderNode(program.view, ctx);
+}
+export {
+  renderToString
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@constela/server",
+  "version": "0.1.2",
+  "description": "Server-side rendering for Constela UI framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@constela/compiler": "^0.4.0"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^2.35.0",
+    "marked": "^17.0.1",
+    "shiki": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^2.0.0",
+    "@constela/compiler": "0.4.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  }
+}