create-plasmic-app 0.0.133 → 0.0.135

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "@/plasmic-init";
+
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+// PLASMIC.registerComponent(...);
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ *
+ * Why? Props passed from Server to Client Components must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
+ *
+ * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <PlasmicRootProvider
+ *       loader={PLASMIC} // ERROR: loader is not serializable
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </PlasmicRootProvider>;
+ *   );
+ * }
+ * ```
+ *
+ * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
+ * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
+ * while allowing your Server Component to pass in prefetched data and other serializable props:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { ClientPlasmicRootProvider } from "@/plasmic-init-client"; // changed
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <ClientPlasmicRootProvider // don't pass in loader
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </ClientPlasmicRootProvider>;
+ *   );
+ * }
+ * ```
+ */
+export function ClientPlasmicRootProvider(
+  props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}

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

@@ -1,4 +1,5 @@
-import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -13,13 +14,7 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-});
-
-// You can register any code components that you want to use here; see
-// https://docs.plasmic.app/learn/code-components-ref/
-// And configure your Plasmic project to use the host url pointing at
-// the /plasmic-host page of your nextjs app (for example,
-// http://localhost:3000/plasmic-host).  See
-// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
 
-// PLASMIC.registerComponent(...);
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
+});

package/cpa-out/nextjs-app-loader-ts/tsconfig.json

@@ -12,10 +12,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

package/dist/index.js

@@ -96,10 +96,6 @@ const argv = yargs_1.default
         !(argv2.platform === "nextjs" || argv2.platform === "gatsby")) {
         throw new Error(`Loader scheme may only be used with Next.js or Gatsby`);
     }
-    if (argv2.appDir &&
-        !(argv2.platform === "nextjs" && argv2.scheme === "loader")) {
-        throw new Error(`App dir may only be used with Next.js and loader scheme`);
-    }
     return true;
 }).argv;
 // Initialize Sentry
@@ -222,34 +218,39 @@ function run() {
                 default: "loader",
             })
             : "codegen";
-        // TODO: Support nextjs + codegen
         const platformOptions = {};
-        // Don't show app dir question until we have better support for app dir.
-        const showAppDirQuestion = false;
-        if (showAppDirQuestion && platform === "nextjs" && scheme === "loader") {
-            platformOptions.nextjs = {
-                appDir: yield maybePrompt({
-                    name: "appDir",
-                    message: "Do you want to use the app/ directory and React Server Components? (see https://beta.nextjs.org/docs/app-directory-roadmap)",
-                    type: "list",
-                    choices: () => [
-                        {
-                            name: "No, use pages/ directory",
-                            short: "No",
-                            value: false,
-                        },
-                        {
-                            name: "Yes, use app/ directory (experimental)",
-                            short: "Yes",
-                            value: true,
-                        },
-                    ],
-                    default: false,
-                }),
-            };
+        if (platform === "nextjs") {
+            // TODO: re-enable when app dir is released
+            const showAppDirQuestion = false;
+            if (showAppDirQuestion) {
+                platformOptions.nextjs = {
+                    appDir: yield maybePrompt({
+                        name: "appDir",
+                        message: "Do you want to use the app/ directory and React Server Components? (see https://nextjs.org/docs/app)",
+                        type: "list",
+                        choices: () => [
+                            {
+                                name: "Yes, use app/ directory",
+                                short: "Yes",
+                                value: true,
+                            },
+                            {
+                                name: "No, use pages/ directory",
+                                short: "No",
+                                value: false,
+                            },
+                        ],
+                        default: true,
+                    }),
+                };
+                // Respect appDir flag for e2e tests
+            }
+            else if (argv["appDir"] !== undefined) {
+                platformOptions.nextjs = {
+                    appDir: argv["appDir"],
+                };
+            }
         }
-        // Get the projectId
-        console.log();
         const projectInput = yield maybePrompt({
             name: "projectId",
             message: `If you don't have a project yet, create one by going to https://studio.plasmic.app/starters/blank

package/dist/nextjs/nextjs.js

@@ -21,6 +21,7 @@ const codegen_1 = require("../utils/codegen");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
+const layout_1 = require("./templates/app-codegen/layout");
 const catchall_page_1 = require("./templates/app-loader/catchall-page");
 const plasmic_host_1 = require("./templates/app-loader/plasmic-host");
 const plasmic_init_1 = require("./templates/app-loader/plasmic-init");
@@ -89,19 +90,44 @@ export default nextConfig;`);
 };
 function generateFilesAppDir(args) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { projectPath, jsOrTs, projectId, projectApiToken } = args;
+        const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
         // Delete existing pages
         (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "page.*"));
