@pylonsync/functions 0.4.12 → 0.4.14

package/dist/ssr-runtime.d.ts

@@ -344,7 +344,9 @@ export declare function isSafeRedirect(url: string, opts: {
 /** Merge auto-discovered favicons (icon.* / apple-icon.* / favicon.ico)
  *  into a page's metadata. Explicit `metadata.icons.*` wins. */
 export declare function applyAutoIcons(component: string, metadata: SsrMetadata | undefined): SsrMetadata | undefined;
-export declare function applyAutoSocialImages(component: string, headers: Record<string, string> | undefined, metadata: SsrMetadata | undefined, requestUrl?: string): SsrMetadata | undefined;
+export declare function applyAutoSocialImages(component: string, headers: Record<string, string> | undefined, metadata: SsrMetadata | undefined, requestUrl?: string, 
+/** True for a not-found / error boundary — see findColocatedOgImageRoute. */
+isBoundary?: boolean): SsrMetadata | undefined;
 /**
  * Drain a `renderToReadableStream` reader, injecting `headBlob` immediately
  * before the first `</head>` (or, if the document has none, the blob is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/functions",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "TypeScript function runtime for pylon — defines server-side queries, mutations, and actions.",
   "type": "module",
   "main": "src/index.ts",

package/src/ssr-boundary-groups.test.ts

@@ -181,3 +181,75 @@ describe("renderMetadata drives boundary heads too", () => {
     expect(renderMetadata(require("react"), undefined)).toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// A boundary's dynamic og:image URL.
+//
+// Regression: the URL was composed from the REQUEST path while the file was
+// resolved from the boundary's directory. A 404 therefore advertised a card
+// under whatever path failed. Usually that 404s in turn — a broken card is
+// worse than none, since a crawler now has something to fail on — but at a
+// depth where a dynamic route really does define one, it returned 200 and
+// served an unrelated page's card. Silent wrong content.
+// ---------------------------------------------------------------------------
+
+import { applyAutoSocialImages } from "./ssr-runtime";
+
+describe("boundary og:image points at the boundary's own card", () => {
+  // Compare the PATH only. Absolutizing against the request origin needs a
+  // trusted host, which is a separate concern from which route the card lives
+  // at — and the path is the thing that regressed.
+  const ogPath = (m: any) => {
+    const u = m?.openGraph?.image as string | undefined;
+    if (!u) return u;
+    return u.startsWith("http") ? new URL(u).pathname : u;
+  };
+  const headers = { host: "example.com" };
+
+  test("a root boundary advertises the root card whatever URL failed", () => {
+    const root = tree([
+      "app/opengraph-image.tsx",
+      "app/not-found.tsx",
+      "app/[orgSlug]/[eventSlug]/opengraph-image.tsx",
+      "app/[orgSlug]/[eventSlug]/page.tsx",
+    ]);
+    const prev = process.cwd();
+    process.chdir(root);
+    try {
+      for (const url of [
+        "/a/b/c/d/e",
+        "/nope-does-not-exist",
+        // The dangerous one: a real card EXISTS at this depth, so the old
+        // behavior returned 200 with another event's image.
+        "/no-such-org/no-such-event",
+      ]) {
+        const md = applyAutoSocialImages("app/not-found", headers, undefined, url, true);
+        expect(ogPath(md), `for ${url}`).toBe("/opengraph-image");
+      }
+    } finally {
+      process.chdir(prev);
+    }
+  });
+
+  test("a page still advertises the card at its own path", () => {
+    // The request path IS the route path for a page — including a tail a
+    // catch-all consumed, which is why that shortcut exists.
+    const root = tree([
+      "app/[orgSlug]/[eventSlug]/opengraph-image.tsx",
+      "app/[orgSlug]/[eventSlug]/page.tsx",
+    ]);
+    const prev = process.cwd();
+    process.chdir(root);
+    try {
+      const md = applyAutoSocialImages(
+        "app/[orgSlug]/[eventSlug]/page",
+        headers,
+        undefined,
+        "/acme/summit",
+      );
+      expect(ogPath(md)).toBe("/acme/summit/opengraph-image");
+    } finally {
+      process.chdir(prev);
+    }
+  });
+});

package/src/ssr-runtime.ts

@@ -899,6 +899,17 @@ const OG_IMAGE_CODE_EXTS = [".tsx", ".ts", ".jsx", ".js"];
 function findColocatedOgImageRoute(
   componentPath: string,
   url: string,
+  /**
+   * True when `componentPath` is a not-found / error boundary rather than a
+   * page. A page's URL depth matches its directory depth, so when the image
+   * sits in the page's own directory the request path IS the route path —
+   * including the tail a catch-all consumed, which is why that shortcut
+   * exists. A boundary is dispatched at whatever URL failed, so the same
+   * shortcut advertised a card under the 404'd path: mostly a 404 of its own,
+   * but at a depth where a dynamic route really does define one, a 200
+   * serving an unrelated page's card.
+   */
+  isBoundary = false,
 ): string | null {
   const fs = require("node:fs");
   const path = require("node:path");
@@ -918,7 +929,9 @@ function findColocatedOgImageRoute(
     for (const ext of OG_IMAGE_CODE_EXTS) {
       if (fs.existsSync(path.join(cwd, dir, `opengraph-image${ext}`))) {
         const prefix =
-          dir === pageDir ? urlSegs : urlSegs.slice(0, nonGroupDepth(dir));
+          dir === pageDir && !isBoundary
+            ? urlSegs
+            : urlSegs.slice(0, nonGroupDepth(dir));
         return "/" + [...prefix, "opengraph-image"].join("/");
       }
     }
@@ -1287,6 +1300,8 @@ export function applyAutoSocialImages(
   headers: Record<string, string> | undefined,
   metadata: SsrMetadata | undefined,
   requestUrl?: string,
+  /** True for a not-found / error boundary — see findColocatedOgImageRoute. */
+  isBoundary = false,
 ): SsrMetadata | undefined {
   // A relative image is the single most common way a share card breaks:
   // the page ships `og:image="/og.png"`, Facebook and Slack resolve it,
@@ -1310,7 +1325,7 @@ export function applyAutoSocialImages(
   const ogRoute =
     hasOg || ogFile || requestUrl == null
       ? null
-      : findColocatedOgImageRoute(component, requestUrl);
+      : findColocatedOgImageRoute(component, requestUrl, isBoundary);
 
   if (!ogFile && !twFile && !ogRoute) return metadata;
 
@@ -2279,6 +2294,20 @@ async function tryRenderBoundary(
         boundaryMeta = mod.metadata;
       }
     }
+    // The same file conventions a page gets, resolved against the BOUNDARY's
+    // own directory: a colocated opengraph-image / icon next to not-found.tsx
+    // is that boundary's, not the failing page's. Without these, one 404 URL
+    // carried the social card and another didn't, depending only on whether
+    // the route matched — the boundary was reached two ways and looked
+    // different each way.
+    boundaryMeta = applyAutoSocialImages(
+      rel,
+      compProps?.headers,
+      boundaryMeta,
+      compProps?.url,
+      true,
+    );
+    boundaryMeta = applyAutoIcons(rel, boundaryMeta);
     const boundaryMetaFragment = renderMetadata(React, boundaryMeta);
     let tree = React.createElement(Comp, compProps);
     if (boundaryMetaFragment) {
@@ -3107,7 +3136,16 @@ export async function handleRenderRoute(
     // File conventions: auto-wire <meta og:image>/<twitter:image> from a
     // colocated opengraph-image.* / twitter-image.*, and <link rel="icon">
     // from icon.* / apple-icon.* / favicon.ico — unless the page set them.
-    metadata = applyAutoSocialImages(msg.component, msg.headers, metadata, msg.url);
+    // The host dispatches `app/not-found` / `app/error` BY NAME for an
+    // unmatched URL, so this path renders boundaries too.
+    const componentIsBoundary = /(^|\/)(not-found|error)$/.test(msg.component);
+    metadata = applyAutoSocialImages(
+      msg.component,
+      msg.headers,
+      metadata,
+      msg.url,
+      componentIsBoundary,
+    );
     metadata = applyAutoIcons(msg.component, metadata);
     const metaFragment = renderMetadata(React, metadata);