@plasmicapp/nextjs-app-router 1.0.9 → 1.0.10

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/ExtractPlasmicQueryData.tsx
-import { extractPlasmicQueryData } from "@plasmicapp/prepass";
+import { plasmicPrepassExtract } from "@plasmicapp/prepass";
 import * as React from "react";
 function ExtractPlasmicQueryData(props) {
   const { children } = props;
@@ -12,17 +12,28 @@ function ExtractPlasmicQueryData(props) {
   }
   const scriptId = `plasmic-prefetch-${React["useId"]()}`;
   if (typeof window === "undefined") {
-    const data = React["use"](
-      extractPlasmicQueryData(/* @__PURE__ */ React.createElement(React.Fragment, null, children))
-    );
+    const {
+      queryData,
+      headMetadata
+    } = React["use"](plasmicPrepassExtract(/* @__PURE__ */ React.createElement(React.Fragment, null, children)));
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "script",
       {
         type: "application/json",
-        dangerouslySetInnerHTML: { __html: JSON.stringify(data) },
+        dangerouslySetInnerHTML: { __html: JSON.stringify(queryData) },
         "data-plasmic-prefetch-id": scriptId,
         suppressHydrationWarning: true
       }
+    ), headMetadata && /* @__PURE__ */ React.createElement(
+      "script",
+      {
+        type: "application/json",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify(headMetadata)
+        },
+        "data-plasmic-head-metadata-id": scriptId,
+        suppressHydrationWarning: true
+      }
     ));
   } else {
     return null;

package/dist/index.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/ExtractPlasmicQueryData.tsx"],
-  "sourcesContent": ["import { extractPlasmicQueryData } from \"@plasmicapp/prepass\";\nimport * as React from \"react\";\n\n/**\n * EXPERIMENTAL\n *\n * A component that serves the same purpose as extractPlasmicQueryData(), but from\n * React server components. This only works from frameworks that support\n * React.useId() and React.use() (like Next.js 13).\n *\n * The children of this component will be run through `extractPlasmicQueryData()`.\n */\nexport function ExtractPlasmicQueryData(props: { children?: React.ReactNode }) {\n  const { children } = props;\n  if (!(\"useId\" in React) || !(\"use\" in React)) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${(React as any)[\"\" + \"useId\"]()}`;\n  if (typeof window === \"undefined\") {\n    const data: Record<string, any> = (React as any)[\"\" + \"use\"](\n      extractPlasmicQueryData(<>{children}</>)\n    );\n    return (\n      <>\n        <script\n          type=\"application/json\"\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}\n          data-plasmic-prefetch-id={scriptId}\n          suppressHydrationWarning={true}\n        />\n      </>\n    );\n  } else {\n    return null;\n  }\n}\n"],
-  "mappings": ";;;AAAA,SAAS,+BAA+B;AACxC,YAAY,WAAW;AAWhB,SAAS,wBAAwB,OAAuC;AAC7E,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,EAAE,WAAW,UAAU,EAAE,SAAS,QAAQ;AAC5C,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAAmC,eAAc;AAClE,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,OAA2C;AAAA,MAC/C,wBAAwB,0DAAG,QAAS,CAAG;AAAA,IACzC;AACA,WACE,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB,EAAE,QAAQ,KAAK,UAAU,IAAI,EAAE;AAAA,QACxD,4BAA0B;AAAA,QAC1B,0BAA0B;AAAA;AAAA,IAC5B,CACF;AAAA,EAEJ,OAAO;AACL,WAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["import { plasmicPrepassExtract } from \"@plasmicapp/prepass\";\nimport type { HeadMetadata } from \"@plasmicapp/query\";\nimport * as React from \"react\";\n\n/**\n * EXPERIMENTAL\n *\n * A component that serves the same purpose as extractPlasmicQueryData(), but from\n * React server components. This only works from frameworks that support\n * React.useId() and React.use() (like Next.js 13).\n *\n * The children of this component will be run through `extractPlasmicQueryData()`.\n */\nexport function ExtractPlasmicQueryData(props: { children?: React.ReactNode }) {\n  const { children } = props;\n  if (!(\"useId\" in React) || !(\"use\" in React)) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${(React as any)[\"\" + \"useId\"]()}`;\n  if (typeof window === \"undefined\") {\n    const {\n      queryData,\n      headMetadata,\n    }: { queryData: Record<string, any>; headMetadata: HeadMetadata } = (\n      React as any\n    )[\"\" + \"use\"](plasmicPrepassExtract(<>{children}</>));\n    return (\n      <>\n        <script\n          type=\"application/json\"\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(queryData) }}\n          data-plasmic-prefetch-id={scriptId}\n          suppressHydrationWarning={true}\n        />\n        {headMetadata && (\n          <script\n            type=\"application/json\"\n            dangerouslySetInnerHTML={{\n              __html: JSON.stringify(headMetadata),\n            }}\n            data-plasmic-head-metadata-id={scriptId}\n            suppressHydrationWarning={true}\n          />\n        )}\n      </>\n    );\n  } else {\n    return null;\n  }\n}\n"],
+  "mappings": ";;;AAAA,SAAS,6BAA6B;AAEtC,YAAY,WAAW;AAWhB,SAAS,wBAAwB,OAAuC;AAC7E,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,EAAE,WAAW,UAAU,EAAE,SAAS,QAAQ;AAC5C,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAAmC,eAAc;AAClE,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAEE,aAAY,sBAAsB,0DAAG,QAAS,CAAG,CAAC;AACpD,WACE,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB,EAAE,QAAQ,KAAK,UAAU,SAAS,EAAE;AAAA,QAC7D,4BAA0B;AAAA,QAC1B,0BAA0B;AAAA;AAAA,IAC5B,GACC,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,YAAY;AAAA,QACrC;AAAA,QACA,iCAA+B;AAAA,QAC/B,0BAA0B;AAAA;AAAA,IAC5B,CAEJ;AAAA,EAEJ,OAAO;AACL,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/index.js

