@tanstack/devtools-utils 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/react/esm/plugin.d.ts +15 -2
  2. package/dist/react/esm/plugin.js +6 -3
  3. package/dist/react/esm/plugin.js.map +1 -1
  4. package/dist/solid/esm/dev.js +6 -3
  5. package/dist/solid/esm/index.d.ts +11 -2
  6. package/dist/solid/esm/index.js +6 -3
  7. package/dist/solid/esm/server.js +6 -3
  8. package/package.json +2 -2
  9. package/src/react/plugin.tsx +11 -6
  10. package/src/solid/plugin.tsx +11 -6
package/dist/react/esm/plugin.d.ts CHANGED
@@ -1,9 +1,22 @@
1
1
  import { JSX } from 'react';
2
2
  import { DevtoolsPanelProps } from './panel.js';
3
- export declare function createReactPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
3
+ export declare function createReactPlugin({ Component, ...config }: {
4
4
  name: string;
5
+ id?: string;
6
+ defaultOpen?: boolean;
7
+ Component: (props: DevtoolsPanelProps) => JSX.Element;
8
+ }): readonly [() => {
9
+ config: {
10
+ name: string;
11
+ id?: string;
12
+ defaultOpen?: boolean;
13
+ };
5
14
  render: (_el: HTMLElement, theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
6
15
  }, () => {
7
- name: string;
16
+ config: {
17
+ name: string;
18
+ id?: string;
19
+ defaultOpen?: boolean;
20
+ };
8
21
  render: (_el: HTMLElement, _theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
9
22
  }];
package/dist/react/esm/plugin.js CHANGED
@@ -1,14 +1,17 @@
1
1
  import { jsx, Fragment } from "react/jsx-runtime";
2
- function createReactPlugin(name, Component) {
2
+ function createReactPlugin({
3
+ Component,
4
+ ...config
5
+ }) {
3
6
  function Plugin() {
4
7
  return {
5
- name,
8
+ config,
6
9
  render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
7
10
  };
8
11
  }
9
12
  function NoOpPlugin() {
10
13
  return {
11
- name,
14
+ config,
12
15
  render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
13
16
  };
14
17
  }
package/dist/react/esm/plugin.js.map CHANGED
@@ -1 +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;"}
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 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;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;"}
package/dist/solid/esm/dev.js CHANGED
@@ -93,10 +93,13 @@ function createSolidPanel(CoreClass) {
93
93
  }
94
94
  return [Panel, NoOpPanel];
95
95
  }
96
- function createSolidPlugin(name, Component) {
96
+ function createSolidPlugin({
97
+ Component,
98
+ ...config
99
+ }) {
97
100
  function Plugin() {
98
101
  return {
99
- name,
102
+ ...config,
100
103
  render: (_el, theme) => {
101
104
  return createComponent(Component, {
102
105
  theme
@@ -106,7 +109,7 @@ function createSolidPlugin(name, Component) {
106
109
  }
107
110
  function NoOpPlugin() {
108
111
  return {
109
- name,
112
+ ...config,
110
113
  render: (_el, _theme) => []
111
114
  };
112
115
  }
package/dist/solid/esm/index.d.ts CHANGED
@@ -40,12 +40,21 @@ declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | u
40
40
 
41
41
  /** @jsxImportSource solid-js - we use Solid.js as JSX here */
42
42
 
43
- declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
43
+ declare function createSolidPlugin({ Component, ...config }: {
44
44
  name: string;
45
+ id?: string;
46
+ defaultOpen?: boolean;
47
+ Component: (props: DevtoolsPanelProps) => JSX.Element;
48
+ }): readonly [() => {
45
49
  render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
46
- }, () => {
47
50
  name: string;
51
+ id?: string;
52
+ defaultOpen?: boolean;
53
+ }, () => {
48
54
  render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
55
+ name: string;
56
+ id?: string;
57
+ defaultOpen?: boolean;
49
58
  }];
50
59
 
51
60
  export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };
package/dist/solid/esm/index.js CHANGED
@@ -93,10 +93,13 @@ function createSolidPanel(CoreClass) {
93
93
  }
94
94
  return [Panel, NoOpPanel];
95
95
  }
96
- function createSolidPlugin(name, Component) {
96
+ function createSolidPlugin({
97
+ Component,
98
+ ...config
99
+ }) {
97
100
  function Plugin() {
98
101
  return {
99
- name,
102
+ ...config,
100
103
  render: (_el, theme) => {
101
104
  return createComponent(Component, {
102
105
  theme
@@ -106,7 +109,7 @@ function createSolidPlugin(name, Component) {
106
109
  }
107
110
  function NoOpPlugin() {
108
111
  return {
109
- name,
112
+ ...config,
110
113
  render: (_el, _theme) => []
111
114
  };
112
115
  }
package/dist/solid/esm/server.js CHANGED
@@ -80,10 +80,13 @@ function createSolidPanel(CoreClass) {
80
80
  }
81
81
  return [Panel, NoOpPanel];
82
82
  }
83
- function createSolidPlugin(name, Component) {
83
+ function createSolidPlugin({
84
+ Component,
85
+ ...config
86
+ }) {
84
87
  function Plugin() {
85
88
  return {
86
- name,
89
+ ...config,
87
90
  render: (_el, theme) => {
88
91
  return createComponent(Component, {
89
92
  theme
@@ -93,7 +96,7 @@ function createSolidPlugin(name, Component) {
93
96
  }
94
97
  function NoOpPlugin() {
95
98
  return {
96
- name,
99
+ ...config,
97
100
  render: (_el, _theme) => []
98
101
  };
99
102
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/devtools-utils",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "description": "TanStack Devtools utilities for creating your own devtools.",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -48,7 +48,7 @@
48
48
  "node": ">=18"
49
49
  },
50
50
  "dependencies": {
51
- "@tanstack/devtools-ui": "^0.4.0"
51
+ "@tanstack/devtools-ui": "^0.4.4"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@types/react": ">=19.0.0",
package/src/react/plugin.tsx CHANGED
@@ -1,13 +1,18 @@
1
1
  import type { JSX } from 'react'
2
2
  import type { DevtoolsPanelProps } from './panel'
3
3
 
4
- export function createReactPlugin(
5
- name: string,
6
- Component: (props: DevtoolsPanelProps) => JSX.Element,
7
- ) {
4
+ export function createReactPlugin({
5
+ Component,
6
+ ...config
7
+ }: {
8
+ name: string
9
+ id?: string
10
+ defaultOpen?: boolean
11
+ Component: (props: DevtoolsPanelProps) => JSX.Element
12
+ }) {
8
13
  function Plugin() {
9
14
  return {
10
- name: name,
15
+ config,
11
16
  render: (_el: HTMLElement, theme: 'light' | 'dark') => (
12
17
  <Component theme={theme} />
13
18
  ),
@@ -15,7 +20,7 @@ export function createReactPlugin(
15
20
  }
16
21
  function NoOpPlugin() {
17
22
  return {
18
- name: name,
23
+ config,
19
24
  render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
20
25
  }
21
26
  }
package/src/solid/plugin.tsx CHANGED
@@ -3,13 +3,18 @@
3
3
  import type { JSX } from 'solid-js'
4
4
  import type { DevtoolsPanelProps } from './panel'
5
5
 
6
- export function createSolidPlugin(
7
- name: string,
8
- Component: (props: DevtoolsPanelProps) => JSX.Element,
9
- ) {
6
+ export function createSolidPlugin({
7
+ Component,
8
+ ...config
9
+ }: {
10
+ name: string
11
+ id?: string
12
+ defaultOpen?: boolean
13
+ Component: (props: DevtoolsPanelProps) => JSX.Element
14
+ }) {
10
15
  function Plugin() {
11
16
  return {
12
- name: name,
17
+ ...config,
13
18
  render: (_el: HTMLElement, theme: 'light' | 'dark') => {
14
19
  return <Component theme={theme} />
15
20
  },
@@ -17,7 +22,7 @@ export function createSolidPlugin(
17
22
  }
18
23
  function NoOpPlugin() {
19
24
  return {
20
- name: name,
25
+ ...config,
21
26
  render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
22
27
  }
23
28
  }