From 1b57656ec96f4fa9858242ece2a1088da3b87487 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Sat, 30 Nov 2024 15:51:11 +0100 Subject: [PATCH] Fix for wrapping wrong components (#168) * Fix for wrapping wrong components * fix for docs --- docs/app/components/layout/Header.tsx | 2 +- docs/package-lock.json | 2 +- docs/package.json | 2 +- docs/posts/main/guides/plugins.mdx | 2 +- package.json | 2 +- plugins/icon-library/README.md | 4 ++-- plugins/tailwind-palette/README.md | 4 ++-- src/vite/plugin.tsx | 11 ++++++----- test-apps/react-router-vite/app/routes/_index.tsx | 5 +++-- test-apps/react-router-vite/app/utils/example.ts | 4 ++++ 10 files changed, 22 insertions(+), 16 deletions(-) create mode 100644 test-apps/react-router-vite/app/utils/example.ts diff --git a/docs/app/components/layout/Header.tsx b/docs/app/components/layout/Header.tsx index fade171..d27922f 100644 --- a/docs/app/components/layout/Header.tsx +++ b/docs/app/components/layout/Header.tsx @@ -394,7 +394,7 @@ export default function Header({ diff --git a/docs/package-lock.json b/docs/package-lock.json index ee18755..dd9b921 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -36,7 +36,7 @@ "rehype-slug": "^6.0.0", "remark-emoji": "^4.0.1", "remark-gfm": "^4.0.0", - "remix-client-cache": "https://pkg.pr.new/forge42dev/remix-client-cache@14.tgz", + "remix-client-cache": "2.0.0", "tailwind-merge": "^2.2.1", "unist-util-filter": "^5.0.1", "unist-util-visit": "^5.0.0", diff --git a/docs/package.json b/docs/package.json index 014ca67..df95a20 100644 --- a/docs/package.json +++ b/docs/package.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/remix-client-cache@14.tgz", + "remix-client-cache": "2.0.0", "tailwind-merge": "^2.2.1", "unist-util-filter": "^5.0.1", "unist-util-visit": "^5.0.0", diff --git a/docs/posts/main/guides/plugins.mdx b/docs/posts/main/guides/plugins.mdx index 02ec089..7afd412 100644 --- a/docs/posts/main/guides/plugins.mdx +++ b/docs/posts/main/guides/plugins.mdx @@ -12,7 +12,7 @@ import { reactRouterDevTools } from "react-router-devtools"; export default defineConfig({ plugins: [ reactRouterDevTools({ - pluginsDir: "./plugins" + pluginDir: "./plugins" })], }); ``` diff --git a/package.json b/package.json index 1b6f760..9053af9 100644 --- a/package.json +++ b/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.4", + "version": "1.0.5", "license": "MIT", "keywords": [ "react-router", diff --git a/plugins/icon-library/README.md b/plugins/icon-library/README.md index 28b3bee..adebf71 100644 --- a/plugins/icon-library/README.md +++ b/plugins/icon-library/README.md @@ -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' })] } ``` diff --git a/plugins/tailwind-palette/README.md b/plugins/tailwind-palette/README.md index 0681c7c..309282e 100644 --- a/plugins/tailwind-palette/README.md +++ b/plugins/tailwind-palette/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' })] } ``` diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index ad4301c..9a1555f 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -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 diff --git a/test-apps/react-router-vite/app/routes/_index.tsx b/test-apps/react-router-vite/app/routes/_index.tsx index b17ef2d..87ed214 100644 --- a/test-apps/react-router-vite/app/routes/_index.tsx +++ b/test-apps/react-router-vite/app/routes/_index.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 () => { diff --git a/test-apps/react-router-vite/app/utils/example.ts b/test-apps/react-router-vite/app/utils/example.ts new file mode 100644 index 0000000..b72b8fc --- /dev/null +++ b/test-apps/react-router-vite/app/utils/example.ts @@ -0,0 +1,4 @@ +// new file - app/utils/example.ts +export const loader = async () => { + return { data: "example" }; +}; \ No newline at end of file