@vertz/ui-server 0.2.0 → 0.2.4

package/dist/index.js

@@ -1,58 +1,36 @@
-// 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}>`;
-}
+import {
+  clearGlobalSSRTimeout,
+  collectStreamChunks,
+  createSSRDataChunk,
+  createSSRHandler,
+  createSlotPlaceholder,
+  createTemplateChunk,
+  encodeChunk,
+  escapeAttr,
+  escapeHtml,
+  getGlobalSSRTimeout,
+  getSSRQueries,
+  getSSRUrl,
+  getStreamingRuntimeScript,
+  isInSSR,
+  registerSSRQuery,
+  renderToStream,
+  resetSlotCounter,
+  safeSerialize,
+  serializeToHtml,
+  setGlobalSSRTimeout,
+  ssrDiscoverQueries,
+  ssrRenderToString,
+  ssrStorage,
+  streamToString
+} from "./shared/chunk-32688jav.js";
+import {
+  SSRElement,
+  createSSRAdapter,
+  installDomShim,
+  rawHtml,
+  removeDomShim
+} from "./shared/chunk-4t0ekdyv.js";
 
 // src/asset-pipeline.ts
 function renderAssetTags(assets) {
@@ -79,136 +57,6 @@ function inlineCriticalCss(css) {
   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 = [];
@@ -263,141 +111,286 @@ function wrapWithHydrationMarkers(node, options) {
     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 }));
+// src/render-page.ts
+function buildHeadHtml(options, _componentHeadEntries = []) {
+  const entries = [];
+  entries.push({ tag: "meta", attrs: { charset: "utf-8" } });
+  entries.push({
+    tag: "meta",
+    attrs: { name: "viewport", content: "width=device-width, initial-scale=1" }
+  });
+  if (options.title) {
+    entries.push({ tag: "title", textContent: options.title });
   }
-  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 }));
+  if (options.description) {
+    entries.push({ tag: "meta", attrs: { name: "description", content: options.description } });
   }
