@matthesketh/utopia-server 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matt Hesketh
+
+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/README.md

@@ -0,0 +1,47 @@
+# @matthesketh/utopia-server
+
+Server-side rendering for UtopiaJS. Provides `renderToString`, `renderToStream`, server-side routing, and an HTTP request handler. The SSR runtime is a drop-in replacement for `@matthesketh/utopia-runtime` that builds VNode trees instead of real DOM.
+
+## Install
+
+```bash
+pnpm add @matthesketh/utopia-server
+```
+
+## Usage
+
+```ts
+import { renderToString } from '@matthesketh/utopia-server';
+import App from './App.utopia';
+
+const { html, css } = renderToString(App, { title: 'Hello' });
+```
+
+Streaming:
+
+```ts
+import { renderToStream } from '@matthesketh/utopia-server';
+import App from './App.utopia';
+
+const stream = renderToStream(App);
+stream.pipe(res);
+```
+
+## API
+
+| Export | Description |
+|--------|-------------|
+| `renderToString(component, props?)` | Render a component to `{ html, css }` synchronously. |
+| `renderToStream(component, props?)` | Render to a Node.js `Readable` stream. |
+| `createServerRouter(routes, url)` | Match a URL against routes on the server. |
+| `createHandler(options)` | Create a Node.js HTTP request handler for SSR. |
+
+**Subpath export:** `@matthesketh/utopia-server/ssr-runtime` -- drop-in replacement for `@matthesketh/utopia-runtime` used during SSR builds. The Vite plugin handles this swap automatically.
+
+**VNode types:** `VElement`, `VText`, `VComment`, `VNode`.
+
+See [docs/ssr.md](../../docs/ssr.md) for the full SSR architecture, hydration details, and setup guide.
+
+## License
+
+MIT

package/dist/chunk-DV7AV4JO.js