@@ -47,17 +47,28 @@ function ExtractPlasmicQueryData(props) {
   }
   const scriptId = `plasmic-prefetch-${React["useId"]()}`;
   if (typeof window === "undefined") {
-    const data = React["use"](
-      (0, import_prepass.extractPlasmicQueryData)(/* @__PURE__ */ React.createElement(React.Fragment, null, children))
-    );
+    const {
+      queryData,
+      headMetadata
+    } = React["use"]((0, import_prepass.plasmicPrepassExtract)(/* @__PURE__ */ React.createElement(React.Fragment, null, children)));
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "script",
       {
         type: "application/json",
-        dangerouslySetInnerHTML: { __html: JSON.stringify(data) },
+        dangerouslySetInnerHTML: { __html: JSON.stringify(queryData) },
         "data-plasmic-prefetch-id": scriptId,
         suppressHydrationWarning: true
       }
+    ), headMetadata && /* @__PURE__ */ React.createElement(
+      "script",
+      {
+        type: "application/json",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify(headMetadata)
+        },
+        "data-plasmic-head-metadata-id": scriptId,
+        suppressHydrationWarning: true
+      }
     ));
   } else {
     return null;

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts", "../src/ExtractPlasmicQueryData.tsx"],
-  "sourcesContent": ["export * from \"./ExtractPlasmicQueryData\";\n", "import { extractPlasmicQueryData } from \"@plasmicapp/prepass\";\nimport * as React from \"react\";\n\n/**\n * EXPERIMENTAL\n *\n * A component that serves the same purpose as extractPlasmicQueryData(), but from\n * React server components. This only works from frameworks that support\n * React.useId() and React.use() (like Next.js 13).\n *\n * The children of this component will be run through `extractPlasmicQueryData()`.\n */\nexport function ExtractPlasmicQueryData(props: { children?: React.ReactNode }) {\n  const { children } = props;\n  if (!(\"useId\" in React) || !(\"use\" in React)) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${(React as any)[\"\" + \"useId\"]()}`;\n  if (typeof window === \"undefined\") {\n    const data: Record<string, any> = (React as any)[\"\" + \"use\"](\n      extractPlasmicQueryData(<>{children}</>)\n    );\n    return (\n      <>\n        <script\n          type=\"application/json\"\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}\n          data-plasmic-prefetch-id={scriptId}\n          suppressHydrationWarning={true}\n        />\n      </>\n    );\n  } else {\n    return null;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwC;AACxC,YAAuB;AAWhB,SAAS,wBAAwB,OAAuC;AAC7E,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,EAAE,WAAW,UAAU,EAAE,SAAS,QAAQ;AAC5C,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAAmC,eAAc;AAClE,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,OAA2C;AAAA,UAC/C,wCAAwB,0DAAG,QAAS,CAAG;AAAA,IACzC;AACA,WACE,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB,EAAE,QAAQ,KAAK,UAAU,IAAI,EAAE;AAAA,QACxD,4BAA0B;AAAA,QAC1B,0BAA0B;AAAA;AAAA,IAC5B,CACF;AAAA,EAEJ,OAAO;AACL,WAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["export * from \"./ExtractPlasmicQueryData\";\n", "import { plasmicPrepassExtract } from \"@plasmicapp/prepass\";\nimport type { HeadMetadata } from \"@plasmicapp/query\";\nimport * as React from \"react\";\n\n/**\n * EXPERIMENTAL\n *\n * A component that serves the same purpose as extractPlasmicQueryData(), but from\n * React server components. This only works from frameworks that support\n * React.useId() and React.use() (like Next.js 13).\n *\n * The children of this component will be run through `extractPlasmicQueryData()`.\n */\nexport function ExtractPlasmicQueryData(props: { children?: React.ReactNode }) {\n  const { children } = props;\n  if (!(\"useId\" in React) || !(\"use\" in React)) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${(React as any)[\"\" + \"useId\"]()}`;\n  if (typeof window === \"undefined\") {\n    const {\n      queryData,\n      headMetadata,\n    }: { queryData: Record<string, any>; headMetadata: HeadMetadata } = (\n      React as any\n    )[\"\" + \"use\"](plasmicPrepassExtract(<>{children}</>));\n    return (\n      <>\n        <script\n          type=\"application/json\"\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(queryData) }}\n          data-plasmic-prefetch-id={scriptId}\n          suppressHydrationWarning={true}\n        />\n        {headMetadata && (\n          <script\n            type=\"application/json\"\n            dangerouslySetInnerHTML={{\n              __html: JSON.stringify(headMetadata),\n            }}\n            data-plasmic-head-metadata-id={scriptId}\n            suppressHydrationWarning={true}\n          />\n        )}\n      </>\n    );\n  } else {\n    return null;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAsC;AAEtC,YAAuB;AAWhB,SAAS,wBAAwB,OAAuC;AAC7E,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,EAAE,WAAW,UAAU,EAAE,SAAS,QAAQ;AAC5C,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAAmC,eAAc;AAClE,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAEE,iBAAY,sCAAsB,0DAAG,QAAS,CAAG,CAAC;AACpD,WACE,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB,EAAE,QAAQ,KAAK,UAAU,SAAS,EAAE;AAAA,QAC7D,4BAA0B;AAAA,QAC1B,0BAA0B;AAAA;AAAA,IAC5B,GACC,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,YAAY;AAAA,QACrC;AAAA,QACA,iCAA+B;AAAA,QAC/B,0BAA0B;AAAA;AAAA,IAC5B,CAEJ;AAAA,EAEJ,OAAO;AACL,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/react-server.d.ts

@@ -1,3 +1,18 @@
+import type { HeadMetadata } from '@plasmicapp/query';
+
+export declare function fetchExtractedHeadMetadata(url: string): Promise<HeadMetadata | undefined>;
+
 export declare function fetchExtractedQueryData(url: string): Promise<any>;
 
+/**
+ * Helper function to extract Head metadata from Plasmic pages.
+ *
+ * Given current pathname + search params, returns an object compatible with
+ * Next.js Metadata interface with SEO metadata.
+ */
+export declare function withPlasmicMetadata({ pathname, searchParams, }: {
+    pathname: string;
+    searchParams: Record<string, string | string[]> | undefined;
+}): Promise<object>;
+
 export { }

package/dist/react-server.esm.js

@@ -36,7 +36,85 @@ function fetchExtractedQueryData(url) {
     return void 0;
   });
 }
