create-plasmic-app 0.0.99 → 0.0.101

package/src/tanstack/tanstack.ts

@@ -0,0 +1,82 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { spawnOrFail } from "../utils/cmd-utils";
+import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
+import { deleteGlob } from "../utils/file-utils";
+import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
+import { makeCustomAppConfig_file_router_codegen } from "./templates/file-router/config";
+import { makePlasmicHostPage_fileRouter_codegen } from "./templates/file-router/plasmic-host";
+import { makeCustomRoot_file_router_codegen } from "./templates/file-router/root";
+
+export const tanstackStrategy: CPAStrategy = {
+  create: async (args) => {
+    const { projectPath } = args;
+    const createCommand = `npx create-tsrouter-app@latest ${projectPath} --template file-router --add-ons start`;
+
+    await spawnOrFail(createCommand);
+  },
+  installDeps: async ({ scheme, projectPath }) => {
+    if (scheme === "loader") {
+      throw new Error(
+        "Plasmic loader scheme is not supported for TanStack platform. Please use the codegen scheme instead."
+      );
+    } else {
+      return await installCodegenDeps({ projectPath });
+    }
+  },
+  overwriteConfig: async (args) => {
+    const { projectPath, jsOrTs } = args;
+
+    /* We need to provide @plasmicapp/* packages in noExternal ssr packages for
+     * them to work properly during ssr phase.
+     */
+    if (jsOrTs === "ts") {
+      await fs.writeFile(
+        path.join(projectPath, "app.config.ts"),
+        makeCustomAppConfig_file_router_codegen()
+      );
+    }
+  },
+  generateFiles: (args) => {
+    return generateFilesFileRouterTemplate(args);
+  },
+  build: async (args) => {
+    const { npmRunCmd, projectPath } = args;
+    await spawnOrFail(`${npmRunCmd} build`, projectPath);
+  },
+};
+
+async function generateFilesFileRouterTemplate(args: GenerateFilesArgs) {
+  const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+
+  // Delete existing pages
+  deleteGlob(path.join(projectPath, "src/routes", "*.*"));
+
+  if (scheme === "loader") {
+    throw new Error(
+      "Plasmic loader scheme is not supported for TanStack platform. Please use the codegen scheme instead."
+    );
+  } else {
+    // ./src/routes/__root.tsx
+    await fs.writeFile(
+      path.join(projectPath, "src/routes", `__root.${jsOrTs}x`),
+      makeCustomRoot_file_router_codegen(jsOrTs)
+    );
+
+    // ./src/routes/plasmic-host.tsx
+    await fs.writeFile(
+      path.join(projectPath, "src/routes", `plasmic-host.${jsOrTs}x`),
+      makePlasmicHostPage_fileRouter_codegen()
+    );
+
+    // This should generate
+    // ./plasmic.json
+    // ./routes/index.tsx
+    // ./components/plasmic/**
+    await runCodegenSync({
+      projectId,
+      projectApiToken,
+      projectPath,
+    });
+  }
+}

package/src/tanstack/templates/file-router/config.ts

@@ -0,0 +1,29 @@
+export function makeCustomAppConfig_file_router_codegen(): string {
+  return `import { defineConfig } from "@tanstack/react-start/config";
+import viteTsConfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  tsr: {
+    appDirectory: "src",
+  },
+  vite: {
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ["./tsconfig.json"],
+      }),
+      tailwindcss(),
+    ],
+    ssr: {
+      noExternal: [
+        "@plasmicapp/data-sources",
+        "@plasmicapp/data-sources-context",
+        "@plasmicapp/prepass",
+        "@plasmicapp/query",
+        "@plasmicapp/react-web",
+      ],
+    },
+  },
+})`;
+}

package/src/tanstack/templates/file-router/plasmic-host.ts

@@ -0,0 +1,23 @@
+export function makePlasmicHostPage_fileRouter_codegen(): string {
+  return `import { createFileRoute } from '@tanstack/react-router'
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
+
+export const Route = createFileRoute('/plasmic-host')({
+  component: PlasmicHostRouteComponent,
+})
+
+
+// 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
+
+// registerComponent(...)
+
+function PlasmicHostRouteComponent() {
+  return <PlasmicCanvasHost />
+}
+`;
+}

package/src/tanstack/templates/file-router/root.ts

