Updated Remix Dev Tools to latest version (#353)

Author: AlemTuzlak

app/entry.client.tsx

@@ -8,6 +8,15 @@ if (ENV.MODE === 'development') {
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	import('~/utils/monitoring.client.tsx').then(({ init }) => init())
 }
-startTransition(() => {
-	hydrateRoot(document, <RemixBrowser />)
-})
+if (process.env.NODE_ENV === 'development') {
+	import('remix-development-tools').then(({ initRouteBoundariesClient }) => {
+		initRouteBoundariesClient()
+		startTransition(() => {
+			hydrateRoot(document, <RemixBrowser />)
+		})
+	})
+} else {
+	startTransition(() => {
+		hydrateRoot(document, <RemixBrowser />)
+	})
+}

app/entry.server.tsx

@@ -27,6 +27,13 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		remixContext,
 		loadContext,
 	] = args
+	const context =
+		process.env.NODE_ENV === 'development'
+			? await import('remix-development-tools').then(
+					({ initRouteBoundariesServer }) =>
+						initRouteBoundariesServer(remixContext),
+			  )
+			: remixContext
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
 	responseHeaders.set('fly-region', process.env.FLY_REGION ?? 'unknown')
 	responseHeaders.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')
@@ -47,7 +54,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer context={remixContext} url={request.url} />
+				<RemixServer context={context} url={request.url} />
 			</NonceProvider>,
 			{
 				[callbackName]: () => {

app/root.tsx

@@ -238,7 +238,7 @@ function App() {
 			<Toaster />
 			{RemixDevTools && (
 				<Suspense>
-					<RemixDevTools showRouteBoundaries />
+					<RemixDevTools />
 				</Suspense>
 			)}
 		</Document>

package-lock.json

@@ -137,7 +137,7 @@
     "prettier": "^2.8.8",
     "prettier-plugin-sql": "^0.15.1",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "remix-development-tools": "^1.2.2",
+    "remix-development-tools": "^1.4.0",
     "remix-flat-routes": "^0.5.10",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^3.12.7",
@@ -152,4 +152,4 @@
   "prisma": {
     "seed": "tsx prisma/seed.ts"
   }
-}
+}