@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/solid/esm/dev.js

+import { createComponent, template, insert, use } from 'solid-js/web';
+import { onMount, onCleanup } from 'solid-js';
+
+// src/solid/class.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function constructCoreClass(Component) {
+  class DevtoolsCore {
+    #isMounted = false;
+    #dispose;
+    #Component;
+    #ThemeProvider;
+    constructor() {
+    }
+    async mount(el, theme) {
+      const {
+        lazy
+      } = await import('solid-js');
+      const {
+        render,
+        Portal
+      } = await import('solid-js/web');
+      if (this.#isMounted) {
+        throw new Error("Devtools is already mounted");
+      }
+      const mountTo = el;
+      const dispose = render(() => {
+        this.#Component = lazy(async () => ({
+          default: Component
+        }));
+        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
+          default: mod.ThemeContextProvider
+        })));
+        const Devtools = this.#Component;
+        const ThemeProvider = this.#ThemeProvider;
+        return createComponent(Portal, {
+          mount: mountTo,
+          get children() {
+            var _el$ = _tmpl$();
+            _el$.style.setProperty("height", "100%");
+            insert(_el$, createComponent(ThemeProvider, {
+              theme,
+              get children() {
+                return createComponent(Devtools, {});
+              }
+            }));
+            return _el$;
+          }
+        });
+      }, mountTo);
+      this.#isMounted = true;
+      this.#dispose = dispose;
+    }
+    unmount() {
+      if (!this.#isMounted) {
+        throw new Error("Devtools is not mounted");
+      }
+      this.#dispose?.();
+      this.#isMounted = false;
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super();
+    }
+    async mount(_el, _theme) {
+    }
+    unmount() {
+    }
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore];
+}
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    let devToolRef;
+    onMount(() => {
+      const devtools = new CoreClass();
+      if (devToolRef) {
+        devtools.mount(devToolRef, props?.theme ?? "dark");
+        onCleanup(() => {
+          devtools.unmount();
+        });
+      }
+    });
+    return (() => {
+      var _el$ = _tmpl$2();
+      var _ref$ = devToolRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+      _el$.style.setProperty("height", "100%");
+      return _el$;
+    })();
+  }
+  function NoOpPanel(_props) {
+    return [];
+  }
+  return [Panel, NoOpPanel];
+}
+function createSolidPlugin(name, Component) {
+  function Plugin() {
+    return {
+      name,
+      render: (_el, theme) => {
+        return createComponent(Component, {
+          theme
+        });
+      }
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      name,
+      render: (_el, _theme) => []
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+
+export { constructCoreClass, createSolidPanel, createSolidPlugin };

dist/solid/esm/server.js

+import { createComponent, ssr, escape } from 'solid-js/web';
+import { onMount } from 'solid-js';
+
+// src/solid/class.tsx
+var _tmpl$ = ['<div style="', '">', "</div>"];
+function constructCoreClass(Component) {
+  class DevtoolsCore {
+    #isMounted = false;
+    #dispose;
+    #Component;
+    #ThemeProvider;
+    constructor() {
+    }
+    async mount(el, theme) {
+      const {
+        lazy
+      } = await import('solid-js');
+      const {
+        render,
+        Portal
+      } = await import('solid-js/web');
+      if (this.#isMounted) {
+        throw new Error("Devtools is already mounted");
+      }
+      const mountTo = el;
+      const dispose = render(() => {
+        this.#Component = lazy(async () => ({
+          default: Component
+        }));
+        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
+          default: mod.ThemeContextProvider
+        })));
+        const Devtools = this.#Component;
+        const ThemeProvider = this.#ThemeProvider;
+        return createComponent(Portal, {
+          mount: mountTo,
+          get children() {
+            return ssr(_tmpl$, "height:100%", escape(createComponent(ThemeProvider, {
+              theme,
+              get children() {
+                return createComponent(Devtools, {});
+              }
+            })));
+          }
+        });
+      }, mountTo);
+      this.#isMounted = true;
+      this.#dispose = dispose;
+    }
+    unmount() {
+      if (!this.#isMounted) {
+        throw new Error("Devtools is not mounted");
+      }
+      this.#dispose?.();
+      this.#isMounted = false;
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super();
+    }
+    async mount(_el, _theme) {
+    }
+    unmount() {
+    }
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore];
+}
+var _tmpl$2 = ['<div style="', '"></div>'];
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    onMount(() => {
+      new CoreClass();
+    });
+    return ssr(_tmpl$2, "height:100%");
+  }
+  function NoOpPanel(_props) {
+    return [];
+  }
+  return [Panel, NoOpPanel];
+}
+function createSolidPlugin(name, Component) {
+  function Plugin() {
+    return {
+      name,
+      render: (_el, theme) => {
+        return createComponent(Component, {
+          theme
+        });
+      }
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      name,
+      render: (_el, _theme) => []
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+
+export { constructCoreClass, createSolidPanel, createSolidPlugin };

dist/solid/esm/index.d.ts

@@ -1,3 +0,51 @@
-export * from './class.js';
-export * from './panel.js';
-export * from './plugin.js';
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+/**
+ * Constructs the core class for the Devtools.
+ * This utility is used to construct a lazy loaded Solid component for the Devtools.
+ * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
+ * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
+ * the Devtools from your application.
+ * @param importPath The path to the Solid component to be lazily imported
+ * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
+ */
+declare function constructCoreClass(Component: () => JSX.Element): readonly [{
+    new (): {
+        #isMounted: boolean;
+        #dispose?: () => void;
+        #Component: any;
+        #ThemeProvider: any;
+        mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+    };
+}, {
+    new (): {
+        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+        #isMounted: boolean;
+        #dispose?: () => void;
+        #Component: any;
+        #ThemeProvider: any;
+    };
+}];
+type ClassType = ReturnType<typeof constructCoreClass>[0];
+
+interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => solid_js.JSX.Element, (_props: TComponentProps) => solid_js.JSX.Element];
+
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
+    name: string;
+    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+}, () => {
+    name: string;
+    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+}];
+
+export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };

