npm - @st-h/vite-ember-ssr - Versions diffs - 0.2.0-alpha.1 → 0.3.1 - Mend

@st-h/vite-ember-ssr 0.2.0-alpha.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +257 -416
package/dist/client.d.ts +42 -51
package/dist/client.d.ts.map +1 -1
package/dist/client.js +39 -62
package/dist/client.js.map +1 -1
package/dist/fetch-middleware-DPLxOLL6.js +98 -0
package/dist/fetch-middleware-DPLxOLL6.js.map +1 -0
package/dist/server-DJRlVUcm.d.ts +260 -0
package/dist/server-DJRlVUcm.d.ts.map +1 -0
package/dist/server.d.ts +3 -236
package/dist/server.js +46 -42
package/dist/server.js.map +1 -1
package/dist/{vite-plugin-D-W5WQWe.js → vite-plugin-9BSJgEL9.js} +3 -4
package/dist/vite-plugin-9BSJgEL9.js.map +1 -0
package/dist/{vite-plugin-CQou_tr5.d.ts → vite-plugin-Dl5DbheW.d.ts} +2 -17
package/dist/vite-plugin-Dl5DbheW.d.ts.map +1 -0
package/dist/vite-plugin.d.ts +1 -1
package/dist/vite-plugin.js +1 -1
package/dist/worker.d.ts +4 -3
package/dist/worker.d.ts.map +1 -1
package/dist/worker.js +69 -54
package/dist/worker.js.map +1 -1
package/package.json +2 -2
package/src/client.ts +64 -73
package/src/dev.ts +91 -61
package/src/fetch-middleware.ts +166 -0
package/src/server.ts +48 -23
package/src/vite-plugin.ts +2 -24
package/src/worker.ts +153 -105
package/dist/server.d.ts.map +0 -1
package/dist/vite-plugin-CQou_tr5.d.ts.map +0 -1
package/dist/vite-plugin-D-W5WQWe.js.map +0 -1

package/src/client.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Client-side utilities for vite-ember-ssr.
  *
- * Currently the client Ember app boots normally and replaces the
- * SSR-rendered content. True DOM hydration is planned for a future
- * phase.
- *
- * For now, the SSR content provides the initial visual while client
- * JavaScript loads, parses, and Ember boots.
+ * The library always renders pages with Glimmer rehydration markers, so
+ * the client boots with `_renderMode: 'rehydrate'` and Glimmer attaches
+ * to the existing DOM instead of replacing it. The {@link bootRehydrated}
+ * helper takes care of choosing rehydrate vs. a normal boot, since some
+ * pages (e.g. dev mode without SSR, or non-prerendered SSG routes) will
+ * not carry the rehydrate flag.
  */
 // ─── Shoebox Types ───────────────────────────────────────────────────
@@ -152,91 +152,82 @@ export function cleanupShoebox(): void {
   _shoeboxMap = null;
 }
-// ─── SSR Content Cleanup ─────────────────────────────────────────────
+// ─── Boot ─────────────────────────────────────────────────────────────
 /**
- * Removes the SSR-rendered content from the DOM so the client Ember
- * app can render into a clean `<body>`. This prevents the "double
- * render" where both server-rendered HTML and client-rendered HTML
- * are visible simultaneously.
- *
- * Removes everything between (and including) the SSR boundary markers:
- *   <script type="x/boundary" id="ssr-body-start">
- *   ...server rendered content...
- *   <script type="x/boundary" id="ssr-body-end">
+ * Returns `true` when the current page was rendered with rehydration
+ * markers by the server (or the SSG build), i.e. when the server set
+ * `window.__vite_ember_ssr_rehydrate__`.
  *
- * **Call this from your application template** rather than from
- * `entry.ts` — this ensures removal happens at the moment Ember
- * renders, avoiding a flash of no content:
+ * Use this when you need to branch on rehydrate vs. plain boot yourself.
+ * In most cases, prefer {@link bootRehydrated}.
  *
- * ```gts
- * import { cleanupSSRContent } from '@st-h/vite-ember-ssr/client';
- *
- * <template>
- *   {{cleanupSSRContent}}
- *   {{outlet}}
- * </template>
- * ```
- *
- * Only used in cleanup mode (default). Not needed when using
- * `rehydrate: true` — in that mode Glimmer reuses the existing DOM.
+ * Returns `false` for pages that were not rendered by the server, e.g.
+ * a dev page hit without an SSR middleware, or an SSG app navigating to
+ * a non-prerendered route.
  */
