create-plasmic-app 0.0.40 → 0.0.43

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/gatsby.js

@@ -48,7 +48,7 @@ const PlasmicGatsbyPage = ({ data }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageP
         {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
         {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
       </Helmet>
-      <PlasmicComponent component={pageMeta.name} />
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
 };
@@ -140,16 +140,7 @@ exports.GATSBY_SSR_CONFIG = `
 
 const React = require("react")
 
-/**
- * Add preamble to allow functional code components in studio.
- *
- * See: https://docs.plasmic.app/learn/functional-code-components/
- */
 const HeadComponents = [
-  <script
-    key="plasmic-preamble"
-    src="https://static1.plasmic.app/preamble.js"
-  />,
   <script
     key="plasmic-hmr"
     type="text/javascript"

package/dist/templates/nextjs.js

@@ -34,15 +34,13 @@ function makeNextjsCatchallPage(format) {
     const ts = format === "ts";
     return `
 import * as React from "react";
-import { 
+import {
   PlasmicComponent,
   extractPlasmicQueryData,
-} from "@plasmicapp/loader-nextjs";
-${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
-import {
   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";
 
@@ -60,7 +58,7 @@ export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
     >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
+      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
     </PlasmicRootProvider>
   );
 }
@@ -112,15 +110,7 @@ import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import { PLASMIC } from '../plasmic-init';
 
 export default function PlasmicHost() {
-  return PLASMIC && (
-    <div>
-      <Script
-        src="https://static1.plasmic.app/preamble.js"
-        strategy="beforeInteractive"
-      />
-      <PlasmicCanvasHost />
-    </div>
-  );
+  return PLASMIC && <PlasmicCanvasHost />;
 }
     `;
     }
@@ -139,15 +129,7 @@ import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
 // registerComponent(...)
 
 export default function PlasmicHost() {
-  return (
-    <div>
-      <Script
-        src="https://static1.plasmic.app/preamble.js"
-        strategy="beforeInteractive"
-      />
-      <PlasmicCanvasHost />
-    </div>
-  );
+  return <PlasmicCanvasHost />;
 }
     `;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "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/gatsby.ts

@@ -53,7 +53,7 @@ const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
         {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
         {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
       </Helmet>
-      <PlasmicComponent component={pageMeta.name} />
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
 };
@@ -157,16 +157,7 @@ export const GATSBY_SSR_CONFIG = `
 
 const React = require("react")
 
-/**
- * Add preamble to allow functional code components in studio.
- *
- * See: https://docs.plasmic.app/learn/functional-code-components/
- */
 const HeadComponents = [
-  <script
-    key="plasmic-preamble"
-    src="https://static1.plasmic.app/preamble.js"
-  />,
   <script
     key="plasmic-hmr"
     type="text/javascript"
@@ -235,7 +226,7 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
 `.trim();
 };
 
-export function wrapAppRootForCodegen() {
+export function wrapAppRootForCodegen(): string {
   return `
 import React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";

package/src/templates/nextjs.ts

@@ -37,15 +37,13 @@ export function makeNextjsCatchallPage(format: "ts" | "js"): string {
   const ts = format === "ts";
   return `
 import * as React from "react";
-import { 
+import {
   PlasmicComponent,
   extractPlasmicQueryData,
-} from "@plasmicapp/loader-nextjs";
-${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
-import {
   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";
 
@@ -66,7 +64,7 @@ export default function PlasmicLoaderPage(props${ifTs(
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
     >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
+      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
     </PlasmicRootProvider>
   );
 }
@@ -122,15 +120,7 @@ import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import { PLASMIC } from '../plasmic-init';
 
 export default function PlasmicHost() {
-  return PLASMIC && (
-    <div>
-      <Script
-        src="https://static1.plasmic.app/preamble.js"
-        strategy="beforeInteractive"
-      />
-      <PlasmicCanvasHost />
-    </div>
-  );
+  return PLASMIC && <PlasmicCanvasHost />;
 }
     `;
   } else {
@@ -148,21 +138,13 @@ import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
 // registerComponent(...)
 
 export default function PlasmicHost() {
-  return (
-    <div>
-      <Script
-        src="https://static1.plasmic.app/preamble.js"
-        strategy="beforeInteractive"
-      />
-      <PlasmicCanvasHost />
-    </div>
-  );
+  return <PlasmicCanvasHost />;
 }
     `;
   }
 }
 
-export function wrapAppRootForCodegen() {
+export function wrapAppRootForCodegen(): string {
   return `
 import '../styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";