create-plasmic-app 0.0.100 → 0.0.101

package/dist/index.js

@@ -62,7 +62,7 @@ const argv = yargs_1.default
 })
     .option("platform", {
     describe: "Target platform",
-    choices: ["", "nextjs", "gatsby", "react"],
+    choices: ["", "nextjs", "gatsby", "react", "tanstack"],
 })
     .option("scheme", {
     describe: "Plasmic integration scheme",
@@ -185,6 +185,11 @@ function run() {
                     name: "Gatsby",
                     value: "gatsby",
                 },
+                {
+                    name: "TanStack Start",
+                    short: "TanStack Start",
+                    value: "tanstack",
+                },
                 {
                     name: "React (Vite)",
                     short: "React (Vite)",

package/dist/lib.js

@@ -51,6 +51,8 @@ function getCPAStrategy(platform) {
                 return (yield Promise.resolve().then(() => __importStar(require("./gatsby/gatsby")))).gatsbyStrategy;
             case "react":
                 return (yield Promise.resolve().then(() => __importStar(require("./react/react")))).reactStrategy;
+            case "tanstack":
+                return (yield Promise.resolve().then(() => __importStar(require("./tanstack/tanstack")))).tanstackStrategy;
         }
     });
 }
@@ -82,7 +84,7 @@ function create(args) {
         }
         // Calling `npx create-XXX` means we don't have to keep these dependencies up to date
         banner("CREATING THE PROJECT");
-        if (!["nextjs", "gatsby", "react"].includes(platform)) {
+        if (!["nextjs", "gatsby", "react", "tanstack"].includes(platform)) {
             throw new Error(`Unrecognized platform: ${platform}`);
         }
         if (!["codegen", "loader"].includes(scheme)) {

package/dist/tanstack/tanstack.d.ts

@@ -0,0 +1,2 @@
+import { CPAStrategy } from "../utils/strategy";
+export declare const tanstackStrategy: CPAStrategy;

package/dist/tanstack/tanstack.js

@@ -0,0 +1,79 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tanstackStrategy = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const cmd_utils_1 = require("../utils/cmd-utils");
+const codegen_1 = require("../utils/codegen");
+const file_utils_1 = require("../utils/file-utils");
+const config_1 = require("./templates/file-router/config");
+const plasmic_host_1 = require("./templates/file-router/plasmic-host");
+const root_1 = require("./templates/file-router/root");
+exports.tanstackStrategy = {
+    create: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        const { projectPath } = args;
+        const createCommand = `npx create-tsrouter-app@latest ${projectPath} --template file-router --add-ons start`;
+        yield (0, cmd_utils_1.spawnOrFail)(createCommand);
+    }),
+    installDeps: ({ scheme, projectPath }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            throw new Error("Plasmic loader scheme is not supported for TanStack platform. Please use the codegen scheme instead.");
+        }
+        else {
+            return yield (0, codegen_1.installCodegenDeps)({ projectPath });
+        }
+    }),
+    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        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") {
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app.config.ts"), (0, config_1.makeCustomAppConfig_file_router_codegen)());
+        }
+    }),
+    generateFiles: (args) => {
+        return generateFilesFileRouterTemplate(args);
+    },
+    build: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        const { npmRunCmd, projectPath } = args;
+        yield (0, cmd_utils_1.spawnOrFail)(`${npmRunCmd} build`, projectPath);
+    }),
+};
+function generateFilesFileRouterTemplate(args) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+        // Delete existing pages
+        (0, file_utils_1.deleteGlob)(path_1.default.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
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "src/routes", `__root.${jsOrTs}x`), (0, root_1.makeCustomRoot_file_router_codegen)(jsOrTs));
+            // ./src/routes/plasmic-host.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "src/routes", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_fileRouter_codegen)());
+            // This should generate
+            // ./plasmic.json
+            // ./routes/index.tsx
+            // ./components/plasmic/**
+            yield (0, codegen_1.runCodegenSync)({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+        }
+    });
+}