@@ -0,0 +1,216 @@
+// src/ssr-runtime.ts
+import { signal, computed, batch, untrack } from "@matthesketh/utopia-core";
+var collectedStyles = [];
+function flushStyles() {
+  const styles = collectedStyles;
+  collectedStyles = [];
+  return styles;
+}
+function createElement(tag) {
+  return { type: 1, tag, attrs: {}, children: [] };
+}
+function createTextNode(text) {
+  return { type: 2, text: String(text) };
+}
+function createComment(text) {
+  return { type: 3, text };
+}
+function setText(node, value) {
+  node.text = value == null ? "" : String(value);
+}
+function setAttr(el, name, value) {
+  if (name === "class") {
+    if (value == null || value === false) {
+      delete el.attrs["class"];
+    } else if (typeof value === "string") {
+      el.attrs["class"] = value;
+    } else if (typeof value === "object") {
+      const classes = [];
+      for (const key of Object.keys(value)) {
+        if (value[key]) classes.push(key);
+      }
+      el.attrs["class"] = classes.join(" ");
+    }
+    return;
+  }
+  if (name === "style") {
+    if (value == null || value === false) {
+      delete el.attrs["style"];
+    } else if (typeof value === "string") {
+      el.attrs["style"] = value;
+    } else if (typeof value === "object") {
+      const parts = [];
+      for (const prop of Object.keys(value)) {
+        if (value[prop] != null) {
+          const cssName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          parts.push(`${cssName}: ${value[prop]}`);
+        }
+      }
+      el.attrs["style"] = parts.join("; ");
+    }
+    return;
+  }
+  const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
+    "disabled",
+    "checked",
+    "readonly",
+    "hidden",
+    "selected",
+    "required",
+    "multiple",
+    "autofocus",
+    "autoplay",
+    "controls",
+    "loop",
+    "muted",
+    "open",
+    "novalidate"
+  ]);
+  if (BOOLEAN_ATTRS.has(name)) {
+    if (value) {
+      el.attrs[name] = "";
+    } else {
+      delete el.attrs[name];
+    }
+    return;
+  }
+  if (value == null || value === false) {
+    delete el.attrs[name];
+  } else {
+    el.attrs[name] = value === true ? "" : String(value);
+  }
+}
+function addEventListener(_el, _event, _handler) {
+  return () => {
+  };
+}
+function appendChild(parent, child) {
+  child._parent = parent;
+  parent.children.push(child);
+}
+function insertBefore(parent, node, anchor) {
+  node._parent = parent;
+  if (anchor === null) {
+    parent.children.push(node);
+    return;
+  }
+  const idx = parent.children.indexOf(anchor);
+  if (idx === -1) {
+    parent.children.push(node);
+  } else {
+    parent.children.splice(idx, 0, node);
+  }
+}
+function removeNode(node) {
+  if (node._parent) {
+    const idx = node._parent.children.indexOf(node);
+    if (idx !== -1) {
+      node._parent.children.splice(idx, 1);
+    }
+    node._parent = void 0;
+  }
+}
+function effect(fn) {
+  untrack(() => fn());
+  return () => {
+  };
+}
+function createEffect(fn) {
+  return effect(fn);
+}
+function createIf(anchor, condition, renderTrue, renderFalse) {
+  const parent = anchor._parent;
+  if (!parent) return () => {
+  };
+  const truthy = !!untrack(condition);
+  if (truthy) {
+    const node = untrack(renderTrue);
+    insertBefore(parent, node, anchor);
+  } else if (renderFalse) {
+    const node = untrack(renderFalse);
+    insertBefore(parent, node, anchor);
+  }
+  return () => {
+  };
+}
+function createFor(anchor, list, renderItem) {
+  const parent = anchor._parent;
+  if (!parent) return () => {
+  };
+  const items = untrack(list);
+  for (let i = 0; i < items.length; i++) {
+    const node = untrack(() => renderItem(items[i], i));
+    insertBefore(parent, node, anchor);
+  }
+  return () => {
+  };
+}
+function createComponent(Component, props, children) {
+  const ctx = Component.setup ? untrack(() => Component.setup(props ?? {})) : {};
+  const renderCtx = {
+    ...ctx,
+    $slots: children ?? {}
+  };
+  const el = untrack(() => Component.render(renderCtx));
+  if (Component.styles) {
+    collectedStyles.push(Component.styles);
+  }
+  return el;
+}
+function createComponentInstance(definition, props) {
+  return {
+    el: null,
+    props: props ?? {},
+    slots: {},
+    mount(_target) {
+      const ctx = definition.setup ? untrack(() => definition.setup(this.props)) : {};
+      const renderCtx = {
+        ...ctx,
+        $slots: this.slots
+      };
+      this.el = untrack(() => definition.render(renderCtx));
+      if (definition.styles) {
+        collectedStyles.push(definition.styles);
+      }
+    },
+    unmount() {
+      this.el = null;
+    }
+  };
+}
+function mount(component, _target) {
+  const instance = createComponentInstance(component);
+  instance.mount(null);
+  return instance;
+}
+function queueJob(_fn) {
+}
+function nextTick() {
+  return Promise.resolve();
+}
+
+export {
+  signal,
+  computed,
+  batch,
+  untrack,
+  flushStyles,
+  createElement,
+  createTextNode,
+  createComment,
+  setText,
+  setAttr,
+  addEventListener,
+  appendChild,
+  insertBefore,
+  removeNode,
+  effect,
+  createEffect,
+  createIf,
+  createFor,
+  createComponent,
+  createComponentInstance,
+  mount,
+  queueJob,
+  nextTick
+};

package/dist/chunk-KRXKBFI6.js