-        // ./plasmic-init.ts
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken")));
-        // ./plasmic-init-client.ts
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
-        // ./app/plasmic-host/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
-        // ./app/[[...catchall]]/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "[[...catchall]]"));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
+        if (scheme === "loader") {
+            // ./plasmic-init.ts
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken")));
+            // ./plasmic-init-client.ts
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
+            // ./app/plasmic-host/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
+            // ./app/[[...catchall]]/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "[[...catchall]]"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
+        }
+        else {
+            // ./app/layout.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
+            // ./app/plasmic-host/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_2.makePlasmicHostPage_pages_codegen)() // plasmic-host page contents are the same as the pages router
+            );
+            // This should generate
+            // ./plasmic.json
+            // ./app/page.tsx
+            // ./components/plasmic/**
+            yield (0, codegen_1.runCodegenSync)({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // Make an index (/) page if the project didn't have one.
+            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
+            const plasmicFiles = lodash_1.default.map(lodash_1.default.flatMap(config.projects, (p) => p.components), (c) => c.importSpec.modulePath);
+            if (!plasmicFiles.find((f) => f.includes("app/page."))) {
+                yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `page.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
+            }
+        }
     });
 }
 function generateFilesPagesDir(args) {

package/dist/nextjs/templates/app-codegen/layout.d.ts

@@ -0,0 +1,2 @@
+import { JsOrTs } from "../../../utils/types";
+export declare function makeLayout_app_codegen(jsOrTs: JsOrTs): string;

package/dist/nextjs/templates/app-codegen/layout.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeLayout_app_codegen = void 0;
+const file_utils_1 = require("../../../utils/file-utils");
+function makeLayout_app_codegen(jsOrTs) {
+    return `import '@/app/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+export default function RootLayout({
+  children,
+}${(0, file_utils_1.ifTs)(jsOrTs, `: Readonly<{
+  children: React.ReactNode;
+}>`)}) {
+  return (
+    <html lang="en">
+      <body>
+        <PlasmicRootProvider Link={Link}>
+          {children}
+        </PlasmicRootProvider>
+      </body>
+    </html>
+  );
+}
+`;
+}
+exports.makeLayout_app_codegen = makeLayout_app_codegen;

package/dist/nextjs/templates/app-loader/catchall-page.js

@@ -3,65 +3,90 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCatchallPage_app_loader = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
 function makeCatchallPage_app_loader(jsOrTs) {
-    return `import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
+    return `import { PLASMIC } from "@/plasmic-init";
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ${(0, file_utils_1.ifTs)(jsOrTs, `ComponentRenderData,`)}PlasmicComponent } from "@plasmicapp/loader-nextjs";${(0, file_utils_1.ifTs)(jsOrTs, `
+import { Metadata, ResolvingMetadata } from "next";`)}
+import { notFound } from "next/navigation";
 
 // Use revalidate if you want incremental static regeneration
 export const revalidate = 60;
+${(0, file_utils_1.ifTs)(jsOrTs, `interface Params {
+      catchall: string[] | undefined;
+    }`)}
+export async function generateStaticParams()${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<Params[]>")} {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+${(0, file_utils_1.ifTs)(jsOrTs, `interface LoaderPageProps {
+      params: Promise<Params>;
+    }`)}
+export async function generateMetadata(
+  { params }${(0, file_utils_1.ifTs)(jsOrTs, `: LoaderPageProps`)},
+  parent${(0, file_utils_1.ifTs)(jsOrTs, `: ResolvingMetadata`)}
+)${(0, file_utils_1.ifTs)(jsOrTs, `: Promise<Metadata>`)} {
+  const { componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    return parent${(0, file_utils_1.ifTs)(jsOrTs, ` as Promise<Metadata>`)};
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+
+  return { ...(await parent), ...metadata };
+}
 
 export default async function PlasmicLoaderPage({
   params,
-  searchParams,
-}${(0, file_utils_1.ifTs)(jsOrTs, `: {
-  params?: { catchall: string[] | undefined };
-  searchParams?: Record<string, string | string[]>;
-}`)}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
+}${(0, file_utils_1.ifTs)(jsOrTs, `: LoaderPageProps`)}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
 
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
+  if (!componentData) {
     notFound();
   }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
 
-  const pageMeta = prefetchedData.entryCompMetas[0];
   return (
     <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageRoute={pageMeta.path}
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
       pageParams={pageMeta.params}
-      pageQuery={searchParams}
+      pageRoute={pageMeta.path}
     >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
+      <PlasmicComponent component={pageMeta.displayName} />
     </ClientPlasmicRootProvider>
   );
 }
 
-async function fetchPlasmicComponentData(catchall${(0, file_utils_1.ifTs)(jsOrTs, ": string[] | undefined")}) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
+async function getPlasmicData(
+  params${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<Params>")}
+)${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<{ pagePath: string; componentData?: ComponentRenderData }>")} {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? \`/\${catchall.join("/")}\` : "/";
 
-  return { prefetchedData };
-}
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
 
-export async function generateStaticParams() {
-  const pageModules = await PLASMIC.fetchPages();
-  return pageModules.map((mod) => {
-    const catchall =
-      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
-    return {
-      catchall,
-    };
-  });
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
 }
 `;
 }

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

