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=https://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);
 };