@blinkk/root 4.0.1 → 4.1.2

package/dist/render/render.d.ts

@@ -19,6 +19,19 @@ export declare class Renderer {
     walkRoutes(cb: (urlPathFormat: string, route: Route) => void | Promise<void>): Promise<void>;
     handle(req: Request, res: Response, next: NextFunction): Promise<void>;
     private renderComponent;
+    /**
+     * Runs a synchronous render function with a hook installed that auto-injects
+     * the CSP nonce into `<script>`, `<style>` and `<link rel="stylesheet">`
+     * vnodes.
+     *
+     * NOTE: `preactOptions.vnode` is a global, so the hook must be installed and
+     * restored within a single synchronous block. Awaiting inside the swapped
+     * window allows concurrent renders to interleave, leaking a stale hook (and
+     * its nonce) into other requests.
+     *
+     * https://preactjs.com/guide/v10/options/
+     */
+    private withNonceHooks;
     /** SSG renders a route. */
     renderRoute(route: Route, options: {
         routeParams: Record<string, string>;

package/dist/render.js

@@ -17,7 +17,9 @@ import {
 import {
   renderJsxToString
 } from "./chunk-5OPFFJU7.js";
-import "./chunk-3Z5TNZEP.js";
+import {
+  options
+} from "./chunk-3Z5TNZEP.js";
 import {
   getSecurityConfig,
   setSecurityHeaders
@@ -13071,9 +13073,9 @@ var Router = class {
     return urlPaths;
   }
 };
-function normalizeUrlPath(urlPath, options) {
+function normalizeUrlPath(urlPath, options2) {
   urlPath = urlPath.replace(/\/+/g, "/");
-  if (testPathHasFileExt(urlPath) || options?.trailingSlash === false && urlPath !== "/" && urlPath.endsWith("/")) {
+  if (testPathHasFileExt(urlPath) || options2?.trailingSlash === false && urlPath !== "/" && urlPath.endsWith("/")) {
     urlPath = removeTrailingSlash(urlPath);
   }
   if (urlPath.endsWith("/index")) {
@@ -13082,7 +13084,7 @@ function normalizeUrlPath(urlPath, options) {
   if (!urlPath.startsWith("/")) {
     urlPath = `/${urlPath}`;
   }
-  if (options?.trailingSlash && !testPathHasFileExt(urlPath) && !urlPath.endsWith("/")) {
+  if (options2?.trailingSlash && !testPathHasFileExt(urlPath) && !urlPath.endsWith("/")) {
     urlPath = `${urlPath}/`;
   }
   return urlPath;
@@ -13142,10 +13144,10 @@ var Renderer = class {
   assetMap;
   elementGraph;
   router;
-  constructor(rootConfig, options) {
+  constructor(rootConfig, options2) {
     this.rootConfig = rootConfig;
-    this.assetMap = options.assetMap;
-    this.elementGraph = options.elementGraph;
+    this.assetMap = options2.assetMap;
+    this.elementGraph = options2.elementGraph;
     this.router = new Router(rootConfig);
   }
   /** Returns a route from the router. */
@@ -13187,12 +13189,12 @@ var Renderer = class {
     };
     await nextRouteHandler();
   }
-  async renderComponent(Component, props, options) {
-    const { currentPath, route, routeParams, nonce } = options;
-    const locale = options.locale;
+  async renderComponent(Component, props, options2) {
+    const { currentPath, route, routeParams, nonce } = options2;
+    const locale = options2.locale;
     const translations = {
       ...getTranslations(locale),
-      ...options.translations || {}
+      ...options2.translations || {}
     };
     const ctx = {
       currentPath,
@@ -13211,29 +13213,10 @@ var Renderer = class {
       scriptDeps: [],
       styleDeps: []
     };
-    const vdom = /* @__PURE__ */ jsx4(ASSET_MAP_CONTEXT.Provider, { value: this.assetMap, children: /* @__PURE__ */ jsx4(REQUEST_CONTEXT.Provider, { value: ctx, children: /* @__PURE__ */ jsx4(I18N_CONTEXT.Provider, { value: { locale, translations }, children: /* @__PURE__ */ jsx4(HTML_CONTEXT.Provider, { value: htmlContext, children: /* @__PURE__ */ jsx4(Component, { ...props }) }) }) }) });
-    const renderJsxFn = await this.getJsxRenderFn({ mode: options.renderMode });
-    const preactHook = preactOptions.vnode;
-    let mainHtml;
-    try {
-      preactOptions.vnode = (vnode) => {
-        if (vnode && vnode.type === "script") {
-          vnode.props.nonce = nonce;
-        }
-        if (vnode && vnode.type === "style") {
-          vnode.props.nonce = nonce;
-        }
-        if (vnode && vnode.type === "link" && vnode.props.rel === "stylesheet") {
-          vnode.props.nonce = nonce;
-        }
-        if (preactHook) {
-          preactHook(vnode);
-        }
-      };
-      mainHtml = renderJsxFn(vdom);
-    } finally {
-      preactOptions.vnode = preactHook;
-    }
+    const withProviders = (children) => /* @__PURE__ */ jsx4(ASSET_MAP_CONTEXT.Provider, { value: this.assetMap, children: /* @__PURE__ */ jsx4(REQUEST_CONTEXT.Provider, { value: ctx, children: /* @__PURE__ */ jsx4(I18N_CONTEXT.Provider, { value: { locale, translations }, children: /* @__PURE__ */ jsx4(HTML_CONTEXT.Provider, { value: htmlContext, children }) }) }) });
+    const vdom = withProviders(/* @__PURE__ */ jsx4(Component, { ...props }));
+    const renderJsxFn = await this.getJsxRenderFn({ mode: options2.renderMode });
+    const mainHtml = this.withNonceHooks(nonce, () => renderJsxFn(vdom));
     const jsDeps = /* @__PURE__ */ new Set();
     const cssDeps = /* @__PURE__ */ new Set();
     const preloadDeps = this.rootConfig.modulePreload !== false ? /* @__PURE__ */ new Set() : null;
@@ -13286,19 +13269,69 @@ var Renderer = class {
       htmlAttrs: htmlContext.htmlAttrs,
       headAttrs: htmlContext.headAttrs,
       bodyAttrs: htmlContext.bodyAttrs,
+      // Components passed as `<Head>` children are only rendered here, so they
+      // need the same context providers and nonce hooks as the main render.
       headComponents: [
-        ...htmlContext.headComponents,
+        withProviders(htmlContext.headComponents),
         ...styleTags,
         ...preloadTags,
         ...scriptTags
       ],
-      renderMode: options.renderMode
+      renderMode: options2.renderMode,
+      nonce
     });
     return { html };
   }
+  /**
+   * Runs a synchronous render function with a hook installed that auto-injects
+   * the CSP nonce into `<script>`, `<style>` and `<link rel="stylesheet">`
+   * vnodes.
+   *
+   * NOTE: `preactOptions.vnode` is a global, so the hook must be installed and
+   * restored within a single synchronous block. Awaiting inside the swapped
+   * window allows concurrent renders to interleave, leaking a stale hook (and
+   * its nonce) into other requests.
+   *
+   * https://preactjs.com/guide/v10/options/
+   */
+  withNonceHooks(nonce, fn) {
+    const injectNonce = (vnode) => {
+      if (!vnode) {
+        return;
+      }
+      if (vnode.type === "script" || vnode.type === "style") {
+        vnode.props.nonce = nonce;
+      }
+      if (vnode.type === "link" && vnode.props.rel === "stylesheet") {
+        vnode.props.nonce = nonce;
+      }
+    };
+    const preactHook = preactOptions.vnode;
+    const rootJsxHook = options.vnode;
+    try {
+      preactOptions.vnode = (vnode) => {
+        injectNonce(vnode);
+        if (preactHook) {
+          preactHook(vnode);
+        }
+      };
+      if (options !== preactOptions) {
+        options.vnode = (vnode) => {
+          injectNonce(vnode);
+          if (rootJsxHook) {
+            rootJsxHook(vnode);
+          }
+        };
+      }
+      return fn();
+    } finally {
+      preactOptions.vnode = preactHook;
+      options.vnode = rootJsxHook;
+    }
+  }
   /** SSG renders a route. */
-  async renderRoute(route, options) {
-    const routeParams = options.routeParams;
+  async renderRoute(route, options2) {
+    const routeParams = options2.routeParams;
     if (route.locale) {
       routeParams.$locale = route.locale;
     }
@@ -13343,10 +13376,10 @@ var Renderer = class {
     });
   }
   /** Handles the SSR rendering of a route. */
-  async handleRoute(req, res, next, route, options) {
-    const defaultStatusCode = options?.defaultStatusCode || 200;
-    const routeParams = options?.routeParams || {};
-    const nextRouteHandler = options?.nextRouteHandler;
+  async handleRoute(req, res, next, route, options2) {
+    const defaultStatusCode = options2?.defaultStatusCode || 200;
+    const routeParams = options2?.routeParams || {};
+    const nextRouteHandler = options2?.nextRouteHandler;
     const fallbackLocales = route.isDefaultLocale ? getFallbackLocales(req) : [route.locale];
     const getPreferredLocale = (availableLocales) => {
       const lowerLocales = availableLocales.map((l) => l.toLowerCase());
@@ -13357,8 +13390,8 @@ var Renderer = class {
       }
       return req.rootConfig?.i18n?.defaultLocale || "en";
     };
-    const render404 = async (options2) => {
-      if (options2?.nextRoute && nextRouteHandler) {
+    const render404 = async (options3) => {
+      if (options3?.nextRoute && nextRouteHandler) {
         await nextRouteHandler();
         return;
       }
@@ -13367,7 +13400,7 @@ var Renderer = class {
       }
       next();
     };
-    const render = async (props2, options2) => {
+    const render = async (props2, options3) => {
       if (!route.module.default) {
         console.error(`no default component exported in route: ${route.src}`);
         render404();
@@ -13376,8 +13409,8 @@ var Renderer = class {
       const securityConfig = getSecurityConfig(this.rootConfig);
       const cspEnabled = !!securityConfig.contentSecurityPolicy;
       const currentPath = req.path;
-      const locale = options2?.locale || route.locale;
-      const translations = options2?.translations;
+      const locale = options3?.locale || route.locale;
+      const translations = options3?.translations;
       const nonce = cspEnabled ? this.generateNonce() : void 0;
       const output = await this.renderComponent(route.module.default, props2, {
         currentPath,
@@ -13386,7 +13419,7 @@ var Renderer = class {
         locale,
         translations,
         nonce,
-        renderMode: options2?.renderMode
+        renderMode: options3?.renderMode
       });
       let html = await transformHtml(output.html, this.rootConfig);
       if (req.viteServer) {
@@ -13398,7 +13431,7 @@ var Renderer = class {
           );
         }
       }
-      let statusCode = options2?.statusCode || defaultStatusCode;
+      let statusCode = options3?.statusCode || defaultStatusCode;
       if (route.src === "routes/404.tsx") {
         statusCode = 404;
       } else if (route.src === "routes/401.tsx") {
@@ -13561,8 +13594,8 @@ var Renderer = class {
   async getJsxRenderFn(renderOptions) {
     const mode = renderOptions?.mode ?? this.rootConfig.jsxRenderer?.mode;
     if (mode) {
-      const options = { ...this.getJsxRenderOptions(), mode };
-      return (vnode) => renderJsxToString(vnode, options);
+      const options2 = { ...this.getJsxRenderOptions(), mode };
+      return (vnode) => renderJsxToString(vnode, options2);
     }
     const { renderToString } = await import("preact-render-to-string");
     if (!renderToString) {
@@ -13577,8 +13610,8 @@ var Renderer = class {
    * `preact-render-to-string` depending if the `jsxRenderer` config is set up
    * in `root.config.ts`.
    */
-  async renderJsx(vnode, options) {
-    const render = await this.getJsxRenderFn(options);
+  async renderJsx(vnode, options2) {
+    const render = await this.getJsxRenderFn(options2);
     return render(vnode);
   }
   getConfiguredStyleEntries() {
@@ -13586,14 +13619,14 @@ var Renderer = class {
     const basePath = this.rootConfig.base || "/";
     return styleEntries.map((entry) => entry.trim()).filter((entry) => entry).map((entry) => normalizeStyleEntry(entry, basePath));
   }
-  async renderHtml(html, options) {
-    const htmlAttrs = options?.htmlAttrs || {};
-    const headAttrs = options?.headAttrs || {};
-    const bodyAttrs = options?.bodyAttrs || {};
+  async renderHtml(html, options2) {
+    const htmlAttrs = options2?.htmlAttrs || {};
+    const headAttrs = options2?.headAttrs || {};
+    const bodyAttrs = options2?.bodyAttrs || {};
     const page = /* @__PURE__ */ jsxs4("html", { ...htmlAttrs, children: [
       /* @__PURE__ */ jsxs4("head", { ...headAttrs, children: [
         /* @__PURE__ */ jsx4("meta", { charSet: "utf-8" }),
-        options?.headComponents
+        options2?.headComponents
       ] }),
       /* @__PURE__ */ jsx4(
         "body",
@@ -13603,7 +13636,9 @@ var Renderer = class {
         }
       )
     ] });
-    const content = await this.renderJsx(page, { mode: options?.renderMode });
+    const renderJsxFn = await this.getJsxRenderFn({ mode: options2?.renderMode });
+    const nonce = options2?.nonce;
+    const content = nonce ? this.withNonceHooks(nonce, () => renderJsxFn(page)) : renderJsxFn(page);
     return `<!doctype html>
 ${content}`;
   }
@@ -13613,10 +13648,10 @@ ${content}`;
     }
     return str;
   }
-  async render404(options) {
+  async render404(options2) {
     const basePath = this.rootConfig.base || "/";
     const notFoundPath = normalizeUrlPath(`${basePath}/404`);
-    const currentPath = options?.currentPath || notFoundPath;
+    const currentPath = options2?.currentPath || notFoundPath;
     const [route, routeParams] = this.router.get(notFoundPath);
     if (route && route.src === "routes/404.tsx" && route.module.default) {
       const Component = route.module.default;
@@ -13651,8 +13686,8 @@ ${content}`;
     });
     return { html };
   }
-  async renderError(err, options) {
-    const currentPath = options?.currentPath || "/500";
+  async renderError(err, options2) {
+    const currentPath = options2?.currentPath || "/500";
     const [route, routeParams] = this.router.get("/500");
     if (route && route.src === "routes/500.tsx" && route.module.default) {
       const Component = route.module.default;