@brightspot/ui-builder 2.0.0 → 2.0.2

package/dist/commands/dev.js

@@ -13,6 +13,13 @@ export async function dev(opts) {
     const config = await createDevConfig({ builder, target, port: opts.port });
     const server = await createServer(config);
     await server.listen();
+    // Proxy root rarely renders useful HTML; land cmd-click on the app path.
+    const openPath = builder.dev?.openPath ?? '/cms/';
+    if (server.resolvedUrls && openPath !== '/') {
+        const append = (u) => new URL(openPath, u).href;
+        server.resolvedUrls.local = server.resolvedUrls.local.map(append);
+        server.resolvedUrls.network = server.resolvedUrls.network.map(append);
+    }
     server.printUrls();
     log.success('Dev server running — proxying to ' + target);
 }

package/dist/lib/resolve-config.d.ts

@@ -8,6 +8,10 @@ export interface BuilderConfig {
         jsName: string;
         cssName: string;
     };
+    dev?: {
+        /** Path appended to printed dev URLs. "/" disables. */
+        openPath: string;
+    };
 }
 export interface ResolveResult {
     config: BuilderConfig;

package/dist/lib/resolve-config.js

@@ -14,6 +14,9 @@ const DEFAULTS = {
         jsName: 'bundle.js',
         cssName: 'style.css',
     },
+    dev: {
+        openPath: '/cms/',
+    },
 };
 export function resolveConfig() {
     const pkgPath = path.resolve(process.cwd(), 'package.json');
@@ -38,7 +41,17 @@ export function resolveConfig() {
         jsName: raw.output?.jsName ?? DEFAULTS.output.jsName,
         cssName: raw.output?.cssName ?? DEFAULTS.output.cssName,
     };
-    return { config: { basePath, entry, format, name, output }, warnings };
+    const openPath = resolveOpenPath(raw.dev?.openPath);
+    return { config: { basePath, entry, format, name, output, dev: { openPath } }, warnings };
+}
+function resolveOpenPath(explicit) {
+    const value = explicit ?? DEFAULTS.dev.openPath;
+    // Reject protocol-relative ('//host/...') so a misconfigured openPath
+    // can't redirect the printed dev URL off-site.
+    if (!value.startsWith('/') || value.startsWith('//')) {
+        throw new ConfigError(`dev.openPath "${value}" must start with a single "/".`);
+    }
+    return value;
 }
 function resolveBasePath(explicit, pkgName, warnings) {
     if (explicit) {

package/dist/vite/proxy-html-rewrite.d.ts

@@ -0,0 +1,19 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+/**
+ * Build a `proxyRes` handler that strips occurrences of the upstream
+ * origin from HTML response bodies. Brightspot embeds absolute URLs
+ * (e.g. `https://localhost/storage/resource_resource/foo.js`) for
+ * storage assets, generated from a CDN setting that ignores
+ * X-Forwarded-* headers. Without rewriting, the browser at the proxy
+ * origin (`https://localhost:5173`) would issue cross-origin requests
+ * back to the upstream — module scripts then fail CORS, and mixed
+ * content blocks plain-HTTP origins. Stripping the origin makes those
+ * URLs relative, so the browser routes them through the dev proxy.
+ *
+ * Non-HTML responses pass through untouched. Empty / no-content
+ * statuses pass through too.
+ *
+ * Requires `selfHandleResponse: true` on the proxy entry so the
+ * response stream isn't already piped to the client.
+ */
+export declare function rewriteHtmlBody(target: string): (proxyRes: IncomingMessage, _req: IncomingMessage, res: ServerResponse) => void;

package/dist/vite/proxy-html-rewrite.js

@@ -0,0 +1,125 @@
+import zlib from 'node:zlib';
+/**
+ * Build a `proxyRes` handler that strips occurrences of the upstream
+ * origin from HTML response bodies. Brightspot embeds absolute URLs
+ * (e.g. `https://localhost/storage/resource_resource/foo.js`) for
+ * storage assets, generated from a CDN setting that ignores
+ * X-Forwarded-* headers. Without rewriting, the browser at the proxy
+ * origin (`https://localhost:5173`) would issue cross-origin requests
+ * back to the upstream — module scripts then fail CORS, and mixed
+ * content blocks plain-HTTP origins. Stripping the origin makes those
+ * URLs relative, so the browser routes them through the dev proxy.
+ *
+ * Non-HTML responses pass through untouched. Empty / no-content
+ * statuses pass through too.
+ *
+ * Requires `selfHandleResponse: true` on the proxy entry so the
+ * response stream isn't already piped to the client.
+ */
+export function rewriteHtmlBody(target) {
+    const originPatterns = buildOriginPatterns(target);
+    return (proxyRes, _req, res) => {
+        const status = proxyRes.statusCode ?? 200;
+        const headers = sanitizeHeaders(proxyRes.headers);
+        // selfHandleResponse: true disables the proxy library's built-in
+        // autoRewrite/protocolRewrite, so redirect Location headers come
+        // through pointing at the upstream origin. Strip the upstream
+        // origin so the browser follows the redirect via the proxy, not
+        // directly to the upstream (which would be cross-origin / wrong
+        // port / wrong scheme).
+        const loc = headers['location'];
+        if (typeof loc === 'string') {
+            let rewritten = loc;
+            for (const re of originPatterns)
+                rewritten = rewritten.replace(re, '');
+            if (rewritten !== loc)
+                headers['location'] = rewritten;
+        }
+        const ct = String(headers['content-type'] ?? '').toLowerCase();
+        const isHtml = ct.includes('text/html');
+        const isEmpty = status === 204 || status === 304;
+        if (!isHtml || isEmpty) {
+            res.writeHead(status, headers);
+            proxyRes.pipe(res);
+            return;
+        }
+        const stream = decodeStream(proxyRes, String(proxyRes.headers['content-encoding'] ?? ''));
+        const chunks = [];
+        stream.on('data', c => chunks.push(c));
+        stream.on('error', err => {
+            res.writeHead(502, { 'content-type': 'text/plain' });
+            res.end(`proxy decode error: ${err.message}`);
+        });
+        stream.on('end', () => {
+            let body = Buffer.concat(chunks).toString('utf8');
+            for (const re of originPatterns)
+                body = body.replace(re, '');
+            const out = Buffer.from(body, 'utf8');
+            headers['content-length'] = String(out.length);
+            res.writeHead(status, headers);
+            res.end(out);
+        });
+    };
+}
+// Vite serves over HTTP/2 (mkcert), but the upstream speaks HTTP/1.1.
+// HTTP/2 forbids connection-specific headers and transfer-encoding;
+// passing them through triggers ERR_HTTP2_INVALID_CONNECTION_HEADERS
+// in node's writeHead. Also drop content-encoding because we always
+// decompress and re-emit identity. content-length is recomputed by
+// the caller after rewriting.
+function sanitizeHeaders(input) {
+    const dropped = new Set([
+        'connection',
+        'transfer-encoding',
+        'keep-alive',
+        'proxy-authenticate',
+        'proxy-authorization',
+        'te',
+        'trailer',
+        'upgrade',
+        'http2-settings',
+        'content-encoding',
+        'content-length',
+    ]);
+    const out = {};
+    for (const [k, v] of Object.entries(input)) {
+        if (v === undefined)
+            continue;
+        if (dropped.has(k.toLowerCase()))
+            continue;
+        out[k] = v;
+    }
+    return out;
+}
+function decodeStream(stream, encoding) {
+    switch (encoding.toLowerCase()) {
+        case 'gzip':
+            return stream.pipe(zlib.createGunzip());
+        case 'br':
+            return stream.pipe(zlib.createBrotliDecompress());
+        case 'deflate':
+            return stream.pipe(zlib.createInflate());
+        default:
+            return stream;
+    }
+}
+// Build regexes that match the upstream origin in a few common
+// forms — both `http://` and `https://` so an http target still
+// strips https variants the CMS may emit when X-Forwarded-Proto is
+// honored, and an explicit-port form so e.g. http://localhost:8080
+// strips both with and without :8080.
+function buildOriginPatterns(target) {
+    const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const u = new URL(target);
+    const host = u.hostname;
+    const explicitPort = u.port;
+    // Form: scheme://host(:port)? — only strip when followed by a path
+    // boundary so we don't eat unrelated strings that happen to share
+    // the prefix.
+    const patterns = [
+        new RegExp(`https?://${escape(host)}(?=[/'"\\)\\s])`, 'g'),
+        new RegExp(`https?://${escape(host)}:\\d+(?=[/'"\\)\\s])`, 'g'),
+    ];
+    void explicitPort;
+    return patterns;
+}

package/dist/vite/vite-config.js

@@ -3,6 +3,11 @@ import { loadConfigFromFile, mergeConfig } from 'vite';
 import { log } from '../lib/logger.js';
 import { loadAutoPlugins } from './auto-plugins.js';
 import { devEntryPlugin } from './plugin-html-inject.js';
+// Mask define.amd around the IIFE so UMD-wrapped deps (e.g. loglevel) take
+// the global branch — host-page RequireJS rejects anonymous define() calls.
+// Namespaced var name reduces collision risk with bundled UMD code.
+const AMD_GUARD_INTRO = 'var __bsp_amd=typeof define!=="undefined"&&define&&define.amd;if(__bsp_amd)define.amd=void 0;try{';
+const AMD_GUARD_OUTRO = '}finally{if(__bsp_amd)define.amd=__bsp_amd;}';
 export async function createDevConfig({ builder, target, port }) {
     const cwd = process.cwd();
     const { basePath, entry, output: { jsName, cssName }, } = builder;
@@ -13,6 +18,10 @@ export async function createDevConfig({ builder, target, port }) {
     // that case so /index.ts isn't proxied to the upstream application.
     const entryParts = entry.split('/');
     const entryDirAlt = entryParts.length > 1 ? `|${escapeRegex(entryParts[0])}/` : '';
+    // x-forwarded-proto must match the upstream's scheme — otherwise an
+    // http CMS canonicalises to its toolUrlPrefix and autoRewrite loops
+    // the 302 back through the dev origin.
+    const targetScheme = new URL(target).protocol === 'https:' ? 'https' : 'http';
     const [mkcert, autoPlugins] = await Promise.all([loadMkcertPlugin(), loadAutoPlugins(cwd)]);
     const base = {
         root: cwd,
@@ -27,14 +36,21 @@ export async function createDevConfig({ builder, target, port }) {
         },
         server: {
             port,
+            // Default HMR path '/' falls through the proxy to the upstream CMS
+            // and 404s; '/@vite/*' is in the regex exclusion list below.
+            hmr: { path: '/@vite/hmr' },
             proxy: {
                 [`^/(?!(${escaped}${entryDirAlt}|@vite|@fs|node_modules))`]: {
                     target,
+                    // Local CMS dev servers use self-signed certs.
+                    secure: false,
+                    // protocolRewrite: Vite is mkcert-https only; http redirects would 404.
                     autoRewrite: true,
+                    protocolRewrite: 'https',
                     changeOrigin: true,
                     configure: proxy => {
                         proxy.on('proxyReq', proxyReq => {
-                            proxyReq.setHeader('x-forwarded-proto', 'https');
+                            proxyReq.setHeader('x-forwarded-proto', targetScheme);
                             proxyReq.setHeader('x-brightspot-dev', '1');
                         });
                     },
@@ -50,6 +66,12 @@ export async function createBuildConfig({ builder }) {
     const autoPlugins = await loadAutoPlugins(cwd);
     const base = {
         root: cwd,
+        // Lib mode doesn't replace process.env.NODE_ENV; pin it so deps with dev
+        // guards don't crash with `process is not defined`. Dev path skips this —
+        // Vite's optimizeDeps/esbuild substitutes it there.
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        },
         plugins: [...autoPlugins],
         resolve: {
             preserveSymlinks: true,
@@ -96,6 +118,7 @@ export async function createBuildConfig({ builder }) {
             rollupOptions: {
                 output: {
                     assetFileNames: () => output.cssName,
+                    ...(format === 'iife' ? { intro: AMD_GUARD_INTRO, outro: AMD_GUARD_OUTRO } : {}),
                 },
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui-builder",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "license": "UNLICENSED",
   "description": "Zero-config build toolkit for Brightspot CMS front-end development.",