dist/solid/esm/index.js

@@ -1,9 +0,118 @@
-import { constructCoreClass } from "./class.js";
-import { createSolidPanel } from "./panel.js";
-import { createSolidPlugin } from "./plugin.js";
-export {
-  constructCoreClass,
-  createSolidPanel,
-  createSolidPlugin
-};
-//# sourceMappingURL=index.js.map
+import { createComponent, template, insert, use } from 'solid-js/web';
+import { onMount, onCleanup } from 'solid-js';
+
+// src/solid/class.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function constructCoreClass(Component) {
+  class DevtoolsCore {
+    #isMounted = false;
+    #dispose;
+    #Component;
+    #ThemeProvider;
+    constructor() {
+    }
+    async mount(el, theme) {
+      const {
+        lazy
+      } = await import('solid-js');
+      const {
+        render,
+        Portal
+      } = await import('solid-js/web');
+      if (this.#isMounted) {
+        throw new Error("Devtools is already mounted");
+      }
+      const mountTo = el;
+      const dispose = render(() => {
+        this.#Component = lazy(async () => ({
+          default: Component
+        }));
+        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
+          default: mod.ThemeContextProvider
+        })));
+        const Devtools = this.#Component;
+        const ThemeProvider = this.#ThemeProvider;
+        return createComponent(Portal, {
+          mount: mountTo,
+          get children() {
+            var _el$ = _tmpl$();
+            _el$.style.setProperty("height", "100%");
+            insert(_el$, createComponent(ThemeProvider, {
+              theme,
+              get children() {
+                return createComponent(Devtools, {});
+              }
+            }));
+            return _el$;
+          }
+        });
+      }, mountTo);
+      this.#isMounted = true;
+      this.#dispose = dispose;
+    }
+    unmount() {
+      if (!this.#isMounted) {
+        throw new Error("Devtools is not mounted");
+      }
+      this.#dispose?.();
+      this.#isMounted = false;
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super();
+    }
+    async mount(_el, _theme) {
+    }
+    unmount() {
+    }
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore];
+}
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    let devToolRef;
+    onMount(() => {
+      const devtools = new CoreClass();
+      if (devToolRef) {
+        devtools.mount(devToolRef, props?.theme ?? "dark");
+        onCleanup(() => {
+          devtools.unmount();
+        });
+      }
+    });
+    return (() => {
+      var _el$ = _tmpl$2();
+      var _ref$ = devToolRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+      _el$.style.setProperty("height", "100%");
+      return _el$;
+    })();
+  }
+  function NoOpPanel(_props) {
+    return [];
+  }
+  return [Panel, NoOpPanel];
+}
+function createSolidPlugin(name, Component) {
+  function Plugin() {
+    return {
+      name,
+      render: (_el, theme) => {
+        return createComponent(Component, {
+          theme
+        });
+      }
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      name,
+      render: (_el, _theme) => []
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+
+export { constructCoreClass, createSolidPanel, createSolidPlugin };

package.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -29,6 +29,16 @@ "author": "Tanner Linsley",
     "./solid": {
-      "import": {
+      "browser": {
+        "development": {
+          "types": "./dist/solid/esm/index.d.ts",
+          "import": "./dist/solid/esm/dev.js"
+        },
         "types": "./dist/solid/esm/index.d.ts",
-        "default": "./dist/solid/esm/index.js"
-      }
+        "import": "./dist/solid/esm/index.js"
+      },
+      "node": {
+        "types": "./dist/solid/esm/index.d.ts",
+        "import": "./dist/solid/esm/server.js"
+      },
+      "types": "./dist/solid/esm/index.d.ts",
+      "import": "./dist/solid/esm/index.js"
     },
@@ -65,2 +75,4 @@ "./package.json": "./package.json"
   "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.8"
@@ -76,4 +88,4 @@ },
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config ./vite.config.solid.ts "
+    "build": "vite build && tsup "
   }
 }

