chore: update prettier and migrate to an esm config (t3-oss#1500)

* updated prettier and config * cjs -> ts * remove require resolve? * Revert "remove require resolve?" This reverts commit 86a6853. * upgraded monorepo * half working now * the state of this plugin * template * version map * trust issues * astro update * format changes * whoops * . * revert ian vs * cli formats it anyways * this fixed it? * . * yes * moved these back to then move them back * moved back * behond confusion * v? * surely this cant hurt * fixed?? * . * 🤡 * move back * cli: rename prettier config * imports * small tweaks * bump eslint-config-prettier version * oh lawd * re-write format functions as --check ---write breaks ivanas eslint stuff * we do a little quote * last formatting * bumped prettier-plugin-tailwindcss 0.4.1 -> 0.5.1 * formatting * we do a little tweak * more tweaking * reverse tweaking * added import thing * begone * :pog: * adjust regexp * formatted the rest of the repo * move config to sub configs --------- Co-authored-by: juliusmarminge <[email protected]>
ritmillio · Aug 10, 2023 · ea2a8c6 · ea2a8c6
1 parent 5559a42
commit ea2a8c6
Show file tree

Hide file tree

Showing 113 changed files with 1,078 additions and 764 deletions.
diff --git a/cli/.prettierrc.cjs b/cli/.prettierrc.cjs
diff --git a/cli/package.json b/cli/package.json
@@ -33,15 +33,15 @@
     "start": "node dist/index.js",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "pnpm lint --fix",
-    "format": "pnpm format:check --write",
-    "format:check": "pnpm prettier --plugin-search-dir=. **/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
+    "format": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
+    "format:check": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
     "release": "changeset version",
     "pub:beta": "pnpm build && npm publish --tag beta",
     "pub:next": "pnpm build && npm publish --tag next",
     "pub:release": "pnpm build && npm publish"
   },
   "dependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "chalk": "5.2.0",
     "commander": "^10.0.0",
     "execa": "^7.1.1",
@@ -65,8 +65,8 @@
     "@types/node": "^18.16.0",
     "next": "^13.4.1",
     "next-auth": "^4.22.1",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.1",
     "prisma": "^4.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/cli/prettier.config.mjs b/cli/prettier.config.mjs
@@ -0,0 +1,21 @@
+import baseConfig from "../prettier.config.mjs";
+
+/**
+ * @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options &
+ *       import("@ianvs/prettier-plugin-sort-imports").PluginConfig}
+ */
+const config = {
+  ...baseConfig,
+  arrowParens: "always",
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+  tailwindConfig: "./template/extras/config/tailwind.config.ts",
+  trailingComma: "es5",
+  importOrder: ["<THIRD_PARTY_MODULES>", "", "^~/", "^[../]", "^[./]"],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "4.4.0",
+};
+
+export default config;
diff --git a/cli/src/cli/index.ts b/cli/src/cli/index.ts
@@ -1,9 +1,12 @@
 import chalk from "chalk";
 import { Command } from "commander";
 import inquirer from "inquirer";
+
 import { CREATE_T3_APP, DEFAULT_APP_NAME } from "~/consts.js";
-import { type AvailablePackages } from "~/installers/index.js";
-import { availablePackages } from "~/installers/index.js";
+import {
+  availablePackages,
+  type AvailablePackages,
+} from "~/installers/index.js";
 import { getVersion } from "~/utils/getT3Version.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { IsTTYError } from "~/utils/isTTYError.js";

diff --git a/cli/src/helpers/createProject.ts b/cli/src/helpers/createProject.ts
@@ -1,4 +1,5 @@
 import path from "path";
+
 import { installPackages } from "~/helpers/installPackages.js";
 import { scaffoldProject } from "~/helpers/scaffoldProject.js";
 import { selectAppFile, selectIndexFile } from "~/helpers/selectBoilerplate.js";

diff --git a/cli/src/helpers/git.ts b/cli/src/helpers/git.ts
@@ -1,10 +1,11 @@
-import chalk from "chalk";
 import { execSync } from "child_process";
+import path from "path";
+import chalk from "chalk";
 import { execa } from "execa";
 import fs from "fs-extra";
 import inquirer from "inquirer";
 import ora from "ora";
