create-plasmic-app 0.0.167 → 0.0.169

package/src/nextjs/templates/app-seo.ts

@@ -0,0 +1,104 @@
+import { ifTs } from "../../utils/file-utils";
+import { JsOrTs } from "../../utils/types";
+
+const getSiteUrl = `// Set NEXT_PUBLIC_SITE_URL to pin the origin and keep this route static;
+// otherwise it is derived per-request, which opts the route out of prerendering.
+async function getSiteUrl() {
+  if (process.env.NEXT_PUBLIC_SITE_URL) {
+    return process.env.NEXT_PUBLIC_SITE_URL;
+  }
+  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`;
+  }
+  const h = await headers();
+  const proto = h.get("x-forwarded-proto") ?? "http";
+  return \`\${proto}://\${h.get("x-forwarded-host") ?? h.get("host")}\`;
+}`;
+
+function makeHeader(jsOrTs: JsOrTs) {
+  return `${ifTs(
+    jsOrTs,
+    `import type { MetadataRoute } from "next";\n`
+  )}import { headers } from "next/headers";\n`;
+}
+
+function makeSignature(jsOrTs: JsOrTs) {
+  return `export default async function sitemap()${ifTs(
+    jsOrTs,
+    ": Promise<MetadataRoute.Sitemap>"
+  )} {`;
+}
+
+export function makeSitemap_app_loader(jsOrTs: JsOrTs): string {
+  return `import { PLASMIC } from "@/plasmic-init";
+${makeHeader(jsOrTs)}
+export const revalidate = 60;
+
+${getSiteUrl}
+
+${makeSignature(jsOrTs)}
+  const siteUrl = await getSiteUrl();
+
+  // fetchPages() drops pages whose path takes a param, e.g. "/blog/[slug]".
+  const pages = await PLASMIC.fetchPages();
+
+  return pages.map((page) => ({
+    url: new URL(page.path, siteUrl).toString(),
+  }));
+}
+`;
+}
+
+export function makeSitemap_app_codegen(jsOrTs: JsOrTs): string {
+  const projects =
+    jsOrTs === "ts"
+      ? `(plasmicJson.projects as {
+    components: { componentType: string; path?: string }[];
+  }[])`
+      : "plasmicJson.projects";
+
+  return `${makeHeader(jsOrTs)}import plasmicJson from "../plasmic.json";
+
+${getSiteUrl}
+
+${makeSignature(jsOrTs)}
+  const siteUrl = await getSiteUrl();
+
+  return ${projects}
+    .flatMap((project) => project.components)
+    .flatMap((component) =>
+      component.componentType === "page" &&
+      component.path &&
+      !component.path.includes("[")
+        ? [
+            {
+              // next.config sets trailingSlash.
+              url: new URL(
+                component.path.replace(/\\/?$/, "/"),
+                siteUrl
+              ).toString(),
+            },
+          ]
+        : []
+    );
+}
+`;
+}
+
+export function makeRobots_app(jsOrTs: JsOrTs): string {
+  return `${makeHeader(jsOrTs)}
+${getSiteUrl}
+
+export default async function robots()${ifTs(
+    jsOrTs,
+    ": Promise<MetadataRoute.Robots>"
+  )} {
+  const siteUrl = await getSiteUrl();
+
+  return {
+    rules: { userAgent: "*", allow: "/" },
+    sitemap: new URL("/sitemap.xml", siteUrl).toString(),
+  };
+}
+`;
+}

package/src/nextjs/templates/pages-seo.ts