+function fetchExtractedHeadMetadata(url) {
+  return __async(this, null, function* () {
+    const res = yield fetch(url);
+    if (res.status !== 200) {
+      return void 0;
+    }
+    const html = yield res.text();
+    const root = parseHtml(html);
+    const script = root.querySelector("script[data-plasmic-head-metadata-id]");
+    if (script) {
+      return JSON.parse(script.innerHTML);
+    }
+    return void 0;
+  });
+}
+function withPlasmicMetadata(_0) {
+  return __async(this, arguments, function* ({
+    pathname,
+    searchParams
+  }) {
+    var _a, _b, _c;
+    const isPlasmicSsr = !!(searchParams == null ? void 0 : searchParams["plasmicSsr"]) && (searchParams == null ? void 0 : searchParams["plasmicSsr"]) !== "false";
+    if (isPlasmicSsr) {
+      return {};
+    }
+    const prepassHost = (_c = (_a = process.env.PLASMIC_PREPASS_HOST) != null ? _a : process.env.VERCEL_URL && `https://${process.env.VERCEL_URL}`) != null ? _c : `http://localhost:${(_b = process.env.PORT) != null ? _b : 3e3}`;
+    const newSearchParams = new URLSearchParams(
+      Object.entries(searchParams != null ? searchParams : {}).flatMap(
+        ([key, values]) => Array.isArray(values) ? values.map((v) => [key, v]) : [[key, values]]
+      )
+    );
+    newSearchParams.set("plasmicSsr", "true");
+    if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {
+      newSearchParams.set(
+        "x-vercel-protection-bypass",
+        process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+      );
+    }
+    const prefetchedHeadMetadata = yield fetchExtractedHeadMetadata(
+      `${prepassHost}${pathname}?${newSearchParams.toString()}`
+    );
+    const headMetadata = {};
+    if (prefetchedHeadMetadata && Object.keys(prefetchedHeadMetadata).length > 0) {
+      if (prefetchedHeadMetadata.image) {
+        headMetadata.twitter = {
+          card: "summary_large_image",
+          images: [prefetchedHeadMetadata.image]
+        };
+        headMetadata.openGraph = {
+          images: [prefetchedHeadMetadata.image]
+        };
+      } else {
+        headMetadata.twitter = {
+          card: "summary"
+        };
+        headMetadata.openGraph = {};
+      }
+      if (prefetchedHeadMetadata.title) {
+        headMetadata.title = prefetchedHeadMetadata.title;
+        headMetadata.twitter.title = prefetchedHeadMetadata.title;
+        headMetadata.openGraph.title = prefetchedHeadMetadata.title;
+      }
+      if (prefetchedHeadMetadata.description) {
+        headMetadata.description = prefetchedHeadMetadata.description;
+        headMetadata.twitter.description = prefetchedHeadMetadata.description;
+        headMetadata.openGraph.description = prefetchedHeadMetadata.description;
+      }
+      if (prefetchedHeadMetadata.canonical) {
+        headMetadata.alternates = {
+          canonical: prefetchedHeadMetadata.canonical
+        };
+      }
+    }
+    return headMetadata;
+  });
+}
 export {
-  fetchExtractedQueryData
+  fetchExtractedHeadMetadata,
+  fetchExtractedQueryData,
+  withPlasmicMetadata
 };
 //# sourceMappingURL=react-server.esm.js.map

