feat!: new folder structure

.changeset/loud-shirts-tap.md

@@ -0,0 +1,7 @@
+---
+"create-t3-app": major
+---
+
+feat!: implement new folder structure
+
+create-t3-app has decided to switch out the folder structure of the generated t3-app to, what is to us, a more minimal, logical and easier to understand structure.

.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-  plugins: ["unicorn", "turbo"],
+  plugins: ["turbo"],
   extends: [
     "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     "plugin:prettier/recommended",
@@ -16,12 +16,14 @@ module.exports = {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-floating-promises": "error",
-    "unicorn/filename-case": [
+    "prettier/prettier": ["error", { endOfLine: "auto" }],
+    "@typescript-eslint/no-unused-vars": [
       "error",
       {
-        case: "camelCase",
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
       },
     ],
-    "prettier/prettier": ["error", { endOfLine: "auto" }],
   },
 };

cli/.prettierrc.cjs

@@ -2,5 +2,5 @@
 module.exports = {
   ...require("../.prettierrc.cjs"),
   plugins: [require.resolve("prettier-plugin-tailwindcss")],
-  tailwindConfig: "./template/addons/tailwind/tailwind.config.cjs",
+  tailwindConfig: "./template/extras/config/tailwind.config.cjs",
 };

cli/package.json

@@ -50,12 +50,24 @@
     "sort-package-json": "^2.0.0"
   },
   "devDependencies": {
+    "@prisma/client": "^4.8.0",
+    "@tanstack/react-query": "^4.20.4",
+    "@trpc/client": "^10.7.0",
+    "@trpc/next": "^10.7.0",
+    "@trpc/react-query": "^10.7.0",
+    "@trpc/server": "^10.7.0",
     "@types/fs-extra": "^9.0.13",
     "@types/gradient-string": "^1.1.2",
     "@types/inquirer": "^9.0.2",
     "@types/node": "^18.8.0",
+    "next": "^13.1.1",
+    "next-auth": "^4.18.7",
     "prettier": "^2.8.0",
     "prettier-plugin-tailwindcss": "^0.2.0",
+    "prisma": "^4.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "superjson": "^1.12.1",
     "tsup": "^6.2.3",
     "type-fest": "^3.0.0",
     "typescript": "^4.9.3"

cli/src/helpers/selectBoilerplate.ts

@@ -11,17 +11,17 @@ export const selectAppFile = ({
   projectDir,
   packages,
 }: SelectBoilerplateProps) => {
-  const appFileDir = path.join(PKG_ROOT, "template/page-studs/_app");
+  const appFileDir = path.join(PKG_ROOT, "template/extras/src/pages/_app");
 
-  const usingTrpc = packages.trpc.inUse;
+  const usingTRPC = packages.trpc.inUse;
   const usingNextAuth = packages.nextAuth.inUse;
 
   let appFile = "";
-  if (usingNextAuth && usingTrpc) {
+  if (usingNextAuth && usingTRPC) {
     appFile = "with-auth-trpc.tsx";
-  } else if (usingNextAuth && !usingTrpc) {
+  } else if (usingNextAuth && !usingTRPC) {
     appFile = "with-auth.tsx";
-  } else if (!usingNextAuth && usingTrpc) {
+  } else if (!usingNextAuth && usingTRPC) {
     appFile = "with-trpc.tsx";
   }
 
@@ -37,22 +37,22 @@ export const selectIndexFile = ({
   projectDir,
   packages,
 }: SelectBoilerplateProps) => {
-  const indexFileDir = path.join(PKG_ROOT, "template/page-studs/index");
+  const indexFileDir = path.join(PKG_ROOT, "template/extras/src/pages/index");
 
-  const usingTrpc = packages.trpc.inUse;
+  const usingTRPC = packages.trpc.inUse;
   const usingTw = packages.tailwind.inUse;
   const usingAuth = packages.nextAuth.inUse;
 
   let indexFile = "";
-  if (usingTrpc && usingTw && usingAuth) {
+  if (usingTRPC && usingTw && usingAuth) {
     indexFile = "with-auth-trpc-tw.tsx";
-  } else if (usingTrpc && !usingTw && usingAuth) {
+  } else if (usingTRPC && !usingTw && usingAuth) {
     indexFile = "with-auth-trpc.tsx";
-  } else if (usingTrpc && usingTw) {
+  } else if (usingTRPC && usingTw) {
     indexFile = "with-trpc-tw.tsx";
-  } else if (usingTrpc && !usingTw) {
+  } else if (usingTRPC && !usingTw) {
     indexFile = "with-trpc.tsx";
-  } else if (!usingTrpc && usingTw) {
+  } else if (!usingTRPC && usingTw) {
     indexFile = "with-tw.tsx";
   }
 

cli/src/installers/envVars.ts

@@ -7,70 +7,71 @@ export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
   const usingAuth = packages?.nextAuth.inUse;
   const usingPrisma = packages?.prisma.inUse;
 
-  const envAssetDir = path.join(PKG_ROOT, "template/addons/env");
+  const envContent = getEnvContent(!!usingAuth, !!usingPrisma);
 
-  let envSchemaFile = "";
-  let envContent =
-    "# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly\n";
+  const envSchemaFile =
+    usingAuth && usingPrisma
+      ? "with-auth-prisma.mjs"
+      : usingAuth
+      ? "with-auth.mjs"
+      : usingPrisma
+      ? "with-prisma.mjs"
+      : "";
 
-  switch (true) {
-    case usingAuth && usingPrisma:
-      envSchemaFile = "auth-prisma-schema.mjs";
-      break;
-    case usingAuth:
-      envSchemaFile = "auth-schema.mjs";
-      break;
-    case usingPrisma:
-      envSchemaFile = "prisma-schema.mjs";
-      break;
+  if (envSchemaFile !== "") {
+    const envSchemaSrc = path.join(
+      PKG_ROOT,
+      "template/extras/src/env/schema",
+      envSchemaFile,
+    );
+    const envSchemaDest = path.join(projectDir, "src/env/schema.mjs");
+    fs.copySync(envSchemaSrc, envSchemaDest);
   }
 
-  if (usingPrisma) {
-    envContent += `
+  const envDest = path.join(projectDir, ".env");
+  const envExampleDest = path.join(projectDir, ".env.example");
+
+  fs.writeFileSync(envDest, envContent, "utf-8");
+  fs.writeFileSync(envExampleDest, exampleEnvContent + envContent, "utf-8");
+};
+
+const getEnvContent = (usingAuth: boolean, usingPrisma: boolean) => {
+  let content =
+    "# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly";
+
+  if (usingPrisma)
+    content += `
 # Prisma
 DATABASE_URL=file:./db.sqlite
 `;
-  }
-  if (usingAuth) {
-    envContent += `
+
+  if (usingAuth)
+    content += `
 # Next Auth
 # You can generate the secret via 'openssl rand -base64 32' on Linux
 # More info: https://next-auth.js.org/configuration/options#secret
-# NEXTAUTH_SECRET=
+# NEXTAUTH
 NEXTAUTH_URL=http://localhost:3000
 
 # Next Auth Discord Provider
 DISCORD_CLIENT_ID=
 DISCORD_CLIENT_SECRET=
 `;
-  }
 
-  if (!envSchemaFile) {
-    envContent += `
+  if (!usingAuth && !usingPrisma)
+    content += `
 # Example:
 # SERVERVAR=foo
 # NEXT_PUBLIC_CLIENTVAR=bar
 `;
-  }
 
-  const envExampleContent =
-    `# Since .env is gitignored, you can use .env.example to build a new \`.env\` file when you clone the repo.
+  return content;
+};
+
+const exampleEnvContent = `# Since .env is gitignored, you can use .env.example to build a new \`.env\` file when you clone the repo.
 # Keep this file up-to-date when you add new variables to \`.env\`.
 
 # This file will be committed to version control, so make sure not to have any secrets in it.
 # If you are cloning this repo, create a copy of this file named \`.env\` and populate it with your secrets.
 
-` + envContent;
-
-  if (envSchemaFile) {
-    const envSchemaSrc = path.join(envAssetDir, envSchemaFile);
-    const envSchemaDest = path.join(projectDir, "src/env/schema.mjs");
-    fs.copySync(envSchemaSrc, envSchemaDest);
-  }
-
-  const envDest = path.join(projectDir, ".env");
-  const envExampleDest = path.join(projectDir, ".env.example");
-
-  fs.writeFileSync(envDest, envContent, "utf-8");
-  fs.writeFileSync(envExampleDest, envExampleContent, "utf-8");
-};
+`;

cli/src/installers/index.ts

@@ -22,12 +22,12 @@ export type AvailablePackages = typeof availablePackages[number];
  */
 export const dependencyVersionMap = {
   // NextAuth.js
-  "next-auth": "^4.18.3",
+  "next-auth": "^4.18.7",
   "@next-auth/prisma-adapter": "^1.0.5",
 
   // Prisma
-  prisma: "^4.5.0",
-  "@prisma/client": "^4.5.0",
+  prisma: "^4.8.0",
+  "@prisma/client": "^4.8.0",
 
   // TailwindCSS
   tailwindcss: "^3.2.0",
@@ -38,11 +38,11 @@ export const dependencyVersionMap = {
   "@types/prettier": "^2.7.2",
 
   // tRPC
-  "@trpc/client": "^10.0.0",
-  "@trpc/server": "^10.0.0",
-  "@trpc/react-query": "^10.0.0",
-  "@trpc/next": "^10.0.0",
-  "@tanstack/react-query": "^4.16.0",
+  "@trpc/client": "^10.7.0",
+  "@trpc/server": "^10.7.0",
+  "@trpc/react-query": "^10.7.0",
+  "@trpc/next": "^10.7.0",
+  "@tanstack/react-query": "^4.20.0",
   superjson: "1.9.1",
 } as const;
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

cli/src/installers/nextAuth.ts

@@ -14,40 +14,25 @@ export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
     devMode: false,
   });
 
-  const nextAuthAssetDir = path.join(PKG_ROOT, "template/addons/next-auth");
+  const extrasDir = path.join(PKG_ROOT, "template/extras");
 
   const apiHandlerSrc = path.join(
-    nextAuthAssetDir,
-    packages?.prisma.inUse ? "api-handler-prisma.ts" : "api-handler.ts",
+    extrasDir,
+    "src/pages/api/auth/[...nextauth]",
+    packages?.prisma.inUse ? "with-prisma.ts" : "base.ts",
   );
   const apiHandlerDest = path.join(
     projectDir,
     "src/pages/api/auth/[...nextauth].ts",
   );
 
-  const getServerAuthSessionSrc = path.join(
-    nextAuthAssetDir,
-    "get-server-auth-session.ts",
-  );
-  const getServerAuthSessionDest = path.join(
-    projectDir,
-    "src/server/common/get-server-auth-session.ts",
-  );
-
-  const restrictedApiSrc = path.join(nextAuthAssetDir, "restricted.ts");
-  const restrictedApiDest = path.join(
-    projectDir,
-    "src/pages/api/restricted.ts",
-  );
+  const getServerAuthSessionSrc = path.join(extrasDir, "src/server/auth.ts");
+  const getServerAuthSessionDest = path.join(projectDir, "src/server/auth.ts");
 
-  const nextAuthDefinitionSrc = path.join(nextAuthAssetDir, "next-auth.d.ts");
-  const nextAuthDefinitionDest = path.join(
-    projectDir,
-    "src/types/next-auth.d.ts",
-  );
+  const nextAuthDTSSrc = path.join(extrasDir, "src/types/next-auth.d.ts");
+  const nextAuthDTSDest = path.join(projectDir, "src/types/next-auth.d.ts");
 
   fs.copySync(apiHandlerSrc, apiHandlerDest);
   fs.copySync(getServerAuthSessionSrc, getServerAuthSessionDest);
-  fs.copySync(restrictedApiSrc, restrictedApiDest);
-  fs.copySync(nextAuthDefinitionSrc, nextAuthDefinitionDest);
+  fs.copySync(nextAuthDTSSrc, nextAuthDTSDest);
 };

cli/src/installers/prisma.ts

@@ -17,19 +17,17 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
     devMode: false,
   });
 
-  const prismaAssetDir = path.join(PKG_ROOT, "template/addons/prisma");
+  const extrasDir = path.join(PKG_ROOT, "template/extras");
 
   const schemaSrc = path.join(
-    prismaAssetDir,
-    packages?.nextAuth.inUse ? "auth-schema.prisma" : "schema.prisma",
+    extrasDir,
+    "prisma/schema",
+    packages?.nextAuth.inUse ? "with-auth.prisma" : "base.prisma",
   );
   const schemaDest = path.join(projectDir, "prisma/schema.prisma");
 
-  const clientSrc = path.join(prismaAssetDir, "client.ts");
-  const clientDest = path.join(projectDir, "src/server/db/client.ts");
-
-  const sampleApiRouteSrc = path.join(prismaAssetDir, "sample-api.ts");
-  const sampleApiRouteDest = path.join(projectDir, "src/pages/api/examples.ts");
+  const clientSrc = path.join(extrasDir, "src/server/db.ts");
+  const clientDest = path.join(projectDir, "src/server/db.ts");
 
   // add postinstall script to package.json
   const packageJsonPath = path.join(projectDir, "package.json");
@@ -39,7 +37,6 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
 
   fs.copySync(schemaSrc, schemaDest);
   fs.copySync(clientSrc, clientDest);
-  fs.copySync(sampleApiRouteSrc, sampleApiRouteDest);
   fs.writeJSONSync(packageJsonPath, packageJsonContent, {
     spaces: 2,
   });

cli/src/installers/tailwind.ts

@@ -18,25 +18,26 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
     devMode: true,
   });
 
-  const twAssetDir = path.join(PKG_ROOT, "template/addons/tailwind");
+  const extrasDir = path.join(PKG_ROOT, "template/extras");
 
-  const twCfgSrc = path.join(twAssetDir, "tailwind.config.cjs");
+  const twCfgSrc = path.join(extrasDir, "config/tailwind.config.cjs");
   const twCfgDest = path.join(projectDir, "tailwind.config.cjs");
 
-  const postcssCfgSrc = path.join(twAssetDir, "postcss.config.cjs");
+  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.cjs");
   const postcssCfgDest = path.join(projectDir, "postcss.config.cjs");
 
-  const prettierSrc = path.join(twAssetDir, "prettier.config.cjs");
+  const prettierSrc = path.join(extrasDir, "config/prettier.config.cjs");
   const prettierDest = path.join(projectDir, "prettier.config.cjs");
 
-  const cssSrc = path.join(twAssetDir, "globals.css");
+  const cssSrc = path.join(extrasDir, "src/styles/globals.css");
   const cssDest = path.join(projectDir, "src/styles/globals.css");
 
-  const indexModuleCss = path.join(projectDir, "src/pages/index.module.css");
-
   fs.copySync(twCfgSrc, twCfgDest);
   fs.copySync(postcssCfgSrc, postcssCfgDest);
   fs.copySync(cssSrc, cssDest);
-  fs.unlinkSync(indexModuleCss);
   fs.copySync(prettierSrc, prettierDest);
+
+  // Remove vanilla css file
+  const indexModuleCss = path.join(projectDir, "src/pages/index.module.css");
+  fs.unlinkSync(indexModuleCss);
 };