add plugin utility

Author: AlemTuzlak

packages/devtools-utils/src/react/index.ts

@@ -1 +1,2 @@
 export * from './panel'
+export * from './plugin'

packages/devtools-utils/src/react/plugin.tsx

@@ -0,0 +1,18 @@
+import type { JSX } from "react"
+import type { DevtoolsPanelProps } from "./panel"
+
+export function createReactPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element) {
+  function Plugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, theme: 'light' | 'dark') => <Component theme={theme} />,
+    }
+  }
+  function NoOpPlugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, _theme: 'light' | 'dark') => null,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}

packages/devtools-utils/src/solid/index.ts

@@ -1,2 +1,3 @@
 export * from './class'
 export * from './panel'
+export * from "./plugin"

packages/devtools-utils/src/solid/plugin.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import type { JSX } from "solid-js";
+import type { DevtoolsPanelProps } from "./panel";
+
+export function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element) {
+  function Plugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, theme: 'light' | 'dark') => {
+        return <Component theme={theme} />;
+      },
+    }
+  }
+  function NoOpPlugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, _theme: 'light' | 'dark') => null,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}