Better cloudflare support (#166)

* Potential cloudflare support

* Cloudflare support

* version bump

Author: AlemTuzlak

.gitignore

@@ -136,3 +136,4 @@ dist
 # IDE
 .idea
 .tsup
+.react-router

README.md

@@ -53,6 +53,20 @@ export default defineConfig({
 
 That's it, you're done!
 
+### CloudFlare
+
+If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
+```ts
+optimizeDeps: {
+  include: [
+    // other optimized deps
+    "beautify",
+    "react-diff-viewer-continued",
+    "classnames",
+    "@bkrem/react-transition-group",
+  ],
+},
+```
 
 ## Support
 

docs/posts/main/started/installation.mdx

@@ -49,6 +49,21 @@ export default defineConfig({
 Make sure your plugin is BEFORE the react router one!
 </Warn>
 
+### CloudFlare
+
+If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
+```ts
+optimizeDeps: {
+  include: [
+    // other optimized deps
+    "beautify",
+    "react-diff-viewer-continued",
+    "classnames",
+    "@bkrem/react-transition-group",
+  ],
+},
+```
+
 **That's it!**
 
 You should now see the React Router Devtools in your browser when you run your app.

package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

src/vite/editor.ts

@@ -1,6 +1,3 @@
-import { exec } from "node:child_process"
-import fs from "node:fs"
-import path from "node:path"
 import { normalizePath } from "vite"
 import { checkPath } from "./utils.js"
 
@@ -25,30 +22,32 @@ export type EditorConfig = {
 
 export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
 	name: "VSCode",
-	open: (path, lineNumber) => {
+	open: async (path, lineNumber) => {
+		const { exec } = await import("node:child_process")
 		exec(`code -g "${normalizePath(path).replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}"`)
 	},
 }
 
-export const handleOpenSource = ({
+export const handleOpenSource = async ({
 	data,
 	openInEditor,
 	appDir,
 }: {
 	data: OpenSourceData
 	appDir: string
-	openInEditor: (path: string, lineNum: string | undefined) => void
+	openInEditor: (path: string, lineNum: string | undefined) => Promise<void>
 }) => {
 	const { source, line, routeID } = data.data
 	const lineNum = line ? `${line}` : undefined
-
+	const fs = await import("node:fs")
+	const path = await import("node:path")
 	if (source) {
 		return openInEditor(source, lineNum)
 	}
 
 	if (routeID) {
 		const routePath = path.join(appDir, routeID)
-		const checkedPath = checkPath(routePath)
+		const checkedPath = await checkPath(routePath)
 
 		if (!checkedPath) return
 		const { type, validPath } = checkedPath

src/vite/plugin.tsx

@@ -215,7 +215,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 						)
 					})
 					const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
-					const openInEditor = (path: string | undefined, lineNum: string | undefined) => {
+					const openInEditor = async (path: string | undefined, lineNum: string | undefined) => {
 						if (!path) {
 							return
 						}

src/vite/utils.ts

@@ -1,4 +1,3 @@
-import fs from "node:fs"
 import type { IncomingMessage, ServerResponse } from "node:http"
 import type { Connect } from "vite"
 
@@ -49,7 +48,8 @@ export const handleDevToolsViteRequest = (
 	})
 }
 
-export function checkPath(routePath: string, extensions = [".tsx", ".jsx", ".ts", ".js"]) {
+export async function checkPath(routePath: string, extensions = [".tsx", ".jsx", ".ts", ".js"]) {
+	const fs = await import("node:fs")
 	// Check if the path exists as a directory
 	if (fs.existsSync(routePath) && fs.lstatSync(routePath).isDirectory()) {
 		return { validPath: routePath, type: "directory" } as const

test-apps/react-router-vite/app/routes.ts

@@ -1,3 +1,3 @@
 
 import { flatRoutes } from "@react-router/fs-routes";
-export const routes = flatRoutes()
+export default flatRoutes()