create-plasmic-app 0.0.137 → 0.0.139

package/cpa-out/nextjs-app-loader-js/plasmic-init.js

@@ -1,5 +1,4 @@
 import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
-import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -8,13 +7,15 @@ export const PLASMIC = initPlasmicLoader({
       token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
     },
   ],
+  platformOptions: {
+    nextjs: {
+      appDir: true,
+    },
+  },
 
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-
-  // Needed for Next.js app router support.
-  nextNavigation: NextNavigation,
 });

package/cpa-out/nextjs-app-loader-ts/plasmic-init.ts

@@ -1,5 +1,4 @@
 import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
-import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -8,13 +7,15 @@ export const PLASMIC = initPlasmicLoader({
       token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
     },
   ],
+  platformOptions: {
+    nextjs: {
+      appDir: true,
+    },
+  },
 
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-
-  // Needed for Next.js app router support.
-  nextNavigation: NextNavigation,
 });

package/cpa-out/nextjs-pages-loader-js/plasmic-init.js

@@ -7,7 +7,12 @@ export const PLASMIC = initPlasmicLoader({
       token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
     },
   ],
-
+  platformOptions: {
+    nextjs: {
+      appDir: false,
+    }
+  },
+  
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please

package/cpa-out/nextjs-pages-loader-ts/plasmic-init.ts

@@ -7,7 +7,12 @@ export const PLASMIC = initPlasmicLoader({
       token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
     },
   ],
-
+  platformOptions: {
+    nextjs: {
+      appDir: false,
+    }
+  },
+  
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please

package/cpa-out/react-codegen-js/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/react-web": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/cpa-out/react-codegen-js/src/App.jsx

@@ -1,9 +1,12 @@
 
+import React from "react";
 import Homepage from './components/Homepage';
 
 
 function App() {
-  return (<Homepage />);
+  return (
+    <React.Suspense><Homepage /></React.Suspense>
+  );
 }
 
 export default App;

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -135,6 +135,7 @@ function PlasmicButton__RenderFunc(props) {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -101,6 +101,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -104,6 +104,7 @@ function PlasmicHomepage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -127,7 +128,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -141,7 +144,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/react-codegen-ts/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/react-web": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/cpa-out/react-codegen-ts/src/App.tsx

@@ -1,9 +1,12 @@
 
+import React from "react";
 import Homepage from './components/Homepage';
 
 
 function App() {
-  return (<Homepage />);
+  return (
+    <React.Suspense><Homepage /></React.Suspense>
+  );
 }
 
 export default App;

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -269,6 +269,7 @@ function PlasmicButton__RenderFunc(props: {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -177,6 +177,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -181,6 +181,7 @@ function PlasmicHomepage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -204,7 +205,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -218,7 +221,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/dist/nextjs/templates/app-loader/plasmic-init.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makePlasmicInit_app_loader = void 0;
 function makePlasmicInit_app_loader(projectId, projectApiToken) {
     return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
-import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -12,15 +11,17 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
+  platformOptions: {
+    nextjs: {
+      appDir: true,
+    },
+  },
 
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-
-  // Needed for Next.js app router support.
-  nextNavigation: NextNavigation,
 });
 `;
 }

package/dist/nextjs/templates/pages-loader/plasmic-init.js

@@ -11,7 +11,12 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
-
+  platformOptions: {
+    nextjs: {
+      appDir: false,
+    }
+  },
+  
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please

package/dist/utils/file-utils.js

@@ -115,11 +115,14 @@ function generateHomePage(componentAbsPath, indexAbsPath, globalContextsAbsPath)
             : content;
     };
     const appjsContents = `
+import React from "react";
 import ${componentName} from './${stripExtension(componentRelativePath)}';
 ${globalContextsImport}
 
 function App() {
-  return (${maybeWrapInGlobalContexts(`<${componentName} />`)});
+  return (
+    ${maybeWrapInGlobalContexts(`<React.Suspense><${componentName} /></React.Suspense>`)}
+  );
 }
 
 export default App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "0f7c4954ca621261810ce9bcf074ccb86cf3f0e9"
+  "gitHead": "addf9e93ce8076ad8080722bbcab32d93cd2a44a"
 }

package/src/nextjs/templates/app-loader/plasmic-init.ts

@@ -3,7 +3,6 @@ export function makePlasmicInit_app_loader(
   projectApiToken: string
 ): string {
   return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
-import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -12,15 +11,17 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
+  platformOptions: {
+    nextjs: {
+      appDir: true,
+    },
+  },
 
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-
-  // Needed for Next.js app router support.
-  nextNavigation: NextNavigation,
 });
 `;
 }

package/src/nextjs/templates/pages-loader/plasmic-init.ts

@@ -11,7 +11,12 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
-
+  platformOptions: {
+    nextjs: {
+      appDir: false,
+    }
+  },
+  
   // By default Plasmic will use the last published version of your project.
   // For development, you can set preview to true, which will use the unpublished
   // project, allowing you to see your designs without publishing.  Please

package/src/utils/file-utils.ts

@@ -106,11 +106,16 @@ export function generateHomePage(
   };
 
   const appjsContents = `
+import React from "react";
 import ${componentName} from './${stripExtension(componentRelativePath)}';
 ${globalContextsImport}
 
 function App() {
-  return (${maybeWrapInGlobalContexts(`<${componentName} />`)});
+  return (
+    ${maybeWrapInGlobalContexts(
+      `<React.Suspense><${componentName} /></React.Suspense>`
+    )}
+  );
 }
 
 export default App;