@vertz/ui-server 0.2.0 → 0.2.3

package/dist/shared/chunk-4t0ekdyv.js

@@ -0,0 +1,513 @@
+// src/dom-shim/index.ts
+import { setAdapter } from "@vertz/ui/internals";
+
+// src/dom-shim/ssr-node.ts
+class SSRNode {
+  childNodes = [];
+  parentNode = null;
+  get firstChild() {
+    return this.childNodes[0] ?? null;
+  }
+  get nextSibling() {
+    if (!this.parentNode)
+      return null;
+    const index = this.parentNode.childNodes.indexOf(this);
+    return this.parentNode.childNodes[index + 1] ?? null;
+  }
+  removeChild(child) {
+    const index = this.childNodes.indexOf(child);
+    if (index !== -1) {
+      this.childNodes.splice(index, 1);
+      child.parentNode = null;
+    }
+    return child;
+  }
+  insertBefore(newNode, referenceNode) {
+    if (!referenceNode) {
+      this.childNodes.push(newNode);
+      newNode.parentNode = this;
+    } else {
+      const index = this.childNodes.indexOf(referenceNode);
+      if (index !== -1) {
+        this.childNodes.splice(index, 0, newNode);
+        newNode.parentNode = this;
+      }
+    }
+    return newNode;
+  }
+  replaceChild(newNode, oldNode) {
+    const index = this.childNodes.indexOf(oldNode);
+    if (index !== -1) {
+      this.childNodes[index] = newNode;
+      newNode.parentNode = this;
+      oldNode.parentNode = null;
+    }
+    return oldNode;
+  }
+}
+
+// src/dom-shim/ssr-comment.ts
+class SSRComment extends SSRNode {
+  text;
+  constructor(text) {
+    super();
+    this.text = text;
+  }
+  get data() {
+    return this.text;
+  }
+  set data(value) {
+    this.text = value;
+  }
+}
+
+// src/types.ts
+function rawHtml(html) {
+  return { __raw: true, html };
+}
+
+// src/dom-shim/ssr-text-node.ts
+class SSRTextNode extends SSRNode {
+  text;
+  constructor(text) {
+    super();
+    this.text = text;
+  }
+  get data() {
+    return this.text;
+  }
+  set data(value) {
+    this.text = value;
+  }
+}
+
+// src/dom-shim/ssr-fragment.ts
+class SSRDocumentFragment extends SSRNode {
+  children = [];
+  appendChild(child) {
+    if (child instanceof SSRTextNode) {
+      this.children.push(child.text);
+      this.childNodes.push(child);
+      child.parentNode = this;
+    } else if (child instanceof SSRDocumentFragment) {
+      this.children.push(...child.children);
+      this.childNodes.push(...child.childNodes);
+      for (const fragmentChild of child.childNodes) {
+        fragmentChild.parentNode = this;
+      }
+    } else {
+      this.children.push(child);
+      this.childNodes.push(child);
+      child.parentNode = this;
+    }
+  }
+}
+
+// src/dom-shim/ssr-element.ts
+function createStyleProxy(element) {
+  const styles = {};
+  return new Proxy(styles, {
+    set(_target, prop, value) {
+      if (typeof prop === "string") {
+        styles[prop] = value;
+        const pairs = Object.entries(styles).map(([k, v]) => {
+          const key = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+          return `${key}: ${v}`;
+        });
+        element.attrs.style = pairs.join("; ");
+      }
+      return true;
+    },
+    get(_target, prop) {
+      if (typeof prop === "string") {
+        return styles[prop] ?? "";
+      }
+      return;
+    }
+  });
+}
+
+class SSRElement extends SSRNode {
+  tag;
+  attrs = {};
+  children = [];
+  _classList = new Set;
+  _textContent = null;
+  _innerHTML = null;
+  style;
+  constructor(tag) {
+    super();
+    this.tag = tag;
+    this.style = createStyleProxy(this);
+  }
+  setAttribute(name, value) {
+    if (name === "class") {
+      this._classList = new Set(value.split(/\s+/).filter(Boolean));
+    }
+    this.attrs[name] = value;
+  }
+  getAttribute(name) {
+    return this.attrs[name] ?? null;
+  }
+  removeAttribute(name) {
+    delete this.attrs[name];
+    if (name === "class") {
+      this._classList.clear();
+    }
+  }
+  appendChild(child) {
+    if (child instanceof SSRComment) {
+      this.children.push(child);
+      this.childNodes.push(child);
+      child.parentNode = this;
+    } else if (child instanceof SSRTextNode) {
+      this.children.push(child.text);
+      this.childNodes.push(child);
+      child.parentNode = this;
+    } else if (child instanceof SSRDocumentFragment) {
+      for (const fragmentChild of child.childNodes) {
+        if (fragmentChild instanceof SSRComment) {
+          this.children.push(fragmentChild);
+        } else if (fragmentChild instanceof SSRTextNode) {
+          this.children.push(fragmentChild.text);
+        } else if (fragmentChild instanceof SSRElement) {
+          this.children.push(fragmentChild);
+        }
+        this.childNodes.push(fragmentChild);
+        fragmentChild.parentNode = this;
+      }
+    } else {
+      this.children.push(child);
+      this.childNodes.push(child);
+      child.parentNode = this;
+    }
+  }
+  insertBefore(newNode, referenceNode) {
+    const refIdx = referenceNode ? this._findChildIndex(referenceNode) : -1;
+    const result = super.insertBefore(newNode, referenceNode);
+    if (newNode instanceof SSRDocumentFragment) {
+      const fragmentChildren = [];
+      for (const fc of newNode.childNodes) {
+        if (fc instanceof SSRComment)
+          fragmentChildren.push(fc);
+        else if (fc instanceof SSRTextNode)
+          fragmentChildren.push(fc.text);
+        else if (fc instanceof SSRElement)
+          fragmentChildren.push(fc);
+      }
+      if (!referenceNode || refIdx === -1) {
+        this.children.push(...fragmentChildren);
+      } else {
+        this.children.splice(refIdx, 0, ...fragmentChildren);
+      }
+    } else {
+      const child = newNode instanceof SSRComment ? newNode : newNode instanceof SSRTextNode ? newNode.text : newNode instanceof SSRElement ? newNode : null;
+      if (child != null) {
+        if (!referenceNode || refIdx === -1) {
+          this.children.push(child);
+        } else {
+          this.children.splice(refIdx, 0, child);
+        }
+      }
+    }
+    return result;
+  }
+  replaceChild(newNode, oldNode) {
+    const oldIdx = this._findChildIndex(oldNode);
+    const result = super.replaceChild(newNode, oldNode);
+    if (oldIdx !== -1) {
+      const newChild = newNode instanceof SSRComment ? newNode : newNode instanceof SSRTextNode ? newNode.text : newNode instanceof SSRElement ? newNode : null;
+      if (newChild != null) {
+        this.children[oldIdx] = newChild;
+      } else {
+        this.children.splice(oldIdx, 1);
+      }
+    }
+    return result;
+  }
+  _findChildIndex(node) {
+    return this.childNodes.indexOf(node);
+  }
+  removeChild(child) {
+    const idx = this._findChildIndex(child);
+    const result = super.removeChild(child);
+    if (idx !== -1) {
+      this.children.splice(idx, 1);
+    }
+    return result;
+  }
+  get classList() {
+    const self = this;
+    return {
+      add(cls) {
+        self._classList.add(cls);
+        self.attrs.class = [...self._classList].join(" ");
+      },
+      remove(cls) {
+        self._classList.delete(cls);
+        const val = [...self._classList].join(" ");
+        if (val) {
+          self.attrs.class = val;
+        } else {
+          delete self.attrs.class;
+        }
+      }
+    };
+  }
+  set className(value) {
+    this._classList = new Set(value.split(/\s+/).filter(Boolean));
+    if (value) {
+      this.attrs.class = value;
+    } else {
+      delete this.attrs.class;
+    }
+  }
+  get className() {
+    return this.attrs.class ?? "";
+  }
+  set textContent(value) {
+    this._textContent = value;
+    this.children = value ? [value] : [];
+    this.childNodes = [];
+  }
+  get textContent() {
+    return this._textContent;
+  }
+  set innerHTML(value) {
+    this._innerHTML = value;
+    this.children = value ? [value] : [];
+    this.childNodes = [];
+  }
+  get innerHTML() {
+    return this._innerHTML ?? "";
+  }
+  addEventListener(_event, _handler) {}
+  removeEventListener(_event, _handler) {}
+  toVNode() {
+    return {
+      tag: this.tag,
+      attrs: { ...this.attrs },
+      children: this.children.map((child) => {
+        if (typeof child === "string") {
+          return this._innerHTML != null ? rawHtml(child) : child;
+        }
+        if (child instanceof SSRComment)
+          return rawHtml(`<!--${child.text}-->`);
+        if (typeof child.toVNode === "function")
+          return child.toVNode();
+        return String(child);
+      })
+    };
+  }
+}
+
+// src/ssr-adapter.ts
+var BRAND = Symbol.for("vertz:render-node");
+Object.defineProperty(SSRNode.prototype, BRAND, {
+  value: true,
+  enumerable: false,
+  configurable: false,
+  writable: false
+});
+function createSSRAdapter() {
+  return {
+    createElement: (tag) => new SSRElement(tag),
+    createElementNS: (_ns, tag) => new SSRElement(tag),
+    createTextNode: (text) => new SSRTextNode(text),
+    createComment: (text) => new SSRComment(text),
+    createDocumentFragment: () => new SSRDocumentFragment,
+    isNode: (value) => value != null && typeof value === "object" && (BRAND in value)
+  };
+}
+
+// src/dom-shim/index.ts
+var SHIM_GLOBALS = [
+  "document",
+  "window",
+  "Node",
+  "HTMLElement",
+  "HTMLAnchorElement",
+  "HTMLDivElement",
+  "HTMLInputElement",
+  "HTMLButtonElement",
+  "HTMLSelectElement",
+  "HTMLTextAreaElement",
+  "DocumentFragment",
+  "MouseEvent",
+  "Event"
+];
+var savedGlobals = null;
+var shimInstalled = false;
+var installedGlobals = [];
+function installGlobal(name, value) {
+  if (globalThis[name] === undefined) {
+    Object.defineProperty(globalThis, name, {
+      value,
+      writable: true,
+      configurable: true
+    });
+    installedGlobals.push(name);
+  }
+}
+function installDomShim() {
+  for (const g of installedGlobals) {
+    delete globalThis[g];
+  }
+  installedGlobals = [];
+  setAdapter(createSSRAdapter());
+  const isSSRContext = typeof globalThis.__SSR_URL__ !== "undefined";
+  if (typeof document !== "undefined" && !isSSRContext && !shimInstalled) {
+    return;
+  }
+  if (!shimInstalled) {
+    savedGlobals = new Map;
+    for (const g of SHIM_GLOBALS) {
+      if (g in globalThis) {
+        savedGlobals.set(g, globalThis[g]);
+      }
+    }
+  }
+  shimInstalled = true;
+  const fakeDocument = {
+    createElement(tag) {
+      return new SSRElement(tag);
+    },
+    createTextNode(text) {
+      return new SSRTextNode(text);
+    },
+    createComment(text) {
+      return new SSRComment(text);
+    },
+    createDocumentFragment() {
+      return new SSRDocumentFragment;
+    },
+    head: new SSRElement("head"),
+    body: new SSRElement("body"),
+    querySelector: () => null,
+    querySelectorAll: () => [],
+    getElementById: () => null,
+    cookie: ""
+  };
+  globalThis.document = fakeDocument;
+  if (typeof window === "undefined") {
+    globalThis.window = {
+      location: { pathname: globalThis.__SSR_URL__ || "/", search: "", hash: "" },
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      history: {
+        pushState: () => {},
+        replaceState: () => {}
+      }
+    };
+  } else {
+    globalThis.window.location = {
+      ...globalThis.window.location || {},
+      pathname: globalThis.__SSR_URL__ || "/"
+    };
+  }
+  globalThis.Node = SSRNode;
+  globalThis.HTMLElement = SSRElement;
+  globalThis.HTMLAnchorElement = SSRElement;
+  globalThis.HTMLDivElement = SSRElement;
+  globalThis.HTMLInputElement = SSRElement;
+  globalThis.HTMLButtonElement = SSRElement;
+  globalThis.HTMLSelectElement = SSRElement;
+  globalThis.HTMLTextAreaElement = SSRElement;
+  globalThis.DocumentFragment = SSRDocumentFragment;
+  globalThis.MouseEvent = class MockMouseEvent {
+  };
+  globalThis.Event = class MockEvent {
+  };
+  const storageStub = {
+    getItem: () => null,
+    setItem: () => {},
+    removeItem: () => {},
+    clear: () => {},
+    key: () => null,
+    length: 0
+  };
+  installGlobal("localStorage", storageStub);
+  installGlobal("sessionStorage", { ...storageStub });
+  installGlobal("navigator", {
+    userAgent: "",
+    language: "en",
+    languages: ["en"],
+    onLine: true,
+    cookieEnabled: false,
+    hardwareConcurrency: 1,
+    maxTouchPoints: 0,
+    platform: "",
+    vendor: ""
+  });
+  const NoopObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return [];
+    }
+  };
+  installGlobal("IntersectionObserver", NoopObserver);
+  installGlobal("ResizeObserver", NoopObserver);
+  installGlobal("MutationObserver", NoopObserver);
+  let nextFrameId = 1;
+  installGlobal("requestAnimationFrame", () => nextFrameId++);
+  installGlobal("cancelAnimationFrame", () => {});
+  installGlobal("requestIdleCallback", () => nextFrameId++);
+  installGlobal("cancelIdleCallback", () => {});
+  installGlobal("CustomEvent", class MockCustomEvent {
+    type;
+    detail;
+    constructor(type, init) {
+      this.type = type;
+      this.detail = init?.detail ?? null;
+    }
+  });
+}
+function removeDomShim() {
+  setAdapter(null);
+  if (!shimInstalled) {
+    return;
+  }
+  shimInstalled = false;
+  if (savedGlobals) {
+    for (const g of SHIM_GLOBALS) {
+      if (savedGlobals.has(g)) {
+        globalThis[g] = savedGlobals.get(g);
+      } else {
+        delete globalThis[g];
+      }
+    }
+    savedGlobals = null;
+  } else {
+    for (const g of SHIM_GLOBALS) {
+      delete globalThis[g];
+    }
+  }
+  for (const g of installedGlobals) {
+    delete globalThis[g];
+  }
+  installedGlobals = [];
+}
+function toVNode(element) {
+  if (element instanceof SSRElement) {
+    return element.toVNode();
+  }
+  if (element instanceof SSRDocumentFragment) {
+    return {
+      tag: "fragment",
+      attrs: {},
+      children: element.children.map((child) => {
+        if (typeof child === "string")
+          return child;
+        return child.toVNode();
+      })
+    };
+  }
+  if (typeof element === "object" && "tag" in element) {
+    return element;
+  }
+  return { tag: "span", attrs: {}, children: [String(element)] };
+}
+
+export { SSRNode, SSRComment, rawHtml, SSRTextNode, SSRDocumentFragment, SSRElement, createSSRAdapter, installDomShim, removeDomShim, toVNode };