dist/solid/esm/class.d.ts

-import { JSX } from 'solid-js';
-/**
- * Constructs the core class for the Devtools.
- * This utility is used to construct a lazy loaded Solid component for the Devtools.
- * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
- * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
- * the Devtools from your application.
- * @param importPath The path to the Solid component to be lazily imported
- * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
- */
-export declare function constructCoreClass(Component: () => JSX.Element): readonly [{
-    new (): {
-        #isMounted: boolean;
-        #dispose?: () => void;
-        #Component: any;
-        #ThemeProvider: any;
-        mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
-        unmount(): void;
-    };
-}, {
-    new (): {
-        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
-        unmount(): void;
-        #isMounted: boolean;
-        #dispose?: () => void;
-        #Component: any;
-        #ThemeProvider: any;
-    };
-}];
-export type ClassType = ReturnType<typeof constructCoreClass>[0];

dist/solid/esm/class.js

-import { createComponent, getNextElement, template, insert } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function constructCoreClass(Component) {
-  class DevtoolsCore {
-    #isMounted = false;
-    #dispose;
-    #Component;
-    #ThemeProvider;
-    constructor() {
-    }
-    async mount(el, theme) {
-      const {
-        lazy
-      } = await import("solid-js");
-      const {
-        render,
-        Portal
-      } = await import("solid-js/web");
-      if (this.#isMounted) {
-        throw new Error("Devtools is already mounted");
-      }
-      const mountTo = el;
-      const dispose = render(() => {
-        this.#Component = lazy(async () => ({
-          default: Component
-        }));
-        this.#ThemeProvider = lazy(() => import("@tanstack/devtools-ui").then((mod) => ({
-          default: mod.ThemeContextProvider
-        })));
-        const Devtools = this.#Component;
-        const ThemeProvider = this.#ThemeProvider;
-        return createComponent(Portal, {
-          mount: mountTo,
-          get children() {
-            var _el$ = getNextElement(_tmpl$);
-            _el$.style.setProperty("height", "100%");
-            insert(_el$, createComponent(ThemeProvider, {
-              theme,
-              get children() {
-                return createComponent(Devtools, {});
-              }
-            }));
-            return _el$;
-          }
-        });
-      }, mountTo);
-      this.#isMounted = true;
-      this.#dispose = dispose;
-    }
-    unmount() {
-      if (!this.#isMounted) {
-        throw new Error("Devtools is not mounted");
-      }
-      this.#dispose?.();
-      this.#isMounted = false;
-    }
-  }
-  class NoOpDevtoolsCore extends DevtoolsCore {
-    constructor() {
-      super();
-    }
-    async mount(_el, _theme) {
-    }
-    unmount() {
-    }
-  }
-  return [DevtoolsCore, NoOpDevtoolsCore];
-}
-export {
-  constructCoreClass
-};
-//# sourceMappingURL=class.js.map

