@tanstack/devtools-utils 0.0.4 → 0.0.6

package/dist/react/esm/plugin.d.ts

@@ -1,9 +1,18 @@
 import { JSX } from 'react';
 import { DevtoolsPanelProps } from './panel.js';
-export declare function createReactPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
+export declare function createReactPlugin({ Component, ...config }: {
     name: string;
+    id?: string;
+    defaultOpen?: boolean;
+    Component: (props: DevtoolsPanelProps) => JSX.Element;
+}): readonly [() => {
     render: (_el: HTMLElement, theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
-}, () => {
     name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, () => {
     render: (_el: HTMLElement, _theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
 }];

package/dist/react/esm/plugin.js

@@ -1,14 +1,17 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-function createReactPlugin(name, Component) {
+function createReactPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
     };
   }
   function NoOpPlugin() {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
     };
   }

package/dist/react/esm/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../../src/react/plugin.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createReactPlugin(\n  name: string,\n  Component: (props: DevtoolsPanelProps) => JSX.Element,\n) {\n  function Plugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,kBACd,MACA,WACA;AACA,WAAS,SAAS;AAChB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}
+{"version":3,"file":"plugin.js","sources":["../../../src/react/plugin.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createReactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAKG;AACD,WAAS,SAAS;AAChB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}

package/dist/solid/esm/dev.js

@@ -93,10 +93,13 @@ function createSolidPanel(CoreClass) {
   }
   return [Panel, NoOpPanel];
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
         return createComponent(Component, {
           theme
@@ -106,7 +109,7 @@ function createSolidPlugin(name, Component) {
   }
   function NoOpPlugin() {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
     };
   }

package/dist/solid/esm/index.d.ts

@@ -14,10 +14,10 @@ import { JSX } from 'solid-js';
  */
 declare function constructCoreClass(Component: () => JSX.Element): readonly [{
     new (): {
-        #isMounted: boolean;
-        #dispose?: () => void;
-        #Component: any;
-        #ThemeProvider: any;
+        "__#private@#isMounted": boolean;
+        "__#private@#dispose"?: () => void;
+        "__#private@#Component": any;
+        "__#private@#ThemeProvider": any;
         mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
         unmount(): void;
     };
@@ -25,10 +25,10 @@ declare function constructCoreClass(Component: () => JSX.Element): readonly [{
     new (): {
         mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
         unmount(): void;
-        #isMounted: boolean;
-        #dispose?: () => void;
-        #Component: any;
-        #ThemeProvider: any;
+        "__#private@#isMounted": boolean;
+        "__#private@#dispose"?: () => void;
+        "__#private@#Component": any;
+        "__#private@#ThemeProvider": any;
     };
 }];
 type ClassType = ReturnType<typeof constructCoreClass>[0];
@@ -40,12 +40,21 @@ declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | u
 
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
-declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
+declare function createSolidPlugin({ Component, ...config }: {
     name: string;
+    id?: string;
+    defaultOpen?: boolean;
+    Component: (props: DevtoolsPanelProps) => JSX.Element;
+}): readonly [() => {
     render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
-}, () => {
     name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, () => {
     render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
 }];
 
 export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };

package/dist/solid/esm/index.js

@@ -93,10 +93,13 @@ function createSolidPanel(CoreClass) {
   }
   return [Panel, NoOpPanel];
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
         return createComponent(Component, {
           theme
@@ -106,7 +109,7 @@ function createSolidPlugin(name, Component) {
   }
   function NoOpPlugin() {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
     };
   }

package/dist/solid/esm/server.js

@@ -80,10 +80,13 @@ function createSolidPanel(CoreClass) {
   }
   return [Panel, NoOpPanel];
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
         return createComponent(Component, {
           theme
@@ -93,7 +96,7 @@ function createSolidPlugin(name, Component) {
   }
   function NoOpPlugin() {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.4.0"
+    "@tanstack/devtools-ui": "^0.4.4"
   },
   "peerDependencies": {
     "@types/react": ">=19.0.0",

package/src/react/plugin.tsx

@@ -1,13 +1,18 @@
 import type { JSX } from 'react'
 import type { DevtoolsPanelProps } from './panel'
 
-export function createReactPlugin(
-  name: string,
-  Component: (props: DevtoolsPanelProps) => JSX.Element,
-) {
+export function createReactPlugin({
+  Component,
+  ...config
+}: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}) {
   function Plugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, theme: 'light' | 'dark') => (
         <Component theme={theme} />
       ),
@@ -15,7 +20,7 @@ export function createReactPlugin(
   }
   function NoOpPlugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
     }
   }

package/src/solid/plugin.tsx

@@ -3,13 +3,18 @@
 import type { JSX } from 'solid-js'
 import type { DevtoolsPanelProps } from './panel'
 
-export function createSolidPlugin(
-  name: string,
-  Component: (props: DevtoolsPanelProps) => JSX.Element,
-) {
+export function createSolidPlugin({
+  Component,
+  ...config
+}: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}) {
   function Plugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, theme: 'light' | 'dark') => {
         return <Component theme={theme} />
       },
@@ -17,7 +22,7 @@ export function createSolidPlugin(
   }
   function NoOpPlugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
     }
   }