Remix Development tools v2 (#386)

Author: AlemTuzlak

app/entry.client.tsx

@@ -6,6 +6,17 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	import('./utils/monitoring.client.tsx').then(({ init }) => init())
 }
 
-startTransition(() => {
-	hydrateRoot(document, <RemixBrowser />)
-})
+const callback = () =>
+	startTransition(() => {
+		hydrateRoot(document, <RemixBrowser />)
+	})
+
+if (process.env.NODE_ENV === 'development') {
+	import('remix-development-tools').then(({ initClient }) => {
+		// Add all the dev tools props here into the client
+		initClient()
+		callback()
+	})
+} else {
+	callback()
+}

app/entry.server.tsx

@@ -38,16 +38,21 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		: 'onShellReady'
 
 	const nonce = String(loadContext.cspNonce) ?? undefined
-	return new Promise((resolve, reject) => {
+	return new Promise(async (resolve, reject) => {
 		let didError = false
-
+		const context =
+			process.env.NODE_ENV === 'development'
+				? await import('remix-development-tools').then(({ initServer }) =>
+						initServer(remixContext),
+				  )
+				: remixContext
 		// NOTE: this timing will only include things that are rendered in the shell
 		// and will not include suspended components and deferred loaders
 		const timings = makeTimings('render', 'renderToPipeableStream')
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer context={remixContext} url={request.url} />
+				<RemixServer context={context} url={request.url} />
 			</NonceProvider>,
 			{
 				[callbackName]: () => {

app/root.tsx

@@ -24,7 +24,7 @@ import {
 	useSubmit,
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
-import { useRef } from 'react'
+import { Suspense, lazy, useRef } from 'react'
 import { z } from 'zod'
 import { Confetti } from './components/confetti.tsx'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
@@ -59,6 +59,11 @@ import { type Theme, setTheme, getTheme } from './utils/theme.server.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
 import { getToast } from './utils/toast.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
+ 
+const RemixDevTools =
+	process.env.NODE_ENV === 'development'
+		? lazy(() => import('remix-development-tools'))
+		: null
 
 export const links: LinksFunction = () => {
 	return [
@@ -277,8 +282,13 @@ function App() {
 					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
 				</div>
 			</div>
-			<Confetti id={data.confettiId} />
-			<EpicToaster toast={data.toast} />
+		<Confetti id={data.confettiId} />
+		<EpicToaster toast={data.toast} />
+			{RemixDevTools ? (
+				<Suspense>
+					<RemixDevTools />
+				</Suspense>
+			) : null}
 		</Document>
 	)
 }