Use @codecompose/typescript-config

.prettierignore

@@ -1 +1,2 @@
 pnpm-lock.yaml
+pnpm-workspace.yaml

apps/web/.prettierignore

@@ -0,0 +1,2 @@
+.next
+public

apps/web/components.json

@@ -5,12 +5,12 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "app/globals.css",
+    "css": "src/app/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },
   "aliases": {
     "components": "~/components",
     "utils": "~/lib/utils"
   }
-}
+}

apps/web/package.json

@@ -31,6 +31,7 @@
     "typescript": "^5.6.3"
   },
   "devDependencies": {
+    "@codecompose/typescript-config": "^1.1.3",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "autoprefixer": "^10.4.20",

apps/web/app/components/card-with-action.tsx → apps/web/src/app/components/card-with-action.tsx

@@ -1,12 +1,12 @@
-import { Button } from "~/components/ui/button.jsx";
+import { Button } from "~/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "~/components/ui/card.jsx";
+} from "~/components/ui/card";
 
 export default function CardWithAction(props: {
   title: string;

apps/web/app/components/counter-view.tsx → apps/web/src/app/components/counter-view.tsx

@@ -1,8 +1,8 @@
 import type { Counter } from "@repo/common";
 import { doc } from "firebase/firestore";
-import { useTypedDocument } from "~/lib/firestore.js";
-import { refs } from "~/refs.js";
-import KeyValueList from "./key-value-list.jsx";
+import { useTypedDocument } from "~/lib/firestore";
+import { refs } from "~/refs";
+import KeyValueList from "./key-value-list";
 
 export function CounterView(props: { counterId: string }) {
   const [counter, isLoading] = useTypedDocument<Counter>(

apps/web/app/components/key-value-list.tsx → apps/web/src/app/components/key-value-list.tsx

@@ -1,12 +1,7 @@
 import type { FsTimestamp } from "@repo/common";
 import { isDefined } from "@repo/common";
 import { Timestamp } from "firebase/firestore";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-} from "~/components/ui/table.jsx";
+import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
 
 type FsValue = string | number | boolean | null | FsTimestamp;
 

apps/web/app/page.tsx → apps/web/src/app/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { areWeThereYet } from "@repo/common";
-import { CardDescription } from "~/components/ui/card.jsx";
-import { add, multiply, reset } from "~/lib/api.js";
-import CardWithAction from "./components/card-with-action.jsx";
-import { CounterView } from "./components/counter-view.jsx";
+import { CardDescription } from "~/components/ui/card";
+import { add, multiply, reset } from "~/lib/api";
+import CardWithAction from "./components/card-with-action";
+import { CounterView } from "./components/counter-view";
 
 export default function Home() {
   return (

apps/web/components/ui/button.tsx → apps/web/src/components/ui/button.tsx

@@ -1,8 +1,7 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
-
-import { cn } from "~/lib/utils.js";
+import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300",

apps/web/components/ui/card.tsx → apps/web/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "~/lib/utils.js";
+import { cn } from "~/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,

apps/web/components/ui/table.tsx → apps/web/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "~/lib/utils.js";
+import { cn } from "~/lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,

apps/web/src/lib/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./cn";
+export * from "./fetch";

apps/web/refs.ts → apps/web/src/refs.ts

@@ -1,5 +1,5 @@
 import { collection } from "firebase/firestore";
-import { db } from "~/lib/firebase.js";
+import { db } from "~/lib/firebase";
 
 export const refs = {
   counters: collection(db, "counters"),

apps/web/tailwind.config.cjs

@@ -1,7 +1,7 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
+  content: ["./src/components/**/*.{ts,tsx}", "./src/app/**/*.{ts,tsx}"],
   theme: {
     container: {
       center: true,

apps/web/tsconfig.json

@@ -1,27 +1,9 @@
 {
-  "compilerOptions": {
-    "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "~/*": ["./*"]
+  "extends": "@codecompose/typescript-config/nextjs.json",
+  "include": ["src", ".next/types/**/*.ts"],
+  "references": [
+    {
+      "path": "../../packages/common"
     }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  ]
 }

packages/backend/package.json

@@ -26,6 +26,7 @@
     "firebase-functions": "^5.1.1"
   },
   "devDependencies": {
+    "@codecompose/typescript-config": "^1.1.3",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/node": "^22.7.5",

packages/backend/src/firebase.ts

@@ -9,7 +9,6 @@ export type { Firestore } from "firebase-admin/firestore";
 
 export type { UpdateData } from "firebase-admin/firestore";
 
-
 if (!admin.apps.length) {
   admin.initializeApp();
 

packages/backend/src/index.ts

@@ -1,3 +1,2 @@
-export type * from './firebase';
-export type * from './utils/index.js';
-
+export type * from "./firebase";
+export type * from "./utils/index.js";

packages/backend/src/utils/index.ts

@@ -1,3 +1,3 @@
-export * from "./assertions.js";
-export * from "./timer.js";
+export * from "./assertions";
+export * from "./timer";
 // Compare this snippet from packages/backend/src/utils/index.ts:

packages/backend/tsconfig.json

@@ -1,13 +1,8 @@
 {
-  "extends": "@repo/typescript-config/library.json",
-  "compilerOptions": {
-    "target": "esnext",
-    "rootDir": "src",
-    "outDir": "dist",
-    "composite": true,
-    "paths": {
-      "~/*": ["./*"]
+  "extends": "@codecompose/typescript-config/library.json",
+  "references": [
+    {
+      "path": "../common"
     }
-  },
-  "include": ["src"]
+  ]
 }

packages/backend/tsup.config.ts

@@ -8,9 +8,7 @@ export default defineConfig({
      */
     "utils/index": "src/utils/index.ts",
 
-    /**
-     * Files
-     */
+    /** Files */
     firebase: "src/firebase.ts",
   },
   format: ["esm"],

packages/common/package.json

@@ -22,6 +22,7 @@
     "remeda": "^2.15.0"
   },
   "devDependencies": {
+    "@codecompose/typescript-config": "^1.1.3",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "eslint": "^8.57.1",

packages/common/src/document-types.ts

@@ -1,6 +1,4 @@
-/**
- * This file contains Firestore document types
- */
+/** This file contains Firestore document types */
 
 import type { Timestamp } from "firebase/firestore";
 

packages/common/src/index.ts

@@ -1,3 +1,3 @@
-export * from "./are-we-there-yet.js";
-export * from "./document-types.js";
-export * from "./utils/index.js";
+export * from "./are-we-there-yet";
+export * from "./document-types";
+export * from "./utils";

packages/common/src/utils/index.ts

@@ -1,5 +1,5 @@
-export * from "./get-error-message.js";
-export * from "./invariant.js";
-export * from "./is-empty.js";
-export * from "./is-present.js";
-export * from "./unique.js";
+export * from "./get-error-message";
+export * from "./invariant";
+export * from "./is-empty";
+export * from "./is-present";
+export * from "./unique";

packages/common/src/utils/is-empty.ts

@@ -1,5 +1,6 @@
 /**
- * Arrays only. Typically isEmpty does more than that, but we don't need it here.
+ * Arrays only. Typically isEmpty does more than that, but we don't need it
+ * here.
  */
 export function isEmpty<T>(array: T[]): array is [] {
   return array.length === 0;

packages/common/src/utils/is-present.ts

@@ -1,6 +1,4 @@
-/**
- * Copied from ts-is-present
- */
+/** Copied from ts-is-present */
 export function isPresent<T>(t: T | undefined | null | void): t is T {
   return t !== undefined && t !== null;
 }

packages/common/tsconfig.json

@@ -1,10 +1,3 @@
 {
-  "extends": "@repo/typescript-config/library.json",
-  "compilerOptions": {
-    "target": "esnext",
-    "rootDir": "src",
-    "outDir": "dist",
-    "composite": true
-  },
-  "include": ["src"]
+  "extends": "@codecompose/typescript-config/library.json"
 }

packages/eslint-config/package.json

@@ -9,6 +9,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@codecompose/typescript-config": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
     "@vercel/style-guide": "^6.0.0",