Skip to content

Commit af0ea05

Browse files
AlemTuzlakAlemTuzlak
committed
Version 1.0.0
1 parent 84d345f commit af0ea05

46 files changed

Lines changed: 2294 additions & 439 deletions

Some content is hidden

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

‎README.md‎

Lines changed: 104 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,104 @@
1-
# Remix development tools
2-
TODO
1+
# Remix Development Tools
2+
3+
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 two tabs, **Active Page** 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.
4+
5+
## Features
6+
7+
### Active Page Tab
8+
9+
The **Active Page** tab in Remix Development Tools allows you to gain insights into the current page you are working on. It provides valuable information and data that can assist you in debugging and understanding the behavior of your application. Key features include:
10+
11+
- **URL Parameters**: Easily view and analyze the URL parameters associated with the current page.
12+
- **Server Responses**: Inspect and review the server responses received by the application for the current page.
13+
- **Loader Data**: Monitor and track the loader data used by the application during page rendering.
14+
15+
### Routes Tab
16+
17+
The **Routes** tab enables you to manage and explore the routes within your Remix project. This tab offers an intuitive interface to perform the following tasks:
18+
19+
- **Route Overview**: View an organized list of all the routes available in your project.
20+
- **Wildcard Values**: Add and manage wildcard values for dynamic routing.
21+
- **Browser Integration**: Open routes directly in your preferred web browser for quick testing and verification.
22+
- **VS Code Integration**: Seamlessly connect to the Remix Forge VS Code extension and leverage its capabilities to open routes within your VS Code environment and easily add new routes.
23+
24+
### Timeline Tab
25+
26+
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.
27+
28+
## Getting Started
29+
30+
To install and utilize Remix Development Tools, follow these steps:
31+
32+
1. Install the package via npm:
33+
34+
```bash
35+
npm install remix-devtools --save-dev
36+
```
37+
38+
2. Add the following to your application `root.tsx` file:
39+
40+
```diff
41+
+ import rdtStylesheet from "remix-dev-tools/public/stylesheet.css";
42+
+ import { RemixDevTools } from "remix-dev-tools";
43+
44+
+ export const links: LinksFunction = () => [
45+
+ ...(rdtStylesheet ? [{ rel: "stylesheet", href: rdtStylesheet }] : []),
46+
+ ];
47+
48+
49+
...
50+
51+
export default function App() {
52+
return (
53+
<html lang="en">
54+
<head>
55+
<meta charSet="utf-8" />
56+
<meta name="viewport" content="width=device-width,initial-scale=1" />
57+
<Meta />
58+
<Links />
59+
</head>
60+
<body>
61+
<Outlet />
62+
<ScrollRestoration />
63+
<Scripts />
64+
<LiveReload />
65+
+ <RemixDevTools />
66+
</body>
67+
</html>
68+
);
69+
}
70+
```
71+
72+
## RemixDevTools props
73+
74+
The `RemixDevTools` component accepts the following props:
75+
- `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`.
76+
- `defaultOpen`: Whether to open the Remix Development Tools by default. Defaults to `false`.
77+
78+
## Contributing
79+
80+
Contributions to Remix Development Tools are welcome! To contribute, please follow these guidelines:
81+
82+
1. Fork the repository and clone it locally.
83+
2. Create a new branch for your feature or bug fix.
84+
3. Run `npm run setup` to get your development environment set up.
85+
4. Run `npm run dev` to start the development server.
86+
3. Implement your changes, adhering to the existing code style and best practices.
87+
5. Commit and push your changes to your forked repository.
88+
6. Open a pull request, providing a clear description of your changes and their purpose.
89+
90+
## Support
91+
92+
If you like Remix Development Tools consider starring the repository. If you have any questions, comments, or suggestions, please feel free to reach out!
93+
94+
## License
95+
96+
Remix Development Tools is open-source software released under the [MIT License](https://opensource.org/licenses/MIT).
97+
98+
## Acknowledgments
99+
100+
Remix Development Tools was inspired by the Remix framework and aims to enhance the development experience for Remix users.
101+
102+
---
103+
104+
Feel free to explore Remix Development Tools, and we hope it significantly improves your Remix development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!

‎moveStylesheet.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import fs from "fs-extra";
2+
3+
async function moveCssFile() {
4+
try {
5+
const srcPath = "src/public/stylesheet.css";
6+
const destPath = "dist/stylesheet.css";
7+
8+
await fs.copy(srcPath, destPath);
9+
console.log(`Successfully moved ${srcPath} to ${destPath}`);
10+
} catch (error) {
11+
console.error("Error moving CSS file:", error);
12+
}
13+
}
14+
15+
moveCssFile();

0 commit comments

Comments
 (0)