feat: switch config files from .js to .mjs, env.js to env.ts and next.config.js to next.config.ts

.changeset/nasty-news-sing.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+Switched most .js config files to .mjs, env.js files to env.ts and next.config.js to next.config.ts, following the new convention from create-next-app

cli/src/helpers/createProject.ts

@@ -64,8 +64,8 @@ export const createProject = async ({
   if (appRouter) {
     // Replace next.config
     fs.copyFileSync(
-      path.join(PKG_ROOT, "template/extras/config/next-config-appdir.js"),
-      path.join(projectDir, "next.config.js")
+      path.join(PKG_ROOT, "template/extras/config/next-config-appdir.ts"),
+      path.join(projectDir, "next.config.ts")
     );
 
     selectLayoutFile({ projectDir, packages });

cli/src/installers/envVars.ts

@@ -29,14 +29,14 @@ export const envVariablesInstaller: Installer = ({
   let envFile = "";
   if (usingDb) {
     if (usingPlanetScale) {
-      if (usingAuth) envFile = "with-auth-db-planetscale.js";
-      else envFile = "with-db-planetscale.js";
+      if (usingAuth) envFile = "with-auth-db-planetscale.ts";
+      else envFile = "with-db-planetscale.ts";
     } else {
-      if (usingAuth) envFile = "with-auth-db.js";
-      else envFile = "with-db.js";
+      if (usingAuth) envFile = "with-auth-db.ts";
+      else envFile = "with-db.ts";
     }
   } else {
-    if (usingAuth) envFile = "with-auth.js";
+    if (usingAuth) envFile = "with-auth.ts";
   }
 
   if (envFile !== "") {
@@ -45,7 +45,7 @@ export const envVariablesInstaller: Installer = ({
       "template/extras/src/env",
       envFile
     );
-    const envSchemaDest = path.join(projectDir, "src/env.js");
+    const envSchemaDest = path.join(projectDir, "src/env.ts");
     fs.copyFileSync(envSchemaSrc, envSchemaDest);
   }
 
@@ -75,7 +75,7 @@ const getEnvContent = (
   scopedAppName: string
 ) => {
   let content = `
-# When adding additional environment variables, the schema in "/src/env.js"
+# When adding additional environment variables, the schema in "/src/env.ts"
 # should be updated accordingly.
 `
     .trim()

cli/src/installers/eslint.ts

@@ -34,11 +34,11 @@ export const dynamicEslintInstaller: Installer = ({ projectDir, packages }) => {
   // Prettier
   let prettierSrc: string;
   if (packages?.tailwind.inUse) {
-    prettierSrc = path.join(extrasDir, "config/_tailwind.prettier.config.js");
+    prettierSrc = path.join(extrasDir, "config/_tailwind.prettier.config.mjs");
   } else {
-    prettierSrc = path.join(extrasDir, "config/_prettier.config.js");
+    prettierSrc = path.join(extrasDir, "config/_prettier.config.mjs");
   }
-  const prettierDest = path.join(projectDir, "prettier.config.js");
+  const prettierDest = path.join(projectDir, "prettier.config.mjs");
 
   fs.copySync(prettierSrc, prettierDest);
 
@@ -57,9 +57,9 @@ export const dynamicEslintInstaller: Installer = ({ projectDir, packages }) => {
   const usingDrizzle = !!packages?.drizzle?.inUse;
   const eslintConfigSrc = path.join(
     extrasDir,
-    usingDrizzle ? "config/_eslint.drizzle.js" : "config/_eslint.base.js"
+    usingDrizzle ? "config/_eslint.drizzle.mjs" : "config/_eslint.base.mjs"
   );
-  const eslintConfigDest = path.join(projectDir, "eslint.config.js");
+  const eslintConfigDest = path.join(projectDir, "eslint.config.mjs");
 
   fs.copySync(eslintConfigSrc, eslintConfigDest);
 };

cli/src/installers/tailwind.ts

@@ -14,8 +14,8 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
 
   const extrasDir = path.join(PKG_ROOT, "template/extras");
 
-  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.js");
-  const postcssCfgDest = path.join(projectDir, "postcss.config.js");
+  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.mjs");
+  const postcssCfgDest = path.join(projectDir, "postcss.config.mjs");
 
   const cssSrc = path.join(extrasDir, "src/styles/globals.css");
   const cssDest = path.join(projectDir, "src/styles/globals.css");

cli/template/base/next.config.js → cli/template/base/next.config.ts

@@ -2,10 +2,11 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-import "./src/env.js";
+import { type NextConfig } from "next";
 
-/** @type {import("next").NextConfig} */
-const config = {
+import "./src/env";
+
+const nextConfig: NextConfig = {
   reactStrictMode: true,
 
   /**
@@ -19,4 +20,4 @@ const config = {
   },
 };
 
-export default config;
+export default nextConfig;

cli/template/base/tsconfig.json

@@ -31,12 +31,10 @@
     }
   },
   "include": [
-    ".eslintrc.cjs",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "**/*.cjs",
-    "**/*.js",
+    "**/*.mjs",
     ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules"]

cli/template/extras/config/_eslint.base.mjs

@@ -0,0 +1,48 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default tseslint.config(
+  {
+    ignores: [".next"],
+  },
+  ...compat.extends("next/core-web-vitals"),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    rules: {
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        { checksVoidReturn: { attributes: false } },
+      ],
+    },
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  }
+);

cli/template/extras/config/_eslint.drizzle.mjs

@@ -0,0 +1,61 @@
+import { FlatCompat } from "@eslint/eslintrc";
+// @ts-ignore -- no types for this plugin
+import drizzle from "eslint-plugin-drizzle";
+import tseslint from "typescript-eslint";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default tseslint.config(
+  {
+    ignores: [".next"],
+  },
+  ...compat.extends("next/core-web-vitals"),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    plugins: {
+      drizzle,
+    },
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    rules: {
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        { checksVoidReturn: { attributes: false } },
+      ],
+      "drizzle/enforce-delete-with-where": [
+        "error",
+        { drizzleObjectName: ["db", "ctx.db"] },
+      ],
+      "drizzle/enforce-update-with-where": [
+        "error",
+        { drizzleObjectName: ["db", "ctx.db"] },
+      ],
+    },
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  }
+);

cli/template/extras/config/_prettier.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('prettier').Config} */
+const config = {};
+
+export default config;

cli/template/extras/config/_tailwind.prettier.config.js → cli/template/extras/config/_tailwind.prettier.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-export default {
+const config = {
   plugins: ["prettier-plugin-tailwindcss"],
 };
+
+export default config;

cli/template/extras/config/next-config-appdir.ts

@@ -0,0 +1,13 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+import { type NextConfig } from "next";
+
+import "./src/env";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

cli/template/extras/config/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;