Skip to content

Commit a0fd444

Browse files
AlemTuzlakAlemTuzlak
authored
enhance logs flag & leak fix (#215)
1 parent c82dd69 commit a0fd444

29 files changed

+19075
-17623
lines changed

‎docs/package-lock.json‎

Lines changed: 17490 additions & 17490 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/posts/main/configuration/general.mdx‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,67 @@
1-
---
2-
title: React Router Devtools General Configuration
3-
description: General Configuration options for the React Router Devtools to interface with your editor
4-
---
5-
6-
import Warn from "./warn.tsx";
7-
8-
This covers the general configuration options for the React Router Devtools.
9-
10-
## General Config
11-
12-
```ts
13-
type GeneralConfig = {
14-
pluginDir?: string
15-
includeInProd?: {
16-
client?: boolean
17-
server?: boolean
18-
}
19-
20-
}
21-
```
22-
23-
## `pluginDir`
24-
25-
The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they
26-
will be automatically imported and added to the dev tools.
27-
28-
## `includeInProd`
29-
30-
This option is used to set whether the plugin should be included in production builds or not.
31-
32-
By default it is set to `undefined` and if you set this option to an object with the `client`, `context` and `server` properties set to `true` the plugin will be included in production builds.
33-
34-
The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the
35-
exact behavior of both sides with client and server configs respectively.
36-
37-
38-
Each of these flags will include a part of the plugin in production, in order for any of these to work `react-router-devtools` need to be switched over to
39-
a regular dependency and included in your project. If you only want to include the `devTools` helper in production, for example, you can
40-
set `includeInProd` to `{ devTools: true }` and the `devTools` part will be included in production and available always.
41-
42-
<Warn title="Be careful!">
43-
If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody
44-
who is not supposed to see them. Also the server part uses chalk which might not work in non-node environments!
45-
46-
Also, if you wish to edit the plugin server config in production you can set `process.rdt_config` to an object with the same shape as the
47-
config object and it will be used instead of the default production config (`{ silent: true }`).
48-
</Warn>
49-
50-
```ts
51-
import { reactRouterDevTools } from "react-router-devtools";
52-
53-
export default defineConfig({
54-
plugins: [
55-
reactRouterDevTools({
56-
includeInProd: {
57-
client: true,
58-
server: true,
59-
devTools: true
60-
},
61-
}),
62-
],
63-
});
64-
```
1+
---
2+
title: React Router Devtools General Configuration
3+
description: General Configuration options for the React Router Devtools to interface with your editor
4+
---
5+
6+
import Warn from "./warn.tsx";
7+
8+
This covers the general configuration options for the React Router Devtools.
9+
10+
## General Config
11+
12+
```ts
13+
type GeneralConfig = {
14+
pluginDir?: string
15+
includeInProd?: {
16+
client?: boolean
17+
server?: boolean
18+
}
19+
20+
}
21+
```
22+
## enhancedLogs
23+
24+
This configuration flag enables/disables enhanced logs feature.
25+
26+
## `pluginDir`
27+
28+
The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they
29+
will be automatically imported and added to the dev tools.
30+
31+
## `includeInProd`
32+
33+
This option is used to set whether the plugin should be included in production builds or not.
34+
35+
By default it is set to `undefined` and if you set this option to an object with the `client`, `context` and `server` properties set to `true` the plugin will be included in production builds.
36+
37+
The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the
38+
exact behavior of both sides with client and server configs respectively.
39+
40+
41+
Each of these flags will include a part of the plugin in production, in order for any of these to work `react-router-devtools` need to be switched over to
42+
a regular dependency and included in your project. If you only want to include the `devTools` helper in production, for example, you can
43+
set `includeInProd` to `{ devTools: true }` and the `devTools` part will be included in production and available always.
44+
45+
<Warn title="Be careful!">
46+
If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody
47+
who is not supposed to see them. Also the server part uses chalk which might not work in non-node environments!
48+
49+
Also, if you wish to edit the plugin server config in production you can set `process.rdt_config` to an object with the same shape as the
50+
config object and it will be used instead of the default production config (`{ silent: true }`).
51+
</Warn>
52+
53+
```ts
54+
import { reactRouterDevTools } from "react-router-devtools";
55+
56+
export default defineConfig({
57+
plugins: [
58+
reactRouterDevTools({
59+
includeInProd: {
60+
client: true,
61+
server: true,
62+
devTools: true
63+
},
64+
}),
65+
],
66+
});
67+
```

‎docs/posts/v1.0.0/_index.mdx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Quick Start
3+
hidden: true
4+
toc: false
5+
---
6+
7+
import Info from './info.tsx'
8+
9+
This documentation covers everything you need to know to get started with `react-router-devtools`.
10+
11+
## Prerequisites
12+
13+
- React Router version **7.0** or higher.
14+
- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.
15+
16+
## Why ESM?
17+
18+
In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
19+
that **react-router-devtools** uses to communicate with the server. This websocket is **only** available in ESM projects
20+
because it's exposed by `import.meta` which is only available in ESM.
21+
22+
To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
23+
24+
25+
## Why use `react-router-devtools`?
26+
27+
`react-router-devtools` is a set of tools that help you to develop your React Router application.
28+
29+
They help you, but are not limited to, to do the following things:
30+
- **Loader data display** - You can see the data that is being loaded by your loaders.
31+
- **Route display** - You can see the routes that are being used by your application in list/tree format.
32+
- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
33+
- **Hydration mismatch tracking** - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
34+
- **Server logs** - You can see the logs of your server in the browser.
35+
- **Route boundaries** - You can see the route boundaries by hovering over elements.

‎docs/posts/v1.0.0/configuration/client.mdx‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: React Router Devtools Client Configuration
3+
description: Configuration options for the React Router Devtools client
4+
---
5+
6+
import Info from "./info.tsx";
7+
import Warn from "./warn.tsx";
8+
9+
<Info>
10+
All of the following options can be set in the dev tools panel **"Settings page"** and they override the default ones. Your preferences are
11+
stored in localStorage and if they do not exist there the default ones are used.
12+
</Info>
13+
14+
Before we explain all the possible options here is the client configuration Typescript type:
15+
16+
```ts
17+
type RdtClientConfig = {
18+
position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle-left" | "middle-right";
19+
liveUrls: { name: string, url: string }[];
20+
liveUrlsPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
21+
defaultOpen: boolean;
22+
expansionLevel: number;
23+
height: number;
24+
minHeight: number;
25+
maxHeight: number;
26+
hideUntilHover: boolean;
27+
panelLocation: "top" | "bottom";
28+
requireUrlFlag: boolean;
29+
urlFlag: string;
30+
breakpoints: {name: string, min: number, max: number }[],
31+
routeBoundaryGradient: "sea" | "hyper" | "gotham" | "gray" | "watermelon" | "ice" | "silver";
32+
showBreakpointIndicator: boolean;
33+
showRouteBoundariesOn: "hover" | "click";
34+
}
35+
```
36+
37+
Let's go through each option and see what it does.
38+
39+
## Live URLs
40+
41+
This option is used to set the live urls that will be displayed in the bottom left corner of the screen. The default value is an empty array.
42+
It allows you to specify multiple live urls that you can use to open the current page in a new tab.
43+
44+
## Live URLs position
45+
46+
This option is used to set the position of the live urls that will be displayed in the bottom left corner of the screen. The possible values are:
47+
- `top-left` - the live urls will be positioned at the top left corner of the screen
48+
- `top-right` - the live urls will be positioned at the top right corner of the screen
49+
- `bottom-left` - the live urls will be positioned at the bottom left corner of the screen
50+
- `bottom-right` - the live urls will be positioned at the bottom right corner of the screen
51+
52+
## Position
53+
54+
This option is used to set the position of the React Router Devtools trigger (the button that opens the panel). The possible values are:
55+
- `top-left` - the trigger will be positioned at the top left corner of the screen
56+
- `top-right` - the trigger will be positioned at the top right corner of the screen
57+
- `bottom-left` - the trigger will be positioned at the bottom left corner of the screen
58+
- `bottom-right` - the trigger will be positioned at the bottom right corner of the screen
59+
- `middle-left` - the trigger will be positioned at the middle left of the screen
60+
- `middle-right` - the trigger will be positioned at the middle right of the screen
61+
62+
## Default Open
63+
64+
This option is used to set the initial state of the panel. If set to `true` the panel will be open by default, if set to `false`
65+
the panel will be closed by default.
66+
67+
## Expansion Level
68+
69+
This option is used to set the initial expansion level of the returned JSON data in the **Active Page** tab. By default it is set to
70+
1 and if you open up the **Active Page** and look at the returned loader data it will look like this:
71+
72+
```ts
73+
"data": { ... } +
74+
```
75+
76+
If you set the expansion level to 1 the returned loader data will look like this:
77+
78+
```ts
79+
"data": {
80+
"property": "value"
81+
}
82+
```
83+
84+
## Height
85+
86+
This option is used to set the initial height of the panel. The default value is 400px.
87+
88+
## Min Height
89+
90+
This option is used to set the minimum height of the panel. The default value is 200px.
91+
92+
## Max Height
93+
94+
This option is used to set the maximum height of the panel. The default value is 800px.
95+
96+
## Hide Until Hover
97+
98+
This option is used to set whether the trigger should be hidden until you hover over it. The default value is `false`.
99+
100+
## Panel Location
101+
102+
This option is used to set the location of the panel. The possible values are:
103+
- `top` - the panel will be positioned at the top of the screen
104+
- `bottom` - the panel will be positioned at the bottom of the screen
105+
106+
## Require URL Flag
107+
108+
This option is used to set whether the panel should be opened only if the URL contains a specific flag. The default value is `false`.
109+
110+
<Warn title="Be careful!">
111+
If you set this option to `true` and you forget to set the URL flag, the panel will hide and you will not be able to see it
112+
until you enter the url flag.
113+
114+
The default one is `rdt=true` and if you set this option to `true` you will have to add `?rdt=true` to the URL in order to see the panel.
115+
</Warn>
116+
117+
## URL Flag
118+
119+
This option is used to set the URL flag that is required to open the panel. The default value is `rdt`.
120+
121+
You can set it to whatever you wish and if you set the **Require URL Flag** option to `true` you will have to add `?yourFlag=true` to the URL in order to see the panel.
122+
123+
## Route Boundary Gradient
124+
125+
This option is used to set the color of the route boundary gradient. The possible values are:
126+
- `sea`
127+
- `hyper`
128+
- `gotham`
129+
- `gray`
130+
- `watermelon`
131+
- `ice`
132+
- `silver`
133+
134+
<Info>
135+
This changes the color of the route boundary gradient in the **Active Page** tab. When you hover over any route in the panel it will show you it's boundaries.
136+
</Info>
137+
138+
The default value is `ice`.
139+
140+
## Breakpoints
141+
142+
This option allows you to define custom breakpoints that show in the bottom left corner of the panel to help you determine the current screen breakpoint you have defined.
143+
By default the breakpoints are set to tailwind breakpoints but you can change them to whatever you want.
144+
145+
Eg:
146+
```ts
147+
breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
148+
```
149+
150+
## Show breakpoint indicator
151+
152+
This option allows you to show/hide the current breakpoint in the bottom left corner of the panel.
153+
154+
## Show route boundaries on
155+
156+
This option allows you to either show route boundaries when you hover a route segment on the pages tab or
157+
it shows a dedicated button called "Show Route Boundary" that shows the route boundary for that route on click.
158+
159+
Default value is `click`;
160+
161+
## Creating a custom configuration
162+
163+
To create a custom configuration you can use the following code snippet:
164+
165+
```ts
166+
import { defineRdtConfig } from "react-router-devtools";
167+
168+
const customConfig = defineRdtConfig({
169+
client: {
170+
position: "top-right",
171+
defaultOpen: true,
172+
expansionLevel: 1,
173+
height: 500,
174+
minHeight: 300,
175+
maxHeight: 1000,
176+
hideUntilHover: true,
177+
panelLocation: "bottom",
178+
requireUrlFlag: true,
179+
urlFlag: "customFlag",
180+
routeBoundaryGradient: "gotham",
181+
breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
182+
showBreakpointIndicator: false
183+
}
184+
});
185+
186+
export default customConfig;
187+
```
188+
189+
Then you can use this configuration in your `vite.config.js` file like this:
190+
191+
```ts
192+
import customConfig from "./rdt.config";
193+
import { reactRouterDevTools } from "react-router-devtools";
194+
195+
export default defineConfig({
196+
plugins: [reactRouterDevTools(customConfig)],
197+
});
198+
```
199+
200+
<Info title="Try it out!">
201+
Try opening up the dev tools panel deployed on this site and playing around with the settings in the settings tab!
202+
</Info>

0 commit comments

Comments
 (0)