diff --git a/docs/posts/4.7.0/guides/plugins.mdx b/docs/posts/4.7.0/guides/plugins.mdx
index d5edbf3..8b97748 100644
--- a/docs/posts/4.7.0/guides/plugins.mdx
+++ b/docs/posts/4.7.0/guides/plugins.mdx
@@ -2,8 +2,8 @@
title: "Plugins"
description: "Remix Development Tools plugins"
---
-
-## Plugins in Vite
+
+## Plugins in Vite
Plugins work in a different way in Vite. You create a directory for plugins and just provide the path to the directory to the plugin. The plugin will automatically import all the plugins from the directory and add them to the dev tools. You only need to make sure your exports are named exports and not default exports and that they are uniquely named.
You can create a directory called plugins in your project and add your plugins there. Then you can add the following to your vite.config.js file:
@@ -13,7 +13,7 @@ export default defineConfig({
plugins: [
remixDevTools({
pluginsDir: "./plugins"
- })],
+ })],
});
```
@@ -39,8 +39,6 @@ Export a function with the following contract:
icon: ,
// The component to be rendered when the tab is active
component: ,
- // Whether the tab requires the Remix Forge VS Code extension to be connected to be shown
- requiresForge: false,
// Whether the timeline should be shown on the tab
hideTimeline: false,
}
@@ -56,44 +54,5 @@ import { remixDevToolsPlugin } from "./remix-dev-tools-plugin";
- withDevTools(App);
+ withDevTools(App, { plugins: [remixDevToolsPlugin()] })
```
-
-You should now see your plugin in the Remix Development Tools as a new tab.
-
-## Using Remix Forge with your plugin
-If you want to use Remix Forge with your plugin you can do so by setting the requiresForge property to true in your plugin. This will make sure that the plugin is only shown when the Remix Forge VS Code extension is connected.
-Follow the above guide to create a plugin.
-Import the following hook from remix-development-tools:
-```tsx
-import { useRemixForgeSocket } from "remix-development-tools";
-
- const MyComponent = () => {
- const socket = useRemixForgeSocket();
- // Implement your logic here
- return
My Component
- }
-```
-
-You can now use the socket to send messages to the Remix Forge VS Code extension. For now it accepts reading/deleting/opening files in VS Code
-```tsx
- const MyComponent = () => {
- const socket = useRemixForgeSocket();
- const runCommand = () => {
- socket.sendJsonMessage({ subtype: "read_file", path: "package.json" })
- }
- // Implement your logic here
- return
My Component
- }
- ```
-The following contract is returned from the extension:
- ```tsx
- interface RemixForgeResponse {
- type: "plugin";
- subtype: "read_file" | "open_file" | "delete_file" | "write_file";
- error: boolean;
- data: string | null;
- }
- ```
-Make sure you check if the type and subtype match your needs before using the data.
-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.
-After you're done share your plugin with the community by opening a discussion!
\ No newline at end of file
+You should now see your plugin in the Remix Development Tools as a new tab.
diff --git a/docs/posts/main/guides/plugins.mdx b/docs/posts/main/guides/plugins.mdx
index d5edbf3..8b97748 100644
--- a/docs/posts/main/guides/plugins.mdx
+++ b/docs/posts/main/guides/plugins.mdx
@@ -2,8 +2,8 @@
title: "Plugins"
description: "Remix Development Tools plugins"
---
-
-## Plugins in Vite
+
+## Plugins in Vite
Plugins work in a different way in Vite. You create a directory for plugins and just provide the path to the directory to the plugin. The plugin will automatically import all the plugins from the directory and add them to the dev tools. You only need to make sure your exports are named exports and not default exports and that they are uniquely named.
You can create a directory called plugins in your project and add your plugins there. Then you can add the following to your vite.config.js file:
@@ -13,7 +13,7 @@ export default defineConfig({
plugins: [
remixDevTools({
pluginsDir: "./plugins"
- })],
+ })],
});
```
@@ -39,8 +39,6 @@ Export a function with the following contract:
icon: ,
// The component to be rendered when the tab is active
component: ,
- // Whether the tab requires the Remix Forge VS Code extension to be connected to be shown
- requiresForge: false,
// Whether the timeline should be shown on the tab
hideTimeline: false,
}
@@ -56,44 +54,5 @@ import { remixDevToolsPlugin } from "./remix-dev-tools-plugin";
- withDevTools(App);
+ withDevTools(App, { plugins: [remixDevToolsPlugin()] })
```
-
-You should now see your plugin in the Remix Development Tools as a new tab.
-
-## Using Remix Forge with your plugin
-If you want to use Remix Forge with your plugin you can do so by setting the requiresForge property to true in your plugin. This will make sure that the plugin is only shown when the Remix Forge VS Code extension is connected.
-Follow the above guide to create a plugin.
-Import the following hook from remix-development-tools:
-```tsx
-import { useRemixForgeSocket } from "remix-development-tools";
-
- const MyComponent = () => {
- const socket = useRemixForgeSocket();
- // Implement your logic here
- return
My Component
- }
-```
-
-You can now use the socket to send messages to the Remix Forge VS Code extension. For now it accepts reading/deleting/opening files in VS Code
-```tsx
- const MyComponent = () => {
- const socket = useRemixForgeSocket();
- const runCommand = () => {
- socket.sendJsonMessage({ subtype: "read_file", path: "package.json" })
- }
- // Implement your logic here
- return
My Component
- }
- ```
-The following contract is returned from the extension:
- ```tsx
- interface RemixForgeResponse {
- type: "plugin";
- subtype: "read_file" | "open_file" | "delete_file" | "write_file";
- error: boolean;
- data: string | null;
- }
- ```
-Make sure you check if the type and subtype match your needs before using the data.
-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.
-After you're done share your plugin with the community by opening a discussion!
\ No newline at end of file
+You should now see your plugin in the Remix Development Tools as a new tab.
diff --git a/package.json b/package.json
index 18de269..12a4d9a 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,9 @@
"default": "./dist/client.css"
}
},
- "files": ["dist"],
+ "files": [
+ "dist"
+ ],
"repository": {
"type": "git",
"url": "git+https://github.com/Code-Forge-Net/Remix-Dev-Tools.git"
@@ -91,7 +93,11 @@
"icons": "npm run run:scripts scripts/icons.ts",
"check:unused": "knip "
},
- "workspaces": [".", "test-apps/*", "docs"],
+ "workspaces": [
+ ".",
+ "test-apps/*",
+ "docs"
+ ],
"peerDependencies": {
"@remix-run/react": ">=1.15",
"react": ">=17",
@@ -139,7 +145,6 @@
"react-d3-tree": "^3.6.2",
"react-diff-viewer-continued": "^3.3.1",
"react-hotkeys-hook": "^4.5.0",
- "react-use-websocket": "^4.8.1",
"tailwind-merge": "^1.14.0"
}
-}
+}
\ No newline at end of file
diff --git a/src/client.ts b/src/client.ts
index 99834a6..36961c2 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,5 +1,5 @@
// Named exports
-export { useRemixForgeSocketExternal as useRemixForgeSocket } from "./client/hooks/useRemixForgeSocket.js"
+//export { useRemixForgeSocketExternal as useRemixForgeSocket } from "./client/hooks/useRemixForgeSocket.js"
export { EmbeddedDevTools } from "./client/EmbeddedDevTools.js"
export { withViteDevTools, withDevTools } from "./client/init/root.js"
diff --git a/src/client/components/NewRouteForm.tsx b/src/client/components/NewRouteForm.tsx
index 76e156b..d7858e1 100644
--- a/src/client/components/NewRouteForm.tsx
+++ b/src/client/components/NewRouteForm.tsx
@@ -1,157 +1,151 @@
-import clsx from "clsx"
-import { useState } from "react"
-import { useRemixForgeSocket } from "../hooks/useRemixForgeSocket.js"
-import { Checkbox } from "./Checkbox.js"
-import { Input } from "./Input.js"
-
-interface NewRouteOptions {
- path: string
- loader: boolean
- action: boolean
- headers: boolean
- errorBoundary: boolean
- revalidate: boolean
- handler: boolean
- meta: boolean
- links: boolean
-}
-
-const DEFAULT_VALUES = {
- path: "",
- loader: false,
- action: false,
- headers: false,
- errorBoundary: false,
- revalidate: false,
- handler: false,
- meta: false,
- links: false,
-}
+//import clsx from "clsx"
+//import { useState } from "react"
+//import { Checkbox } from "./Checkbox.js"
+//import { Input } from "./Input.js"
+//
+//interface NewRouteOptions {
+// path: string
+// loader: boolean
+// action: boolean
+// headers: boolean
+// errorBoundary: boolean
+// revalidate: boolean
+// handler: boolean
+// meta: boolean
+// links: boolean
+//}
+//
+//const DEFAULT_VALUES = {
+// path: "",
+// loader: false,
+// action: false,
+// headers: false,
+// errorBoundary: false,
+// revalidate: false,
+// handler: false,
+// meta: false,
+// links: false,
+//}
const NewRouteForm = () => {
- const { sendJsonMessage } = useRemixForgeSocket({
- onMessage: (e) => {
- const messageData = e.data
- if (messageData.type === "route_added") {
- setNewRouteInfo(DEFAULT_VALUES)
- }
- },
- })
- const [newRouteInfo, setNewRouteInfo] = useState(DEFAULT_VALUES)
-
- const handleSubmit = () => {
- const { path, ...options } = newRouteInfo
- sendJsonMessage({
- type: "add_route",
- path,
- options,
- })
- }
-
- const setNewInfo = (info: Partial) => {
- setNewRouteInfo({ ...newRouteInfo, ...info })
- }
- return (
-
-
Route path:
-
- setNewInfo({
- path: newRouteInfo.path.trim(),
- })
- }
- onChange={(e) => setNewInfo({ path: e.target.value })}
- className="mb-1"
- />
-
- This will be added to your routes folder under your entered name, exclude the extension
-
-