add well known plugin to all exercises, fix CI

AlemTuzlak · AlemTuzlak · commit 07bacec6039e · 2025-11-04T14:58:31.000+01:00
diff --git a/epicshop/setup-custom.js b/epicshop/setup-custom.js
@@ -48,3 +48,22 @@ if (!process.env.SKIP_PLAYGROUND) {
 		)
 	}
 }
+if (!process.env.SKIP_PRISMA) {
+	console.log(`🏗  generating prisma client in all ${allApps.length} apps...`)
+	for (const app of allApps) {
+		const prismaDir = path.join(app.fullPath, 'prisma')
+		try {
+			if (await fsExtra.exists(prismaDir)) {
+				if (await fsExtra.exists(path.join(prismaDir, 'sql'))) {
+					await $({ cwd: app.fullPath, all: true })`prisma generate --sql`
+				} else {
+					await $({ cwd: app.fullPath, all: true })`prisma generate`
+				}
+			}
+		} catch (prismaGenerateResult) {
+			console.log(prismaGenerateResult.all)
+			throw new Error(`❌  prisma generate failed in ${app.relativePath}`)
+		}
+	}
+	console.log('✅ prisma client generated')
+}
diff --git a/exercises/01.routing/01.problem.routing/package.json b/exercises/01.routing/01.problem.routing/package.json
@@ -32,6 +32,7 @@
     "dotenv": "^16.3.1",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/01.routing/01.problem.routing/vite.config.ts b/exercises/01.routing/01.problem.routing/vite.config.ts
@@ -1,9 +1,10 @@
 import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [tailwindcss(), reactRouter()],
+	plugins: [tailwindcss(), reactRouter(), devtoolsJson()],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/01.routing/01.solution.routing/package.json b/exercises/01.routing/01.solution.routing/package.json
@@ -32,6 +32,7 @@
     "dotenv": "^16.3.1",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/01.routing/01.solution.routing/vite.config.ts b/exercises/01.routing/01.solution.routing/vite.config.ts
@@ -1,9 +1,10 @@
 import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [tailwindcss(), reactRouter()],
+	plugins: [tailwindcss(), reactRouter(), devtoolsJson()],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/01.routing/02.problem.automatic-routing/package.json b/exercises/01.routing/02.problem.automatic-routing/package.json
@@ -33,6 +33,7 @@
     "dotenv": "^16.3.1",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/01.routing/02.problem.automatic-routing/vite.config.ts b/exercises/01.routing/02.problem.automatic-routing/vite.config.ts
@@ -1,9 +1,10 @@
 import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [tailwindcss(), reactRouter()],
+	plugins: [tailwindcss(), reactRouter(), devtoolsJson()],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/01.routing/02.solution.automatic-routing/package.json b/exercises/01.routing/02.solution.automatic-routing/package.json
@@ -33,6 +33,7 @@
     "dotenv": "^16.3.1",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/01.routing/02.solution.automatic-routing/vite.config.ts b/exercises/01.routing/02.solution.automatic-routing/vite.config.ts
@@ -1,9 +1,10 @@
 import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [tailwindcss(), reactRouter()],
+	plugins: [tailwindcss(), reactRouter(), devtoolsJson()],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/01.problem.styling/package.json b/exercises/02.metadata/01.problem.styling/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/01.problem.styling/vite.config.ts b/exercises/02.metadata/01.problem.styling/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/01.solution.styling/package.json b/exercises/02.metadata/01.solution.styling/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/01.solution.styling/vite.config.ts b/exercises/02.metadata/01.solution.styling/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/02.problem.titles-react/README.mdx b/exercises/02.metadata/02.problem.titles-react/README.mdx
@@ -41,7 +41,6 @@ which would produce the following HTML:
 
 Now that you understand how the hoisting mechanism works, let's see how we can use
 this to our advantage by adding titles to our pages using React.
- 
 
 📜 https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags
 
diff --git a/exercises/02.metadata/02.problem.titles-react/package.json b/exercises/02.metadata/02.problem.titles-react/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/02.problem.titles-react/vite.config.ts b/exercises/02.metadata/02.problem.titles-react/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/02.solution.titles-react/package.json b/exercises/02.metadata/02.solution.titles-react/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/02.solution.titles-react/vite.config.ts b/exercises/02.metadata/02.solution.titles-react/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/03.problem.titles-with-meta/package.json b/exercises/02.metadata/03.problem.titles-with-meta/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/03.problem.titles-with-meta/vite.config.ts b/exercises/02.metadata/03.problem.titles-with-meta/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/02.metadata/03.solution.titles-with-meta/package.json b/exercises/02.metadata/03.solution.titles-with-meta/package.json
@@ -34,6 +34,7 @@
     "react-router-devtools": "^5.1.3",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/02.metadata/03.solution.titles-with-meta/vite.config.ts b/exercises/02.metadata/03.solution.titles-with-meta/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/03.data-fetching/01.problem.fetching-with-loaders/README.mdx b/exercises/03.data-fetching/01.problem.fetching-with-loaders/README.mdx
