@vertz/ui-server 0.2.0

package/dist/index.js

@@ -0,0 +1,403 @@
+// src/html-serializer.ts
+var VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var RAW_TEXT_ELEMENTS = new Set(["script", "style"]);
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function serializeAttrs(attrs) {
+  const parts = [];
+  for (const [key, value] of Object.entries(attrs)) {
+    parts.push(` ${key}="${escapeAttr(value)}"`);
+  }
+  return parts.join("");
+}
+function isRawHtml(value) {
+  return typeof value === "object" && "__raw" in value && value.__raw === true;
+}
+function serializeToHtml(node) {
+  if (typeof node === "string") {
+    return escapeHtml(node);
+  }
+  if (isRawHtml(node)) {
+    return node.html;
+  }
+  const { tag, attrs, children } = node;
+  const attrStr = serializeAttrs(attrs);
+  if (VOID_ELEMENTS.has(tag)) {
+    return `<${tag}${attrStr}>`;
+  }
+  const isRawText = RAW_TEXT_ELEMENTS.has(tag);
+  const childrenHtml = children.map((child) => {
+    if (typeof child === "string" && isRawText) {
+      return child;
+    }
+    return serializeToHtml(child);
+  }).join("");
+  return `<${tag}${attrStr}>${childrenHtml}</${tag}>`;
+}
+
+// src/asset-pipeline.ts
+function renderAssetTags(assets) {
+  if (assets.length === 0)
+    return "";
+  return assets.map((asset) => {
+    if (asset.type === "stylesheet") {
+      return `<link rel="stylesheet" href="${escapeAttr(asset.src)}">`;
+    }
+    const parts = [`<script src="${escapeAttr(asset.src)}"`];
+    if (asset.async)
+      parts.push(" async");
+    if (asset.defer)
+      parts.push(" defer");
+    parts.push("></script>");
+    return parts.join("");
+  }).join(`
+`);
+}
+// src/critical-css.ts
+function inlineCriticalCss(css) {
+  if (css === "")
+    return "";
+  const safeCss = css.replace(/<\/style>/gi, "<\\/style>");
+  return `<style>${safeCss}</style>`;
+}
+// src/dev-server.ts
+import { createServer as createHttpServer } from "node:http";
+import { InternalServerErrorException } from "@vertz/server";
+import { createServer as createViteServer } from "vite";
+function createDevServer(options) {
+  const {
+    entry,
+    port = 5173,
+    host = "0.0.0.0",
+    viteConfig = {},
+    middleware,
+    skipModuleInvalidation = false,
+    logRequests = true
+  } = options;
+  let vite;
+  let httpServer;
+  const listen = async () => {
+    if (logRequests) {
+      console.log("[Server] Starting Vite SSR dev server...");
+    }
+    try {
+      vite = await createViteServer({
+        ...viteConfig,
+        server: {
+          ...viteConfig.server,
+          middlewareMode: true
+        },
+        appType: "custom"
+      });
+      if (logRequests) {
+        console.log("[Server] Vite dev server created");
+      }
+    } catch (err) {
+      console.error("[Server] Failed to create Vite server:", err);
+      throw err;
+    }
+    if (middleware) {
+      vite.middlewares.use(middleware);
+    }
+    vite.middlewares.use(async (req, res, next) => {
+      const url = req.url || "/";
+      try {
+        if (url.startsWith("/@") || url.startsWith("/node_modules")) {
+          return next();
+        }
+        if (url === entry || url.startsWith("/src/")) {
+          return next();
+        }
+        if (logRequests) {
+          console.log(`[Server] Rendering: ${url}`);
+        }
+        if (!skipModuleInvalidation) {
+          for (const mod of vite.moduleGraph.idToModuleMap.values()) {
+            if (mod.ssrModule) {
+              vite.moduleGraph.invalidateModule(mod);
+            }
+          }
+        }
+        const entryModule = await vite.ssrLoadModule(entry);
+        if (!entryModule.renderToString) {
+          throw new InternalServerErrorException(`Entry module "${entry}" does not export a renderToString function`);
+        }
+        const html = await entryModule.renderToString(url);
+        const transformedHtml = await vite.transformIndexHtml(url, html);
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(transformedHtml);
+      } catch (err) {
+        console.error("[Server] SSR error:", err);
+        if (err instanceof Error) {
+          vite.ssrFixStacktrace(err);
+        }
+        res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+        res.end(err.stack || String(err));
+      }
+    });
+    httpServer = createHttpServer(vite.middlewares);
+    httpServer.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        console.error(`[Server] Port ${port} is already in use`);
+      } else {
+        console.error(`[Server] Server error:`, err);
+      }
+      process.exit(1);
+    });
+    await new Promise((resolve) => {
+      httpServer.listen(port, host, () => {
+        if (logRequests) {
+          console.log(`[Server] Running at http://${host}:${port}`);
+          console.log(`[Server] Local: http://localhost:${port}`);
+        }
+        resolve();
+      });
+    });
+    const shutdown = () => {
+      if (logRequests) {
+        console.log("[Server] Shutting down...");
+      }
+      httpServer.close();
+      vite.close();
+      process.exit(0);
+    };
+    process.on("SIGTERM", shutdown);
+    process.on("SIGINT", shutdown);
+  };
+  const close = async () => {
+    if (httpServer) {
+      await new Promise((resolve, reject) => {
+        httpServer.close((err) => {
+          if (err)
+            reject(err);
+          else
+            resolve();
+        });
+      });
+    }
+    if (vite) {
+      await vite.close();
+    }
+  };
+  return {
+    listen,
+    close,
+    get vite() {
+      return vite;
+    },
+    get httpServer() {
+      return httpServer;
+    }
+  };
+}
+// src/head.ts
+class HeadCollector {
+  entries = [];
+  addTitle(text) {
+    this.entries.push({ tag: "title", textContent: text });
+  }
+  addMeta(attrs) {
+    this.entries.push({ tag: "meta", attrs });
+  }
+  addLink(attrs) {
+    this.entries.push({ tag: "link", attrs });
+  }
+  getEntries() {
+    return [...this.entries];
+  }
+  clear() {
+    this.entries = [];
+  }
+}
+function renderHeadToHtml(entries) {
+  if (entries.length === 0)
+    return "";
+  return entries.map((entry) => {
+    if (entry.tag === "title") {
+      return `<title>${escapeHtml(entry.textContent ?? "")}</title>`;
+    }
+    const attrs = entry.attrs ?? {};
+    const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+    return `<${entry.tag}${attrStr}>`;
+  }).join(`
+`);
+}
+// src/hydration-markers.ts
+function wrapWithHydrationMarkers(node, options) {
+  const newAttrs = {
+    ...node.attrs,
+    "data-v-id": options.componentName,
+    "data-v-key": options.key
+  };
+  const newChildren = [...node.children];
+  if (options.props !== undefined) {
+    const propsScript = {
+      tag: "script",
+      attrs: { type: "application/json" },
+      children: [JSON.stringify(options.props)]
+    };
+    newChildren.push(propsScript);
+  }
+  return {
+    tag: node.tag,
+    attrs: newAttrs,
+    children: newChildren
+  };
+}
+// src/slot-placeholder.ts
+var slotCounter = 0;
+function resetSlotCounter() {
+  slotCounter = 0;
+}
+function createSlotPlaceholder(fallback) {
+  const id = slotCounter++;
+  const placeholder = {
+    tag: "div",
+    attrs: { id: `v-slot-${id}` },
+    children: typeof fallback === "string" ? [fallback] : [fallback],
+    _slotId: id
+  };
+  return placeholder;
+}
+
+// src/streaming.ts
+var encoder = new TextEncoder;
+var decoder = new TextDecoder;
+function encodeChunk(html) {
+  return encoder.encode(html);
+}
+async function streamToString(stream) {
+  const reader = stream.getReader();
+  const parts = [];
+  for (;; ) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    parts.push(decoder.decode(value, { stream: true }));
+  }
+  parts.push(decoder.decode());
+  return parts.join("");
+}
+async function collectStreamChunks(stream) {
+  const reader = stream.getReader();
+  const chunks = [];
+  for (;; ) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    chunks.push(decoder.decode(value, { stream: true }));
+  }
+  return chunks;
+}
+
+// src/template-chunk.ts
+function createTemplateChunk(slotId, resolvedHtml, nonce) {
+  const tmplId = `v-tmpl-${slotId}`;
+  const slotRef = `v-slot-${slotId}`;
+  const nonceAttr = nonce != null ? ` nonce="${escapeNonce(nonce)}"` : "";
+  return `<template id="${tmplId}">${resolvedHtml}</template>` + `<script${nonceAttr}>` + `(function(){` + `var s=document.getElementById("${slotRef}");` + `var t=document.getElementById("${tmplId}");` + `if(s&&t){s.replaceWith(t.content.cloneNode(true));t.remove()}` + `})()` + "</script>";
+}
+function escapeNonce(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+// src/render-to-stream.ts
+function isSuspenseNode(node) {
+  return typeof node === "object" && "tag" in node && node.tag === "__suspense" && "_resolve" in node;
+}
+function renderToStream(tree, options) {
+  const pendingBoundaries = [];
+  function walkAndSerialize(node) {
+    if (typeof node === "string") {
+      return escapeHtml(node);
+    }
+    if (isRawHtml(node)) {
+      return node.html;
+    }
+    if (isSuspenseNode(node)) {
+      const placeholder = createSlotPlaceholder(node._fallback);
+      pendingBoundaries.push({
+        slotId: placeholder._slotId,
+        resolve: node._resolve
+      });
+      return serializeToHtml(placeholder);
+    }
+    const { tag, attrs, children } = node;
+    const isRawText = RAW_TEXT_ELEMENTS.has(tag);
+    const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+    if (VOID_ELEMENTS.has(tag)) {
+      return `<${tag}${attrStr}>`;
+    }
+    const childrenHtml = children.map((child) => {
+      if (typeof child === "string" && isRawText) {
+        return child;
+      }
+      return walkAndSerialize(child);
+    }).join("");
+    return `<${tag}${attrStr}>${childrenHtml}</${tag}>`;
+  }
+  return new ReadableStream({
+    async start(controller) {
+      const mainHtml = walkAndSerialize(tree);
+      controller.enqueue(encodeChunk(mainHtml));
+      if (pendingBoundaries.length > 0) {
+        const nonce = options?.nonce;
+        const resolutions = pendingBoundaries.map(async (boundary) => {
+          try {
+            const resolved = await boundary.resolve;
+            const resolvedHtml = serializeToHtml(resolved);
+            return createTemplateChunk(boundary.slotId, resolvedHtml, nonce);
+          } catch (_err) {
+            const errorHtml = `<div data-v-ssr-error="true" id="v-ssr-error-${boundary.slotId}">` + "<!--SSR error--></div>";
+            return createTemplateChunk(boundary.slotId, errorHtml, nonce);
+          }
+        });
+        const chunks = await Promise.all(resolutions);
+        for (const chunk of chunks) {
+          controller.enqueue(encodeChunk(chunk));
+        }
+      }
+      controller.close();
+    }
+  });
+}
+// src/types.ts
+function rawHtml(html) {
+  return { __raw: true, html };
+}
+export {
+  wrapWithHydrationMarkers,
+  streamToString,
+  serializeToHtml,
+  resetSlotCounter,
+  renderToStream,
+  renderHeadToHtml,
+  renderAssetTags,
+  rawHtml,
+  inlineCriticalCss,
+  encodeChunk,
+  createTemplateChunk,
+  createSlotPlaceholder,
+  createDevServer,
+  collectStreamChunks,
+  HeadCollector
+};

package/dist/jsx-runtime/index.d.ts

@@ -0,0 +1,39 @@
+/** A raw HTML string that bypasses escaping during serialization. */
+interface RawHtml {
+	__raw: true;
+	html: string;
+}
+/** Virtual node representing an HTML element for SSR serialization. */
+interface VNode {
+	tag: string;
+	attrs: Record<string, string>;
+	children: (VNode | string | RawHtml)[];
+}
+type JSXComponent = (props: Record<string, unknown>) => VNode | VNode[] | string | null;
+type Tag = string | JSXComponent;
+/**
+* JSX factory function for server-side rendering.
+*
+* When tag is a function (component), calls it with props.
+* When tag is a string (HTML element), creates a VNode.
+*/
+declare function jsx(tag: Tag, props: Record<string, unknown>): VNode;
+/**
+* JSX factory for elements with multiple children.
+* In the automatic runtime, this is used when there are multiple children.
+* For our implementation, it's the same as jsx().
+*/
+declare const jsxs: typeof jsx;
+/**
+* JSX development mode factory (used with @jsxImportSource in tsconfig).
+* Same as jsx() for our implementation.
+*/
+declare const jsxDEV: typeof jsx;
+/**
+* Fragment component — a virtual container for multiple children.
+* The @vertz/ui-server renderer will unwrap fragments during serialization.
+*/
+declare function Fragment(props: {
+	children?: unknown;
+}): VNode;
+export { jsxs, jsxDEV, jsx, Fragment };

package/dist/jsx-runtime/index.js

@@ -0,0 +1,61 @@
+// src/jsx-runtime/index.ts
+function normalizeChildren(children) {
+  if (children == null || children === false || children === true) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    return children.flatMap(normalizeChildren);
+  }
+  if (typeof children === "object" && (("tag" in children) || ("__raw" in children))) {
+    return [children];
+  }
+  return [String(children)];
+}
+function jsx(tag, props) {
+  if (typeof tag === "function") {
+    return tag(props);
+  }
+  const { children, ...attrs } = props || {};
+  const serializableAttrs = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.startsWith("on") && typeof value === "function") {
+      continue;
+    }
+    if (key === "class" && value != null) {
+      serializableAttrs.class = String(value);
+      continue;
+    }
+    if (key === "style" && value != null) {
+      serializableAttrs.style = String(value);
+      continue;
+    }
+    if (value === true) {
+      serializableAttrs[key] = "";
+      continue;
+    }
+    if (value === false || value == null) {
+      continue;
+    }
+    serializableAttrs[key] = String(value);
+  }
+  return {
+    tag,
+    attrs: serializableAttrs,
+    children: normalizeChildren(children)
+  };
+}
+var jsxs = jsx;
+var jsxDEV = jsx;
+function Fragment(props) {
+  return {
+    tag: "fragment",
+    attrs: {},
+    children: normalizeChildren(props?.children)
+  };
+}
+export {
+  jsxs,
+  jsxDEV,
+  jsx,
+  Fragment
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vertz/ui-server",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Vertz UI server-side rendering runtime",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertz-dev/vertz.git",
+    "directory": "packages/ui-server"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dom-shim": {
+      "import": "./dist/dom-shim/index.js",
+      "types": "./dist/dom-shim/index.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./dist/jsx-runtime/index.js",
+      "types": "./dist/jsx-runtime/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bunup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vertz/core": "workspace:*",
+    "@vertz/server": "workspace:*",
+    "@vertz/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "vite": "^6.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.0.18",
+    "bunup": "latest",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}