@@ -21,7 +21,7 @@ import { PLASMIC } from "@/plasmic-init";
  * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
  *
  * Why? Props passed from Server to Client Components must be serializable.
- * https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
  * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
  *
  * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:

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

@@ -3,6 +3,7 @@ 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: [
@@ -17,6 +18,9 @@ export const PLASMIC = initPlasmicLoader({
   // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "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": "a18cd21936a28b372b3cbdd9f4a4c37b7d055eae"
+  "gitHead": "7bdae76d262e9a939b16d46be2b806ae68b374ca"
 }

package/run-cpa.ts

@@ -30,6 +30,12 @@ async function run() {
         scheme,
         typescript,
       });
+      allArgSets.push({
+        platform: "nextjs",
+        appDir: true,
+        scheme,
+        typescript,
+      });
       if (scheme === "codegen") {
         if (typescript) {
           allArgSets.push({
@@ -46,22 +52,15 @@ async function run() {
         });
       }
     });
-
-    allArgSets.push({
-      platform: "nextjs",
-      appDir: true,
-      scheme: "loader", // TODO: support codegen with appDir
-      typescript,
-    });
   });
   const allArgSetNames = allArgSets.map(getProjectName).sort();
 
-  let yargsCommand = yargs.command(
+  const yargsCommand = yargs.command(
     "$0 [arg-sets..]",
     `Runs create-plasmic-app with predefined sets of args for you.
 
 Valid arg sets:\n\tall\n\t${allArgSetNames.join("\n\t")}`,
-    (yargs) => yargs
+    (yargs2) => yargs2
   );
 
   const cliArgSetNames = yargsCommand.strict().argv["arg-sets"] as

package/src/index.ts

@@ -75,15 +75,6 @@ const argv = yargs
       throw new Error(`Loader scheme may only be used with Next.js or Gatsby`);
     }
 
-    if (
-      argv2.appDir &&
-      !(argv2.platform === "nextjs" && argv2.scheme === "loader")
-    ) {
-      throw new Error(
-        `App dir may only be used with Next.js and loader scheme`
-      );
-    }
-
     return true;
   }).argv;
 
@@ -219,36 +210,40 @@ async function run(): Promise<void> {
         })
       : "codegen";
 
-  // TODO: Support nextjs + codegen
   const platformOptions: PlatformOptions = {};
-  // Don't show app dir question until we have better support for app dir.
-  const showAppDirQuestion = false;
-  if (showAppDirQuestion && platform === "nextjs" && scheme === "loader") {
-    platformOptions.nextjs = {
-      appDir: await maybePrompt({
-        name: "appDir",
-        message:
-          "Do you want to use the app/ directory and React Server Components? (see https://beta.nextjs.org/docs/app-directory-roadmap)",
-        type: "list",
-        choices: () => [
-          {
-            name: "No, use pages/ directory",
-            short: "No",
-            value: false,
-          },
-          {
-            name: "Yes, use app/ directory (experimental)",
-            short: "Yes",
-            value: true,
-          },
-        ],
-        default: false,
-      }),
-    };
+  if (platform === "nextjs") {
+    // TODO: re-enable when app dir is released
+    const showAppDirQuestion = false;
+    if (showAppDirQuestion) {
+      platformOptions.nextjs = {
+        appDir: await maybePrompt({
+          name: "appDir",
+          message:
+            "Do you want to use the app/ directory and React Server Components? (see https://nextjs.org/docs/app)",
+          type: "list",
+          choices: () => [
+            {
+              name: "Yes, use app/ directory",
+              short: "Yes",
+              value: true,
+            },
+            {
+              name: "No, use pages/ directory",
+              short: "No",
+              value: false,
+            },
+          ],
+          default: true,
+        }),
+      };
+      // Respect appDir flag for e2e tests
+    } else if (argv["appDir"] !== undefined) {
+      platformOptions.nextjs = {
+        appDir: argv["appDir"],
+      };
+    }
   }
 
-  // Get the projectId
-  console.log();
   const projectInput = await maybePrompt<string>({
     name: "projectId",
     message: `If you don't have a project yet, create one by going to https://studio.plasmic.app/starters/blank