package/dist/react-server.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/extracted-data-fetcher.ts"],
-  "sourcesContent": ["import { parse as parseHtml } from \"node-html-parser\";\n\nexport async function fetchExtractedQueryData(url: string) {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-prefetch-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,SAAS,iBAAiB;AAEnC,SAAsB,wBAAwB,KAAa;AAAA;AACzD,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,OAAO,UAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,kCAAkC;AACpE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;",
+  "sourcesContent": ["import type { HeadMetadata } from \"@plasmicapp/query\";\nimport { parse as parseHtml } from \"node-html-parser\";\nimport { Metadata } from \"next\";\n\nexport async function fetchExtractedQueryData(url: string) {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-prefetch-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n\nexport async function fetchExtractedHeadMetadata(\n  url: string\n): Promise<HeadMetadata | undefined> {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-head-metadata-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n\n/**\n * Helper function to extract Head metadata from Plasmic pages.\n *\n * Given current pathname + search params, returns an object compatible with\n * Next.js Metadata interface with SEO metadata.\n */\nexport async function withPlasmicMetadata({\n  pathname,\n  searchParams,\n}: {\n  pathname: string;\n  searchParams: Record<string, string | string[]> | undefined;\n}): Promise<object> {\n  const isPlasmicSsr =\n    !!searchParams?.[\"plasmicSsr\"] && searchParams?.[\"plasmicSsr\"] !== \"false\";\n\n  if (isPlasmicSsr) {\n    // We're building the metadata for SSR endpoint here; this endpoint is not\n    // exposed for users, so we can just return an empty object.\n    return {};\n  }\n\n  // Fetch the same page from SSR endpoint to retrieve Head metadata\n  const prepassHost =\n    process.env.PLASMIC_PREPASS_HOST ??\n    (process.env.VERCEL_URL && `https://${process.env.VERCEL_URL}`) ??\n    `http://localhost:${process.env.PORT ?? 3000}`;\n\n  // Build a copy of the search params\n  const newSearchParams = new URLSearchParams(\n    Object.entries(searchParams ?? {}).flatMap(([key, values]) =>\n      Array.isArray(values) ? values.map((v) => [key, v]) : [[key, values]]\n    )\n  );\n\n  // Set `plasmicSsr` search param to indicate you are using the SSR endpoint.\n  newSearchParams.set(\"plasmicSsr\", \"true\");\n\n  if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {\n    // If protection bypass is enabled, use it to ensure fetching from\n    // the SSR endpoint will not return the authentication page HTML\n    newSearchParams.set(\n      \"x-vercel-protection-bypass\",\n      process.env.VERCEL_AUTOMATION_BYPASS_SECRET\n    );\n  }\n\n  // Fetch and return the data from the endpoint using the new search params\n  const prefetchedHeadMetadata = await fetchExtractedHeadMetadata(\n    `${prepassHost}${pathname}?${newSearchParams.toString()}`\n  );\n\n  // Create metadata object\n  const headMetadata: Metadata = {};\n  if (\n    prefetchedHeadMetadata &&\n    Object.keys(prefetchedHeadMetadata).length > 0\n  ) {\n    if (prefetchedHeadMetadata.image) {\n      headMetadata.twitter = {\n        card: \"summary_large_image\",\n        images: [prefetchedHeadMetadata.image],\n      };\n      headMetadata.openGraph = {\n        images: [prefetchedHeadMetadata.image],\n      };\n    } else {\n      headMetadata.twitter = {\n        card: \"summary\",\n      };\n      headMetadata.openGraph = {};\n    }\n    if (prefetchedHeadMetadata.title) {\n      headMetadata.title = prefetchedHeadMetadata.title;\n      headMetadata.twitter.title = prefetchedHeadMetadata.title;\n      headMetadata.openGraph.title = prefetchedHeadMetadata.title;\n    }\n    if (prefetchedHeadMetadata.description) {\n      headMetadata.description = prefetchedHeadMetadata.description;\n      headMetadata.twitter.description = prefetchedHeadMetadata.description;\n      headMetadata.openGraph.description = prefetchedHeadMetadata.description;\n    }\n    if (prefetchedHeadMetadata.canonical) {\n      headMetadata.alternates = {\n        canonical: prefetchedHeadMetadata.canonical,\n      };\n    }\n  }\n\n  return headMetadata;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,SAAS,iBAAiB;AAGnC,SAAsB,wBAAwB,KAAa;AAAA;AACzD,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,OAAO,UAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,kCAAkC;AACpE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;AAEA,SAAsB,2BACpB,KACmC;AAAA;AACnC,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,OAAO,UAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,uCAAuC;AACzE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;AAQA,SAAsB,oBAAoB,IAMtB;AAAA,6CANsB;AAAA,IACxC;AAAA,IACA;AAAA,EACF,GAGoB;AAhDpB;AAiDE,UAAM,eACJ,CAAC,EAAC,6CAAe,mBAAiB,6CAAe,mBAAkB;AAErE,QAAI,cAAc;AAGhB,aAAO,CAAC;AAAA,IACV;AAGA,UAAM,eACJ,mBAAQ,IAAI,yBAAZ,YACC,QAAQ,IAAI,cAAc,WAAW,QAAQ,IAAI,iBADlD,YAEA,qBAAoB,aAAQ,IAAI,SAAZ,YAAoB;AAG1C,UAAM,kBAAkB,IAAI;AAAA,MAC1B,OAAO,QAAQ,sCAAgB,CAAC,CAAC,EAAE;AAAA,QAAQ,CAAC,CAAC,KAAK,MAAM,MACtD,MAAM,QAAQ,MAAM,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,CAAC;AAAA,MACtE;AAAA,IACF;AAGA,oBAAgB,IAAI,cAAc,MAAM;AAExC,QAAI,QAAQ,IAAI,iCAAiC;AAG/C,sBAAgB;AAAA,QACd;AAAA,QACA,QAAQ,IAAI;AAAA,MACd;AAAA,IACF;AAGA,UAAM,yBAAyB,MAAM;AAAA,MACnC,GAAG,cAAc,YAAY,gBAAgB,SAAS;AAAA,IACxD;AAGA,UAAM,eAAyB,CAAC;AAChC,QACE,0BACA,OAAO,KAAK,sBAAsB,EAAE,SAAS,GAC7C;AACA,UAAI,uBAAuB,OAAO;AAChC,qBAAa,UAAU;AAAA,UACrB,MAAM;AAAA,UACN,QAAQ,CAAC,uBAAuB,KAAK;AAAA,QACvC;AACA,qBAAa,YAAY;AAAA,UACvB,QAAQ,CAAC,uBAAuB,KAAK;AAAA,QACvC;AAAA,MACF,OAAO;AACL,qBAAa,UAAU;AAAA,UACrB,MAAM;AAAA,QACR;AACA,qBAAa,YAAY,CAAC;AAAA,MAC5B;AACA,UAAI,uBAAuB,OAAO;AAChC,qBAAa,QAAQ,uBAAuB;AAC5C,qBAAa,QAAQ,QAAQ,uBAAuB;AACpD,qBAAa,UAAU,QAAQ,uBAAuB;AAAA,MACxD;AACA,UAAI,uBAAuB,aAAa;AACtC,qBAAa,cAAc,uBAAuB;AAClD,qBAAa,QAAQ,cAAc,uBAAuB;AAC1D,qBAAa,UAAU,cAAc,uBAAuB;AAAA,MAC9D;AACA,UAAI,uBAAuB,WAAW;AACpC,qBAAa,aAAa;AAAA,UACxB,WAAW,uBAAuB;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;",
   "names": []
 }

package/dist/react-server.js

@@ -40,7 +40,9 @@ var __async = (__this, __arguments, generator) => {
 // src/react-server.ts
 var react_server_exports = {};
 __export(react_server_exports, {
-  fetchExtractedQueryData: () => fetchExtractedQueryData
+  fetchExtractedHeadMetadata: () => fetchExtractedHeadMetadata,
+  fetchExtractedQueryData: () => fetchExtractedQueryData,
+  withPlasmicMetadata: () => withPlasmicMetadata
 });
 module.exports = __toCommonJS(react_server_exports);
 
@@ -61,4 +63,80 @@ function fetchExtractedQueryData(url) {
     return void 0;
   });
 }
