create-plasmic-app 0.0.39 → 0.0.42

package/dist/strategies/nextjs.js

@@ -41,8 +41,8 @@ const nextjsStrategy = {
     }),
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { projectPath, scheme } = args;
+        const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
         if (scheme === "codegen") {
-            const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
             yield fs_1.promises.writeFile(nextjsConfigFile, `
 module.exports = {
   eslint: {
@@ -53,6 +53,19 @@ module.exports = {
 };
     `);
         }
+        else {
+            yield fs_1.promises.writeFile(nextjsConfigFile, `
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Turn off React StrictMode for now, as react-aria (used by Plasmic) 
+  // has some troubles with it. See
+  // https://github.com/adobe/react-spectrum/labels/strict%20mode
+  reactStrictMode: false,
+}
+
+module.exports = nextConfig
+        `);
+        }
     }),
     generateFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
         // this is supposed to be called for loader case, so we are supposed to remove

package/dist/templates/nextjs.js

@@ -34,19 +34,21 @@ function makeNextjsCatchallPage(format) {
     const ts = format === "ts";
     return `
 import * as React from "react";
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
+  PlasmicComponent,
+  extractPlasmicQueryData,
   ComponentRenderData,
   PlasmicRootProvider,
-} from "@plasmicapp/loader-react";
+} from "@plasmicapp/loader-nextjs";
+${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
 import { PLASMIC } from "../plasmic-init";
 
 export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
   plasmicData?: ComponentRenderData;
+  queryCache?: Record<string, any>;
 }`)}) {
-  const { plasmicData } = props;
+  const { plasmicData, queryCache } = props;
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
   }
@@ -54,6 +56,7 @@ export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
     <PlasmicRootProvider
       loader={PLASMIC}
       prefetchedData={plasmicData}
+      prefetchedQueryData={queryCache}
     >
       <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
     </PlasmicRootProvider>
@@ -64,18 +67,18 @@ export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async
   const { catchall } = context.params ?? {};
   const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (plasmicData) {
-    return {
-      props: { plasmicData },
-
-      // Use revalidate if you want incremental static regeneration
-      revalidate: 60
-    };
-  }
-  return {
+  if (!plasmicData) {
     // non-Plasmic catch-all
-    props: {},
-  };
+    return { props: {} };
+  }
+  // Cache the necessary data fetched for the page
+  const queryCache = await extractPlasmicQueryData(
+    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
+      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
+    </PlasmicRootProvider>
+  );
+  // Use revalidate if you want incremental static regeneration
+  return { props: { plasmicData, queryCache }, revalidate: 60 };
 }
 
 export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.39",
+  "version": "0.0.42",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

package/src/strategies/nextjs.ts

@@ -36,9 +36,8 @@ const nextjsStrategy: CPAStrategy = {
   },
   overwriteConfig: async (args) => {
     const { projectPath, scheme } = args;
-
+    const nextjsConfigFile = path.join(projectPath, "next.config.js");
     if (scheme === "codegen") {
-      const nextjsConfigFile = path.join(projectPath, "next.config.js");
       await fs.writeFile(
         nextjsConfigFile,
         `
@@ -51,6 +50,21 @@ module.exports = {
 };
     `
       );
+    } else {
+      await fs.writeFile(
+        nextjsConfigFile, 
+        `
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Turn off React StrictMode for now, as react-aria (used by Plasmic) 
+  // has some troubles with it. See
+  // https://github.com/adobe/react-spectrum/labels/strict%20mode
+  reactStrictMode: false,
+}
+
+module.exports = nextConfig
+        `
+      )
     }
   },
   generateFiles: async (args) => {

package/src/templates/nextjs.ts

@@ -37,12 +37,13 @@ export function makeNextjsCatchallPage(format: "ts" | "js"): string {
   const ts = format === "ts";
   return `
 import * as React from "react";
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
+  PlasmicComponent,
+  extractPlasmicQueryData,
   ComponentRenderData,
   PlasmicRootProvider,
-} from "@plasmicapp/loader-react";
+} from "@plasmicapp/loader-nextjs";
+${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
 import { PLASMIC } from "../plasmic-init";
 
@@ -50,9 +51,10 @@ export default function PlasmicLoaderPage(props${ifTs(
     ts,
     `: {
   plasmicData?: ComponentRenderData;
+  queryCache?: Record<string, any>;
 }`
   )}) {
-  const { plasmicData } = props;
+  const { plasmicData, queryCache } = props;
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
   }
@@ -60,6 +62,7 @@ export default function PlasmicLoaderPage(props${ifTs(
     <PlasmicRootProvider
       loader={PLASMIC}
       prefetchedData={plasmicData}
+      prefetchedQueryData={queryCache}
     >
       <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
     </PlasmicRootProvider>
@@ -73,18 +76,18 @@ export const getStaticProps${ifTs(
   const { catchall } = context.params ?? {};
   const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (plasmicData) {
-    return {
-      props: { plasmicData },
-
-      // Use revalidate if you want incremental static regeneration
-      revalidate: 60
-    };
-  }
-  return {
+  if (!plasmicData) {
     // non-Plasmic catch-all
-    props: {},
-  };
+    return { props: {} };
+  }
+  // Cache the necessary data fetched for the page
+  const queryCache = await extractPlasmicQueryData(
+    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
+      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
+    </PlasmicRootProvider>
+  );
+  // Use revalidate if you want incremental static regeneration
+  return { props: { plasmicData, queryCache }, revalidate: 60 };
 }
 
 export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {