nukejs 0.0.31 → 0.0.32

package/README.md

@@ -28,6 +28,7 @@ npm create nuke@latest
 - [useRequest() — URL Params, Query & Headers](#userequest--url-params-query--headers)
 - [cache() — Request-Scoped Data Caching](#cache--request-scoped-data-caching)
 - [Error Pages](#error-pages)
+- [renderComponent() — SSR Outside the Page Router](#rendercomponent--ssr-outside-the-page-router)
 - [Building & Deploying](#building--deploying)
 
 ## Overview
@@ -1378,6 +1379,62 @@ The `_500.tsx` page receives `errorMessage` and `errorStack` props from client e
 
 ---
 
+## renderComponent() — SSR Outside the Page Router
+
+`renderComponent()` renders any React component to a full HTML document with the same SSR pipeline pages use — but without requiring a file in `app/pages/`. Use it for DB-driven routes, CMS content, webhook-rendered HTML, server-rendered emails, or any endpoint that needs real React SSR.
+
+```ts
+import { renderComponent } from 'nukejs/server';
+import Widget from './components/Widget';
+import RootLayout from './app/pages/layout';
+
+export async function GET(req, res) {
+  const html = await renderComponent(Widget, { title: 'Hello' }, {
+    layouts: [RootLayout],
+    url: req.url,
+    title: 'My Widget Page',
+  });
+  res.setHeader('Content-Type', 'text/html');
+  res.end(html);
+}
+```
+
+### API
+
+```ts
+renderComponent(
+  Component: ComponentType<any>,
+  props?: Record<string, unknown>,
+  options?: RenderComponentOptions,
+): Promise<string>
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `layouts` | `ComponentType<{ children }>[]` | `[]` | Layout components to wrap the element in, outermost last |
+| `url` | `string` | `'/'` | Exposed via `useRequest()` inside the component |
+| `params` | `Record<string, string \| string[]>` | — | Route params exposed via `useRequest()` |
+| `query` | `Record<string, string \| string[]>` | — | Query params exposed via `useRequest()` |
+| `headers` | `Record<string, string>` | — | Request headers exposed via `useRequest()` |
+| `isDev` | `boolean` | auto-detected | Whether to enable dev-mode behaviour |
+| `title` | `string` | `'NukeJS'` | Fallback `<title>` if the component never calls `useHtml({ title })` |
+
+### Import path
+
+`renderComponent` is exported from `nukejs/server`, not from `nukejs`. This separation exists because the main `nukejs` entry is also resolved by the client-component bundler (browser platform) — server-only code with Node built-in dependencies must live under a separate subpath.
+
+### Hydration
+
+`renderComponent()` produces pure server-rendered markup with no `"use client"` hydration wiring. This is intentional — detecting hydration boundaries requires reading source files off disk, which isn't available on Cloudflare Workers and isn't reliable in pre-bundled Vercel functions.
+
+For interactive islands inside a `renderComponent()` result, mount them as normal client-side widgets the browser initialises separately, rather than relying on NukeJS's SSR hydration markers.
+
+### Platform support
+
+Because `renderComponent()` takes an already-imported component (a normal static ES import in your code), your own bundler resolves it at build time. It has no filesystem dependencies and works identically on Node.js, Vercel, and Cloudflare Workers.
+
+---
+
 ## Building & Deploying
 
 ### Node.js server

package/dist/bundle.js

@@ -2,15 +2,25 @@ function setupLocationChangeMonitor() {
   const originalPushState = window.history.pushState.bind(window.history);
   const originalReplaceState = window.history.replaceState.bind(window.history);
   const dispatch = (href) => window.dispatchEvent(new CustomEvent("locationchange", { detail: { href } }));
+  let lastPath = window.location.pathname + window.location.search;
   window.history.pushState = function(...args) {
     originalPushState(...args);
+    lastPath = window.location.pathname + window.location.search;
     dispatch(args[2]);
   };
   window.history.replaceState = function(...args) {
     originalReplaceState(...args);
+    lastPath = window.location.pathname + window.location.search;
     dispatch(args[2]);
   };
-  window.addEventListener("popstate", () => dispatch(window.location.pathname + window.location.search));
+  window.addEventListener("popstate", () => {
+    const currentPath = window.location.pathname + window.location.search;
+    if (currentPath === lastPath) {
+      return;
+    }
+    lastPath = currentPath;
+    dispatch(currentPath);
+  });
 }
 function makeLogger(level) {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "A minimal, opinionated full-stack React framework on Node.js that server-renders everything and hydrates only interactive parts.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",