dist/solid/esm/class.js.map

-{"version":3,"file":"class.js","sources":["../../../src/solid/class.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport type { JSX } from 'solid-js'\n\n/**\n * Constructs the core class for the Devtools.\n * This utility is used to construct a lazy loaded Solid component for the Devtools.\n * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.\n * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude\n * the Devtools from your application.\n * @param importPath The path to the Solid component to be lazily imported\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(Component: () => JSX.Element) {\n  class DevtoolsCore {\n    #isMounted = false\n    #dispose?: () => void\n    #Component: any\n    #ThemeProvider: any\n\n    constructor() {}\n\n    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {\n      const { lazy } = await import('solid-js')\n      const { render, Portal } = await import('solid-js/web')\n      if (this.#isMounted) {\n        throw new Error('Devtools is already mounted')\n      }\n      const mountTo = el\n      const dispose = render(() => {\n        // eslint-disable-next-line @typescript-eslint/require-await\n        this.#Component = lazy(async () => ({ default: Component }))\n\n        this.#ThemeProvider = lazy(() =>\n          import('@tanstack/devtools-ui').then((mod) => ({\n            default: mod.ThemeContextProvider,\n          })),\n        )\n        const Devtools = this.#Component\n        const ThemeProvider = this.#ThemeProvider\n\n        return (\n          <Portal mount={mountTo}>\n            <div style={{ height: '100%' }}>\n              <ThemeProvider theme={theme}>\n                <Devtools />\n              </ThemeProvider>\n            </div>\n          </Portal>\n        )\n      }, mountTo)\n      this.#isMounted = true\n      this.#dispose = dispose\n    }\n\n    unmount() {\n      if (!this.#isMounted) {\n        throw new Error('Devtools is not mounted')\n      }\n      this.#dispose?.()\n      this.#isMounted = false\n    }\n  }\n  class NoOpDevtoolsCore extends DevtoolsCore {\n    constructor() {\n      super()\n    }\n    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}\n    unmount() {}\n  }\n  return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"names":["constructCoreClass","Component","DevtoolsCore","constructor","mount","el","theme","lazy","render","Portal","Error","mountTo","dispose","default","then","mod","ThemeContextProvider","Devtools","ThemeProvider","_$createComponent","children","_el$","_$getNextElement","_tmpl$","style","setProperty","_$insert","unmount","NoOpDevtoolsCore","_el","_theme"],"mappings":";;AAaO,SAASA,mBAAmBC,WAA8B;AAAA,EAC/D,MAAMC,aAAa;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IAEAC,cAAc;AAAA,IAAC;AAAA,IAEf,MAAMC,MAA6BC,IAAOC,OAAyB;AACjE,YAAM;AAAA,QAAEC;AAAAA,MAAAA,IAAS,MAAM,OAAO,UAAU;AACxC,YAAM;AAAA,QAAEC;AAAAA,QAAQC;AAAAA,MAAAA,IAAW,MAAM,OAAO,cAAc;AACtD,UAAI,KAAK,YAAY;AACnB,cAAM,IAAIC,MAAM,6BAA6B;AAAA,MAC/C;AACA,YAAMC,UAAUN;AAChB,YAAMO,UAAUJ,OAAO,MAAM;AAE3B,aAAK,aAAaD,KAAK,aAAa;AAAA,UAAEM,SAASZ;AAAAA,QAAAA,EAAY;AAE3D,aAAK,iBAAiBM,KAAK,MACzB,OAAO,uBAAuB,EAAEO,KAAMC,CAAAA,SAAS;AAAA,UAC7CF,SAASE,IAAIC;AAAAA,QAAAA,EACb,CACJ;AACA,cAAMC,WAAW,KAAK;AACtB,cAAMC,gBAAgB,KAAK;AAE3B,eAAAC,gBACGV,QAAM;AAAA,UAACL,OAAOO;AAAAA,UAAO,IAAAS,WAAA;AAAA,gBAAAC,OAAAC,eAAAC,MAAA;AAAAF,iBAAAG,MAAAC,YAAA,UAAA,MAAA;AAAAC,mBAAAL,MAAAF,gBAEjBD,eAAa;AAAA,cAACZ;AAAAA,cAAY,IAAAc,WAAA;AAAA,uBAAAD,gBACxBF,UAAQ,EAAA;AAAA,cAAA;AAAA,YAAA,CAAA,CAAA;AAAA,mBAAAI;AAAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAKnB,GAAGV,OAAO;AACV,WAAK,aAAa;AAClB,WAAK,WAAWC;AAAAA,IAClB;AAAA,IAEAe,UAAU;AACR,UAAI,CAAC,KAAK,YAAY;AACpB,cAAM,IAAIjB,MAAM,yBAAyB;AAAA,MAC3C;AACA,WAAK,WAAA;AACL,WAAK,aAAa;AAAA,IACpB;AAAA,EAAA;AAAA,EAEF,MAAMkB,yBAAyB1B,aAAa;AAAA,IAC1CC,cAAc;AACZ,YAAA;AAAA,IACF;AAAA,IACA,MAAMC,MAA6ByB,KAAQC,QAA0B;AAAA,IAAC;AAAA,IACtEH,UAAU;AAAA,IAAC;AAAA,EAAA;AAEb,SAAO,CAACzB,cAAc0B,gBAAgB;AACxC;"}

dist/solid/esm/index.js.map

-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

dist/solid/esm/panel.d.ts

-import { ClassType } from './class.js';
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
-}
-export declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => import("solid-js").JSX.Element, (_props: TComponentProps) => import("solid-js").JSX.Element];