package/dist/shared/chunk-eb80r8e8.js

@@ -0,0 +1,4 @@
+// @bun
+var __require = import.meta.require;
+
+export { __require };

package/dist/ssr/index.d.ts

@@ -0,0 +1,86 @@
+import { Theme } from "@vertz/ui";
+interface SSRModule {
+	default?: () => unknown;
+	App?: () => unknown;
+	theme?: Theme;
+	/** Global CSS strings to include in every SSR response (e.g. resets, body styles). */
+	styles?: string[];
+	/**
+	* Return all CSS tracked by the bundled @vertz/ui instance.
+	* The Vite SSR build inlines @vertz/ui into the server bundle, creating
+	* a separate module instance from @vertz/ui-server's dependency. Without
+	* this, component CSS from module-level css() calls is invisible to the
+	* SSR renderer. Export `getInjectedCSS` from @vertz/ui in the app entry.
+	*/
+	getInjectedCSS?: () => string[];
+}
+interface SSRRenderResult {
+	html: string;
+	css: string;
+	ssrData: Array<{
+		key: string;
+		data: unknown;
+	}>;
+}
+interface SSRDiscoverResult {
+	resolved: Array<{
+		key: string;
+		data: unknown;
+	}>;
+	pending: string[];
+}
+/**
+* Render an SSR module to an HTML string with CSS and pre-fetched query data.
+*
+* Performs a two-pass render:
+* - Pass 1: Discovery — calls the app to trigger query() registrations, awaits them
+* - Pass 2: Render — calls the app again with data populated, renders to HTML
+*/
+declare function ssrRenderToString(module: SSRModule, url: string, options?: {
+	ssrTimeout?: number;
+}): Promise<SSRRenderResult>;
+/**
+* Discover queries for a given URL without rendering.
+* Runs only Pass 1 (query registration + resolution), no Pass 2 render.
+* Used by the production handler to pre-fetch query data for client-side navigations.
+*/
+declare function ssrDiscoverQueries(module: SSRModule, url: string, options?: {
+	ssrTimeout?: number;
+}): Promise<SSRDiscoverResult>;
+interface SSRHandlerOptions {
+	/** The loaded SSR module (import('./dist/server/index.js')) */
+	module: SSRModule;
+	/** HTML template string (contents of dist/client/index.html) */
+	template: string;
+	/** SSR timeout for queries (default: 300ms) */
+	ssrTimeout?: number;
+	/**
+	* Map of CSS asset URLs to their content for inlining.
+	* Replaces `<link rel="stylesheet" href="...">` tags with inline `<style>` tags.
+	* Eliminates extra network requests, preventing FOUC on slow connections.
+	*
+	* @example
+	* ```ts
+	* inlineCSS: { '/assets/vertz.css': await Bun.file('./dist/client/assets/vertz.css').text() }
+	* ```
+	*/
+	inlineCSS?: Record<string, string>;
+	/**
+	* CSP nonce to inject on all inline `<script>` tags emitted during SSR.
+	*
+	* When set, the SSR data hydration script will include `nonce="<value>"`
+	* so that strict Content-Security-Policy headers do not block it.
+	*/
+	nonce?: string;
+}
+/**
+* Create a web-standard SSR request handler.
+*
+* Handles two types of requests:
+* - X-Vertz-Nav: 1 -> SSE Response with pre-fetched query data
+* - Normal HTML request -> SSR-rendered HTML Response
+*
+* Does NOT serve static files — that's the adapter/platform's job.
+*/
+declare function createSSRHandler(options: SSRHandlerOptions): (request: Request) => Promise<Response>;
+export { ssrRenderToString, ssrDiscoverQueries, createSSRHandler, SSRRenderResult, SSRModule, SSRHandlerOptions, SSRDiscoverResult };