@@ -0,0 +1,216 @@
+// src/ssr-runtime.ts
+import { signal, computed, batch, untrack } from "@utopia/core";
+var collectedStyles = [];
+function flushStyles() {
+  const styles = collectedStyles;
+  collectedStyles = [];
+  return styles;
+}
+function createElement(tag) {
+  return { type: 1, tag, attrs: {}, children: [] };
+}
+function createTextNode(text) {
+  return { type: 2, text: String(text) };
+}
+function createComment(text) {
+  return { type: 3, text };
+}
+function setText(node, value) {
+  node.text = value == null ? "" : String(value);
+}
+function setAttr(el, name, value) {
+  if (name === "class") {
+    if (value == null || value === false) {
+      delete el.attrs["class"];
+    } else if (typeof value === "string") {
+      el.attrs["class"] = value;
+    } else if (typeof value === "object") {
+      const classes = [];
+      for (const key of Object.keys(value)) {
+        if (value[key]) classes.push(key);
+      }
+      el.attrs["class"] = classes.join(" ");
+    }
+    return;
+  }
+  if (name === "style") {
+    if (value == null || value === false) {
+      delete el.attrs["style"];
+    } else if (typeof value === "string") {
+      el.attrs["style"] = value;
+    } else if (typeof value === "object") {
+      const parts = [];
+      for (const prop of Object.keys(value)) {
+        if (value[prop] != null) {
+          const cssName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          parts.push(`${cssName}: ${value[prop]}`);
+        }
+      }
+      el.attrs["style"] = parts.join("; ");
+    }
+    return;
+  }
+  const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
+    "disabled",
+    "checked",
+    "readonly",
+    "hidden",
+    "selected",
+    "required",
+    "multiple",
+    "autofocus",
+    "autoplay",
+    "controls",
+    "loop",
+    "muted",
+    "open",
+    "novalidate"
+  ]);
+  if (BOOLEAN_ATTRS.has(name)) {
+    if (value) {
+      el.attrs[name] = "";
+    } else {
+      delete el.attrs[name];
+    }
+    return;
+  }
+  if (value == null || value === false) {
+    delete el.attrs[name];
+  } else {
+    el.attrs[name] = value === true ? "" : String(value);
+  }
+}
+function addEventListener(_el, _event, _handler) {
+  return () => {
+  };
+}
+function appendChild(parent, child) {
+  child._parent = parent;
+  parent.children.push(child);
+}
+function insertBefore(parent, node, anchor) {
+  node._parent = parent;
+  if (anchor === null) {
+    parent.children.push(node);
+    return;
+  }
+  const idx = parent.children.indexOf(anchor);
+  if (idx === -1) {
+    parent.children.push(node);
+  } else {
+    parent.children.splice(idx, 0, node);
+  }
+}
+function removeNode(node) {
+  if (node._parent) {
+    const idx = node._parent.children.indexOf(node);
+    if (idx !== -1) {
+      node._parent.children.splice(idx, 1);
+    }
+    node._parent = void 0;
+  }
+}
+function effect(fn) {
+  untrack(() => fn());
+  return () => {
+  };
+}
+function createEffect(fn) {
+  return effect(fn);
+}
+function createIf(anchor, condition, renderTrue, renderFalse) {
+  const parent = anchor._parent;
+  if (!parent) return () => {
+  };
+  const truthy = !!untrack(condition);
+  if (truthy) {
+    const node = untrack(renderTrue);
+    insertBefore(parent, node, anchor);
+  } else if (renderFalse) {
+    const node = untrack(renderFalse);
+    insertBefore(parent, node, anchor);
+  }
+  return () => {
+  };
+}
+function createFor(anchor, list, renderItem) {
+  const parent = anchor._parent;
+  if (!parent) return () => {
+  };
+  const items = untrack(list);
+  for (let i = 0; i < items.length; i++) {
+    const node = untrack(() => renderItem(items[i], i));
+    insertBefore(parent, node, anchor);
+  }
+  return () => {
+  };
+}
+function createComponent(Component, props, children) {
+  const ctx = Component.setup ? untrack(() => Component.setup(props ?? {})) : {};
+  const renderCtx = {
+    ...ctx,
+    $slots: children ?? {}
+  };
+  const el = untrack(() => Component.render(renderCtx));
+  if (Component.styles) {
+    collectedStyles.push(Component.styles);
+  }
+  return el;
+}
+function createComponentInstance(definition, props) {
+  return {
+    el: null,
+    props: props ?? {},
+    slots: {},
+    mount(_target) {
+      const ctx = definition.setup ? untrack(() => definition.setup(this.props)) : {};
+      const renderCtx = {
+        ...ctx,
+        $slots: this.slots
+      };
+      this.el = untrack(() => definition.render(renderCtx));
+      if (definition.styles) {
+        collectedStyles.push(definition.styles);
+      }
+    },
+    unmount() {
+      this.el = null;
+    }
+  };
+}
+function mount(component, _target) {
+  const instance = createComponentInstance(component);
+  instance.mount(null);
+  return instance;
+}
+function queueJob(_fn) {
+}
+function nextTick() {
+  return Promise.resolve();
+}
+
+export {
+  signal,
+  computed,
+  batch,
+  untrack,
+  flushStyles,
+  createElement,
+  createTextNode,
+  createComment,
+  setText,
+  setAttr,
+  addEventListener,
+  appendChild,
+  insertBefore,
+  removeNode,
+  effect,
+  createEffect,
+  createIf,
+  createFor,
+  createComponent,
+  createComponentInstance,
+  mount,
+  queueJob,
+  nextTick
+};