dist/solid/esm/panel.js

-import { getNextElement, template, use } from "solid-js/web";
-import { onMount, onCleanup } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function createSolidPanel(CoreClass) {
-  function Panel(props) {
-    let devToolRef;
-    onMount(() => {
-      const devtools = new CoreClass();
-      if (devToolRef) {
-        devtools.mount(devToolRef, props?.theme ?? "dark");
-        onCleanup(() => {
-          devtools.unmount();
-        });
-      }
-    });
-    return (() => {
-      var _el$ = getNextElement(_tmpl$);
-      var _ref$ = devToolRef;
-      typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-      _el$.style.setProperty("height", "100%");
-      return _el$;
-    })();
-  }
-  function NoOpPanel(_props) {
-    return [];
-  }
-  return [Panel, NoOpPanel];
-}
-export {
-  createSolidPanel
-};
-//# sourceMappingURL=panel.js.map

dist/solid/esm/panel.js.map

-{"version":3,"file":"panel.js","sources":["../../../src/solid/panel.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { onCleanup, onMount } from 'solid-js'\nimport type { ClassType } from './class'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\nexport function createSolidPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n>(CoreClass: ClassType) {\n  function Panel(props: TComponentProps) {\n    let devToolRef: HTMLDivElement | undefined\n\n    onMount(() => {\n      const devtools = new CoreClass()\n\n      if (devToolRef) {\n        devtools.mount(devToolRef, props?.theme ?? 'dark')\n\n        onCleanup(() => {\n          devtools.unmount()\n        })\n      }\n    })\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n\n  return [Panel, NoOpPanel] as const\n}\n"],"names":["createSolidPanel","CoreClass","Panel","props","devToolRef","onMount","devtools","mount","theme","onCleanup","unmount","_el$","_$getNextElement","_tmpl$","_ref$","_$use","style","setProperty","NoOpPanel","_props"],"mappings":";;;AASO,SAASA,iBAEdC,WAAsB;AACtB,WAASC,MAAMC,OAAwB;AACrC,QAAIC;AAEJC,YAAQ,MAAM;AACZ,YAAMC,WAAW,IAAIL,UAAAA;AAErB,UAAIG,YAAY;AACdE,iBAASC,MAAMH,YAAYD,OAAOK,SAAS,MAAM;AAEjDC,kBAAU,MAAM;AACdH,mBAASI,QAAAA;AAAAA,QACX,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,YAAA,MAAA;AAAA,UAAAC,OAAAC,eAAAC,MAAA;AAAA,UAAAC,QAA4CV;AAAU,aAAAU,UAAA,aAAAC,IAAAD,OAAAH,IAAA,IAAVP,aAAUO;AAAAA,WAAAK,MAAAC,YAAA,UAAA,MAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,EACxD;AAEA,WAASO,UAAUC,QAAyB;AAC1C,WAAA,CAAA;AAAA,EACF;AAEA,SAAO,CAACjB,OAAOgB,SAAS;AAC1B;"}