+function fetchExtractedHeadMetadata(url) {
+  return __async(this, null, function* () {
+    const res = yield fetch(url);
+    if (res.status !== 200) {
+      return void 0;
+    }
+    const html = yield res.text();
+    const root = (0, import_node_html_parser.parse)(html);
+    const script = root.querySelector("script[data-plasmic-head-metadata-id]");
+    if (script) {
+      return JSON.parse(script.innerHTML);
+    }
+    return void 0;
+  });
+}
+function withPlasmicMetadata(_0) {
+  return __async(this, arguments, function* ({
+    pathname,
+    searchParams
+  }) {
+    var _a, _b, _c;
+    const isPlasmicSsr = !!(searchParams == null ? void 0 : searchParams["plasmicSsr"]) && (searchParams == null ? void 0 : searchParams["plasmicSsr"]) !== "false";
+    if (isPlasmicSsr) {
+      return {};
+    }
+    const prepassHost = (_c = (_a = process.env.PLASMIC_PREPASS_HOST) != null ? _a : process.env.VERCEL_URL && `https://${process.env.VERCEL_URL}`) != null ? _c : `http://localhost:${(_b = process.env.PORT) != null ? _b : 3e3}`;
+    const newSearchParams = new URLSearchParams(
+      Object.entries(searchParams != null ? searchParams : {}).flatMap(
+        ([key, values]) => Array.isArray(values) ? values.map((v) => [key, v]) : [[key, values]]
+      )
+    );
+    newSearchParams.set("plasmicSsr", "true");
+    if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {
+      newSearchParams.set(
+        "x-vercel-protection-bypass",
+        process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+      );
+    }
+    const prefetchedHeadMetadata = yield fetchExtractedHeadMetadata(
+      `${prepassHost}${pathname}?${newSearchParams.toString()}`
+    );
+    const headMetadata = {};
+    if (prefetchedHeadMetadata && Object.keys(prefetchedHeadMetadata).length > 0) {
+      if (prefetchedHeadMetadata.image) {
+        headMetadata.twitter = {
+          card: "summary_large_image",
+          images: [prefetchedHeadMetadata.image]
+        };
+        headMetadata.openGraph = {
+          images: [prefetchedHeadMetadata.image]
+        };
+      } else {
+        headMetadata.twitter = {
+          card: "summary"
+        };
+        headMetadata.openGraph = {};
+      }
+      if (prefetchedHeadMetadata.title) {
+        headMetadata.title = prefetchedHeadMetadata.title;
+        headMetadata.twitter.title = prefetchedHeadMetadata.title;
+        headMetadata.openGraph.title = prefetchedHeadMetadata.title;
+      }
+      if (prefetchedHeadMetadata.description) {
+        headMetadata.description = prefetchedHeadMetadata.description;
+        headMetadata.twitter.description = prefetchedHeadMetadata.description;
+        headMetadata.openGraph.description = prefetchedHeadMetadata.description;
+      }
+      if (prefetchedHeadMetadata.canonical) {
+        headMetadata.alternates = {
+          canonical: prefetchedHeadMetadata.canonical
+        };
+      }
+    }
+    return headMetadata;
+  });
+}
 //# sourceMappingURL=react-server.js.map