@@ -0,0 +1,131 @@
+import { ifTs } from "../../utils/file-utils";
+import { JsOrTs } from "../../utils/types";
+
+const siteUrl = `  // Set NEXT_PUBLIC_SITE_URL to pin the origin;
+  // otherwise it is derived per-request from the request headers.
+  const siteUrl =
+    process.env.NEXT_PUBLIC_SITE_URL ??
+    (process.env.VERCEL_PROJECT_PRODUCTION_URL
+      ? \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`
+      : \`\${req.headers["x-forwarded-proto"] ?? "http"}://\${
+          req.headers["x-forwarded-host"] ?? req.headers.host
+        }\`);`;
+
+function makeHeader(jsOrTs: JsOrTs) {
+  return ifTs(jsOrTs, `import type { GetServerSideProps } from "next";\n`);
+}
+
+function makeSignature(jsOrTs: JsOrTs) {
+  return `export const getServerSideProps${ifTs(
+    jsOrTs,
+    ": GetServerSideProps"
+  )} = async ({ req, res }) => {`;
+}
+
+function makeSitemapXml(jsOrTs: JsOrTs) {
+  return `function escapeXml(str${ifTs(jsOrTs, ": string")}) {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+function makeSitemapXml(urls${ifTs(jsOrTs, ": string[]")}) {
+  const entries = urls.map(
+    (url) => \`  <url><loc>\${escapeXml(url)}</loc></url>\`
+  );
+  return \`<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+\${entries.join("\\n")}
+</urlset>
+\`;
+}`;
+}
+
+export function makeSitemap_pages_loader(jsOrTs: JsOrTs): string {
+  return `import { PLASMIC } from "@/plasmic-init";
+${makeHeader(jsOrTs)}
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  // fetchPages() drops pages whose path takes a param, e.g. "/blog/[slug]".
+  const pages = await PLASMIC.fetchPages();
+  const urls = pages.map((page) => new URL(page.path, siteUrl).toString());
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+
+export function makeSitemap_pages_codegen(jsOrTs: JsOrTs): string {
+  const projects =
+    jsOrTs === "ts"
+      ? `(plasmicJson.projects as {
+    components: { componentType: string; path?: string }[];
+  }[])`
+      : "plasmicJson.projects";
+
+  return `${makeHeader(jsOrTs)}import plasmicJson from "../plasmic.json";
+
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  const urls = ${projects}
+    .flatMap((project) => project.components)
+    .flatMap((component) =>
+      component.componentType === "page" &&
+      component.path &&
+      !component.path.includes("[")
+        ? // next.config sets trailingSlash.
+          [new URL(component.path.replace(/\\/?$/, "/"), siteUrl).toString()]
+        : []
+    );
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+
+export function makeRobots_pages(jsOrTs: JsOrTs): string {
+  return `${ifTs(
+    jsOrTs,
+    `import type { GetServerSideProps } from "next";\n\n`
+  )}${makeSignature(jsOrTs)}
+${siteUrl}
+
+  res.setHeader("Content-Type", "text/plain; charset=utf-8");
+  res.write(
+    \`User-agent: *\\nAllow: /\\n\\nSitemap: \${new URL(
+      "/sitemap.xml",
+      siteUrl
+    ).toString()}\\n\`
+  );
+  res.end();
+  return { props: {} };
+};
+
+export default function Robots() {
+  return null;
+}
+`;
+}

package/src/react/react.ts

@@ -9,12 +9,12 @@ import {
   generateWelcomePage,
   getPlasmicConfig,
 } from "../utils/file-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import { initYarnBerryProject, installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy } from "../utils/strategy";
 
 export const reactStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, jsOrTs } = args;