package/dist/tanstack/templates/file-router/config.d.ts

@@ -0,0 +1 @@
+export declare function makeCustomAppConfig_file_router_codegen(): string;

package/dist/tanstack/templates/file-router/config.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCustomAppConfig_file_router_codegen = void 0;
+function makeCustomAppConfig_file_router_codegen() {
+    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",
+      ],
+    },
+  },
+})`;
+}
+exports.makeCustomAppConfig_file_router_codegen = makeCustomAppConfig_file_router_codegen;

package/dist/tanstack/templates/file-router/plasmic-host.d.ts

@@ -0,0 +1 @@
+export declare function makePlasmicHostPage_fileRouter_codegen(): string;

package/dist/tanstack/templates/file-router/plasmic-host.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePlasmicHostPage_fileRouter_codegen = void 0;
+function makePlasmicHostPage_fileRouter_codegen() {
+    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 />
+}
+`;
+}
+exports.makePlasmicHostPage_fileRouter_codegen = makePlasmicHostPage_fileRouter_codegen;

package/dist/tanstack/templates/file-router/root.d.ts

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

package/dist/tanstack/templates/file-router/root.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCustomRoot_file_router_codegen = void 0;
+function makeCustomRoot_file_router_codegen(_jsOrTs) {
+    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>
+  )
+}
+`;
+}
+exports.makeCustomRoot_file_router_codegen = makeCustomRoot_file_router_codegen;

package/dist/utils/types.d.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;

package/dist/utils/types.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.platformTypeToString = void 0;
 function platformTypeToString(s) {
-    return s === "nextjs" ? "Next.js" : s === "gatsby" ? "Gatsby" : "React";
+    return s === "nextjs"
+        ? "Next.js"
+        : s === "gatsby"
+            ? "Gatsby"
+            : s === "tanstack"
+                ? "TanStack"
+                : "React";
 }
 exports.platformTypeToString = platformTypeToString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -46,5 +46,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "46ededb427fd9f6b017065e6623a082de0f10ec8"
+  "gitHead": "7199e5b0c2c94b6e95c81c8120d9861faf98d7ee"
 }

package/run-cpa.ts

@@ -31,6 +31,12 @@ async function run() {
         typescript,
       });
       if (scheme === "codegen") {
+        allArgSets.push({
+          platform: "tanstack",
+          scheme,
+          typescript,
+        });
+
         allArgSets.push({
           platform: "react",
           scheme,

package/src/index.ts

@@ -33,7 +33,7 @@ const argv = yargs
   )
   .option("platform", {
     describe: "Target platform",
-    choices: ["", "nextjs", "gatsby", "react"],
+    choices: ["", "nextjs", "gatsby", "react", "tanstack"],
   })
   .option("scheme", {
     describe: "Plasmic integration scheme",
@@ -173,6 +173,11 @@ async function run(): Promise<void> {
         name: "Gatsby",
         value: "gatsby",
       },
+      {
+        name: "TanStack Start",
+        short: "TanStack Start",
+        value: "tanstack",
+      },
       {
         name: "React (Vite)",
         short: "React (Vite)",

package/src/lib.ts

@@ -20,6 +20,8 @@ async function getCPAStrategy(platform: PlatformType): Promise<CPAStrategy> {
       return (await import("./gatsby/gatsby")).gatsbyStrategy;
     case "react":
       return (await import("./react/react")).reactStrategy;
+    case "tanstack":
+      return (await import("./tanstack/tanstack")).tanstackStrategy;
   }
 }
 
@@ -72,7 +74,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
 
   // Calling `npx create-XXX` means we don't have to keep these dependencies up to date
   banner("CREATING THE PROJECT");
-  if (!["nextjs", "gatsby", "react"].includes(platform)) {
+  if (!["nextjs", "gatsby", "react", "tanstack"].includes(platform)) {
     throw new Error(`Unrecognized platform: ${platform}`);
   }
 

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";
 }