fix: Disallow trailing commas in cli template code to match the gener…

…ated prettier config (#1493) * fix: Make the prettier config in template consistent with generated prettier config (disallow trailing newlines) * chore: add changeset * For some reason pnpm format didn't catch these * Override trailing commaconfig to the true default value (es5, not none) * chore: Make the changelog describe the change more clearly now that it's changed to es5
t3-oss · Jun 28, 2023 · a230d9f · a230d9f · vercel · Jun 28, 2023
1 parent 71ba00c
commit a230d9f
Show file tree

Hide file tree

Showing 22 changed files with 54 additions and 50 deletions.
diff --git a/.changeset/gentle-impalas-doubt.md b/.changeset/gentle-impalas-doubt.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+Remove trailing newlines in generated app that aren't allowed by the generated prettier config
diff --git a/cli/.prettierrc.cjs b/cli/.prettierrc.cjs
@@ -5,6 +5,7 @@ const config = {
  ...baseConfig,
  plugins: [...baseConfig.plugins, "prettier-plugin-tailwindcss"],
  tailwindConfig: "./template/extras/config/tailwind.config.ts",
+ trailingComma: "es5",
 };
 
 module.exports = config;
diff --git a/cli/src/cli/index.ts b/cli/src/cli/index.ts
@@ -62,22 +62,22 @@ export const runCli = async () => {
  .description("A CLI for creating web applications with the t3 stack")
  .argument(
  "[dir]",
- "The name of the application, as well as the name of the directory to create",
+ "The name of the application, as well as the name of the directory to create"
  )
  .option(
  "--noGit",
  "Explicitly tell the CLI to not initialize a new git repo in the project",
- false,
+ false
  )
  .option(
  "--noInstall",
  "Explicitly tell the CLI to not run the package manager's install command",
- false,
+ false
  )
  .option(
  "-y, --default",
  "Bypass the CLI and use all default options to bootstrap a new t3-app",
- false,
+ false
  )
  /** START CI-FLAGS */
  /**
@@ -89,31 +89,31 @@ export const runCli = async () => {
  .option(
  "--tailwind [boolean]",
  "Experimental: Boolean value if we should install Tailwind CSS. Must be used in conjunction with `--CI`.",
- (value) => !!value && value !== "false",
+ (value) => !!value && value !== "false"
  )
  /** @experimental Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
  .option(
  "--nextAuth [boolean]",
  "Experimental: Boolean value if we should install NextAuth.js. Must be used in conjunction with `--CI`.",
- (value) => !!value && value !== "false",
+ (value) => !!value && value !== "false"
  )
  /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
  .option(
  "--prisma [boolean]",
  "Experimental: Boolean value if we should install Prisma. Must be used in conjunction with `--CI`.",
- (value) => !!value && value !== "false",
+ (value) => !!value && value !== "false"
  )
  /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
  .option(
  "--trpc [boolean]",
  "Experimental: Boolean value if we should install tRPC. Must be used in conjunction with `--CI`.",
- (value) => !!value && value !== "false",
+ (value) => !!value && value !== "false"
  )
  /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
  .option(
  "-i, --import-alias",
  "Explicitly tell the CLI to use a custom import alias",
- defaultOptions.flags.importAlias,
+ defaultOptions.flags.importAlias
  )
  /** END CI-FLAGS */
  .version(getVersion(), "-v, --version", "Display the version number")
@@ -122,10 +122,10 @@ export const runCli = async () => {
  `\n The t3 stack was inspired by ${chalk
  .hex("#E8DCFF")
  .bold(
- "@t3dotgg",
+ "@t3dotgg"
  )} and has been used to build awesome fullstack applications like ${chalk
  .hex("#E24A8D")
- .underline("https://ping.gg")} \n`,
+ .underline("https://ping.gg")} \n`
  )
  .parse(process.argv);
 
@@ -299,11 +299,11 @@ const promptInstall = async (): Promise<boolean> => {
  } else {
  if (pkgManager === "yarn") {
  logger.info(
- `No worries. You can run '${pkgManager}' later to install the dependencies.`,
+ `No worries. You can run '${pkgManager}' later to install the dependencies.`
  );
  } else {
  logger.info(
- `No worries. You can run '${pkgManager} install' later to install the dependencies.`,
+ `No worries. You can run '${pkgManager} install' later to install the dependencies.`
  );
  }
  }

diff --git a/cli/src/helpers/git.ts b/cli/src/helpers/git.ts
@@ -77,7 +77,7 @@ export const initializeGit = async (projectDir: string) => {
  name: "overwriteGit",
  type: "confirm",
  message: `${chalk.redBright.bold(
- "Warning:",
+ "Warning:"
  )} Git is already initialized in "${dirName}". Initializing a new git repository would delete the previous history. Would you like to continue anyways?`,
  default: false,
  });
@@ -96,7 +96,7 @@ export const initializeGit = async (projectDir: string) => {
  name: "initializeChildGitRepo",
  type: "confirm",
  message: `${chalk.redBright.bold(
- "Warning:",
+ "Warning:"
  )} "${dirName}" is already in a git worktree. Would you still like to initialize a new git repository in this directory?`,
  default: false,
  });
@@ -128,15 +128,15 @@ export const initializeGit = async (projectDir: string) => {
  await execa("git", ["add", "."], { cwd: projectDir });
  spinner.succeed(
  `${chalk.green("Successfully initialized and staged")} ${chalk.green.bold(
- "git",
- )}\n`,
+ "git"
+ )}\n`
  );
  } catch (error) {
  // Safeguard, should be unreachable
  spinner.fail(
  `${chalk.bold.red(
- "Failed:",
- )} could not initialize git. Update git to the latest version!\n`,
+ "Failed:"
+ )} could not initialize git. Update git to the latest version!\n`
  );
  }
 };
diff --git a/cli/src/helpers/installDependencies.ts b/cli/src/helpers/installDependencies.ts
@@ -14,7 +14,7 @@ type Options = {
 /*eslint-disable @typescript-eslint/no-floating-promises*/
 const runInstallCommand = async (
  pkgManager: PackageManager,
- projectDir: string,
+ projectDir: string
 ): Promise<Ora | null> => {
  switch (pkgManager) {
  // When using npm, inherit the stderr stream so that the progress bar is shown
@@ -77,6 +77,6 @@ export const installDependencies = async ({ projectDir }: Options) => {
  // If the spinner was used to show the progress, use succeed method on it
  // If not, use the succeed on a new spinner
  (installSpinner || ora()).succeed(
- chalk.green("Successfully installed dependencies!\n"),
+ chalk.green("Successfully installed dependencies!\n")
  );
 };
diff --git a/cli/src/helpers/installPackages.ts b/cli/src/helpers/installPackages.ts
@@ -20,8 +20,8 @@ export const installPackages = (options: InstallPackagesOptions) => {
  pkgOpts.installer(options);
  spinner.succeed(
  chalk.green(
- `Successfully setup boilerplate for ${chalk.green.bold(name)}`,
- ),
+ `Successfully setup boilerplate for ${chalk.green.bold(name)}`
+ )
  );
  }
  }

diff --git a/cli/src/helpers/logNextSteps.ts b/cli/src/helpers/logNextSteps.ts
@@ -24,7 +24,7 @@ export const logNextSteps = ({
 
  if (packages?.prisma.inUse) {
  logger.info(
- ` ${pkgManager === "npm" ? "npx" : pkgManager} prisma db push`,
+ ` ${pkgManager === "npm" ? "npx" : pkgManager} prisma db push`
  );
  }
 

diff --git a/cli/src/helpers/scaffoldProject.ts b/cli/src/helpers/scaffoldProject.ts
@@ -28,9 +28,7 @@ export const scaffoldProject = async ({
  if (fs.readdirSync(projectDir).length === 0) {
  if (projectName !== ".")
  spinner.info(
- `${chalk.cyan.bold(
- projectName,
- )} exists but is empty, continuing...\n`,
+ `${chalk.cyan.bold(projectName)} exists but is empty, continuing...\n`
  );
  } else {
  spinner.stopAndPersist();
@@ -40,7 +38,7 @@ export const scaffoldProject = async ({
  name: "overwriteDir",
  type: "list",
  message: `${chalk.redBright.bold("Warning:")} ${chalk.cyan.bold(
- projectName,
+ projectName
  )} already exists and isn't empty. How would you like to proceed?`,
  choices: [
  {
@@ -87,7 +85,7 @@ export const scaffoldProject = async ({
 
  if (overwriteDir === "clear") {
  spinner.info(
- `Emptying ${chalk.cyan.bold(projectName)} and creating t3 app..\n`,
+ `Emptying ${chalk.cyan.bold(projectName)} and creating t3 app..\n`
  );
  fs.emptyDirSync(projectDir);
  }
@@ -99,13 +97,13 @@ export const scaffoldProject = async ({
  fs.copySync(srcDir, projectDir);
  fs.renameSync(
  path.join(projectDir, "_gitignore"),
- path.join(projectDir, ".gitignore"),
+ path.join(projectDir, ".gitignore")
  );
 
  const scaffoldedName =
  projectName === "." ? "App" : chalk.cyan.bold(projectName);
 
  spinner.succeed(
- `${scaffoldedName} ${chalk.green("scaffolded successfully!")}\n`,
+ `${scaffoldedName} ${chalk.green("scaffolded successfully!")}\n`
  );
 };
diff --git a/cli/src/helpers/setImportAlias.ts b/cli/src/helpers/setImportAlias.ts
@@ -4,7 +4,7 @@ import path from "path";
 function replaceTextInFiles(
  directoryPath: string,
  search: string,
- replacement: string,
+ replacement: string
 ): void {
  const files = fs.readdirSync(directoryPath);
 

diff --git a/cli/src/index.ts b/cli/src/index.ts
@@ -49,7 +49,7 @@ const main = async () => {
 
  // Write name to package.json
  const pkgJson = fs.readJSONSync(
- path.join(projectDir, "package.json"),
+ path.join(projectDir, "package.json")
  ) as CT3APackageJSON;
  pkgJson.name = scopedAppName;
  pkgJson.ct3aMetadata = { initVersion: getVersion() };
@@ -69,7 +69,7 @@ const main = async () => {
  // Rename _eslintrc.json to .eslintrc.json - we use _eslintrc.json to avoid conflicts with the monorepos linter
  fs.renameSync(
  path.join(projectDir, "_eslintrc.cjs"),
- path.join(projectDir, ".eslintrc.cjs"),
+ path.join(projectDir, ".eslintrc.cjs")
  );
 
  if (!noGit) {
@@ -87,7 +87,7 @@ main().catch((err) => {
  logger.error(err);
  } else {
  logger.error(
- "An unknown error has occurred. Please open an issue on github with the below:",
+ "An unknown error has occurred. Please open an issue on github with the below:"
  );
  console.log(err);
  }

diff --git a/cli/src/installers/envVars.ts b/cli/src/installers/envVars.ts
@@ -22,7 +22,7 @@ export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
  const envSchemaSrc = path.join(
  PKG_ROOT,
  "template/extras/src/env",
- envFile,
+ envFile
  );
  const envSchemaDest = path.join(projectDir, "src/env.mjs");
  fs.copySync(envSchemaSrc, envSchemaDest);

diff --git a/cli/src/installers/index.ts b/cli/src/installers/index.ts
@@ -34,7 +34,7 @@ export type PkgInstallerMap = {
 };
 
 export const buildPkgInstallerMap = (
- packages: AvailablePackages[],
+ packages: AvailablePackages[]
 ): PkgInstallerMap => ({
  nextAuth: {
  inUse: packages.includes("nextAuth"),

diff --git a/cli/src/installers/nextAuth.ts b/cli/src/installers/nextAuth.ts
@@ -25,7 +25,7 @@ export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
  const authConfigSrc = path.join(
  extrasDir,
  "src/server/auth",
- usingPrisma ? "with-prisma.ts" : "base.ts",
+ usingPrisma ? "with-prisma.ts" : "base.ts"
  );
  const authConfigDest = path.join(projectDir, "src/server/auth.ts");
 

diff --git a/cli/src/installers/prisma.ts b/cli/src/installers/prisma.ts
@@ -22,7 +22,7 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
  const schemaSrc = path.join(
  extrasDir,
  "prisma/schema",
- packages?.nextAuth.inUse ? "with-auth.prisma" : "base.prisma",
+ packages?.nextAuth.inUse ? "with-auth.prisma" : "base.prisma"
  );
  const schemaDest = path.join(projectDir, "prisma/schema.prisma");
 

diff --git a/cli/src/installers/trpc.ts b/cli/src/installers/trpc.ts
@@ -55,11 +55,11 @@ export const trpcInstaller: Installer = ({ projectDir, packages }) => {
  const exampleRouterSrc = path.join(
  extrasDir,
  "src/server/api/routers/example",
- exampleRouterFile,
+ exampleRouterFile
  );
  const exampleRouterDest = path.join(
  projectDir,
- "src/server/api/routers/example.ts",
+ "src/server/api/routers/example.ts"
  );
 
  fs.copySync(apiHandlerSrc, apiHandlerDest);

diff --git a/cli/src/utils/addPackageDependency.ts b/cli/src/utils/addPackageDependency.ts
@@ -15,7 +15,7 @@ export const addPackageDependency = (opts: {
  const { dependencies, devMode, projectDir } = opts;
 
  const pkgJson = fs.readJSONSync(
- path.join(projectDir, "package.json"),
+ path.join(projectDir, "package.json")
  ) as PackageJson;
 
  dependencies.forEach((pkgName) => {

diff --git a/cli/src/utils/renderVersionWarning.ts b/cli/src/utils/renderVersionWarning.ts
@@ -14,7 +14,7 @@ export const renderVersionWarning = (npmVersion: string) => {
  logger.warn(" Please report any bugs you encounter.");
  } else if (currentVersion.includes("next")) {
  logger.warn(
- " You are running create-t3-app with the @next tag which is no longer maintained.",
+ " You are running create-t3-app with the @next tag which is no longer maintained."
  );
  logger.warn(" Please run the CLI with @latest instead.");
  } else if (currentVersion !== npmVersion) {
@@ -23,7 +23,7 @@ export const renderVersionWarning = (npmVersion: string) => {
  " Your version:",
  currentVersion + ".",
  "Latest version in the npm registry:",
- npmVersion,
+ npmVersion
  );
  logger.warn(" Please run the CLI with @latest to get the latest updates.");
  }
@@ -56,7 +56,7 @@ function checkForLatestVersion(): Promise<string> {
  } else {
  reject();
  }
- },
+ }
  )
  .on("error", () => {
  // logger.error("Unable to check for latest version.");

diff --git a/cli/template/extras/src/env/with-auth-prisma.mjs b/cli/template/extras/src/env/with-auth-prisma.mjs
@@ -18,7 +18,7 @@ export const env = createEnv({
  // Since NextAuth.js automatically uses the VERCEL_URL if present.
  (str) => process.env.VERCEL_URL ?? str,
  // VERCEL_URL doesn't include `https` so it cant be validated as a URL
- process.env.VERCEL ? z.string().min(1) : z.string().url(),
+ process.env.VERCEL ? z.string().min(1) : z.string().url()
  ),
  // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
  DISCORD_CLIENT_ID: z.string(),

diff --git a/cli/template/extras/src/env/with-auth.mjs b/cli/template/extras/src/env/with-auth.mjs
@@ -17,7 +17,7 @@ export const env = createEnv({
  // Since NextAuth.js automatically uses the VERCEL_URL if present.
  (str) => process.env.VERCEL_URL ?? str,
  // VERCEL_URL doesn't include `https` so it cant be validated as a URL
- process.env.VERCEL ? z.string().min(1) : z.string().url(),
+ process.env.VERCEL ? z.string().min(1) : z.string().url()
  ),
  // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
  DISCORD_CLIENT_ID: z.string(),

diff --git a/cli/template/extras/src/pages/api/trpc/[trpc].ts b/cli/template/extras/src/pages/api/trpc/[trpc].ts
@@ -11,7 +11,7 @@ export default createNextApiHandler({
  env.NODE_ENV === "development"
  ? ({ path, error }) => {
  console.error(
- `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+ `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
  );
  }
  : undefined,

diff --git a/cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx b/cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx
@@ -59,7 +59,7 @@ function AuthShowcase() {
 
  const { data: secretMessage } = api.example.getSecretMessage.useQuery(
  undefined, // no input
- { enabled: sessionData?.user !== undefined },
+ { enabled: sessionData?.user !== undefined }
  );
 
  return (

diff --git a/cli/template/extras/src/pages/index/with-auth-trpc.tsx b/cli/template/extras/src/pages/index/with-auth-trpc.tsx
@@ -60,7 +60,7 @@ function AuthShowcase() {
 
  const { data: secretMessage } = api.example.getSecretMessage.useQuery(
  undefined, // no input
- { enabled: sessionData?.user !== undefined },
+ { enabled: sessionData?.user !== undefined }
  );
 
  return (