Skip to content

Commit 66a1861

Browse files
AlemTuzlakAlemTuzlak
authored
Dev tools 2.0 (#37)
* Removal of dev tools * Update to readme and exports * Completely removed the stylesheet export -> moved stylesheet into component * readme update * Version 2.0.0 finalized * readme update * readme update * readme update
1 parent 7e65835 commit 66a1861

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1685
-654
lines changed

‎README.md

+85-186
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
![npm](https://img.shields.io/npm/dy/remix-development-tools?style=plastic)
77
![GitHub top language](https://img.shields.io/github/languages/top/Code-Forge-Net/Remix-Dev-Tools?style=plastic)
88

9-
Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal** and **Routes**, along with a side tab called **Timeline**. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
9+
Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal**, **Settings** and **Routes**, along with a side tab called **Timeline**. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
1010

1111
## How it looks
1212
### Active pages Tab
@@ -43,14 +43,19 @@ The **Routes** tab enables you to manage and explore the routes within your Remi
4343

4444
The **Timeline** side tab provides a timeline view of events occurring during the development process. This tab helps you track the sequence of actions and events, providing valuable insights into the execution flow of your application.
4545

46+
### Settings tab
47+
48+
The **Settings** tab allows you to tweak your Remix Development Tools to your needs. Allows you to tweak around the height of the dev tools,
49+
the trigger position, the Remix Forge port and many more options to come.
50+
4651
### Terminal tab
4752

4853
The terminal tab allows you to run terminal commands from the Remix Dev Tools. This is useful for running commands like `npm run typecheck` or `npm run lint:fix` without having to switch to the terminal in VS code. The tab requires you to connect to Remix Forge VS Code extension to work properly.
4954

50-
You can press `Arrow Up` and `Arrow Down` to cycle through the history of commands you have run in the terminal.
51-
You can press `Arrow Left` and `Arrow Right` to cycle through all available commands in your projects package.json file.
52-
You can press `Ctrl + C` to cancel the current command.
53-
You can press `Ctrl + L` to clear the terminal.
55+
- You can press `Arrow Up` and `Arrow Down` to cycle through the history of commands you have run in the terminal.
56+
- You can press `Arrow Left` and `Arrow Right` to cycle through all available commands in your projects package.json file.
57+
- You can press `Ctrl + C` to cancel the current command.
58+
- You can press `Ctrl + L` to clear the terminal.
5459

5560
## Getting Started
5661

@@ -62,68 +67,39 @@ To install and utilize Remix Development Tools, follow these steps:
6267
npm install remix-development-tools -D
6368
```
6469

65-
2. Add the following to your application `root.tsx` file:
70+
2. Add the following to your application `entry.client.tsx` file:
6671

6772
```diff
68-
// We'll lazy load RemixDevTools to ensure it doesn't contribute to production bundle size
69-
+ import { lazy, Suspense } from "react";
70-
+ import rdtStylesheet from "remix-development-tools/stylesheet.css";
71-
+ const RemixDevTools =
72-
+ process.env.NODE_ENV === "development"
73-
+ ? React.lazy(() => import("remix-development-tools"))
74-
+ : undefined;
75-
76-
+ export const links: LinksFunction = () => [
77-
+ ...(rdtStylesheet && process.env.NODE_ENV === "development" ? [{ rel: "stylesheet", href: rdtStylesheet }] : []),
78-
+ ];
79-
80-
81-
...
82-
83-
export default function App() {
84-
return (
85-
<html lang="en">
86-
<head>
87-
<meta charSet="utf-8" />
88-
<meta name="viewport" content="width=device-width,initial-scale=1" />
89-
<Meta />
90-
<Links />
91-
</head>
92-
<body>
93-
<Outlet />
94-
<ScrollRestoration />
95-
<Scripts />
96-
<LiveReload />
97-
+ {RemixDevTools && <Suspense><RemixDevTools /></Suspense>}
98-
</body>
99-
</html>
100-
);
101-
}
102-
```
103-
104-
## RemixDevTools props
105-
106-
The `RemixDevTools` component accepts the following props:
107-
108-
- `port`: The port number to use for the Remix Development Tools connection to Remix Forge. If you want to change the port and connect to your Remix Forge VS code extension you need to change the port in VS Code too. Defaults to `3003`.
109-
- `defaultOpen`: Whether to open the Remix Development Tools by default. Defaults to `false`.
110-
- `position`: The position of the Remix Development Tools trigger. Defaults to `bottom-right`.
111-
- `requireUrlFlag`: Requires rdt=true to be present in the URL search to open the Remix Development Tools. Defaults to `false`.
112-
- [**DEPRECATED**] `showRouteBoundaries`:This flag has been deprecated in favor of adding route boundaries. Please see the section below for more information.
113-
- `hideUntilHover`: Allows you to hide the trigger until you hover over it. Defaults to `false`.
114-
- `additionalTabs`: Allows you to provide additional tabs to the Remix Development Tools. Defaults to `[]`.
115-
- `minHeight`: Allows you to set the minimum height of the Remix Development Tools. Defaults to `600`.
116-
- `minHeight`: Allows you to set the minimum height of the Remix Development Tools. Defaults to `200`.
117-
118-
## Adding route boundaries
119-
120-
The `showErrorBoundaries` flag has been deprecated in favor of this method. Please use it instead.
121-
122-
In order to add Route boundaries to your project you need to do the following two things:
73+
This might differ if you use <StrictMode> or some other wrappers around <RemixBrowser>, whats important is wrapping the start transition in a callback
74+
-startTransition(() => {
75+
- hydrateRoot(
76+
- document,
77+
- <RemixBrowser />
78+
-);
79+
+});
80+
+ const callback = () => startTransition(() => {
81+
+ hydrateRoot(
82+
+ document,
83+
+ <RemixBrowser />
84+
+ );
85+
+});
86+
+
87+
+ if(process.env.NODE_ENV === "development") {
88+
+ import("remix-development-tools").then(({ initClient }) => {
89+
+ // Add all the dev tools props here into the client
90+
+ initClient();
91+
+ callback();
92+
+ });
93+
+ } else {
94+
+ callback()
95+
+ }
96+
```
12397

124-
1. Modify your `entry.server.ts` to add the following code:
98+
3. Add the following to your application `entry.server.tsx` file:
12599

126100
```diff
101+
The important part is modifying the remixContext, this might differ based on the provider you are using.
102+
127103
function handleBrowserRequest(
128104
request: Request,
129105
responseStatusCode: number,
@@ -133,7 +109,7 @@ function handleBrowserRequest(
133109
- return new Promise((resolve, reject) => {
134110
+ return new Promise(async (resolve, reject) => {
135111
let shellRendered = false;
136-
+ const context = process.env.NODE_ENV === "development" ? await import("remix-development-tools").then(({ initRouteBoundariesServer }) => initRouteBoundariesServer(remixContext)) : remixContext;
112+
+ const context = process.env.NODE_ENV === "development" ? await import("remix-development-tools").then(({ initServer }) => initServer(remixContext)) : remixContext;
137113
const { pipe, abort } = renderToPipeableStream(
138114
<RemixServer
139115
- context={remixContext}
@@ -176,35 +152,39 @@ function handleBrowserRequest(
176152
});
177153
}
178154
```
179-
180-
2. Modify your `entry.client.tsx` to add the following code:
155+
4. Add the Remix Development Tools to your `root.tsx` file:
181156

182157
```diff
183-
+ if(process.env.NODE_ENV === "development") {
184-
+ import("remix-development-tools").then(({ initRouteBoundariesClient }) => {
185-
+ initRouteBoundariesClient();
186-
+ startTransition(() => {
187-
+ hydrateRoot(
188-
+ document,
189-
+ <StrictMode>
190-
+ <RemixBrowser />
191-
+ </StrictMode>
192-
+ );
193-
+ });
194-
+
195-
+ });
196-
+ } else {
197-
startTransition(() => {
198-
hydrateRoot(
199-
document,
200-
<StrictMode>
201-
<RemixBrowser />
202-
</StrictMode>
203-
);
204-
});
205-
+ }
206-
```
207-
3. You are good to go. Now you can see the route boundaries in your project when you hover each route.
158+
+ const RemixDevTools = process.env.NODE_ENV === 'development' ? lazy(() => import("remix-development-tools")) : null
159+
160+
export default function App() {
161+
return (
162+
<html lang="en">
163+
<head>
164+
<meta charSet="utf-8" />
165+
<meta name="viewport" content="width=device-width,initial-scale=1" />
166+
<Meta />
167+
<Links />
168+
</head>
169+
<body>
170+
<Outlet />
171+
<ScrollRestoration />
172+
<Scripts />
173+
<LiveReload />
174+
+ {RemixDevTools ? (<Suspense><RemixDevTools /></Suspense>) : null}
175+
</body>
176+
</html>
177+
);
178+
}
179+
```
180+
5. You're good to go!
181+
182+
## RemixDevTools props
183+
184+
The `RemixDevTools` component accepts the following props:
185+
- `requireUrlFlag`: Requires rdt=true to be present in the URL search to open the Remix Development Tools. Defaults to `false`.
186+
- `plugins`: Allows you to provide additional tabs (plugins) to the Remix Development Tools. Defaults to `[]`.
187+
208188

209189
## Plugins
210190

@@ -242,7 +222,7 @@ Writing plugins for Remix Development Tools is easy. You can write a plugin that
242222
import { remixDevToolsPlugin } from "./remix-dev-tools-plugin";
243223

244224
- <RemixDevTools />
245-
+ <RemixDevTools additionalTabs={[remixDevToolsPlugin()]} />
225+
+ <RemixDevTools plugins={[remixDevToolsPlugin()]} />
246226

247227
```
248228
5. You should now see your plugin in the Remix Development Tools as a new tab.
@@ -294,107 +274,26 @@ import { useRemixForgeSocket } from "remix-development-tools";
294274
7. Refer to `react-use-websocket` for more information on how to use the socket and what options it accepts because that is what is used under the hood.
295275
8. After you're done share your plugin with the community by opening a discussion!
296276

297-
## Troubleshooting
298-
299-
If you are having trouble getting Remix Development Tools to work, please try the following:
300-
301-
### RemixDevTools are not appearing in the DOM / causing re-renders
302-
303-
1. Move the RemixDevTools as high as possible in your root.tsx file. It should be the first thing in the body tag.
304277

278+
## v1 -> v2 migration guide
279+
The migration should be really simple. These are the following things you need to do:
280+
1. Remove the old imports of the stylesheet and addition of the stylesheets to your links export. This is bundled now within the Remix Development Tools.
305281
```diff
306-
export default function App() {
307-
return (
308-
<html lang="en">
309-
<head>
310-
<meta charSet="utf-8" />
311-
<meta name="viewport" content="width=device-width,initial-scale=1" />
312-
<Meta />
313-
<Links />
314-
</head>
315-
<body>
316-
<Outlet />
317-
<ScrollRestoration />
318-
<Scripts />
319-
<LiveReload />
320-
+ {RemixDevTools && <Suspense><RemixDevTools /></Suspense>}
321-
</body>
322-
</html>
323-
);
324-
}
325-
```
326-
327-
2. Make sure the RemixDevTools are not wrapped in custom providers that might cause re-renders.
328-
329-
```jsx
330-
const ThemeProvider = () => {
331-
return (
332-
<ThemeContext.Provider value={theme}>
333-
<RemixDevTools />
334-
</ThemeContext.Provider>
335-
);
336-
}
337-
338-
export default function App() {
339-
return (
340-
<html lang="en">
341-
<head>
342-
<meta charSet="utf-8" />
343-
<meta name="viewport" content="width=device-width,initial-scale=1" />
344-
<Meta />
345-
<Links />
346-
</head>
347-
<body>
348-
<ThemeProvider >
349-
<Outlet />
350-
</ThemeProvider>
351-
<ScrollRestoration />
352-
<Scripts />
353-
<LiveReload />
354-
</body>
355-
</html>
356-
);
357-
}
282+
- import rdtStylesheet from "remix-development-tools/stylesheet.css";
283+
export const links = [
284+
// ... other links
285+
- { rel: "stylesheet", href: rdtStylesheet },
286+
]
358287

359288
```
360289

361-
instead do this:
362-
363-
```diff
364-
const ThemeProvider = () => {
365-
return (
366-
<ThemeContext.Provider value={theme}>
367-
- <RemixDevTools />
368-
+ <Outlet />
369-
</ThemeContext.Provider>
370-
);
371-
}
372-
373-
export default function App() {
374-
return (
375-
<html lang="en">
376-
<head>
377-
<meta charSet="utf-8" />
378-
<meta name="viewport" content="width=device-width,initial-scale=1" />
379-
<Meta />
380-
<Links />
381-
</head>
382-
<body>
383-
- <ThemeProvider >
384-
- <Outlet />
385-
- </ThemeProvider>
386-
+ <ThemeProvider />
387-
<ScrollRestoration />
388-
<Scripts />
389-
<LiveReload />
390-
+ <RemixDevTools />
391-
</body>
392-
</html>
393-
);
394-
}
395-
396-
```
290+
2. If you were using `initRouteBoundariesClient` and `initRouteBoundariesServer` you just need to replace them with the new `initClient` and `initServer` functions. You can skip the rest of the steps, you're ready to go!
291+
3. Add the `initClient` function to your `entry.client.tsx` file. This is needed to initialize the route boundaries functionality and possible future functionality. (Refer to getting started steps above on how to do that)
292+
4. Add the `initServer` function to your `entry.server.tsx` file. This is needed to initialize the route boundaries functionality (and not cause hydration issues) and possible future functionality. (Refer to getting started steps above on how to do that)
293+
5. You are good to go!
294+
## Troubleshooting [v1 only]
397295

296+
398297
### HMR is failing with RDT
399298

400299
Wrap the `RemixDevTools` component in a `Suspense` component.

0 commit comments

Comments
 (0)