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 (