@@ -0,0 +1,42 @@
+import { JsOrTs } from "../../../utils/types";
+
+export function makeCustomRoot_file_router_codegen(_jsOrTs: JsOrTs): string {
+  return `import { createRootRoute, HeadContent, Outlet, Scripts, Link } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { PlasmicRootProvider } from "@plasmicapp/react-web"
+import appCss from "../styles.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  component: () => (
+    <RootDocument>
+      <PlasmicRootProvider Link={Link}>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </PlasmicRootProvider>
+    </RootDocument>
+  ),
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+`;
+}

package/src/utils/types.ts

@@ -1,5 +1,5 @@
 export type JsOrTs = "js" | "ts";
-export type PlatformType = "nextjs" | "gatsby" | "react";
+export type PlatformType = "nextjs" | "gatsby" | "react" | "tanstack";
 export type PlatformOptions = {
   nextjs?: {
     appDir: boolean;
@@ -8,5 +8,11 @@ export type PlatformOptions = {
 export type SchemeType = "codegen" | "loader";
 
 export function platformTypeToString(s: PlatformType): string {
-  return s === "nextjs" ? "Next.js" : s === "gatsby" ? "Gatsby" : "React";
+  return s === "nextjs"
+    ? "Next.js"
+    : s === "gatsby"
+    ? "Gatsby"
+    : s === "tanstack"
+    ? "TanStack"
+    : "React";
 }

package/cpa-out/nextjs-app-loader-js/app/[[...catchall]]/page.jsx

@@ -1,56 +0,0 @@
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
-import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
-
-// Use revalidate if you want incremental static regeneration
-export const revalidate = 60;
-
-export default async function PlasmicLoaderPage({
-  params,
-  searchParams,
-}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
-
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
-    notFound();
-  }
-
-  const pageMeta = prefetchedData.entryCompMetas[0];
-  return (
-    <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageParams={pageMeta.params}
-      pageQuery={searchParams}
-    >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
-    </ClientPlasmicRootProvider>
-  );
-}
-
-async function fetchPlasmicComponentData(catchall) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
-
-  return { prefetchedData };
-}
-
-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,
-    };
-  });
-}

package/cpa-out/nextjs-app-loader-js/app/api/hello/route.js

@@ -1,3 +0,0 @@
-export async function GET(request) {
-  return new Response('Hello, Next.js!')
-}

package/cpa-out/nextjs-app-loader-js/app/layout.js

@@ -1,14 +0,0 @@
-import './globals.css'
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}

package/cpa-out/nextjs-app-loader-js/app/plasmic-host/page.jsx

@@ -1,6 +0,0 @@
-import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
-import "@/plasmic-init-client";
-
-export default function PlasmicHost() {
-  return <PlasmicCanvasHost />;
-}

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

@@ -1,65 +0,0 @@
-"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://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
- * 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
-) {
-  return (
-    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
-  );
-}

package/cpa-out/nextjs-app-loader-ts/app/[[...catchall]]/page.tsx

@@ -1,59 +0,0 @@
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
-import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
-
-// Use revalidate if you want incremental static regeneration
-export const revalidate = 60;
-
-export default async function PlasmicLoaderPage({
-  params,
-  searchParams,
-}: {
-  params?: { catchall: string[] | undefined };
-  searchParams?: Record<string, string | string[]>;
-}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
-
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
-    notFound();
-  }
-
-  const pageMeta = prefetchedData.entryCompMetas[0];
-  return (
-    <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageParams={pageMeta.params}
-      pageQuery={searchParams}
-    >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
-    </ClientPlasmicRootProvider>
-  );
-}
-
-async function fetchPlasmicComponentData(catchall: string[] | undefined) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
-
-  return { prefetchedData };
-}
-
-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,
-    };
-  });
-}

package/cpa-out/nextjs-app-loader-ts/app/api/hello/route.ts

@@ -1,3 +0,0 @@
-export async function GET(request: Request) {
-  return new Response('Hello, Next.js!')
-}

package/cpa-out/nextjs-app-loader-ts/app/layout.tsx

@@ -1,18 +0,0 @@
-import './globals.css'
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}

package/cpa-out/nextjs-app-loader-ts/app/plasmic-host/page.tsx

@@ -1,6 +0,0 @@
-import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
-import "@/plasmic-init-client";
-
-export default function PlasmicHost() {
-  return <PlasmicCanvasHost />;
-}

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

@@ -1,65 +0,0 @@
-"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://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
- * 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>
-  );
-}