Fix for wrapping wrong components (#168)

* Fix for wrapping wrong components

* fix for docs

Author: AlemTuzlak

docs/app/components/layout/Header.tsx

@@ -394,7 +394,7 @@ export default function Header({
                     <a
                       className="group"
                       aria-label="GitHub"
-                      href="https://github.com/Code-Forge-Net/react-router-devtools"
+                      href="https://github.com/forge42dev/react-router-devtools"
                       target="_blank"
                       rel="noreferrer"
                     >

docs/package-lock.json

@@ -52,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "remark-emoji": "^4.0.1",
     "remark-gfm": "^4.0.0",
-    "remix-client-cache": "https://pkg.pr.new/forge42dev/[email protected]",
+    "remix-client-cache": "2.0.0",
     "tailwind-merge": "^2.2.1",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit": "^5.0.0",

docs/package.json

@@ -12,7 +12,7 @@ import { reactRouterDevTools } from "react-router-devtools";
 export default defineConfig({
   plugins: [
     reactRouterDevTools({
-      pluginsDir: "./plugins"
+      pluginDir: "./plugins"
   })],
 });
 ```

docs/posts/main/guides/plugins.mdx

@@ -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.4",
+	"version": "1.0.5",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

package.json

@@ -9,12 +9,12 @@ This plugin allows you to see all your project icons in a new tab in react route
 ### Vite
 1. Create a plugin directory in your project. (eg on the root you can create a `your-path-here` folder)
 2. Copy the code from the plugin located in this folder. and paste it into there (eg `your-path-here/icon-library.tsx`)
-3. Specify the plugin directory in your vite config via the `pluginsDir` option:
+3. Specify the plugin directory in your vite config via the `pluginDir` option:
 
 ```js
   // vite.config.js
   export default {
-    plugins: [reactRouterDevTools({ pluginsDir: './your-path-here' })]
+    plugins: [reactRouterDevTools({ pluginDir: './your-path-here' })]
   }
 ```
 

plugins/icon-library/README.md

@@ -17,12 +17,12 @@ This plugin allows you to see all tailwind colors in a new tab in react router d
      }
      ```
 4. Copy the code from the plugin located in this folder. and paste it into there (eg `your-path-here/tailwind-palette.tsx`)
-5. Specify the plugin directory in your vite config via the `pluginsDir` option:
+5. Specify the plugin directory in your vite config via the `pluginDir` option:
 
 ```js
   // vite.config.js
   export default {
-    plugins: [reactRouterDevTools({ pluginsDir: './your-path-here' })]
+    plugins: [reactRouterDevTools({ pluginDir: './your-path-here' })]
   }
 ```
 

plugins/tailwind-palette/README.md

@@ -4,7 +4,6 @@ import type { RdtClientConfig } from "../client/context/RDTContext.js"
 import { cutArrayToLastN } from "../client/utils/common.js"
 import type { DevToolsServerConfig } from "../server/config.js"
 import type { ActionEvent, LoaderEvent } from "../server/event-queue.js"
-
 import type { RequestEvent } from "../shared/request-event.js"
 import { DEFAULT_EDITOR_CONFIG, type EditorConfig, type OpenSourceData, handleOpenSource } from "./editor.js"
 import { type WriteFileData, handleWriteFile } from "./file.js"
@@ -55,17 +54,19 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 	const includeDevtools = args?.includeInProd?.devTools ?? false
 
 	const appDir = args?.appDir || "./app"
-
+	const appDirName = appDir.replace("./", "")
 	const shouldInject = (mode: string | undefined, include: boolean) => mode === "development" || include
 	const isTransformable = (id: string) => {
 		const extensions = [".tsx", ".jsx", ".ts", ".js"]
 		if (!extensions.some((ext) => id.endsWith(ext))) {
 			return
 		}
-		if (id.includes("node_modules") || id.includes("dist") || id.includes("build") || id.includes("?")) {
+		const isRoute = id.includes(`${appDirName}/root`) || id.includes(`${appDirName}/routes`)
+		if (id.includes("node_modules") || id.includes("dist") || id.includes("build") || id.includes("?") || !isRoute) {
 			return
 		}
-		const routeId = id.replace(normalizePath(process.cwd()), "").replace("/app/", "").replace(".tsx", "")
+
+		const routeId = id.replace(normalizePath(process.cwd()), "").replace(`/${appDirName}/`, "").replace(".tsx", "")
 		return routeId
 	}
 	// Set the server config on the process object so that it can be accessed by the plugin
@@ -240,7 +241,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 					id.includes("?raw") ||
 					id.includes("dist") ||
 					id.includes("build") ||
-					!id.includes("app")
+					!id.includes(appDirName)
 				)
 					return
 

src/vite/plugin.tsx

@@ -2,6 +2,7 @@
 import type { MetaFunction , LoaderFunctionArgs, ClientLoaderFunctionArgs} from "react-router";
 import { Link, useFetcher, useSubmit } from "react-router";
 import { Button } from "../components/Button";
+import * as ss from "~/utils/example";
 
 
 export const meta: MetaFunction = () => {
@@ -12,8 +13,8 @@ export const meta: MetaFunction = () => {
 };
 
 
-export const loader = async ({ request, context,devTools  }: LoaderFunctionArgs) => {
-
+export const loader = async ({ request, context,devTools, params  }: LoaderFunctionArgs) => {
+  const d = await ss?.loader( );
   const trace =  devTools?.tracing.trace
   const data = await  trace?.("Loader call - GET users", async () => {
 

test-apps/react-router-vite/app/routes/_index.tsx

@@ -0,0 +1,4 @@
+// new file - app/utils/example.ts
+export const loader = async () => {
+  return { data: "example" };
+};