dist/solid/esm/plugin.d.ts

-import { JSX } from 'solid-js';
-import { DevtoolsPanelProps } from './panel.js';
-export declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
-    name: string;
-    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
-}, () => {
-    name: string;
-    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
-}];

dist/solid/esm/plugin.js

-import { createComponent } from "solid-js/web";
-function createSolidPlugin(name, Component) {
-  function Plugin() {
-    return {
-      name,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
-      }
-    };
-  }
-  function NoOpPlugin() {
-    return {
-      name,
-      render: (_el, _theme) => []
-    };
-  }
-  return [Plugin, NoOpPlugin];
-}
-export {
-  createSolidPlugin
-};
-//# sourceMappingURL=plugin.js.map

dist/solid/esm/plugin.js.map

-{"version":3,"file":"plugin.js","sources":["../../../src/solid/plugin.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport type { JSX } from 'solid-js'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createSolidPlugin(\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        return <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":["createSolidPlugin","name","Component","Plugin","render","_el","theme","_$createComponent","NoOpPlugin","_theme"],"mappings":";AAKO,SAASA,kBACdC,MACAC,WACA;AACA,WAASC,SAAS;AAChB,WAAO;AAAA,MACLF;AAAAA,MACAG,QAAQA,CAACC,KAAkBC,UAA4B;AACrD,eAAAC,gBAAQL,WAAS;AAAA,UAACI;AAAAA,QAAAA,CAAY;AAAA,MAChC;AAAA,IAAA;AAAA,EAEJ;AACA,WAASE,aAAa;AACpB,WAAO;AAAA,MACLP;AAAAA,MACAG,QAAQA,CAACC,KAAkBI,WAAwB,CAAA;AAAA,IAAA;AAAA,EAEvD;AACA,SAAO,CAACN,QAAQK,UAAU;AAC5B;"}

No alert changes

Improved metrics

Lines of code

762

33.92%

Worsened metrics

Total package byte prevSize

30898

-5.71%

Dev dependency count

3

200%

Number of package files

24

-25%

No dependency changes