@@ -47,7 +47,7 @@ a different concept of data fetching with loaders:
 
 1. **Basic Data Fetching**: In the first route, we will implement a simple loader that fetches
    all products from the database and displays them on the page. This will help you understand
-   the basics of setting up a loader and using the fetched data in your components.  (`_landing._index.route.tsx`)
+   the basics of setting up a loader and using the fetched data in your components. (`_landing._index.route.tsx`)
 2. **Using URL Parameters**: The second route will introduce URL parameters. We will create a loader
    that fetches a product based on the ID provided in the URL. This will teach you how to read
    URL parameters in loaders and use them to fetch specific data. (`_landing.products.$productId.route.tsx`)
diff --git a/exercises/03.data-fetching/01.problem.fetching-with-loaders/package.json b/exercises/03.data-fetching/01.problem.fetching-with-loaders/package.json
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.1.4",
     "tsx": "^4.20.5",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/03.data-fetching/01.problem.fetching-with-loaders/vite.config.ts b/exercises/03.data-fetching/01.problem.fetching-with-loaders/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/03.data-fetching/01.solution.fetching-with-loaders/package.json b/exercises/03.data-fetching/01.solution.fetching-with-loaders/package.json
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.1.4",
     "tsx": "^4.20.5",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/03.data-fetching/01.solution.fetching-with-loaders/vite.config.ts b/exercises/03.data-fetching/01.solution.fetching-with-loaders/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/03.data-fetching/02.problem.search-with-url/README.mdx b/exercises/03.data-fetching/02.problem.search-with-url/README.mdx
@@ -44,4 +44,4 @@ Then on the `_landing.products._index/route.tsx` route, we will read the search
 from the URL and filter the list of products based on the search term.
 
 Finally from there we will update the `getProducts` function in `products.server.ts` to accept a search filter
-and return only products that match the search term.
+and return only products that match the search term.
diff --git a/exercises/03.data-fetching/02.problem.search-with-url/package.json b/exercises/03.data-fetching/02.problem.search-with-url/package.json
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.1.4",
     "tsx": "^4.20.5",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/03.data-fetching/02.problem.search-with-url/vite.config.ts b/exercises/03.data-fetching/02.problem.search-with-url/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/03.data-fetching/02.solution.search-with-url/package.json b/exercises/03.data-fetching/02.solution.search-with-url/package.json
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.1.4",
     "tsx": "^4.20.5",
     "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }
diff --git a/exercises/03.data-fetching/02.solution.search-with-url/vite.config.ts b/exercises/03.data-fetching/02.solution.search-with-url/vite.config.ts
@@ -2,9 +2,15 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
 export default defineConfig({
-	plugins: [reactRouterDevTools(), tailwindcss(), reactRouter()],
+	plugins: [
+		reactRouterDevTools(),
+		tailwindcss(),
+		reactRouter(),
+		devtoolsJson(),
+	],
 	server: {
 		port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
 	},
diff --git a/exercises/03.data-fetching/03.problem.filtering-and-pagination/package.json b/exercises/03.data-fetching/03.problem.filtering-and-pagination/package.json
diff --git a/exercises/03.data-fetching/03.problem.filtering-and-pagination/vite.config.ts b/exercises/03.data-fetching/03.problem.filtering-and-pagination/vite.config.ts
diff --git a/exercises/03.data-fetching/03.solution.filtering-and-pagination/package.json b/exercises/03.data-fetching/03.solution.filtering-and-pagination/package.json
diff --git a/exercises/03.data-fetching/03.solution.filtering-and-pagination/vite.config.ts b/exercises/03.data-fetching/03.solution.filtering-and-pagination/vite.config.ts
diff --git a/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/package.json b/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/package.json
diff --git a/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/vite.config.ts b/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/vite.config.ts
diff --git a/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/package.json b/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/package.json
diff --git a/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/vite.config.ts b/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/vite.config.ts
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@`
`32`	`32`	`"dotenv": "^16.3.1",`
`33`	`33`	`"tailwindcss": "^4.1.4",`
`34`	`34`	`"typescript": "^5.8.3",`
`35`		`- "vite": "^6.3.3"`
	`35`	`+ "vite": "^6.3.3",`
	`36`	`+ "vite-plugin-devtools-json": "^1.0.0"`
`36`	`37`	`}`
`37`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@`
`33`	`33`	`"dotenv": "^16.3.1",`
`34`	`34`	`"tailwindcss": "^4.1.4",`
`35`	`35`	`"typescript": "^5.8.3",`
`36`		`- "vite": "^6.3.3"`
	`36`	`+ "vite": "^6.3.3",`
	`37`	`+ "vite-plugin-devtools-json": "^1.0.0"`
`37`	`38`	`}`
`38`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@`
`34`	`34`	`"react-router-devtools": "^5.1.3",`
`35`	`35`	`"tailwindcss": "^4.1.4",`
`36`	`36`	`"typescript": "^5.8.3",`
`37`		`- "vite": "^6.3.3"`
	`37`	`+ "vite": "^6.3.3",`
	`38`	`+ "vite-plugin-devtools-json": "^1.0.0"`
`38`	`39`	`}`
`39`	`40`	`}`