package/dist/ssr/index.js

@@ -0,0 +1,11 @@
+import {
+  createSSRHandler,
+  ssrDiscoverQueries,
+  ssrRenderToString
+} from "../shared/chunk-32688jav.js";
+import"../shared/chunk-4t0ekdyv.js";
+export {
+  ssrRenderToString,
+  ssrDiscoverQueries,
+  createSSRHandler
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-server",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI server-side rendering runtime",
@@ -9,10 +9,6 @@
     "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": {
@@ -20,6 +16,10 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./ssr": {
+      "import": "./dist/ssr/index.js",
+      "types": "./dist/ssr/index.d.ts"
+    },
     "./dom-shim": {
       "import": "./dist/dom-shim/index.js",
       "types": "./dist/dom-shim/index.d.ts"
@@ -27,6 +27,18 @@
     "./jsx-runtime": {
       "import": "./dist/jsx-runtime/index.js",
       "types": "./dist/jsx-runtime/index.d.ts"
+    },
+    "./bun-plugin": {
+      "import": "./dist/bun-plugin/index.js",
+      "types": "./dist/bun-plugin/index.d.ts"
+    },
+    "./fast-refresh-runtime": {
+      "import": "./dist/bun-plugin/fast-refresh-runtime.js",
+      "types": "./dist/bun-plugin/fast-refresh-runtime.d.ts"
+    },
+    "./bun-dev-server": {
+      "import": "./dist/bun-dev-server.js",
+      "types": "./dist/bun-dev-server.d.ts"
     }
   },
   "files": [
@@ -34,26 +46,31 @@
   ],
   "scripts": {
     "build": "bunup",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "bun test",
+    "test:integration": "bun test src/__tests__/bun-dev-server.integration.local.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/core": "workspace:*",
-    "@vertz/server": "workspace:*",
-    "@vertz/ui": "workspace:*"
-  },
-  "peerDependencies": {
-    "vite": "^6.0.0"
+    "@ampproject/remapping": "^2.3.0",
+    "@jridgewell/trace-mapping": "^0.3.31",
+    "@vertz/core": "0.2.2",
+    "@vertz/ui": "0.2.2",
+    "@vertz/ui-compiler": "0.2.2",
+    "magic-string": "^0.30.0",
+    "ts-morph": "^27.0.2"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.0.18",
-    "bunup": "latest",
-    "typescript": "^5.7.0",
-    "vite": "^6.0.0",
-    "vitest": "^4.0.18"
+    "bun-types": "^1.3.10",
+    "bunup": "^0.16.31",
+    "@happy-dom/global-registrator": "^20.8.3",
+    "happy-dom": "^18.0.1",
+    "typescript": "^5.7.0"
   },
   "engines": {
     "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }