@megabudino/stack-utils 2.0.2 → 2.2.0

package/dist/proxy/handle.js

@@ -1,6 +1,7 @@
 import { validateIslandsConfigAtStartup } from './islands.js';
 import { injectIntoSitemapIndex, normalizeSitemapPath, removeExcludedUrlsFromSitemap, rewriteHtml } from './rewrite.js';
 import { transformProxiedHtml } from './transform-html.js';
+import { fetchViaTransport } from './upstream-fetch.js';
 /**
  * Create a SvelteKit `Handle` hook that reverse-proxies requests to an origin.
  *
@@ -10,6 +11,11 @@ import { transformProxiedHtml } from './transform-html.js';
 export function createProxyHandle(config) {
     assertNoRemovedConfig(config);
     const { originUrl, siteUrl } = config;
+    const logicalOrigin = new URL(originUrl);
+    const upstreamUrlTrimmed = config.upstreamUrl?.trim();
+    const useTransport = Boolean(upstreamUrlTrimmed);
+    const transport = new URL(upstreamUrlTrimmed || originUrl);
+    const forwardedProto = new URL(siteUrl).protocol.replace(':', '');
     const sitemap = config.sitemap ?? {};
     const sitemapIndexPath = sitemap.indexPath ? normalizeSitemapPath(sitemap.indexPath) : undefined;
     const sitemapIncludeFiles = sitemap.includeFiles ?? [];
@@ -34,21 +40,38 @@ export function createProxyHandle(config) {
         }
         const headers = new Headers(event.request.headers);
         headers.delete('accept-encoding');
-        headers.set('host', siteHost);
+        if (useTransport) {
+            headers.set('host', logicalOrigin.host);
+            headers.set('x-forwarded-proto', forwardedProto);
+            if (!headers.has('x-forwarded-host')) {
+                headers.set('x-forwarded-host', siteHost);
+            }
+        }
+        else {
+            headers.set('host', siteHost);
+        }
         headers.delete('content-length');
+        const connectionBase = useTransport ? transport.origin : originUrl;
+        const requestBody = event.request.method === 'GET' || event.request.method === 'HEAD'
+            ? undefined
+            : event.request.body;
         let currentPath = pathname + search;
         for (let hops = 0;; hops++) {
-            const upstream = new URL(currentPath, originUrl);
+            const upstream = new URL(currentPath, connectionBase);
             let upstreamResponse;
             try {
-                upstreamResponse = await fetch(upstream, {
-                    method: event.request.method,
-                    headers,
-                    redirect: 'manual',
-                    body: event.request.method === 'GET' || event.request.method === 'HEAD'
-                        ? undefined
-                        : event.request.body
-                });
+                upstreamResponse = useTransport
+                    ? await fetchViaTransport(upstream, {
+                        method: event.request.method,
+                        headers,
+                        body: requestBody
+                    })
+                    : await fetch(upstream, {
+                        method: event.request.method,
+                        headers,
+                        redirect: 'manual',
+                        body: requestBody
+                    });
             }
             catch {
                 return new Response('Bad Gateway', { status: 502 });
@@ -56,7 +79,7 @@ export function createProxyHandle(config) {
             if (upstreamResponse.status >= 300 && upstreamResponse.status < 400) {
                 const location = upstreamResponse.headers.get('location');
                 if (location) {
-                    const nextUrl = new URL(location, upstream);
+                    const nextUrl = new URL(location, useTransport ? logicalOrigin : upstream);
                     const isOrigin = originHosts.has(nextUrl.hostname);
                     const isSite = nextUrl.hostname === siteHost;
                     if ((isOrigin || isSite) && hops < maxRedirects) {

package/dist/proxy/rewrite.js

@@ -39,6 +39,11 @@ export function rewriteHtml(html, originUrl, siteUrl, proxyAssets = false, addit
             html = html.replace(originPattern(origin), '');
         }
     }
+    // SvelteKit origins emit relative `./_app/...` assets. Browsers resolve those to
+    // `/_app/...` on the proxy host, which collides with the local SvelteKit build.
+    // Point them at the origin so CSS/JS load from the upstream app (CORS permitting).
+    const originBase = originUrl.replace(/\/$/, '');
+    html = html.replace(/(["'(])\.\/_app\//g, `$1${originBase}/_app/`);
     return html;
 }
 /** Normalize URL-like values to comparable sitemap pathnames. */

package/dist/proxy/types.d.ts

@@ -133,8 +133,31 @@ export interface SitemapConfig {
 }
 /** Configuration for the reverse proxy. */
 export interface ProxyConfig {
-    /** The origin URL (not publicly exposed). */
+    /**
+     * Logical origin URL: the host and scheme WordPress (or the upstream CMS) should
+     * believe it is serving. Used for the `Host` header when `upstreamUrl` is set,
+     * and as the source domain for response rewriting (`originUrl` → `siteUrl`).
+     *
+     * When `upstreamUrl` is omitted, this URL is also the connection target.
+     */
     originUrl: string;
+    /**
+     * Optional transport URL for the actual TCP/HTTP connection to the origin.
+     *
+     * Use this to reach an internal service name (e.g. a Docker overlay hostname)
+     * while still presenting the public `originUrl` identity to the CMS. When
+     * absent or blank, the proxy connects to `originUrl` and behavior is unchanged.
+     *
+     * @example
+     * ```ts
+     * createProxyHandle({
+     *   originUrl: 'https://wordpress.example.com',
+     *   upstreamUrl: process.env.WP_UPSTREAM, // e.g. http://wordpress-service:80
+     *   siteUrl: 'https://www.example.com'
+     * });
+     * ```
+     */
+    upstreamUrl?: string;
     /** The public site URL (used in sitemaps and link rewriting). */
     siteUrl: string;
     /** Explicit sitemap rewriting configuration for proxied XML responses. */

package/dist/proxy/upstream-fetch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Forward a request to the origin using undici so a custom `Host` header is
+ * honored. Node's built-in `fetch` derives `Host` from the destination URL and
+ * ignores `headers.set('host', ...)`, which breaks transport/logical-origin splits.
+ */
+export declare function fetchViaTransport(url: URL, init: {
+    method: string;
+    headers: Headers;
+    body?: BodyInit | null;
+}): Promise<Response>;

package/dist/proxy/upstream-fetch.js

@@ -0,0 +1,62 @@
+import { request as undiciRequest } from 'undici';
+/**
+ * Forward a request to the origin using undici so a custom `Host` header is
+ * honored. Node's built-in `fetch` derives `Host` from the destination URL and
+ * ignores `headers.set('host', ...)`, which breaks transport/logical-origin splits.
+ */
+export async function fetchViaTransport(url, init) {
+    const { statusCode, headers, body } = await undiciRequest(url, {
+        method: init.method,
+        headers: headersRecord(init.headers),
+        body: init.method === 'GET' || init.method === 'HEAD'
+            ? undefined
+            : init.body
+    });
+    const responseHeaders = new Headers();
+    for (const [key, value] of Object.entries(headers)) {
+        if (value === undefined) {
+            continue;
+        }
+        if (Array.isArray(value)) {
+            for (const entry of value) {
+                responseHeaders.append(key, entry);
+            }
+            continue;
+        }
+        responseHeaders.set(key, value);
+    }
+    return new Response(body, {
+        status: statusCode,
+        headers: responseHeaders
+    });
+}
+/** Hop-by-hop and other headers undici rejects when forwarding a client request. */
+const UNDICI_STRIPPED_HEADERS = new Set([
+    'connection',
+    'keep-alive',
+    'proxy-authenticate',
+    'proxy-authorization',
+    'proxy-connection',
+    'te',
+    'trailer',
+    'transfer-encoding',
+    'upgrade',
+    'http2-settings'
+]);
+function headersRecord(headers) {
+    const skip = new Set(UNDICI_STRIPPED_HEADERS);
+    const connection = headers.get('connection');
+    if (connection) {
+        for (const token of connection.split(',')) {
+            skip.add(token.trim().toLowerCase());
+        }
+    }
+    const record = {};
+    for (const [key, value] of headers.entries()) {
+        if (skip.has(key.toLowerCase())) {
+            continue;
+        }
+        record[key] = value;
+    }
+    return record;
+}

package/dist/proxy/vite-plugin.d.ts

@@ -1,2 +1,16 @@
-import type { Plugin } from 'vite';
+import type { Plugin, Rollup } from 'vite';
 export declare function proxyIslands(): Plugin;
+/**
+ * Collect every client stylesheet that must load for the islands bootstrap to
+ * paint correctly.
+ *
+ * Vite/Rollup code-splitting frequently hoists an island component into a
+ * shared chunk (for example when the same component is also imported by a
+ * normal SvelteKit route). In that case the component's `importedCss` is
+ * attributed to the shared chunk, not to the bootstrap entry chunk, so reading
+ * only the entry chunk's own `importedCss` misses the styles. We therefore walk
+ * the chunk graph transitively from the entry chunk, following each chunk's
+ * STATIC `imports` (dynamic imports are not required for first paint and could
+ * over-inject unrelated CSS), unioning the `importedCss` we find along the way.
+ */
+export declare function extractClientStylesheetUrls(entryChunk: Rollup.OutputChunk, bundle: Rollup.OutputBundle, base: string): string[];

package/dist/proxy/vite-plugin.js

@@ -104,7 +104,7 @@ export function proxyIslands() {
                 throw new Error('[stack-utils proxy] failed to locate the generated islands client chunk.');
             }
             const clientEntryUrl = toPublicAssetUrl(clientEntryFileName, config.base);
-            const clientStylesheetUrls = extractClientStylesheetUrls(clientChunk, config.base);
+            const clientStylesheetUrls = extractClientStylesheetUrls(clientChunk, bundle, config.base);
             await patchServerOutputFiles(config.root, clientEntryUrl, clientStylesheetUrls);
         }
     };
