create-plasmic-app 0.0.37 → 0.0.40

package/dist/strategies/nextjs.js

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const promises_1 = __importDefault(require("fs/promises"));
+const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const nextjs_1 = require("../templates/nextjs");
 const cmd_utils_1 = require("../utils/cmd-utils");
@@ -43,7 +43,7 @@ const nextjsStrategy = {
         const { projectPath, scheme } = args;
         if (scheme === "codegen") {
             const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
-            yield promises_1.default.writeFile(nextjsConfigFile, `
+            yield fs_1.promises.writeFile(nextjsConfigFile, `
 module.exports = {
   eslint: {
     ignoreDuringBuilds: true,
@@ -62,13 +62,13 @@ module.exports = {
         const pagesPath = path_1.default.join(projectPath, "pages");
         file_utils_1.deleteGlob(path_1.default.join(pagesPath, `*.*`));
         const hostPage = path_1.default.join(pagesPath, `plasmic-host.${useTypescript ? "tsx" : "jsx"}`);
-        yield promises_1.default.writeFile(hostPage, nextjs_1.makeNextjsHostPage(scheme));
+        yield fs_1.promises.writeFile(hostPage, nextjs_1.makeNextjsHostPage(scheme));
         if (scheme === "loader") {
             const initFile = path_1.default.join(projectPath, `plasmic-init.${useTypescript ? "ts" : "js"}`);
-            yield promises_1.default.writeFile(initFile, nextjs_1.makeNextjsInitPage(projectId, lang_utils_1.ensure(projectApiToken)));
+            yield fs_1.promises.writeFile(initFile, nextjs_1.makeNextjsInitPage(projectId, lang_utils_1.ensure(projectApiToken)));
             // Write catch-all page for loader
             const loaderPage = path_1.default.join(pagesPath, `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`);
-            yield promises_1.default.writeFile(loaderPage, nextjs_1.makeNextjsCatchallPage(useTypescript ? "ts" : "js"));
+            yield fs_1.promises.writeFile(loaderPage, nextjs_1.makeNextjsCatchallPage(useTypescript ? "ts" : "js"));
         }
         else {
             yield common_1.runCodegenSync({
@@ -80,7 +80,7 @@ module.exports = {
             yield file_utils_1.overwriteIndex(projectPath, "nextjs", scheme);
             // Overwrite the wrapper files to wrap PlasmicRootProvider
             const appFilePath = path_1.default.join(projectPath, "pages", `_app.js`);
-            yield promises_1.default.writeFile(appFilePath, nextjs_1.wrapAppRootForCodegen());
+            yield fs_1.promises.writeFile(appFilePath, nextjs_1.wrapAppRootForCodegen());
         }
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {

package/dist/templates/gatsby.js

@@ -150,6 +150,27 @@ const HeadComponents = [
     key="plasmic-preamble"
     src="https://static1.plasmic.app/preamble.js"
   />,
+  <script
+    key="plasmic-hmr"
+    type="text/javascript"
+    dangerouslySetInnerHTML={{
+      __html: \`
+        if (typeof window !== "undefined" && /\\\\/plasmic-host\\\\/?$/.test(window.location.pathname)) {
+          const RealEventSource = window.EventSource;
+          window.EventSource = function(url, config) {
+            if (/[^a-zA-Z]hmr($|[^a-zA-Z])/.test(url)) {
+              console.warn("Plasmic: disabled EventSource request for", url);
+              return {
+                onerror() {}, onmessage() {}, onopen() {}, close() {}
+              };
+            } else {
+              return new RealEventSource(url, config);
+            }
+          }
+        }
+      \`,
+    }}
+  />
 ]
 
 const isProduction = process.env.NODE_ENV === "production"

package/dist/templates/nextjs.js

@@ -34,7 +34,10 @@ function makeNextjsCatchallPage(format) {
     const ts = format === "ts";
     return `
 import * as React from "react";
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { 
+  PlasmicComponent,
+  extractPlasmicQueryData,
+} from "@plasmicapp/loader-nextjs";
 ${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
   ComponentRenderData,
@@ -45,8 +48,9 @@ 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 +58,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 +69,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.37",
+  "version": "0.0.40",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

package/src/strategies/nextjs.ts

@@ -1,4 +1,4 @@
-import fs from "fs/promises";
+import { promises as fs } from "fs";
 import path from "path";
 import {
   makeNextjsCatchallPage,

package/src/templates/gatsby.ts

@@ -167,6 +167,27 @@ const HeadComponents = [
     key="plasmic-preamble"
     src="https://static1.plasmic.app/preamble.js"
   />,
+  <script
+    key="plasmic-hmr"
+    type="text/javascript"
+    dangerouslySetInnerHTML={{
+      __html: \`
+        if (typeof window !== "undefined" && /\\\\/plasmic-host\\\\/?$/.test(window.location.pathname)) {
+          const RealEventSource = window.EventSource;
+          window.EventSource = function(url, config) {
+            if (/[^a-zA-Z]hmr($|[^a-zA-Z])/.test(url)) {
+              console.warn("Plasmic: disabled EventSource request for", url);
+              return {
+                onerror() {}, onmessage() {}, onopen() {}, close() {}
+              };
+            } else {
+              return new RealEventSource(url, config);
+            }
+          }
+        }
+      \`,
+    }}
+  />
 ]
 
 const isProduction = process.env.NODE_ENV === "production"

package/src/templates/nextjs.ts

@@ -37,7 +37,10 @@ export function makeNextjsCatchallPage(format: "ts" | "js"): string {
   const ts = format === "ts";
   return `
 import * as React from "react";
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { 
+  PlasmicComponent,
+  extractPlasmicQueryData,
+} from "@plasmicapp/loader-nextjs";
 ${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
   ComponentRenderData,
@@ -50,9 +53,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 +64,7 @@ export default function PlasmicLoaderPage(props${ifTs(
     <PlasmicRootProvider
       loader={PLASMIC}
       prefetchedData={plasmicData}
+      prefetchedQueryData={queryCache}
     >
       <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
     </PlasmicRootProvider>
@@ -73,18 +78,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 () => {