chore: update README

Author: AlemTuzlak

packages/event-bus-plugin/README.md

@@ -5,37 +5,40 @@ This package is still under active development and might have breaking changes i
 ## General Usage
 
 ```tsx
-import { TanStackDevtoolsCore } from '@tanstack/devtools'
-
-const devtools = new TanStackDevtoolsCore({
-  options: {
-    // your options here
-  },
-  plugins: [
-    // your plugins here
-  ],
-})
-
-devtools.mount(document.getElementById('your-devtools-container')!)
-```
+import { z } from 'zod'
+import { TanstackDevtoolsEventSubscription } from '@tanstack/devtools-event-bus-plugin'
+
+const eventMap = {
+  'query-devtools:test': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:init': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:query': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+}
+
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<
+  typeof eventMap
+> {
+  constructor() {
+    super({
+      pluginId: 'query-devtools',
+    })
+  }
+}
+
+export const queryPlugin = new QueryDevtoolsPlugin()
 
-## Creating plugins
-
-In order to create a plugin for TanStack Devtools, you can use the `plugins` arg of the `TanStackDevtoolsCore` class. Here's an example of how to create a simple plugin:
-
-```ts
-import { TanStackDevtoolsCore } from '@tanstack/devtools'
-
-const devtools = new TanStackDevtoolsCore({
-  options: {
-    // your options here
-  },
-  plugins: [
-    {
-      id: 'my-plugin',
-      name: 'My Plugin',
-      render: (el) => (el.innerHTML = '<div>My Plugin Content</div>'),
-    },
-  ],
-})
 ```
+ 
+## Understanding the implementation
+
+The `TanstackDevtoolsEventSubscription` class is a base class for creating plugins that can subscribe to events in the Tanstack Devtools event bus. It allows you to define a set of events and their corresponding data schemas using a standard-schema based schemas.
+
+It will work on both the client/server side and all you have to worry about is emitting/listening to events.

packages/event-bus/README.md

@@ -1,41 +1,34 @@
-# @tanstack/devtools
+# @tanstack/devtools-event-bus
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.
 
 ## General Usage
 
+### Server Event Bus
+
 ```tsx
-import { TanStackDevtoolsCore } from '@tanstack/devtools'
-
-const devtools = new TanStackDevtoolsCore({
-  options: {
-    // your options here
-  },
-  plugins: [
-    // your plugins here
-  ],
-})
-
-devtools.mount(document.getElementById('your-devtools-container')!)
-```
+import { TanstackDevtoolsServerEventBus } from '@tanstack/devtools-event-bus/server'
+// Start the server event bus
+const devtoolsServer = new TanstackDevtoolsServerEventBus()
+
+devtoolsServer.start()
+
+export { devtoolsServer }
 
-## Creating plugins
+```
 
-In order to create a plugin for TanStack Devtools, you can use the `plugins` arg of the `TanStackDevtoolsCore` class. Here's an example of how to create a simple plugin:
+### Client Event Bus
 
 ```ts
-import { TanStackDevtoolsCore } from '@tanstack/devtools'
-
-const devtools = new TanStackDevtoolsCore({
-  options: {
-    // your options here
-  },
-  plugins: [
-    {
-      id: 'my-plugin',
-      name: 'My Plugin',
-      render: (el) => (el.innerHTML = '<div>My Plugin Content</div>'),
-    },
-  ],
-})
+import { TanstackDevtoolsClientEventBus } from '@tanstack/devtools-event-bus/client'
+// Start the client event bus
+const devtoolsClient = new TanstackDevtoolsClientEventBus()
+
+devtoolsClient.start()
+
+export { devtoolsClient }
 ```
+ 
+## Plugins
+
+Check out @tanstack/devtools-event-bus-plugin for more information on how to create plugins for the event bus.