@@ -250,14 +250,35 @@ function findHooksServerFile(root) {
 function toDevFsUrl(filePath) {
     return `/@fs/${filePath.split(path.sep).join('/')}`;
 }
-function extractClientStylesheetUrls(chunk, base) {
+/**
+ * Collect every client stylesheet that must load for the islands bootstrap to
+ * paint correctly.
+ *
+ * Vite/Rollup code-splitting frequently hoists an island component into a
+ * shared chunk (for example when the same component is also imported by a
+ * normal SvelteKit route). In that case the component's `importedCss` is
+ * attributed to the shared chunk, not to the bootstrap entry chunk, so reading
+ * only the entry chunk's own `importedCss` misses the styles. We therefore walk
+ * the chunk graph transitively from the entry chunk, following each chunk's
+ * STATIC `imports` (dynamic imports are not required for first paint and could
+ * over-inject unrelated CSS), unioning the `importedCss` we find along the way.
+ */
+export function extractClientStylesheetUrls(entryChunk, bundle, base) {
     const urls = new Set();
-    const importedCss = Array.from(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (chunk.viteMetadata?.importedCss ?? []));
-    for (const fileName of importedCss) {
-        urls.add(toPublicAssetUrl(fileName, base));
-    }
+    const visited = new Set();
+    const visit = (chunk) => {
+        if (!chunk || chunk.type !== 'chunk' || visited.has(chunk.fileName)) {
+            return;
+        }
+        visited.add(chunk.fileName);
+        for (const fileName of chunk.viteMetadata?.importedCss ?? []) {
+            urls.add(toPublicAssetUrl(fileName, base));
+        }
+        for (const importFileName of chunk.imports ?? []) {
+            visit(bundle[importFileName]);
+        }
+    };
+    visit(entryChunk);
     return [...urls];
 }
 async function patchServerOutputFiles(root, clientEntryUrl, clientStylesheetUrls) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@megabudino/stack-utils",
-	"version": "2.0.2",
+	"version": "2.2.0",
 	"description": "Reusable utilities for a SvelteKit stack, including a reverse proxy and static image pipeline",
 	"type": "module",
 	"exports": {
@@ -41,6 +41,7 @@
 	},
 	"dependencies": {
 		"cheerio": "^1.2.0",
+		"undici": "^7.24.0",
 		"node-addon-api": "^8.8.0",
 		"node-gyp": "^12.3.0",
 		"sharp": "^0.34.5"