create-plasmic-app 0.0.142 → 0.0.143

package/cpa-out/nextjs-app-codegen-js/plasmic-init-client.jsx

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}

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

@@ -13,48 +13,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component 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

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

@@ -13,48 +13,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component 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">

package/dist/nextjs/nextjs.js

@@ -22,10 +22,11 @@ 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 plasmic_init_client_1 = require("./templates/app-codegen/plasmic-init-client");
 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");
-const plasmic_init_client_1 = require("./templates/app-loader/plasmic-init-client");
+const plasmic_init_client_2 = require("./templates/app-loader/plasmic-init-client");
 const app_1 = require("./templates/pages-codegen/app");
 const plasmic_host_2 = require("./templates/pages-codegen/plasmic-host");
 const catchall_page_2 = require("./templates/pages-loader/catchall-page");
@@ -97,7 +98,7 @@ function generateFilesAppDir(args) {
             // ./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));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_2.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)());
@@ -108,6 +109,8 @@ function generateFilesAppDir(args) {
         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));
+            // ./plasmic-init-client.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_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

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

@@ -4,8 +4,7 @@ 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";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({
   children,
@@ -15,9 +14,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PlasmicRootProvider Link={Link}>
+        <ClientPlasmicRootProvider>
           {children}
-        </PlasmicRootProvider>
+        </ClientPlasmicRootProvider>
       </body>
     </html>
   );

package/dist/nextjs/templates/app-codegen/plasmic-init-client.d.ts

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePlasmicInitClient_app_codegen = void 0;
+const file_utils_1 = require("../../../utils/file-utils");
+function makePlasmicInitClient_app_codegen(jsOrTs) {
+    return `"use client";
+
+import * as React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props${(0, file_utils_1.ifTs)(jsOrTs, ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">')}
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}
+`;
+}
+exports.makePlasmicInitClient_app_codegen = makePlasmicInitClient_app_codegen;

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

@@ -18,48 +18,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component 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${(0, file_utils_1.ifTs)(jsOrTs, ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">')}

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

@@ -27,11 +27,6 @@ export const PLASMIC = initPlasmicLoader({
 // Register custom functions here so they are available during SSR.
 // See https://docs.plasmic.app/learn/registering-custom-functions/
 //
-// IMPORTANT for app-router projects: any custom function used by a server
-// query must be registered here, which runs on the server.  Registrations in
-// plasmic-init-client.tsx are only available in the browser and will cause
-// a runtime error if referenced by a server query during SSR.
-//
 // PLASMIC.registerFunction(...);
 `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.142",
+  "version": "0.0.143",
   "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": "f110feb3414bdfdcbd84167e91a951f8dcd4dd60"
+  "gitHead": "5f674c9df3345496989eb0d1e09ddd30604757a9"
 }

package/src/nextjs/nextjs.ts

@@ -12,6 +12,7 @@ import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
 import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
+import { makePlasmicInitClient_app_codegen } from "./templates/app-codegen/plasmic-init-client";
 import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-page";
 import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
 import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
@@ -123,6 +124,12 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       makeLayout_app_codegen(jsOrTs)
     );
 
+    // ./plasmic-init-client.tsx
+    await fs.writeFile(
+      path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
+      makePlasmicInitClient_app_codegen(jsOrTs)
+    );
+
     // ./app/plasmic-host/page.tsx
     await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
     await fs.writeFile(

package/src/nextjs/templates/app-codegen/layout.ts

@@ -3,8 +3,7 @@ import { JsOrTs } from "../../../utils/types";
 
 export function makeLayout_app_codegen(jsOrTs: JsOrTs): string {
   return `import '@/app/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Link from "next/link";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({
   children,
@@ -17,9 +16,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PlasmicRootProvider Link={Link}>
+        <ClientPlasmicRootProvider>
           {children}
-        </PlasmicRootProvider>
+        </ClientPlasmicRootProvider>
       </body>
     </html>
   );

package/src/nextjs/templates/app-codegen/plasmic-init-client.ts

@@ -0,0 +1,26 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makePlasmicInitClient_app_codegen(jsOrTs: JsOrTs): string {
+  return `"use client";
+
+import * as React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props${ifTs(
+    jsOrTs,
+    ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">'
+  )}
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}
+`;
+}

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

@@ -17,48 +17,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component 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${ifTs(

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

@@ -27,11 +27,6 @@ export const PLASMIC = initPlasmicLoader({
 // Register custom functions here so they are available during SSR.
 // See https://docs.plasmic.app/learn/registering-custom-functions/
 //
-// IMPORTANT for app-router projects: any custom function used by a server
-// query must be registered here, which runs on the server.  Registrations in
-// plasmic-init-client.tsx are only available in the browser and will cause
-// a runtime error if referenced by a server query during SSR.
-//
 // PLASMIC.registerFunction(...);
 `;
 }