@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/react/esm/plugin.d.ts

 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 [() => {
+    config: {
+        name: string;
+        id?: string;
+        defaultOpen?: boolean;
+    };
     render: (_el: HTMLElement, theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
 }, () => {
-    name: string;
+    config: {
+        name: string;
+        id?: string;
+        defaultOpen?: boolean;
+    };
     render: (_el: HTMLElement, _theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
 }];

dist/react/esm/plugin.js

 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 })
@@ -11,3 +14,3 @@ };
     return {
-      name,
+      config,
       render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
@@ -14,0 +17,0 @@ };

dist/react/esm/plugin.js.map

@@ -1,1 +0,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;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;"}

dist/solid/esm/dev.js

@@ -96,6 +96,9 @@ import { createComponent, template, insert, use } from 'solid-js/web';
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
@@ -110,3 +113,3 @@ return createComponent(Component, {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
@@ -113,0 +116,0 @@ };

dist/solid/esm/index.d.ts

@@ -43,10 +43,19 @@ import * as solid_js from 'solid-js';
 
-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;
-    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    id?: string;
+    defaultOpen?: boolean;
 }];
 
 export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };

dist/solid/esm/index.js

@@ -96,6 +96,9 @@ import { createComponent, template, insert, use } from 'solid-js/web';
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
@@ -110,3 +113,3 @@ return createComponent(Component, {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
@@ -113,0 +116,0 @@ };

dist/solid/esm/server.js

@@ -83,6 +83,9 @@ import { createComponent, ssr, escape } from 'solid-js/web';
 }
-function createSolidPlugin(name, Component) {
+function createSolidPlugin({
+  Component,
+  ...config
+}) {
   function Plugin() {
     return {
-      name,
+      ...config,
       render: (_el, theme) => {
@@ -97,3 +100,3 @@ return createComponent(Component, {
     return {
-      name,
+      ...config,
       render: (_el, _theme) => []
@@ -100,0 +103,0 @@ };

package.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -51,3 +51,3 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.4.0"
+    "@tanstack/devtools-ui": "^0.4.4"
   },
@@ -54,0 +54,0 @@ "peerDependencies": {

src/react/plugin.tsx

 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') => (
@@ -18,3 +23,3 @@ <Component theme={theme} />
     return {
-      name: name,
+      config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
@@ -21,0 +26,0 @@ }

src/solid/plugin.tsx

@@ -6,9 +6,14 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
-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') => {
@@ -21,3 +26,3 @@ return <Component theme={theme} />
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
@@ -24,0 +29,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

31721

2.3%

Lines of code

806

5.77%

Dependency changes

• Updated

  @tanstack/devtools-ui@^0.4.4