-  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);
+  const hasOgConfig = options.og != null;
+  const hasTitleOrDesc = options.title != null || options.description != null;
+  if (hasOgConfig || hasTitleOrDesc) {
+    const ogTitle = options.og?.title ?? options.title ?? "";
+    const ogDesc = options.og?.description ?? options.description ?? "";
+    if (ogTitle) {
+      entries.push({ tag: "meta", attrs: { property: "og:title", content: ogTitle } });
     }
-    if (isRawHtml(node)) {
-      return node.html;
+    if (ogDesc) {
+      entries.push({ tag: "meta", attrs: { property: "og:description", content: ogDesc } });
     }
-    if (isSuspenseNode(node)) {
-      const placeholder = createSlotPlaceholder(node._fallback);
-      pendingBoundaries.push({
-        slotId: placeholder._slotId,
-        resolve: node._resolve
-      });
-      return serializeToHtml(placeholder);
+    if (options.og?.image) {
+      entries.push({ tag: "meta", attrs: { property: "og:image", content: options.og.image } });
     }
-    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}>`;
+    if (options.og?.url) {
+      entries.push({ tag: "meta", attrs: { property: "og:url", content: options.og.url } });
     }
-    const childrenHtml = children.map((child) => {
-      if (typeof child === "string" && isRawText) {
-        return child;
-      }
-      return walkAndSerialize(child);
-    }).join("");
-    return `<${tag}${attrStr}>${childrenHtml}</${tag}>`;
+    entries.push({
+      tag: "meta",
+      attrs: { property: "og:type", content: options.og?.type ?? "website" }
+    });
   }
-  return new ReadableStream({
+  if (options.twitter) {
+    if (options.twitter.card) {
+      entries.push({ tag: "meta", attrs: { name: "twitter:card", content: options.twitter.card } });
+    }
+    if (options.twitter.site) {
+      entries.push({ tag: "meta", attrs: { name: "twitter:site", content: options.twitter.site } });
+    }
+  }
+  if (options.favicon) {
+    entries.push({ tag: "link", attrs: { rel: "icon", href: options.favicon } });
+  }
+  if (options.styles) {
+    for (const style of options.styles) {
+      entries.push({ tag: "link", attrs: { rel: "stylesheet", href: style } });
+    }
+  }
+  return renderHeadToHtml(entries);
+}
+function renderPage(vnode, options) {
+  const status = options?.status ?? 200;
+  const lang = options?.lang ?? "en";
+  const headHtml = buildHeadHtml(options ?? {});
+  const fullHeadHtml = options?.head ? `${headHtml}
+${options.head}` : headHtml;
+  const scriptsHtml = options?.scripts ? `
+` + options.scripts.map((src) => `  <script type="module" src="${escapeAttr(src)}"></script>`).join(`
+`) : "";
+  const stream = 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.enqueue(encodeChunk(`<!DOCTYPE html>
+`));
+      controller.enqueue(encodeChunk(`<html lang="${escapeAttr(lang)}">
+`));
+      controller.enqueue(encodeChunk(`<head>
+`));
+      controller.enqueue(encodeChunk(fullHeadHtml));
+      controller.enqueue(encodeChunk(`
+</head>
+`));
+      controller.enqueue(encodeChunk(`<body>
+`));
+      const componentStream = renderToStream(vnode);
+      const reader = componentStream.getReader();
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done)
+            break;
+          controller.enqueue(value);
         }
+      } finally {
+        reader.releaseLock();
       }
+      controller.enqueue(encodeChunk(scriptsHtml));
+      controller.enqueue(encodeChunk(`
+</body>
+`));
+      controller.enqueue(encodeChunk("</html>"));
       controller.close();
     }
   });
+  return new Response(stream, {
+    status,
+    headers: {
+      "content-type": "text/html; charset=utf-8"
+    }
+  });
+}
+// src/render-to-html.ts
+import { compileTheme } from "@vertz/ui";
+import { setAdapter } from "@vertz/ui/internals";
+function installSSR() {
+  setAdapter(createSSRAdapter());
+  installDomShim();
+}
+function removeSSR() {
+  setAdapter(null);
+  removeDomShim();
+}
+async function twoPassRender(options) {
+  options.app();
+  const queries = getSSRQueries();
+  if (queries.length > 0) {
+    await Promise.allSettled(queries.map((entry) => Promise.race([
+      entry.promise.then((data) => {
+        entry.resolve(data);
+        entry.resolved = true;
+      }),
+      new Promise((r) => setTimeout(r, entry.timeout))
+    ])));
+    const store = ssrStorage.getStore();
+    if (store)
+      store.queries = [];
+  }
+  const pendingQueries = queries.filter((q) => !q.resolved);
+  const vnode = options.app();
+  const fakeDoc = globalThis.document;
+  const collectedCSS = [];
+  if (fakeDoc?.head?.children) {
+    for (const child of fakeDoc.head.children) {
+      if (child instanceof SSRElement && child.tag === "style") {
+        const cssText = child.children?.join("") ?? "";
+        if (cssText)
+          collectedCSS.push(cssText);
+      }
+    }
+  }
+  const themeCss = options.theme ? compileTheme(options.theme).css : "";
+  const allStyles = [themeCss, ...options.styles ?? [], ...collectedCSS].filter(Boolean);
+  const styleTags = allStyles.map((css) => `<style>${css}</style>`).join(`
+`);
+  const metaHtml = options.head?.meta?.map((m) => `<meta ${m.name ? `name="${m.name}"` : `property="${m.property}"`} content="${m.content}">`).join(`
+`) ?? "";
+  const linkHtml = options.head?.links?.map((link) => `<link rel="${link.rel}" href="${link.href}">`).join(`
+`) ?? "";
+  const runtimeScript = pendingQueries.length > 0 ? getStreamingRuntimeScript(options.nonce) : "";
+  const headContent = [metaHtml, linkHtml, styleTags, runtimeScript].filter(Boolean).join(`
+`);
+  const response = renderPage(vnode, {
+    title: options.head?.title,
+    head: headContent
+  });
+  const html = await response.text();
+  return { html, pendingQueries };
+}
+async function renderToHTMLStream(options) {
+  installSSR();
+  const streamTimeout = options.streamTimeout ?? 30000;
+  return ssrStorage.run({ url: options.url, errors: [], queries: [] }, async () => {
+    try {
+      if (options.ssrTimeout !== undefined) {
+        setGlobalSSRTimeout(options.ssrTimeout);
+      }
+      const { html, pendingQueries } = await twoPassRender(options);
+      if (pendingQueries.length === 0) {
+        clearGlobalSSRTimeout();
+        removeSSR();
+        return new Response(html, {
+          status: 200,
+          headers: { "content-type": "text/html; charset=utf-8" }
+        });
+      }
+      clearGlobalSSRTimeout();
+      removeSSR();
+      const TIMEOUT_SENTINEL = Symbol("stream-timeout");
+      let closed = false;
+      let hardTimeoutId;
+      const stream = new ReadableStream({
+        async start(controller) {
+          controller.enqueue(encodeChunk(html));
+          const hardTimeout = new Promise((r) => {
+            hardTimeoutId = setTimeout(() => r(TIMEOUT_SENTINEL), streamTimeout);
+          });
+          const streamPromises = pendingQueries.map(async (entry) => {
+            try {
+              const result = await Promise.race([entry.promise, hardTimeout]);
+              if (result === TIMEOUT_SENTINEL || closed)
+                return;
+              const chunk = createSSRDataChunk(entry.key, result, options.nonce);
+              controller.enqueue(encodeChunk(chunk));
+            } catch {}
+          });
+          await Promise.race([Promise.allSettled(streamPromises), hardTimeout]);
+          if (hardTimeoutId !== undefined)
+            clearTimeout(hardTimeoutId);
+          closed = true;
+          controller.close();
+        }
+      });
+      return new Response(stream, {
+        status: 200,
+        headers: { "content-type": "text/html; charset=utf-8" }
+      });
+    } catch (err) {
+      clearGlobalSSRTimeout();
+      removeSSR();
+      throw err;
+    }
+  });
+}
+async function renderToHTML(appOrOptions, maybeOptions) {
+  const options = typeof appOrOptions === "function" ? { ...maybeOptions, app: appOrOptions } : appOrOptions;
+  installSSR();
+  return ssrStorage.run({ url: options.url, errors: [], queries: [] }, async () => {
+    try {
+      const { html } = await twoPassRender(options);
+      return html;
+    } finally {
+      clearGlobalSSRTimeout();
+      removeSSR();
+    }
+  });
 }
-// src/types.ts
-function rawHtml(html) {
-  return { __raw: true, html };
+// src/ssr-html.ts
+function generateSSRHtml(options) {
+  const { appHtml, css, ssrData, clientEntry, title = "Vertz App" } = options;
+  const ssrDataScript = ssrData.length > 0 ? `<script>window.__VERTZ_SSR_DATA__ = ${JSON.stringify(ssrData)};</script>` : "";
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(title)}</title>
+    ${css}
+  </head>
+  <body>
+    <div id="app">${appHtml}</div>
+    ${ssrDataScript}
+    <script type="module" src="${escapeAttr(clientEntry)}"></script>
+  </body>
+</html>`;
 }
 export {
   wrapWithHydrationMarkers,
   streamToString,
+  ssrStorage,
+  ssrRenderToString,
+  ssrDiscoverQueries,
+  setGlobalSSRTimeout,
   serializeToHtml,
+  safeSerialize,
   resetSlotCounter,
   renderToStream,
+  renderToHTMLStream,
+  renderToHTML,
+  renderPage,
   renderHeadToHtml,
   renderAssetTags,
+  registerSSRQuery,
   rawHtml,
+  isInSSR,
   inlineCriticalCss,
+  getStreamingRuntimeScript,
+  getSSRUrl,
+  getSSRQueries,
+  getGlobalSSRTimeout,
+  generateSSRHtml,
   encodeChunk,
   createTemplateChunk,
   createSlotPlaceholder,
-  createDevServer,
+  createSSRHandler,
+  createSSRDataChunk,
+  createSSRAdapter,
   collectStreamChunks,
+  clearGlobalSSRTimeout,
   HeadCollector
 };

package/dist/jsx-runtime/index.js

@@ -1,4 +1,10 @@
 // src/jsx-runtime/index.ts
+function unwrapSignal(value) {
+  if (value != null && typeof value === "object" && "peek" in value && typeof value.peek === "function") {
+    return value.peek();
+  }
+  return value;
+}
 function normalizeChildren(children) {
   if (children == null || children === false || children === true) {
     return [];
@@ -9,6 +15,12 @@ function normalizeChildren(children) {
   if (typeof children === "object" && (("tag" in children) || ("__raw" in children))) {
     return [children];
   }
+  if (typeof children === "object") {
+    const unwrapped = unwrapSignal(children);
+    if (unwrapped !== children) {
+      return normalizeChildren(unwrapped);
+    }
+  }
   return [String(children)];
 }
 function jsx(tag, props) {
@@ -17,10 +29,11 @@ function jsx(tag, props) {
   }
   const { children, ...attrs } = props || {};
   const serializableAttrs = {};
-  for (const [key, value] of Object.entries(attrs)) {
-    if (key.startsWith("on") && typeof value === "function") {
+  for (const [key, rawValue] of Object.entries(attrs)) {
+    if (key.startsWith("on") && typeof rawValue === "function") {
       continue;
     }
+    const value = unwrapSignal(rawValue);
     if (key === "class" && value != null) {
       serializableAttrs.class = String(value);
       continue;