create-plasmic-app 0.0.38 → 0.0.41

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,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.38",
+  "version": "0.0.41",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

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,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 () => {