+    const { projectPath, jsOrTs, packageManager } = args;
     let { template } = args;
 
     /* create-vite package checks if the targetDir doesn't exist then it creates the targetDir in the
@@ -45,14 +45,19 @@ export const reactStrategy: CPAStrategy = {
 
     const templateArg = template ? ` --template ${template}` : "";
     await spawnOrFail(`${createCommand}${templateArg}`);
+
+    if (packageManager === "yarn2") {
+      await initYarnBerryProject(fullProjectPath);
+    }
   },
-  installDeps: async ({ projectPath, scheme }) => {
+  installDeps: async ({ projectPath, scheme, packageManager }) => {
     if (scheme === "loader") {
       return await installUpgrade("@plasmicapp/loader-react", {
         workingDir: projectPath,
+        packageManager,
       });
     } else {
-      return await installCodegenDeps({ projectPath });
+      return await installCodegenDeps({ projectPath, packageManager });
     }
   },
   overwriteConfig: async (args) => {
@@ -81,6 +86,7 @@ export const reactStrategy: CPAStrategy = {
     projectId,
     projectPath,
     jsOrTs,
+    packageManager,
   }) => {
     if (scheme === "loader") {
       // Nothing to do
@@ -92,6 +98,7 @@ export const reactStrategy: CPAStrategy = {
         projectId,
         projectApiToken,
         projectPath,
+        packageManager,
       });
 
       // Pick a page for the entry point App.tsx page

package/src/tanstack/tanstack.ts

@@ -3,14 +3,18 @@ import path from "path";
 import { spawnOrFail } from "../utils/cmd-utils";
 import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
 import { deleteGlob } from "../utils/file-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import {
+  initYarnBerryProject,
+  installUpgrade,
+  packageManagerCommand,
+} from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
 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, template } = args;
+    const { projectPath, template, packageManager } = args;
     if (template) {
       console.warn(
         `Warning: Ignoring template '${template}' (argument is not supported by TanStack).`
@@ -39,27 +43,34 @@ export const tanstackStrategy: CPAStrategy = {
       "--framework React",
       "--router-only",
       "--no-toolchain",
-      "--package-manager yarn",
+      `--package-manager ${packageManagerCommand(packageManager)}`,
       "--git",
       "--no-intent",
       "--no-examples",
       "--yes",
+      // Berry must install into the project we set up below, not the default PnP one
+      ...(packageManager === "yarn2" ? ["--no-install"] : []),
     ].join(" ");
 
     await spawnOrFail(createCommand);
 
+    if (packageManager === "yarn2") {
+      await initYarnBerryProject(fullProjectPath);
+    }
+
     // Install peer-dep of @tanstack/react-router-with-query
     await installUpgrade("@tanstack/react-query", {
       workingDir: projectPath,
+      packageManager,
     });
   },
-  installDeps: async ({ scheme, projectPath }) => {
+  installDeps: async ({ scheme, projectPath, packageManager }) => {
     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 });
+      return await installCodegenDeps({ projectPath, packageManager });
     }
   },
   overwriteConfig: async (args) => {
@@ -106,7 +117,8 @@ export const tanstackStrategy: CPAStrategy = {
 };
 
 async function generateFilesFileRouterTemplate(args: GenerateFilesArgs) {
-  const { projectPath, scheme, projectId, projectApiToken } = args;
+  const { projectPath, scheme, projectId, projectApiToken, packageManager } =
+    args;
 
   // Delete existing pages
   deleteGlob(path.join(projectPath, "src/routes", "*.*"));
@@ -136,6 +148,7 @@ async function generateFilesFileRouterTemplate(args: GenerateFilesArgs) {
       projectId,
       projectApiToken,
       projectPath,
+      packageManager,
     });
   }
 }

package/src/utils/codegen.ts

@@ -1,18 +1,29 @@
+import { promises as fs } from "fs";
+import path from "path";
 import { banner } from "../lib";
 import { spawnOrFail } from "../utils/cmd-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import { installUpgrade, packageManagerExec } from "../utils/npm-utils";
+import { PackageManagerType } from "../utils/types";
 
-export async function installCodegenDeps(opts: { projectPath: string }) {
-  const { projectPath } = opts;
-  return await installUpgrade("@plasmicapp/cli", { workingDir: projectPath });
+export async function installCodegenDeps(opts: {
+  projectPath: string;
+  packageManager: PackageManagerType;
+}) {
+  const { projectPath, packageManager } = opts;
+  // Generated pages import @plasmicapp/host directly
+  return await installUpgrade("@plasmicapp/cli @plasmicapp/host", {
+    workingDir: projectPath,
+    packageManager,
+  });
 }
 
 export async function runCodegenSync(opts: {
   projectId: string;
   projectApiToken: string | undefined;
   projectPath: string;
+  packageManager: PackageManagerType;
 }) {
-  const { projectId, projectApiToken, projectPath } = opts;
+  const { projectId, projectApiToken, projectPath, packageManager } = opts;
 
   banner("SYNCING PLASMIC COMPONENTS");
 
@@ -20,5 +31,16 @@ export async function runCodegenSync(opts: {
     ? `${projectId}:${projectApiToken}`
     : projectId;
 
-  await spawnOrFail(`npx plasmic sync --yes -p ${project}`, projectPath);
+  await spawnOrFail(
+    `${packageManagerExec(packageManager)} plasmic sync --yes -p ${project}`,
+    projectPath
+  );
+
+  // Pin the package manager, so syncs don't have to guess from lockfiles
+  const configPath = path.join(projectPath, "plasmic.json");
+  const config = JSON.parse(await fs.readFile(configPath, "utf8"));
+  await fs.writeFile(
+    configPath,
+    JSON.stringify({ ...config, packageManager }, undefined, 2) + "\n"
+  );
 }

package/src/utils/file-utils.ts

@@ -10,7 +10,7 @@ import { README } from "../templates/readme";
 import { WELCOME_PAGE } from "../templates/welcomePage";
 import { ensure } from "./lang-utils";
 import { installUpgrade } from "./npm-utils";
-import { JsOrTs, PlatformType } from "./types";
+import { JsOrTs, PackageManagerType, PlatformType } from "./types";
 
 /**
  * Runs the search pattern through `glob` and deletes all resulting files
@@ -215,12 +215,16 @@ export async function getPlasmicConfig(
 
 // Create tsconfig.json if it doesn't exist
 // this will force Plasmic to recognize Typescript
-export async function ensureTsconfig(projectPath: string): Promise<void> {
+export async function ensureTsconfig(
+  projectPath: string,
+  packageManager: PackageManagerType
+): Promise<void> {
   const tsconfigPath = path.join(projectPath, "tsconfig.json");
   if (!existsSync(tsconfigPath)) {
     await fs.writeFile(tsconfigPath, "");
     const installTsResult = await installUpgrade("typescript @types/react", {
       workingDir: projectPath,
+      packageManager,
     });
     if (!installTsResult) {
       throw new Error("Failed to install Typescript");

package/src/utils/npm-utils.ts

@@ -2,10 +2,11 @@
 @typescript-eslint/no-var-requires: 0,
 */
 import * as execa from "execa";
