@plasmicapp/nextjs-app-router 1.0.6 → 1.0.8

package/README.md

@@ -100,6 +100,15 @@ async function withExtractPlasmicQueryData(
   // to extract query data.
   newSearchParams.set("plasmicSsr", "true");
 
+  if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {
+    // If protection bypass is enabled, use it to ensure fetching from
+    // the SSR endpoint will not return the authentication page HTML
+    newSearchParams.set(
+      "x-vercel-protection-bypass",
+      process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    );
+  }
+
   // Fetch the data from the endpoint using the new search params
   const prefetchedQueryData = await fetchExtractedQueryData(
     `${prepassHost}${pathname}?${newSearchParams.toString()}`
@@ -138,6 +147,8 @@ module.exports = {
 
 The `PLASMIC_PREPASS_SERVER` environment variable will be set by with-plasmic-prepass.
 
+3. If you are deploying to Vercel, make sure to either disable [Vercel Authentication](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication) or provide the [Protection Bypass](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) (Note: this is a paid feature). This is to ensure the SSR endpoint will not return Vercel's page authentication HTML.
+
 So...
 
 - At dev time, uses itself for extracting query data (hits `localhost:${PORT}`)

package/dist/index.esm.js

@@ -5,14 +5,14 @@ import { extractPlasmicQueryData } from "@plasmicapp/prepass";
 import * as React from "react";
 function ExtractPlasmicQueryData(props) {
   const { children } = props;
-  if (!React.useId || !React.use) {
+  if (!("useId" in React) || !("use" in React)) {
     throw new Error(
       `You can only use <ExtractPlasmicQueryData /> from server components.`
     );
   }
-  const scriptId = `plasmic-prefetch-${React.useId()}`;
+  const scriptId = `plasmic-prefetch-${React["useId"]()}`;
   if (typeof window === "undefined") {
-    const data = React.use(
+    const data = React["use"](
       extractPlasmicQueryData(/* @__PURE__ */ React.createElement(React.Fragment, null, children))
     );
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(

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 (!React.useId || !(React as any).use) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${React.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,CAAO,eAAS,CAAgB,WAAK;AACvC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAA0B,YAAM;AACjD,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 { 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;",
   "names": []
 }

package/dist/index.js

@@ -40,14 +40,14 @@ var import_prepass = require("@plasmicapp/prepass");
 var React = __toESM(require("react"));
 function ExtractPlasmicQueryData(props) {
   const { children } = props;
-  if (!React.useId || !React.use) {
+  if (!("useId" in React) || !("use" in React)) {
     throw new Error(
       `You can only use <ExtractPlasmicQueryData /> from server components.`
     );
   }
-  const scriptId = `plasmic-prefetch-${React.useId()}`;
+  const scriptId = `plasmic-prefetch-${React["useId"]()}`;
   if (typeof window === "undefined") {
-    const data = React.use(
+    const data = React["use"](
       (0, import_prepass.extractPlasmicQueryData)(/* @__PURE__ */ React.createElement(React.Fragment, null, children))
     );
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(

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 (!React.useId || !(React as any).use) {\n    throw new Error(\n      `You can only use <ExtractPlasmicQueryData /> from server components.`\n    );\n  }\n  const scriptId = `plasmic-prefetch-${React.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,CAAO,eAAS,CAAgB,WAAK;AACvC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,oBAA0B,YAAM;AACjD,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 { 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;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/nextjs-app-router",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -70,5 +70,5 @@
     "react": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "1196edcc7a9bd5c33bf8d518546c3a025c40bd29"
+  "gitHead": "0597c84c0fa0df12523bfdbc1ba21ce81d34d63c"
 }