-import path from "path";
+
 import { logger } from "~/utils/logger.js";
 
 const isGitInstalled = (dir: string): boolean => {

diff --git a/cli/src/helpers/installDependencies.ts b/cli/src/helpers/installDependencies.ts
@@ -1,6 +1,7 @@
 import chalk from "chalk";
 import { execa } from "execa";
 import ora, { type Ora } from "ora";
+
 import {
   getUserPkgManager,
   type PackageManager,

diff --git a/cli/src/helpers/installPackages.ts b/cli/src/helpers/installPackages.ts
@@ -1,5 +1,6 @@
 import chalk from "chalk";
 import ora from "ora";
+
 import {
   type InstallerOptions,
   type PkgInstallerMap,

diff --git a/cli/src/helpers/logNextSteps.ts b/cli/src/helpers/logNextSteps.ts
@@ -1,8 +1,8 @@
-import { isInsideGitRepo, isRootGitRepo } from "./git.js";
 import { DEFAULT_APP_NAME } from "~/consts.js";
 import { type InstallerOptions } from "~/installers/index.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";
+import { isInsideGitRepo, isRootGitRepo } from "./git.js";
 
 // This logs the next steps that the user should take in order to advance the project
 export const logNextSteps = async ({

diff --git a/cli/src/helpers/scaffoldProject.ts b/cli/src/helpers/scaffoldProject.ts
@@ -1,8 +1,9 @@
+import path from "path";
 import chalk from "chalk";
 import fs from "fs-extra";
 import inquirer from "inquirer";
 import ora from "ora";
-import path from "path";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type InstallerOptions } from "~/installers/index.js";
 import { logger } from "~/utils/logger.js";

diff --git a/cli/src/helpers/selectBoilerplate.ts b/cli/src/helpers/selectBoilerplate.ts
@@ -1,5 +1,6 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type InstallerOptions } from "~/installers/index.js";
 

diff --git a/cli/src/index.ts b/cli/src/index.ts
@@ -1,13 +1,8 @@
 #!/usr/bin/env node
-import { installDependencies } from "./helpers/installDependencies.js";
-import { getVersion } from "./utils/getT3Version.js";
-import {
-  getNpmVersion,
-  renderVersionWarning,
-} from "./utils/renderVersionWarning.js";
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
 import { type PackageJson } from "type-fest";
+
 import { runCli } from "~/cli/index.js";
 import { createProject } from "~/helpers/createProject.js";
 import { initializeGit } from "~/helpers/git.js";
@@ -17,6 +12,12 @@ import { buildPkgInstallerMap } from "~/installers/index.js";
 import { logger } from "~/utils/logger.js";
 import { parseNameAndPath } from "~/utils/parseNameAndPath.js";
 import { renderTitle } from "~/utils/renderTitle.js";
+import { installDependencies } from "./helpers/installDependencies.js";
+import { getVersion } from "./utils/getT3Version.js";
+import {
+  getNpmVersion,
+  renderVersionWarning,
+} from "./utils/renderVersionWarning.js";
 
 type CT3APackageJSON = PackageJson & {
   ct3aMetadata?: {

diff --git a/cli/src/installers/dependencyVersionMap.ts b/cli/src/installers/dependencyVersionMap.ts
@@ -15,9 +15,8 @@ export const dependencyVersionMap = {
   tailwindcss: "^3.3.3",
   autoprefixer: "^10.4.14",
   postcss: "^8.4.27",
-  prettier: "^2.8.8",
-  "prettier-plugin-tailwindcss": "^0.2.8",
-  "@types/prettier": "^2.7.2",
+  prettier: "^3.0.0",
+  "prettier-plugin-tailwindcss": "^0.5.1",
 
   // tRPC
   "@trpc/client": "^10.34.0",

diff --git a/cli/src/installers/envVars.ts b/cli/src/installers/envVars.ts
@@ -1,5 +1,6 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
 

diff --git a/cli/src/installers/nextAuth.ts b/cli/src/installers/nextAuth.ts
@@ -1,5 +1,6 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type AvailableDependencies } from "~/installers/dependencyVersionMap.js";
 import { type Installer } from "~/installers/index.js";

diff --git a/cli/src/installers/prisma.ts b/cli/src/installers/prisma.ts
@@ -1,6 +1,7 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
 import { type PackageJson } from "type-fest";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";

diff --git a/cli/src/installers/tailwind.ts b/cli/src/installers/tailwind.ts
@@ -1,5 +1,6 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
@@ -13,7 +14,6 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
       "autoprefixer",
       "prettier",
       "prettier-plugin-tailwindcss",
-      "@types/prettier",
     ],
     devMode: true,
   });
@@ -26,8 +26,8 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
   const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.cjs");
   const postcssCfgDest = path.join(projectDir, "postcss.config.cjs");
 
-  const prettierSrc = path.join(extrasDir, "config/prettier.config.cjs");
-  const prettierDest = path.join(projectDir, "prettier.config.cjs");
+  const prettierSrc = path.join(extrasDir, "config/_prettier.config.mjs");
+  const prettierDest = path.join(projectDir, "prettier.config.mjs");
 
   const cssSrc = path.join(extrasDir, "src/styles/globals.css");
   const cssDest = path.join(projectDir, "src/styles/globals.css");

diff --git a/cli/src/installers/trpc.ts b/cli/src/installers/trpc.ts
@@ -1,5 +1,6 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
+
 import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";

diff --git a/cli/src/utils/addPackageDependency.ts b/cli/src/utils/addPackageDependency.ts
@@ -1,7 +1,8 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
 import sortPackageJson from "sort-package-json";
 import { type PackageJson } from "type-fest";
+
 import {
   dependencyVersionMap,
   type AvailableDependencies,

diff --git a/cli/src/utils/getT3Version.ts b/cli/src/utils/getT3Version.ts
@@ -1,6 +1,7 @@
-import fs from "fs-extra";
 import path from "path";
+import fs from "fs-extra";
 import { type PackageJson } from "type-fest";
+
 import { PKG_ROOT } from "~/consts.js";
 
 export const getVersion = () => {

diff --git a/cli/src/utils/parseNameAndPath.ts b/cli/src/utils/parseNameAndPath.ts
@@ -1,6 +1,7 @@
-import { removeTrailingSlash } from "./removeTrailingSlash.js";
 import pathModule from "path";
 
+import { removeTrailingSlash } from "./removeTrailingSlash.js";
+
 /**
  * Parses the appName and its path from the user input.
  *

diff --git a/cli/src/utils/renderTitle.ts b/cli/src/utils/renderTitle.ts
@@ -1,4 +1,5 @@
 import gradient from "gradient-string";
+
 import { TITLE_TEXT } from "~/consts.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 

diff --git a/cli/src/utils/renderVersionWarning.ts b/cli/src/utils/renderVersionWarning.ts
@@ -1,8 +1,9 @@
-import { getVersion } from "./getT3Version.js";
-import { logger } from "./logger.js";
 import { execSync } from "child_process";
 import https from "https";
 
+import { getVersion } from "./getT3Version.js";
+import { logger } from "./logger.js";
+
 export const renderVersionWarning = (npmVersion: string) => {
   const currentVersion = getVersion();
 

diff --git a/cli/template/base/src/pages/_app.tsx b/cli/template/base/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import { type AppType } from "next/dist/shared/lib/utils";
+
 import "~/styles/globals.css";
 
 const MyApp: AppType = ({ Component, pageProps }) => {

diff --git a/cli/template/base/src/pages/index.tsx b/cli/template/base/src/pages/index.tsx
@@ -1,7 +1,8 @@
-import styles from "./index.module.css";
 import Head from "next/head";
 import Link from "next/link";
 
+import styles from "./index.module.css";
+
 export default function Home() {
   return (
     <>

diff --git a/cli/template/extras/config/_prettier.config.mjs b/cli/template/extras/config/_prettier.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;
diff --git a/cli/template/extras/config/prettier.config.cjs b/cli/template/extras/config/prettier.config.cjs
diff --git a/cli/template/extras/src/pages/_app/with-auth-trpc.tsx b/cli/template/extras/src/pages/_app/with-auth-trpc.tsx
@@ -1,7 +1,9 @@
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
+
 import { api } from "~/utils/api";
+
 import "~/styles/globals.css";
 
 const MyApp: AppType<{ session: Session | null }> = ({

diff --git a/cli/template/extras/src/pages/_app/with-auth.tsx b/cli/template/extras/src/pages/_app/with-auth.tsx
@@ -1,6 +1,7 @@
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
+
 import "~/styles/globals.css";
 
 const MyApp: AppType<{ session: Session | null }> = ({

diff --git a/cli/template/extras/src/pages/_app/with-trpc.tsx b/cli/template/extras/src/pages/_app/with-trpc.tsx
@@ -1,5 +1,7 @@
 import { type AppType } from "next/app";
+
 import { api } from "~/utils/api";
+
 import "~/styles/globals.css";
 
 const MyApp: AppType = ({ Component, pageProps }) => {

diff --git a/cli/template/extras/src/pages/api/auth/[...nextauth].ts b/cli/template/extras/src/pages/api/auth/[...nextauth].ts
@@ -1,4 +1,5 @@
 import NextAuth from "next-auth";
+
 import { authOptions } from "~/server/auth";
 
 export default NextAuth(authOptions);
diff --git a/cli/template/extras/src/pages/api/trpc/[trpc].ts b/cli/template/extras/src/pages/api/trpc/[trpc].ts
@@ -1,4 +1,5 @@
 import { createNextApiHandler } from "@trpc/server/adapters/next";
+
 import { env } from "~/env.mjs";
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";

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
@@ -1,6 +1,7 @@
 import { signIn, signOut, useSession } from "next-auth/react";
 import Head from "next/head";
 import Link from "next/link";
+
 import { api } from "~/utils/api";
 
 export default function Home() {
@@ -13,7 +14,7 @@ export default function Home() {
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+      <main className=" flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
         <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
           <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
             Create <span className="text-[hsl(280,100%,70%)]">T3</span> App

diff --git a/cli/template/extras/src/pages/index/with-auth-trpc.tsx b/cli/template/extras/src/pages/index/with-auth-trpc.tsx
@@ -1,8 +1,9 @@
-import styles from "./index.module.css";
 import { signIn, signOut, useSession } from "next-auth/react";
 import Head from "next/head";
 import Link from "next/link";
+
 import { api } from "~/utils/api";
+import styles from "./index.module.css";
 
 export default function Home() {
   const hello = api.example.hello.useQuery({ text: "from tRPC" });

diff --git a/cli/template/extras/src/pages/index/with-trpc-tw.tsx b/cli/template/extras/src/pages/index/with-trpc-tw.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import Link from "next/link";
+
 import { api } from "~/utils/api";
 
 export default function Home() {