-import { existsSync } from "fs";
+import { promises as fs } from "fs";
 import path from "path";
 import * as semver from "semver";
 import updateNotifier from "update-notifier";
+import { PackageManagerType } from "./types";
 
 /**
  * Call this to check if there's an update available
@@ -54,6 +55,13 @@ export async function spawn(
   return cp.exitCode === 0;
 }
 
+interface InstallOpts {
+  global?: boolean;
+  dev?: boolean;
+  workingDir?: string;
+  packageManager: PackageManagerType;
+}
+
 /**
  * Install a package using either `npm` or `yarn`
  * @param pkg - package name
@@ -62,7 +70,7 @@ export async function spawn(
  */
 export async function installUpgrade(
   pkg: string,
-  opts: { global?: boolean; dev?: boolean; workingDir?: string } = {}
+  opts: InstallOpts
 ): Promise<boolean> {
   const cmd = installCommand(pkg, opts);
   const r = await spawn(cmd, opts.workingDir);
@@ -83,11 +91,8 @@ export async function installUpgrade(
  * @param opts
  * @returns
  */
-function installCommand(
-  pkg: string,
-  opts: { global?: boolean; dev?: boolean; workingDir?: string } = {}
-): string {
-  const mgr = detectPackageManager(opts.workingDir);
+function installCommand(pkg: string, opts: InstallOpts): string {
+  const mgr = opts.packageManager;
   if (mgr === "yarn") {
     if (opts.global) {
       return `yarn global add ${pkg}`;
@@ -96,6 +101,14 @@ function installCommand(
     } else {
       return `yarn add --ignore-scripts -W ${pkg}`;
     }
+  } else if (mgr === "yarn2") {
+    if (opts.global) {
+      return `npm install -g ${pkg}`;
+    } else if (opts.dev) {
+      return `yarn add -D ${pkg}`;
+    } else {
+      return `yarn add ${pkg}`;
+    }
   } else if (mgr === "pnpm") {
     if (opts.global) {
       return `pnpm add -g ${pkg}`;
@@ -116,23 +129,63 @@ function installCommand(
 }
 
 /**
- * Detect if you should use `npm` or `yarn`
- * @param dir
- * @returns
+ * The package manager to install with: the one requested, else the one we were run
+ * with. `npx` overwrites npm_config_user_agent, so this must be read before spawning
+ * nested create commands.
  */
-export function detectPackageManager(dir?: string): "yarn" | "pnpm" | "npm" {
-  // We should look only inside the directory instead of looking to the ancestors
-  // with findupSync, the reason for this is that the current gatsby template
-  // uses npm, so if the user has some yarn.lock in a parent directory it's
-  // going to run yarn commands, this is going to trigger an error with sharp
+export function resolvePackageManager(
+  requested?: PackageManagerType
+): PackageManagerType {
+  if (requested) {
+    return requested === "yarn"
+      ? yarnVariant(installedYarnVersion())
+      : requested;
+  }
+  const [name, version] = (process.env.npm_config_user_agent ?? "")
+    .split(" ")[0]
+    .split("/");
+  if (name === "yarn") {
+    return yarnVariant(version);
+  }
+  return name === "pnpm" ? "pnpm" : "npm";
+}
 
-  const yarnLock = existsSync(path.join(dir ? dir : "", "yarn.lock"));
-  const pnpmLock = existsSync(path.join(dir ? dir : "", "pnpm-lock.yaml"));
-  if (yarnLock) {
-    return "yarn";
-  } else if (pnpmLock) {
-    return "pnpm";
-  } else {
-    return "npm";
+function yarnVariant(version: string | undefined): PackageManagerType {
+  const parsed = version ? semver.coerce(version) : null;
+  return parsed && parsed.major >= 2 ? "yarn2" : "yarn";
+}
+
+function installedYarnVersion(): string | undefined {
+  try {
+    return execa.commandSync("yarn --version").stdout.trim();
+  } catch {
+    return undefined;
   }
 }
+
+/** Scaffolders and run scripts only know the `yarn` command. */
+export function packageManagerCommand(
+  mgr: PackageManagerType
+): "npm" | "yarn" | "pnpm" {
+  return mgr === "yarn2" ? "yarn" : mgr;
+}
+
+/** Run a locally installed bin. `npx` can't see Yarn Berry's PnP installs. */
+export function packageManagerExec(mgr: PackageManagerType): string {
+  const cmd = packageManagerCommand(mgr);
+  return cmd === "yarn" ? "yarn" : cmd === "pnpm" ? "pnpm exec" : "npx";
+}
+
+/**
+ * Make a freshly scaffolded app its own Yarn Berry project. Without a lockfile Berry
+ * claims the app for the nearest ancestor project, and its default PnP linker can't
+ * load CommonJS from Node 24's ESM resolver (EBADF), which breaks every framework we
+ * scaffold. Must run before anything invokes yarn in `projectPath`.
+ */
+export async function initYarnBerryProject(projectPath: string): Promise<void> {
+  await fs.writeFile(path.join(projectPath, "yarn.lock"), "");
+  await fs.writeFile(
+    path.join(projectPath, ".yarnrc.yml"),
+    "nodeLinker: node-modules\n"
+  );
+}

package/src/utils/strategy.ts

@@ -1,10 +1,17 @@
-import { JsOrTs, PlatformOptions, SchemeType } from "./types";
+import {
+  JsOrTs,
+  PackageManagerType,
+  PlatformOptions,
+  SchemeType,
+} from "./types";
 
 export interface CreateArgs {
   projectPath: string;
+  projectId: string;
   template?: string;
   jsOrTs: JsOrTs;
   platformOptions: PlatformOptions;
+  packageManager: PackageManagerType;
 }
 
 export interface ConfigArgs {
@@ -23,6 +30,7 @@ export interface GenerateFilesArgs {
   projectId: string;
   projectApiToken: string | undefined;
   platformOptions: PlatformOptions;
+  packageManager: PackageManagerType;
 }
 
 export interface BuildArgs {
@@ -34,6 +42,7 @@ export interface InstallArgs {
   scheme: SchemeType;
   projectPath: string;
   jsOrTs: JsOrTs;
+  packageManager: PackageManagerType;
 }
 
 // TODO: Remove this interface and use a single "create" entry point.

package/src/utils/types.ts

@@ -6,6 +6,7 @@ export type PlatformOptions = {
   };
 };
 export type SchemeType = "codegen" | "loader";
+export type PackageManagerType = "npm" | "yarn" | "yarn2" | "pnpm";
 
 export type PlasmicCssImport = {
   projectId: string;