package/dist/react-server.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/react-server.ts", "../src/extracted-data-fetcher.ts"],
-  "sourcesContent": ["export * from \"./extracted-data-fetcher\";\n", "import { parse as parseHtml } from \"node-html-parser\";\n\nexport async function fetchExtractedQueryData(url: string) {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-prefetch-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,8BAAmC;AAEnC,SAAsB,wBAAwB,KAAa;AAAA;AACzD,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,WAAO,wBAAAA,OAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,kCAAkC;AACpE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;",
+  "sourcesContent": ["export * from \"./extracted-data-fetcher\";\n", "import type { HeadMetadata } from \"@plasmicapp/query\";\nimport { parse as parseHtml } from \"node-html-parser\";\nimport { Metadata } from \"next\";\n\nexport async function fetchExtractedQueryData(url: string) {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-prefetch-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n\nexport async function fetchExtractedHeadMetadata(\n  url: string\n): Promise<HeadMetadata | undefined> {\n  const res = await fetch(url);\n  if (res.status !== 200) {\n    return undefined;\n  }\n\n  const html = await res.text();\n  const root = parseHtml(html);\n  const script = root.querySelector(\"script[data-plasmic-head-metadata-id]\");\n  if (script) {\n    return JSON.parse(script.innerHTML);\n  }\n  return undefined;\n}\n\n/**\n * Helper function to extract Head metadata from Plasmic pages.\n *\n * Given current pathname + search params, returns an object compatible with\n * Next.js Metadata interface with SEO metadata.\n */\nexport async function withPlasmicMetadata({\n  pathname,\n  searchParams,\n}: {\n  pathname: string;\n  searchParams: Record<string, string | string[]> | undefined;\n}): Promise<object> {\n  const isPlasmicSsr =\n    !!searchParams?.[\"plasmicSsr\"] && searchParams?.[\"plasmicSsr\"] !== \"false\";\n\n  if (isPlasmicSsr) {\n    // We're building the metadata for SSR endpoint here; this endpoint is not\n    // exposed for users, so we can just return an empty object.\n    return {};\n  }\n\n  // Fetch the same page from SSR endpoint to retrieve Head metadata\n  const prepassHost =\n    process.env.PLASMIC_PREPASS_HOST ??\n    (process.env.VERCEL_URL && `https://${process.env.VERCEL_URL}`) ??\n    `http://localhost:${process.env.PORT ?? 3000}`;\n\n  // Build a copy of the search params\n  const newSearchParams = new URLSearchParams(\n    Object.entries(searchParams ?? {}).flatMap(([key, values]) =>\n      Array.isArray(values) ? values.map((v) => [key, v]) : [[key, values]]\n    )\n  );\n\n  // Set `plasmicSsr` search param to indicate you are using the SSR endpoint.\n  newSearchParams.set(\"plasmicSsr\", \"true\");\n\n  if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {\n    // If protection bypass is enabled, use it to ensure fetching from\n    // the SSR endpoint will not return the authentication page HTML\n    newSearchParams.set(\n      \"x-vercel-protection-bypass\",\n      process.env.VERCEL_AUTOMATION_BYPASS_SECRET\n    );\n  }\n\n  // Fetch and return the data from the endpoint using the new search params\n  const prefetchedHeadMetadata = await fetchExtractedHeadMetadata(\n    `${prepassHost}${pathname}?${newSearchParams.toString()}`\n  );\n\n  // Create metadata object\n  const headMetadata: Metadata = {};\n  if (\n    prefetchedHeadMetadata &&\n    Object.keys(prefetchedHeadMetadata).length > 0\n  ) {\n    if (prefetchedHeadMetadata.image) {\n      headMetadata.twitter = {\n        card: \"summary_large_image\",\n        images: [prefetchedHeadMetadata.image],\n      };\n      headMetadata.openGraph = {\n        images: [prefetchedHeadMetadata.image],\n      };\n    } else {\n      headMetadata.twitter = {\n        card: \"summary\",\n      };\n      headMetadata.openGraph = {};\n    }\n    if (prefetchedHeadMetadata.title) {\n      headMetadata.title = prefetchedHeadMetadata.title;\n      headMetadata.twitter.title = prefetchedHeadMetadata.title;\n      headMetadata.openGraph.title = prefetchedHeadMetadata.title;\n    }\n    if (prefetchedHeadMetadata.description) {\n      headMetadata.description = prefetchedHeadMetadata.description;\n      headMetadata.twitter.description = prefetchedHeadMetadata.description;\n      headMetadata.openGraph.description = prefetchedHeadMetadata.description;\n    }\n    if (prefetchedHeadMetadata.canonical) {\n      headMetadata.alternates = {\n        canonical: prefetchedHeadMetadata.canonical,\n      };\n    }\n  }\n\n  return headMetadata;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,8BAAmC;AAGnC,SAAsB,wBAAwB,KAAa;AAAA;AACzD,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,WAAO,wBAAAA,OAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,kCAAkC;AACpE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;AAEA,SAAsB,2BACpB,KACmC;AAAA;AACnC,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,IAAI,WAAW,KAAK;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAM,WAAO,wBAAAA,OAAU,IAAI;AAC3B,UAAM,SAAS,KAAK,cAAc,uCAAuC;AACzE,QAAI,QAAQ;AACV,aAAO,KAAK,MAAM,OAAO,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAAA;AAQA,SAAsB,oBAAoB,IAMtB;AAAA,6CANsB;AAAA,IACxC;AAAA,IACA;AAAA,EACF,GAGoB;AAhDpB;AAiDE,UAAM,eACJ,CAAC,EAAC,6CAAe,mBAAiB,6CAAe,mBAAkB;AAErE,QAAI,cAAc;AAGhB,aAAO,CAAC;AAAA,IACV;AAGA,UAAM,eACJ,mBAAQ,IAAI,yBAAZ,YACC,QAAQ,IAAI,cAAc,WAAW,QAAQ,IAAI,iBADlD,YAEA,qBAAoB,aAAQ,IAAI,SAAZ,YAAoB;AAG1C,UAAM,kBAAkB,IAAI;AAAA,MAC1B,OAAO,QAAQ,sCAAgB,CAAC,CAAC,EAAE;AAAA,QAAQ,CAAC,CAAC,KAAK,MAAM,MACtD,MAAM,QAAQ,MAAM,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,CAAC;AAAA,MACtE;AAAA,IACF;AAGA,oBAAgB,IAAI,cAAc,MAAM;AAExC,QAAI,QAAQ,IAAI,iCAAiC;AAG/C,sBAAgB;AAAA,QACd;AAAA,QACA,QAAQ,IAAI;AAAA,MACd;AAAA,IACF;AAGA,UAAM,yBAAyB,MAAM;AAAA,MACnC,GAAG,cAAc,YAAY,gBAAgB,SAAS;AAAA,IACxD;AAGA,UAAM,eAAyB,CAAC;AAChC,QACE,0BACA,OAAO,KAAK,sBAAsB,EAAE,SAAS,GAC7C;AACA,UAAI,uBAAuB,OAAO;AAChC,qBAAa,UAAU;AAAA,UACrB,MAAM;AAAA,UACN,QAAQ,CAAC,uBAAuB,KAAK;AAAA,QACvC;AACA,qBAAa,YAAY;AAAA,UACvB,QAAQ,CAAC,uBAAuB,KAAK;AAAA,QACvC;AAAA,MACF,OAAO;AACL,qBAAa,UAAU;AAAA,UACrB,MAAM;AAAA,QACR;AACA,qBAAa,YAAY,CAAC;AAAA,MAC5B;AACA,UAAI,uBAAuB,OAAO;AAChC,qBAAa,QAAQ,uBAAuB;AAC5C,qBAAa,QAAQ,QAAQ,uBAAuB;AACpD,qBAAa,UAAU,QAAQ,uBAAuB;AAAA,MACxD;AACA,UAAI,uBAAuB,aAAa;AACtC,qBAAa,cAAc,uBAAuB;AAClD,qBAAa,QAAQ,cAAc,uBAAuB;AAC1D,qBAAa,UAAU,cAAc,uBAAuB;AAAA,MAC9D;AACA,UAAI,uBAAuB,WAAW;AACpC,qBAAa,aAAa;AAAA,UACxB,WAAW,uBAAuB;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;",
   "names": ["parseHtml"]
 }

package/dist/with-plasmic-prepass.cjs.js

@@ -7603,7 +7603,6 @@ async function main() {
       import_process.default.exit(commandProcess.exitCode ?? void 0);
     }).catch((err) => {
       console.error(`Plasmic: Failed to kill dev server: ${err}`);
-      import_process.default.exit(1);
     });
   };
   const command2 = argv._.map((x) => `${x}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/nextjs-app-router",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -25,7 +25,8 @@
     "prepare": "if-env PREPARE_NO_BUILD=true || yarn build"
   },
   "dependencies": {
-    "@plasmicapp/prepass": "1.0.16",
+    "@plasmicapp/prepass": "1.0.17",
+    "@plasmicapp/query": "0.1.79",
     "fkill": "^8.1.0",
     "get-port": "^7.0.0",
     "node-html-parser": "^6.1.5",
@@ -67,8 +68,9 @@
     "@types/node": "^20.8.9",
     "@types/react": "^18.0.27",
     "@types/yargs": "^17.0.32",
+    "next": "^13.2.0",
     "react": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "2169c4a64fe85ab5c37d2a612fb37dccb86a1ca2"
+  "gitHead": "2f8ee12f8f9c75c0f0af3834b8302b0bea542cbd"
 }