-export function cleanupSSRContent(): void {
-  const start = document.getElementById('ssr-body-start');
-  const end = document.getElementById('ssr-body-end');
-  if (!start || !end) {
-    return; // Not an SSR-rendered page
-  }
-  // Remove all nodes between start and end markers (inclusive)
-  const parent = start.parentNode;
-  if (!parent) return;
-  let node: ChildNode | null = start;
-  while (node) {
-    const next: ChildNode | null = node.nextSibling;
-    parent.removeChild(node);
-    if (node === end) break;
-    node = next;
-  }
+export function shouldRehydrate(): boolean {
+  return (
+    (window as unknown as Record<string, unknown>)
+      .__vite_ember_ssr_rehydrate__ === true
+  );
 }
 /**
- * Checks if the current page was server-side rendered by looking
- * for SSR boundary markers in the DOM.
+ * Minimal interface satisfied by an Ember Application class.
  */
-export function isSSRRendered(): boolean {
-  return document.getElementById('ssr-body-start') !== null;
+interface ApplicationClass {
+  create(options: Record<string, unknown>): {
+    visit?(
+      url: string,
+      options: Record<string, unknown>,
+    ): Promise<unknown> | unknown;
+  };
 }
 /**
- * Checks whether the current page was rendered with rehydration mode.
+ * Boots the client Ember application, rehydrating the server-rendered
+ * DOM when one is present.
  *
- * Returns `true` when the server (or SSG build) injected the
- * `window.__vite_ember_ssr_rehydrate__` flag. Use this in your client
- * entry point to decide whether to boot Ember in rehydrate mode or
- * with a normal boot:
+ * Behaviour:
+ * - If {@link shouldRehydrate} returns `true`, creates the application
+ *   with `autoboot: false` and calls `app.visit(url, { _renderMode: 'rehydrate' })`
+ *   so Glimmer attaches to the existing DOM instead of replacing it.
+ * - Otherwise, calls `Application.create(config.APP)` for a normal boot.
  *
+ * The visit URL is derived from `window.location.pathname + search`
+ * with the configured `rootURL` stripped, matching what `Application.create`
+ * would have used internally.
+ *
+ * @example
  * ```ts
- * import { shouldRehydrate, installShoebox } from '@st-h/vite-ember-ssr/client';
+ * import Application from './app.ts';
+ * import config from './config/environment.ts';
+ * import { bootRehydrated, installShoebox } from 'vite-ember-ssr/client';
  *
  * installShoebox();
- *
- * const app = Application.create({ ...config.APP, autoboot: false });
- *
- * app.visit(window.location.pathname + window.location.search, {
- *   ...(shouldRehydrate() ? { _renderMode: 'rehydrate' } : {}),
- * });
+ * bootRehydrated(Application, config);
  * ```
- *
- * This is especially important for SSG apps where only prerendered
- * routes carry the flag — non-SSG routes will boot normally without
- * attempting rehydration (which would fail with no serialized DOM).
  */
-export function shouldRehydrate(): boolean {
-  return (
-    (window as unknown as Record<string, unknown>)
-      .__vite_ember_ssr_rehydrate__ === true
+export function bootRehydrated(
+  Application: ApplicationClass,
+  config: { APP?: Record<string, unknown>; rootURL?: string },
+): void {
+  if (!shouldRehydrate()) {
+    Application.create(config.APP ?? {});
+    return;
+  }
+  const app = Application.create({
+    ...(config.APP ?? {}),
+    autoboot: false,
+  });
+  const rootURL = config.rootURL ?? '/';
+  const url = (window.location.pathname + window.location.search).replace(
+    rootURL,
+    '/',
   );
+  void app.visit?.(url, { _renderMode: 'rehydrate' });
 }

package/src/dev.ts CHANGED Viewed

@@ -11,7 +11,7 @@
  * Usage:
  * ```js
  * import { createServer } from 'vite';
- * import { createEmberApp, assembleHTML } from '@st-h/vite-ember-ssr/server';
+ * import { createEmberApp, assembleHTML } from 'vite-ember-ssr/server';
  *
  * const vite = await createServer({ server: { middlewareMode: true }, appType: 'custom' });
  * const app = await createEmberApp('app/app-ssr.ts', {
@@ -32,9 +32,15 @@ import type {
   RenderRouteOptions,
   RenderResult,
   ShoeboxEntry,
+  ForwardedCookie,
   EmberApp,
   EmberAppDevOptions,
 } from './server.js';
+import {
+  compose,
+  forwardCookieMiddleware,
+  shoeboxMiddleware,
+} from './fetch-middleware.js';
 // ─── Constants ────────────────────────────────────────────────────────
@@ -66,9 +72,10 @@ const BROWSER_GLOBALS = [
 ] as const;
 const SHOEBOX_SCRIPT_ID = 'vite-ember-ssr-shoebox';
-const SSR_BODY_START =
-  '<script type="x/boundary" id="ssr-body-start"></script>';
-const SSR_BODY_END = '<script type="x/boundary" id="ssr-body-end"></script>';
+// Warn only once per process — the SSR entry is re-loaded on every render
+// in dev mode, so a per-render warning would flood the console.
+let warnedMissingSettled = false;
 // ─── Helpers ──────────────────────────────────────────────────────────
@@ -155,6 +162,23 @@ export function createDevEmberApp(
 ): EmberApp {
   const { ssrLoadModule } = devOptions;
+  // Install browser globals once at startup so module-evaluation-time access
+  // (e.g. `@ember/test-helpers` reading `document` at the top level) succeeds
+  // even before the first per-request window is created. The per-request
+  // window below replaces these globals during the actual render.
+  const startupWindow = new Window({
+    url: 'http://localhost/',
+    width: 1024,
+    height: 768,
+    settings: {
+      disableJavaScriptFileLoading: true,
+      disableJavaScriptEvaluation: true,
+      disableCSSFileLoading: true,
+      navigator: { userAgent: 'vite-ember-ssr' },
+    },
+  });
+  installGlobals(startupWindow);
   return {
     async renderRoute(
       url: string,
@@ -162,9 +186,9 @@ export function createDevEmberApp(
     ): Promise<RenderResult> {
       const {
         shoebox = false,
-        rehydrate = false,
         cssManifest,
-        headers: forwardHeaders,
+        settledTimeout = 10_000,
+        forwardCookie,
       } = renderOptions;
       // Fresh Window per request — no state bleeds between renders in dev.
@@ -182,55 +206,23 @@ export function createDevEmberApp(
       const savedGlobals = installGlobals(win);
-      // Shoebox: intercept fetch for this render only.
+      // Build a per-render fetch middleware pipeline. State is captured by
+      // closure so each render is fully isolated from the next.
       const realFetch = globalThis.fetch;
       const shoeboxEntries: Map<string, ShoeboxEntry> | null = shoebox
         ? new Map()
         : null;
+      const cookie: ForwardedCookie | null = forwardCookie ?? null;
+      const middlewareActive = shoeboxEntries !== null || cookie !== null;
-      if (shoebox || forwardHeaders) {
-        globalThis.fetch = async (
-          input: RequestInfo | URL,
-          init?: RequestInit,
-        ) => {
-          // Inject forwarded request headers into outgoing fetches
-          let effectiveInit = init;
-          if (forwardHeaders) {
-            effectiveInit = { ...init };
-            const existingHeaders = new Headers(effectiveInit.headers);
-            for (const [key, value] of Object.entries(forwardHeaders)) {
-              if (!existingHeaders.has(key)) {
-                existingHeaders.set(key, value);
-              }
-            }
-            effectiveInit.headers = existingHeaders;
-          }
-          const request = new Request(input, effectiveInit);
-          if (request.method.toUpperCase() !== 'GET')
-            return realFetch(request);
-          const response = await realFetch(request);
-          if (shoeboxEntries) {
-            try {
-              const clone = response.clone();
-              const body = await clone.text();
-              const headers: Record<string, string> = {};
-              clone.headers.forEach((v: string, k: string) => {
-                headers[k] = v;
-              });
-              shoeboxEntries.set(request.url, {
-                url: request.url,
-                status: clone.status,
-                statusText: clone.statusText,
-                headers,
-                body,
-              });
-            } catch {
-              /* skip */
-            }
-          }
-          return response;
-        };
+      if (middlewareActive) {
+        globalThis.fetch = compose(
+          [
+            forwardCookieMiddleware(() => cookie),
+            shoeboxMiddleware(() => shoeboxEntries),
+          ],
+          (request) => realFetch(request),
+        );
       }
       let head = '';
@@ -245,6 +237,7 @@ export function createDevEmberApp(
         // Re-load the module on every request so HMR changes are reflected.
         const mod = (await ssrLoadModule(entryPath)) as {
           createSsrApp?: () => EmberApplication;
+          settled?: () => Promise<void>;
         };
         if (typeof mod.createSsrApp !== 'function') {
           throw new Error(
@@ -253,19 +246,60 @@ export function createDevEmberApp(
           );
         }
         const app = mod.createSsrApp();
+        const appSettled =
+          typeof mod.settled === 'function' ? mod.settled : null;
         const bootOptions: BootOptions = {
           isBrowser: false,
           document: document as unknown as Document,
           rootElement: document.body as unknown as Element,
           shouldRender: true,
-          ...(rehydrate ? { _renderMode: 'serialize' as const } : {}),
+          _renderMode: 'serialize',
         };
         const instance = await app.visit(url, bootOptions);
-        // Drain Backburner's autorun microtask before reading the DOM.
-        await new Promise<void>((resolve) => setTimeout(resolve, 0));
+        // Wait for the app to settle (test waiters, run loop, pending timers).
+        // Fallback to a microtask drain when the SSR entry doesn't export it.
+        if (appSettled) {
+          let timer: ReturnType<typeof setTimeout> | undefined;
+          try {
+            await Promise.race([
+              appSettled(),
+              new Promise<never>((_, reject) => {
+                timer = setTimeout(
+                  () =>
+                    reject(
+                      new Error(
+                        `settled() timed out after ${settledTimeout}ms`,
+                      ),
+                    ),
+                  settledTimeout,
+                );
+              }),
+            ]);
+          } catch (e) {
+            console.warn(
+              `[vite-ember-ssr] settled() did not resolve within ${settledTimeout}ms, ` +
+                `capturing DOM anyway:`,
+              e instanceof Error ? e.message : e,
+            );
+          } finally {
+            if (timer) clearTimeout(timer);
+          }
+        } else {
+          if (settledTimeout > 0 && !warnedMissingSettled) {
+            warnedMissingSettled = true;
+            console.warn(
+              '[vite-ember-ssr] settledTimeout is set but the SSR entry does ' +
+                'not export `settled` — renders will NOT wait for the app to ' +
+                'settle and may capture incomplete HTML. Add ' +
+                "`export { settled } from '@ember/test-helpers';` to your " +
+                'SSR entry.',
+            );
+          }
+          await new Promise<void>((resolve) => setTimeout(resolve, 0));
+        }
         if (cssManifest) {
           cssLinks = buildRouteCssLinks(cssManifest, instance);
@@ -285,7 +319,7 @@ export function createDevEmberApp(
       } catch (e) {
         error = e instanceof Error ? e : new Error(String(e));
       } finally {
-        if (shoebox || forwardHeaders) globalThis.fetch = realFetch;
+        if (middlewareActive) globalThis.fetch = realFetch;
         restoreGlobals(savedGlobals);
         await win.happyDOM?.close?.();
       }
@@ -294,17 +328,13 @@ export function createDevEmberApp(
         shoeboxEntries && shoeboxEntries.size > 0
           ? serializeShoebox(Array.from(shoeboxEntries.values()))
           : '';
-      const rehydrateHTML = rehydrate
-        ? '<script>window.__vite_ember_ssr_rehydrate__=true</script>'
-        : '';
+      const rehydrateHTML =
+        '<script>window.__vite_ember_ssr_rehydrate__=true</script>';
       const fullHead = cssLinks + rehydrateHTML + shoeboxHTML + head;
-      const wrappedBody = rehydrate
-        ? body
-        : `${SSR_BODY_START}${body}${SSR_BODY_END}`;
       return {
         head: fullHead,
-        body: wrappedBody,
+        body,
         bodyAttrs,
         statusCode: error ? 500 : 200,
         ...(error ? { error } : {}),

package/src/fetch-middleware.ts ADDED Viewed

@@ -0,0 +1,166 @@
+/**
+ * Fetch middleware pipeline used during SSR rendering.
+ *
+ * The render path installs a single `fetchWithMiddleware` function as
+ * `globalThis.fetch`. That function dispatches each call through a
+ * Koa-style onion of middlewares, each of which may inspect/modify the
+ * request, await `next(req)`, and inspect/modify the response.
+ *
+ * Three middlewares ship with the library:
+ *  - `forwardCookieMiddleware` — injects the incoming request's `Cookie`
+ *    header into outbound fetches whose host appears in `allowedHosts`,
+ *    so SSR can make authenticated calls on behalf of the user without
+ *    leaking the session cookie to third-party hosts.
+ *  - `shoeboxMiddleware` — captures GET responses into a per-render
+ *    Map so they can be serialized into the HTML for the client to
+ *    replay during rehydration.
+ *  - `abortSignalMiddleware` — ties outbound fetches to a per-render
+ *    AbortSignal so requests still in flight when a render finishes are
+ *    aborted instead of lingering into later renders.
+ *
+ * Worker mode installs the pipeline once at startup and swaps per-render
+ * state via getters; dev mode rebuilds the pipeline per request with
+ * closure-captured state.
+ */
+import type { ShoeboxEntry, ForwardedCookie } from './server.js';
+export type FetchMiddleware = (
+  request: Request,
+  next: (request: Request) => Promise<Response>,
+) => Promise<Response>;
+/**
+ * Composes middlewares into a single fetch-compatible function.
+ *
+ * Middlewares run in array order on the way in and reverse order on the
+ * way out (Koa onion). The terminal function is what runs at the centre
+ * of the onion — typically the real, unintercepted `fetch`.
+ */
+export function compose(
+  middlewares: FetchMiddleware[],
+  terminal: (request: Request) => Promise<Response>,
+): typeof fetch {
+  return async (input, init) => {
+    const initialRequest = new Request(input, init);
+    const dispatch = (idx: number, req: Request): Promise<Response> => {
+      const mw = middlewares[idx];
+      if (!mw) return terminal(req);
+      return mw(req, (nextReq) => dispatch(idx + 1, nextReq));
+    };
+    return dispatch(0, initialRequest);
+  };
+}
+/**
+ * Middleware that injects the incoming request's `Cookie` header into
+ * outbound fetches. The cookie is only added when `URL.host` exactly
+ * matches one of `allowedHosts`. A cookie header already set on the
+ * request (by app code) is not overwritten.
+ *
+ * Applies to all HTTP methods — auth cookies must flow on POST/PUT too.
+ *
+ * @param getCookie Function returning the active per-render cookie
+ *   config, or `null` when forwarding is disabled for this render.
+ */
+export function forwardCookieMiddleware(
+  getCookie: () => ForwardedCookie | null,
+): FetchMiddleware {
+  return (request, next) => {
+    const cookie = getCookie();
+    if (!cookie) return next(request);
+    const url = new URL(request.url);
+    if (!cookie.allowedHosts.includes(url.host)) return next(request);
+    // Don't overwrite a cookie explicitly set by app code.
+    if (request.headers.has('cookie')) return next(request);
+    const merged = new Headers(request.headers);
+    merged.set('cookie', cookie.value);
+    return next(new Request(request, { headers: merged }));
+  };
+}
+/**
+ * Middleware that ties outbound fetches to a per-render AbortSignal, so
+ * requests still in flight when the render finishes (typically after a
+ * `settled()` timeout) are aborted instead of lingering into later
+ * renders on the same worker.
+ *
+ * @param getSignal Function returning the active per-render signal, or
+ *   `null` when no render-scoped abort is configured.
+ */
+export function abortSignalMiddleware(
+  getSignal: () => AbortSignal | null,
+): FetchMiddleware {
+  return (request, next) => {
+    const signal = getSignal();
+    if (!signal) return next(request);
+    // Preserve any signal app code attached to its own request.
+    const combined = request.signal
+      ? AbortSignal.any([request.signal, signal])
+      : signal;
+    const result = next(new Request(request, { signal: combined }));
+    // A render-scoped abort fires after the app that issued the fetch has
+    // been torn down, so its rejection may have nothing left awaiting it.
+    // Pre-attach a no-op handler to keep such late rejections from crashing
+    // the worker as unhandled; the caller still receives the rejection.
+    result.catch(() => {});
+    return result;
+  };
+}
+/**
+ * Middleware that captures GET response bodies into a per-render Map so
+ * they can be serialized into the HTML for client-side replay. Non-GET
+ * methods are passed through unchanged.
+ *
+ * @param getEntries Function returning the active per-render Map, or
+ *   `null` when shoebox is disabled for this render.
+ */
+export function shoeboxMiddleware(
+  getEntries: () => Map<string, ShoeboxEntry> | null,
+): FetchMiddleware {
+  return async (request, next) => {
+    // Capture the CURRENT render's entries map before awaiting the response.
+    // A fetch left in flight by a timed-out render can resolve while a LATER
+    // render is active; calling getEntries() after the await would return
+    // that later render's map and leak this response into the wrong render's
+    // shoebox. With the reference captured up front, a late write lands in
+    // the dead render's map, which is never serialized.
+    const entries = getEntries();
+    const response = await next(request);
+    if (!entries) return response;
+    if (request.method.toUpperCase() !== 'GET') return response;
+    try {
+      const clone = response.clone();
+      const body = await clone.text();
+      const headers: Record<string, string> = {};
+      clone.headers.forEach((v, k) => {
+        // Never serialize Set-Cookie into the shoebox: it would leak the
+        // origin's (often HttpOnly) auth cookie into the rendered HTML, where
+        // any script can read it and — for a cached/shared response — hand one
+        // user's session to another. The client replays entries as
+        // JS-constructed Responses whose Set-Cookie the browser ignores, so it
+        // is inert here anyway.
+        if (k.toLowerCase() === 'set-cookie') return;
+        headers[k] = v;
+      });
+      entries.set(request.url, {
+        url: request.url,
+        status: clone.status,
+        statusText: clone.statusText,
+        headers,
+        body,
+      });
+    } catch {
+      /* skip */
+    }
+    return response;
+  };
+}