Skip to content

Commit

Permalink
Revert "removed remix forge integration"
Browse files Browse the repository at this point in the history
This reverts commit 32fe7de.
  • Loading branch information
AlemTuzlak committed Sep 29, 2024
1 parent 32fe7de commit 9c5e6d3
Show file tree
Hide file tree
Showing 10 changed files with 395 additions and 204 deletions.
49 changes: 45 additions & 4 deletions docs/posts/4.7.0/guides/plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -13,7 +13,7 @@ export default defineConfig({
plugins: [
remixDevTools({
pluginsDir: "./plugins"
})],
})],
});
```

Expand All @@ -39,6 +39,8 @@ Export a function with the following contract:
icon: <MyIcon size={16} />,
// The component to be rendered when the tab is active
component: <MyComponent />,
// 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,
}
Expand All @@ -54,5 +56,44 @@ 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 <div>My Component</div>
}
```

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 <div onClick={runCommand}>My Component</div>
}
```
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!
49 changes: 45 additions & 4 deletions docs/posts/main/guides/plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -13,7 +13,7 @@ export default defineConfig({
plugins: [
remixDevTools({
pluginsDir: "./plugins"
})],
})],
});
```

Expand All @@ -39,6 +39,8 @@ Export a function with the following contract:
icon: <MyIcon size={16} />,
// The component to be rendered when the tab is active
component: <MyComponent />,
// 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,
}
Expand All @@ -54,5 +56,44 @@ 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 <div>My Component</div>
}
```

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 <div onClick={runCommand}>My Component</div>
}
```
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!
13 changes: 4 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,7 @@
"default": "./dist/client.css"
}
},
"files": [
"dist"
],
"files": ["dist"],
"repository": {
"type": "git",
"url": "git+https://github.com/Code-Forge-Net/Remix-Dev-Tools.git"
Expand Down Expand Up @@ -93,11 +91,7 @@
"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",
Expand Down Expand Up @@ -145,6 +139,7 @@
"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"
}
}
}
2 changes: 1 addition & 1 deletion src/client.ts
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Loading

0 comments on commit 9c5e6d3

Please sign in to comment.