@matthesketh/utopia-server 0.0.1

package/dist/index.cjs

@@ -0,0 +1,224 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createHandler: () => createHandler,
+  createServerRouter: () => createServerRouter,
+  renderToStream: () => renderToStream,
+  renderToString: () => renderToString
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ssr-runtime.ts
+var import_utopia_core = require("@matthesketh/utopia-core");
+var collectedStyles = [];
+function flushStyles() {
+  const styles = collectedStyles;
+  collectedStyles = [];
+  return styles;
+}
+function createComponent(Component, props, children) {
+  const ctx = Component.setup ? (0, import_utopia_core.untrack)(() => Component.setup(props ?? {})) : {};
+  const renderCtx = {
+    ...ctx,
+    $slots: children ?? {}
+  };
+  const el = (0, import_utopia_core.untrack)(() => Component.render(renderCtx));
+  if (Component.styles) {
+    collectedStyles.push(Component.styles);
+  }
+  return el;
+}
+
+// src/render-to-string.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function escapeComment(str) {
+  return str.replace(/--/g, "-\u200B-");
+}
+function serializeVNode(node) {
+  switch (node.type) {
+    case 1:
+      return serializeElement(node);
+    case 2:
+      return escapeHtml(node.text);
+    case 3:
+      return `<!--${escapeComment(node.text)}-->`;
+  }
+}
+function serializeElement(el) {
+  const tag = el.tag;
+  let html = `<${tag}`;
+  for (const [name, value] of Object.entries(el.attrs)) {
+    if (value === "") {
+      html += ` ${name}`;
+    } else {
+      html += ` ${name}="${escapeAttr(value)}"`;
+    }
+  }
+  if (VOID_ELEMENTS.has(tag.toLowerCase())) {
+    html += ">";
+    return html;
+  }
+  html += ">";
+  for (const child of el.children) {
+    html += serializeVNode(child);
+  }
+  html += `</${tag}>`;
+  return html;
+}
+function renderToString(component, props) {
+  flushStyles();
+  const vnode = createComponent(component, props);
+  const html = serializeVNode(vnode);
+  const styles = flushStyles();
+  const css = styles.join("\n");
+  return { html, css };
+}
+
+// src/render-to-stream.ts
+var import_node_stream = require("stream");
+var VOID_ELEMENTS2 = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr2(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function escapeComment2(str) {
+  return str.replace(/--/g, "-\u200B-");
+}
+function renderToStream(component, props) {
+  flushStyles();
+  const vnode = createComponent(component, props);
+  const styles = flushStyles();
+  return new import_node_stream.Readable({
+    read() {
+      if (styles.length > 0) {
+        this.push(`<style>${styles.join("\n")}</style>`);
+      }
+      pushVNode(this, vnode);
+      this.push(null);
+    }
+  });
+}
+function pushVNode(stream, node) {
+  switch (node.type) {
+    case 1:
+      pushElement(stream, node);
+      break;
+    case 2:
+      stream.push(escapeHtml2(node.text));
+      break;
+    case 3:
+      stream.push(`<!--${escapeComment2(node.text)}-->`);
+      break;
+  }
+}
+function pushElement(stream, el) {
+  let open = `<${el.tag}`;
+  for (const [name, value] of Object.entries(el.attrs)) {
+    if (value === "") {
+      open += ` ${name}`;
+    } else {
+      open += ` ${name}="${escapeAttr2(value)}"`;
+    }
+  }
+  open += ">";
+  stream.push(open);
+  if (VOID_ELEMENTS2.has(el.tag.toLowerCase())) {
+    return;
+  }
+  for (const child of el.children) {
+    pushVNode(stream, child);
+  }
+  stream.push(`</${el.tag}>`);
+}
+
+// src/server-router.ts
+var import_utopia_router = require("@matthesketh/utopia-router");
+function createServerRouter(routes, url) {
+  const fullUrl = new URL(url, "http://localhost");
+  return (0, import_utopia_router.matchRoute)(fullUrl, routes);
+}
+
+// src/handler.ts
+function createHandler(options) {
+  const { template, render } = options;
+  return async (req, res) => {
+    const url = req.url ?? "/";
+    try {
+      const { html, css } = await render(url);
+      const headInject = css ? `<style>${css}</style>` : "";
+      let page = template;
+      page = page.replace("<!--ssr-head-->", headInject);
+      page = page.replace("<!--ssr-outlet-->", html);
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(page);
+    } catch (err) {
+      console.error("[utopia] SSR render error:", err);
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end("Internal Server Error");
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createHandler,
+  createServerRouter,
+  renderToStream,
+  renderToString
+});

package/dist/index.d.cts

@@ -0,0 +1,61 @@
+import { C as ComponentDefinition } from './ssr-runtime-DRHVHO7Q.cjs';
+export { V as VComment, a as VElement, b as VNode, c as VText } from './ssr-runtime-DRHVHO7Q.cjs';
+import { Readable } from 'node:stream';
+import { Route, RouteMatch } from '@matthesketh/utopia-router';
+import { IncomingMessage, ServerResponse } from 'node:http';
+import '@matthesketh/utopia-core';
+
+/**
+ * Render a component to an HTML string.
+ *
+ * @returns An object with `html` (the rendered markup) and `css` (all
+ *          scoped styles collected during rendering).
+ */
+declare function renderToString(component: ComponentDefinition, props?: Record<string, any>): {
+    html: string;
+    css: string;
+};
+
+/**
+ * Render a component to a Node.js Readable stream.
+ *
+ * The stream yields HTML chunks as the VNode tree is walked. This
+ * allows the server to begin flushing output before the full tree
+ * is serialized, reducing TTFB for large pages.
+ */
+declare function renderToStream(component: ComponentDefinition, props?: Record<string, any>): Readable;
+
+/**
+ * Match a URL string against a route table on the server.
+ *
+ * @param routes - The compiled route table
+ * @param url    - The URL string to match (e.g. '/blog/my-post')
+ * @returns The matched route with params, or null
+ */
+declare function createServerRouter(routes: Route[], url: string): RouteMatch | null;
+
+interface HandlerOptions {
+    /** The HTML template with <!--ssr-outlet--> and <!--ssr-head--> markers. */
+    template: string;
+    /** Render function that produces HTML + CSS for a given URL. */
+    render: (url: string) => Promise<{
+        html: string;
+        css: string;
+    }>;
+}
+/**
+ * Create a Node.js HTTP request handler for SSR.
+ *
+ * The handler renders the component for the incoming URL and injects the
+ * result into the HTML template at the marker positions:
+ *
+ * - `<!--ssr-head-->` — replaced with `<style>` tags for collected CSS
+ * - `<!--ssr-outlet-->` — replaced with the rendered HTML
+ *
+ * @param options - Handler configuration
+ * @returns An `(req, res) => void` function suitable for Node's `http.createServer`
+ *          or as Express middleware.
+ */
+declare function createHandler(options: HandlerOptions): (req: IncomingMessage, res: ServerResponse) => void;
+
+export { createHandler, createServerRouter, renderToStream, renderToString };

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { C as ComponentDefinition } from './ssr-runtime-DRHVHO7Q.js';
+export { V as VComment, a as VElement, b as VNode, c as VText } from './ssr-runtime-DRHVHO7Q.js';
+import { Readable } from 'node:stream';
+import { Route, RouteMatch } from '@matthesketh/utopia-router';
+import { IncomingMessage, ServerResponse } from 'node:http';
+import '@matthesketh/utopia-core';
+
+/**
+ * Render a component to an HTML string.
+ *
+ * @returns An object with `html` (the rendered markup) and `css` (all
+ *          scoped styles collected during rendering).
+ */
+declare function renderToString(component: ComponentDefinition, props?: Record<string, any>): {
+    html: string;
+    css: string;
+};
+
+/**
+ * Render a component to a Node.js Readable stream.
+ *
+ * The stream yields HTML chunks as the VNode tree is walked. This
+ * allows the server to begin flushing output before the full tree
+ * is serialized, reducing TTFB for large pages.
+ */
+declare function renderToStream(component: ComponentDefinition, props?: Record<string, any>): Readable;
+
+/**
+ * Match a URL string against a route table on the server.
+ *
+ * @param routes - The compiled route table
+ * @param url    - The URL string to match (e.g. '/blog/my-post')
+ * @returns The matched route with params, or null
+ */
+declare function createServerRouter(routes: Route[], url: string): RouteMatch | null;
+
+interface HandlerOptions {
+    /** The HTML template with <!--ssr-outlet--> and <!--ssr-head--> markers. */
+    template: string;
+    /** Render function that produces HTML + CSS for a given URL. */
+    render: (url: string) => Promise<{
+        html: string;
+        css: string;
+    }>;
+}
+/**
+ * Create a Node.js HTTP request handler for SSR.
+ *
+ * The handler renders the component for the incoming URL and injects the
+ * result into the HTML template at the marker positions:
+ *
+ * - `<!--ssr-head-->` — replaced with `<style>` tags for collected CSS
+ * - `<!--ssr-outlet-->` — replaced with the rendered HTML
+ *
+ * @param options - Handler configuration
+ * @returns An `(req, res) => void` function suitable for Node's `http.createServer`
+ *          or as Express middleware.
+ */
+declare function createHandler(options: HandlerOptions): (req: IncomingMessage, res: ServerResponse) => void;
+
+export { createHandler, createServerRouter, renderToStream, renderToString };

package/dist/index.js

@@ -0,0 +1,178 @@
+import {
+  createComponent,
+  flushStyles
+} from "./chunk-DV7AV4JO.js";
+
+// src/render-to-string.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function escapeComment(str) {
+  return str.replace(/--/g, "-\u200B-");
+}
+function serializeVNode(node) {
+  switch (node.type) {
+    case 1:
+      return serializeElement(node);
+    case 2:
+      return escapeHtml(node.text);
+    case 3:
+      return `<!--${escapeComment(node.text)}-->`;
+  }
+}
+function serializeElement(el) {
+  const tag = el.tag;
+  let html = `<${tag}`;
+  for (const [name, value] of Object.entries(el.attrs)) {
+    if (value === "") {
+      html += ` ${name}`;
+    } else {
+      html += ` ${name}="${escapeAttr(value)}"`;
+    }
+  }
+  if (VOID_ELEMENTS.has(tag.toLowerCase())) {
+    html += ">";
+    return html;
+  }
+  html += ">";
+  for (const child of el.children) {
+    html += serializeVNode(child);
+  }
+  html += `</${tag}>`;
+  return html;
+}
+function renderToString(component, props) {
+  flushStyles();
+  const vnode = createComponent(component, props);
+  const html = serializeVNode(vnode);
+  const styles = flushStyles();
+  const css = styles.join("\n");
+  return { html, css };
+}
+
+// src/render-to-stream.ts
+import { Readable } from "stream";
+var VOID_ELEMENTS2 = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr2(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function escapeComment2(str) {
+  return str.replace(/--/g, "-\u200B-");
+}
+function renderToStream(component, props) {
+  flushStyles();
+  const vnode = createComponent(component, props);
+  const styles = flushStyles();
+  return new Readable({
+    read() {
+      if (styles.length > 0) {
+        this.push(`<style>${styles.join("\n")}</style>`);
+      }
+      pushVNode(this, vnode);
+      this.push(null);
+    }
+  });
+}
+function pushVNode(stream, node) {
+  switch (node.type) {
+    case 1:
+      pushElement(stream, node);
+      break;
+    case 2:
+      stream.push(escapeHtml2(node.text));
+      break;
+    case 3:
+      stream.push(`<!--${escapeComment2(node.text)}-->`);
+      break;
+  }
+}
+function pushElement(stream, el) {
+  let open = `<${el.tag}`;
+  for (const [name, value] of Object.entries(el.attrs)) {
+    if (value === "") {
+      open += ` ${name}`;
+    } else {
+      open += ` ${name}="${escapeAttr2(value)}"`;
+    }
+  }
+  open += ">";
+  stream.push(open);
+  if (VOID_ELEMENTS2.has(el.tag.toLowerCase())) {
+    return;
+  }
+  for (const child of el.children) {
+    pushVNode(stream, child);
+  }
+  stream.push(`</${el.tag}>`);
+}
+
+// src/server-router.ts
+import { matchRoute } from "@matthesketh/utopia-router";
+function createServerRouter(routes, url) {
+  const fullUrl = new URL(url, "http://localhost");
+  return matchRoute(fullUrl, routes);
+}
+
+// src/handler.ts
+function createHandler(options) {
+  const { template, render } = options;
+  return async (req, res) => {
+    const url = req.url ?? "/";
+    try {
+      const { html, css } = await render(url);
+      const headInject = css ? `<style>${css}</style>` : "";
+      let page = template;
+      page = page.replace("<!--ssr-head-->", headInject);
+      page = page.replace("<!--ssr-outlet-->", html);
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(page);
+    } catch (err) {
+      console.error("[utopia] SSR render error:", err);
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end("Internal Server Error");
+    }
+  };
+}
+export {
+  createHandler,
+  createServerRouter,
+  renderToStream,
+  renderToString
+};

package/dist/ssr-runtime-DRHVHO7Q.d.cts

@@ -0,0 +1,60 @@
+import '@matthesketh/utopia-core';
+
+interface VElement {
+    type: 1;
+    tag: string;
+    attrs: Record<string, string>;
+    children: VNode[];
+    _parent?: VElement;
+}
+interface VText {
+    type: 2;
+    text: string;
+    _parent?: VElement;
+}
+interface VComment {
+    type: 3;
+    text: string;
+    _parent?: VElement;
+}
+type VNode = VElement | VText | VComment;
+
+/** Reset and return all collected styles. */
+declare function flushStyles(): string[];
+declare function createElement(tag: string): VElement;
+declare function createTextNode(text: string): VText;
+declare function createComment(text: string): VComment;
+declare function setText(node: VText, value: any): void;
+declare function setAttr(el: VElement, name: string, value: any): void;
+declare function addEventListener(_el: VElement, _event: string, _handler: any): () => void;
+declare function appendChild(parent: VElement, child: VNode): void;
+declare function insertBefore(parent: VElement, node: VNode, anchor: VNode | null): void;
+declare function removeNode(node: VNode): void;
+declare function effect(fn: () => void | (() => void)): () => void;
+declare function createEffect(fn: () => void | (() => void)): () => void;
+declare function createIf(anchor: VComment, condition: () => any, renderTrue: () => VNode, renderFalse?: () => VNode): () => void;
+declare function createFor<T>(anchor: VComment, list: () => T[], renderItem: (item: T, index: number) => VNode): () => void;
+interface ComponentDefinition {
+    setup?: (props: Record<string, any>) => Record<string, any>;
+    render: (ctx: Record<string, any>) => VNode;
+    styles?: string;
+}
+declare function createComponent(Component: ComponentDefinition, props?: Record<string, any>, children?: Record<string, () => VNode>): VNode;
+declare function createComponentInstance(definition: ComponentDefinition, props?: Record<string, any>): {
+    el: VNode | null;
+    props: Record<string, any>;
+    slots: Record<string, () => VNode>;
+    mount(_target: any): void;
+    unmount(): void;
+};
+declare function mount(component: ComponentDefinition, _target: any): {
+    el: VNode | null;
+    props: Record<string, any>;
+    slots: Record<string, () => VNode>;
+    mount(_target: any): void;
+    unmount(): void;
+};
+declare function queueJob(_fn: () => void): void;
+declare function nextTick(): Promise<void>;
+
+export { type ComponentDefinition as C, type VComment as V, type VElement as a, type VNode as b, type VText as c, addEventListener as d, appendChild as e, createComment as f, createComponent as g, createComponentInstance as h, createEffect as i, createElement as j, createFor as k, createIf as l, createTextNode as m, effect as n, flushStyles as o, insertBefore as p, mount as q, nextTick as r, queueJob as s, removeNode as t, setAttr as u, setText as v };

package/dist/ssr-runtime-DRHVHO7Q.d.ts

@@ -0,0 +1,60 @@
+import '@matthesketh/utopia-core';
+
+interface VElement {
+    type: 1;
+    tag: string;
+    attrs: Record<string, string>;
+    children: VNode[];
+    _parent?: VElement;
+}
+interface VText {
+    type: 2;
+    text: string;
+    _parent?: VElement;
+}
+interface VComment {
+    type: 3;
+    text: string;
+    _parent?: VElement;
+}
+type VNode = VElement | VText | VComment;
+
+/** Reset and return all collected styles. */
+declare function flushStyles(): string[];
+declare function createElement(tag: string): VElement;
+declare function createTextNode(text: string): VText;
+declare function createComment(text: string): VComment;
+declare function setText(node: VText, value: any): void;
+declare function setAttr(el: VElement, name: string, value: any): void;
+declare function addEventListener(_el: VElement, _event: string, _handler: any): () => void;
+declare function appendChild(parent: VElement, child: VNode): void;
+declare function insertBefore(parent: VElement, node: VNode, anchor: VNode | null): void;
+declare function removeNode(node: VNode): void;
+declare function effect(fn: () => void | (() => void)): () => void;
+declare function createEffect(fn: () => void | (() => void)): () => void;
+declare function createIf(anchor: VComment, condition: () => any, renderTrue: () => VNode, renderFalse?: () => VNode): () => void;
+declare function createFor<T>(anchor: VComment, list: () => T[], renderItem: (item: T, index: number) => VNode): () => void;
+interface ComponentDefinition {
+    setup?: (props: Record<string, any>) => Record<string, any>;
+    render: (ctx: Record<string, any>) => VNode;
+    styles?: string;
+}
+declare function createComponent(Component: ComponentDefinition, props?: Record<string, any>, children?: Record<string, () => VNode>): VNode;
+declare function createComponentInstance(definition: ComponentDefinition, props?: Record<string, any>): {
+    el: VNode | null;
+    props: Record<string, any>;
+    slots: Record<string, () => VNode>;
+    mount(_target: any): void;
+    unmount(): void;
+};
+declare function mount(component: ComponentDefinition, _target: any): {
+    el: VNode | null;
+    props: Record<string, any>;
+    slots: Record<string, () => VNode>;
+    mount(_target: any): void;
+    unmount(): void;
+};
+declare function queueJob(_fn: () => void): void;
+declare function nextTick(): Promise<void>;
+
+export { type ComponentDefinition as C, type VComment as V, type VElement as a, type VNode as b, type VText as c, addEventListener as d, appendChild as e, createComment as f, createComponent as g, createComponentInstance as h, createEffect as i, createElement as j, createFor as k, createIf as l, createTextNode as m, effect as n, flushStyles as o, insertBefore as p, mount as q, nextTick as r, queueJob as s, removeNode as t, setAttr as u, setText as v };