@tanstack/solid-pacer-devtools 0.3.0 → 0.4.0

package/dist/esm/SolidPacerDevtools.d.ts

@@ -1,4 +1,5 @@
-export interface PacerDevtoolsSolidInit {
-    theme?: 'light' | 'dark';
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid';
+declare const PacerDevtoolsPanel: (props: DevtoolsPanelProps | undefined) => import("solid-js").JSX.Element, PacerDevtoolsPanelNoOp: (_props: DevtoolsPanelProps | undefined) => import("solid-js").JSX.Element;
+export interface PacerDevtoolsSolidInit extends DevtoolsPanelProps {
 }
-export declare const PacerDevtoolsPanel: (props?: PacerDevtoolsSolidInit) => import("solid-js").JSX.Element;
+export { PacerDevtoolsPanel, PacerDevtoolsPanelNoOp };

package/dist/esm/SolidPacerDevtools.js

@@ -1,27 +1,8 @@
-import { template, use } from "solid-js/web";
+import { createSolidPanel } from "@tanstack/devtools-utils/solid";
 import { PacerDevtoolsCore } from "@tanstack/pacer-devtools";
-import { createSignal, onMount, onCleanup } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-const PacerDevtoolsPanel = (props) => {
-  let devToolRef;
-  const [devtools] = createSignal(new PacerDevtoolsCore({}));
-  onMount(() => {
-    if (devToolRef) {
-      devtools().mount(devToolRef, props?.theme ?? "dark");
-      onCleanup(() => {
-        devtools().unmount();
-      });
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$();
-    var _ref$ = devToolRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-    _el$.style.setProperty("height", "100%");
-    return _el$;
-  })();
-};
+const [PacerDevtoolsPanel, PacerDevtoolsPanelNoOp] = createSolidPanel(PacerDevtoolsCore);
 export {
-  PacerDevtoolsPanel
+  PacerDevtoolsPanel,
+  PacerDevtoolsPanelNoOp
 };
 //# sourceMappingURL=SolidPacerDevtools.js.map

package/dist/esm/SolidPacerDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidPacerDevtools.js","sources":["../../src/SolidPacerDevtools.tsx"],"sourcesContent":["import { PacerDevtoolsCore } from '@tanstack/pacer-devtools'\nimport { createSignal, onCleanup, onMount } from 'solid-js'\n\nexport interface PacerDevtoolsSolidInit {\n  theme?: 'light' | 'dark'\n}\n\nexport const PacerDevtoolsPanel = (props?: PacerDevtoolsSolidInit) => {\n  let devToolRef: HTMLDivElement | undefined\n  const [devtools] = createSignal(new PacerDevtoolsCore({}))\n  onMount(() => {\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"],"names":["PacerDevtoolsPanel","props","devToolRef","devtools","createSignal","PacerDevtoolsCore","onMount","mount","theme","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAOO,MAAMA,qBAAqBA,CAACC,UAAmC;AACpE,MAAIC;AACJ,QAAM,CAACC,QAAQ,IAAIC,aAAa,IAAIC,kBAAkB,CAAA,CAAE,CAAC;AACzDC,UAAQ,MAAM;AACZ,QAAIJ,YAAY;AACdC,eAAAA,EAAWI,MAAML,YAAYD,OAAOO,SAAS,MAAM;AAEnDC,gBAAU,MAAM;AACdN,iBAAAA,EAAWO,QAAAA;AAAAA,MAAQ,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAA4CX;AAAU,WAAAW,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVT,aAAUS;AAAAA,SAAAI,MAAAC,YAAA,UAAA,MAAA;AAAA,WAAAL;AAAAA,EAAAA,GAAA;AACxD;"}
+{"version":3,"file":"SolidPacerDevtools.js","sources":["../../src/SolidPacerDevtools.tsx"],"sourcesContent":["import { createSolidPanel } from '@tanstack/devtools-utils/solid'\nimport { PacerDevtoolsCore } from '@tanstack/pacer-devtools'\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'\n\nconst [PacerDevtoolsPanel, PacerDevtoolsPanelNoOp] =\n  createSolidPanel(PacerDevtoolsCore)\nexport interface PacerDevtoolsSolidInit extends DevtoolsPanelProps {}\n\nexport { PacerDevtoolsPanel, PacerDevtoolsPanelNoOp }\n"],"names":["PacerDevtoolsPanel","PacerDevtoolsPanelNoOp","createSolidPanel","PacerDevtoolsCore"],"mappings":";;AAIA,MAAM,CAACA,oBAAoBC,sBAAsB,IAC/CC,iBAAiBC,iBAAiB;"}

package/dist/esm/index.d.ts

@@ -1,4 +1,6 @@
-import * as Devtools from './SolidPacerDevtools.js';
-export declare const PacerDevtoolsPanel: (typeof Devtools)['PacerDevtoolsPanel'];
+export declare const PacerDevtoolsPanel: (props: import('@tanstack/devtools-utils/solid').DevtoolsPanelProps | undefined) => import("solid-js").JSX.Element;
+export declare const pacerDevtoolsPlugin: () => {
+    name: string;
+    render: (_el: HTMLElement, theme: "light" | "dark") => import("solid-js").JSX.Element;
+};
 export type { PacerDevtoolsSolidInit } from './SolidPacerDevtools.js';
-export { pacerDevtoolsPlugin } from './plugin.js';

package/dist/esm/index.js

@@ -1,9 +1,7 @@
-"use client";
-import { PacerDevtoolsPanel as PacerDevtoolsPanel$1 } from "./SolidPacerDevtools.js";
-import { pacerDevtoolsPlugin } from "./plugin.js";
-const PacerDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
-  return null;
-} : PacerDevtoolsPanel$1;
+import { PacerDevtoolsPanelNoOp, PacerDevtoolsPanel as PacerDevtoolsPanel$1 } from "./SolidPacerDevtools.js";
+import { pacerDevtoolsNoOpPlugin, pacerDevtoolsPlugin as pacerDevtoolsPlugin$1 } from "./plugin.js";
+const PacerDevtoolsPanel = process.env.NODE_ENV !== "development" ? PacerDevtoolsPanelNoOp : PacerDevtoolsPanel$1;
+const pacerDevtoolsPlugin = process.env.NODE_ENV !== "development" ? pacerDevtoolsNoOpPlugin : pacerDevtoolsPlugin$1;
 export {
   PacerDevtoolsPanel,
   pacerDevtoolsPlugin

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './SolidPacerDevtools'\n\nexport const PacerDevtoolsPanel: (typeof Devtools)['PacerDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.PacerDevtoolsPanel\n\nexport type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'\n\nexport { pacerDevtoolsPlugin } from './plugin'\n"],"names":[],"mappings":";;;AAIO;AAGC;AACF;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './SolidPacerDevtools'\nimport * as plugin from './plugin'\n\nexport const PacerDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.PacerDevtoolsPanelNoOp\n    : Devtools.PacerDevtoolsPanel\n\nexport const pacerDevtoolsPlugin =\n  process.env.NODE_ENV !== 'development'\n    ? plugin.pacerDevtoolsNoOpPlugin\n    : plugin.pacerDevtoolsPlugin\n\nexport type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'\n"],"names":["Devtools.PacerDevtoolsPanelNoOp","Devtools.PacerDevtoolsPanel","plugin.pacerDevtoolsNoOpPlugin","plugin.pacerDevtoolsPlugin"],"mappings":";;AAGO,MAAM,qBACX,QAAQ,IAAI,aAAa,gBACrBA,yBACAC;AAEC,MAAM,sBACX,QAAQ,IAAI,aAAa,gBACrBC,0BACAC;"}

package/dist/esm/plugin.d.ts

@@ -1,4 +1,8 @@
-export declare function pacerDevtoolsPlugin(): {
+declare const pacerDevtoolsPlugin: () => {
     name: string;
     render: (_el: HTMLElement, theme: "light" | "dark") => import("solid-js").JSX.Element;
+}, pacerDevtoolsNoOpPlugin: () => {
+    name: string;
+    render: (_el: HTMLElement, _theme: "light" | "dark") => import("solid-js").JSX.Element;
 };
+export { pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin };

package/dist/esm/plugin.js

@@ -1,16 +1,8 @@
-import { createComponent } from "solid-js/web";
-import { PacerDevtoolsPanel } from "./index.js";
-function pacerDevtoolsPlugin() {
-  return {
-    name: "TanStack Pacer",
-    render: (_el, theme) => {
-      return createComponent(PacerDevtoolsPanel, {
-        theme
-      });
-    }
-  };
-}
+import { createSolidPlugin } from "@tanstack/devtools-utils/solid";
+import { PacerDevtoolsPanel } from "./SolidPacerDevtools.js";
+const [pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin] = createSolidPlugin("TanStack Pacer", PacerDevtoolsPanel);
 export {
+  pacerDevtoolsNoOpPlugin,
   pacerDevtoolsPlugin
 };
 //# sourceMappingURL=plugin.js.map

package/dist/esm/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../src/plugin.tsx"],"sourcesContent":["import { PacerDevtoolsPanel } from './index'\n\nexport function pacerDevtoolsPlugin() {\n  return {\n    name: 'TanStack Pacer',\n    render: (_el: HTMLElement, theme: 'light' | 'dark') => {\n      return <PacerDevtoolsPanel theme={theme} />\n    },\n  }\n}\n"],"names":["pacerDevtoolsPlugin","name","render","_el","theme","_$createComponent","PacerDevtoolsPanel"],"mappings":";;AAEO,SAASA,sBAAsB;AACpC,SAAO;AAAA,IACLC,MAAM;AAAA,IACNC,QAAQA,CAACC,KAAkBC,UAA4B;AACrD,aAAAC,gBAAQC,oBAAkB;AAAA,QAACF;AAAAA,MAAAA,CAAY;AAAA,IAAA;AAAA,EACzC;AAEJ;"}
+{"version":3,"file":"plugin.js","sources":["../../src/plugin.tsx"],"sourcesContent":["import { createSolidPlugin } from '@tanstack/devtools-utils/solid'\nimport { PacerDevtoolsPanel } from './SolidPacerDevtools'\n\nconst [pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin] = createSolidPlugin(\n  'TanStack Pacer',\n  PacerDevtoolsPanel,\n)\n\nexport { pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin }\n"],"names":["pacerDevtoolsPlugin","pacerDevtoolsNoOpPlugin","createSolidPlugin","PacerDevtoolsPanel"],"mappings":";;AAGA,MAAM,CAACA,qBAAqBC,uBAAuB,IAAIC,kBACrD,kBACAC,kBACF;"}

package/dist/esm/production.d.ts

@@ -1,4 +1,3 @@
-import * as Devtools from './SolidPacerDevtools.js';
-export declare const PacerDevtoolsPanel: (props?: Devtools.PacerDevtoolsSolidInit) => import("solid-js").JSX.Element;
+export { PacerDevtoolsPanel } from './SolidPacerDevtools.js';
 export type { PacerDevtoolsSolidInit } from './SolidPacerDevtools.js';
-export { pacerDevtoolsPlugin } from './plugin-prod.js';
+export { pacerDevtoolsPlugin } from './plugin.js';

package/dist/esm/production.js

@@ -1,7 +1,5 @@
-"use client";
-import { PacerDevtoolsPanel as PacerDevtoolsPanel$1 } from "./SolidPacerDevtools.js";
-import { pacerDevtoolsPlugin } from "./plugin-prod.js";
-const PacerDevtoolsPanel = PacerDevtoolsPanel$1;
+import { PacerDevtoolsPanel } from "./SolidPacerDevtools.js";
+import { pacerDevtoolsPlugin } from "./plugin.js";
 export {
   PacerDevtoolsPanel,
   pacerDevtoolsPlugin

package/dist/esm/production.js.map

@@ -1 +1 @@
-{"version":3,"file":"production.js","sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './SolidPacerDevtools'\n\nexport const PacerDevtoolsPanel = Devtools.PacerDevtoolsPanel\n\nexport type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'\n\nexport { pacerDevtoolsPlugin } from './plugin-prod'\n"],"names":[],"mappings":";;;AAIO;;;;;"}
+{"version":3,"file":"production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-pacer-devtools",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Solid adapter for devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -52,10 +52,11 @@
     "solid-js": ">=1.9.7"
   },
   "dependencies": {
-    "@tanstack/pacer-devtools": "0.3.0"
+    "@tanstack/devtools-utils": "^0.0.3",
+    "@tanstack/pacer-devtools": "1.0.0"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.9"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/SolidPacerDevtools.tsx

@@ -1,22 +1,9 @@
+import { createSolidPanel } from '@tanstack/devtools-utils/solid'
 import { PacerDevtoolsCore } from '@tanstack/pacer-devtools'
-import { createSignal, onCleanup, onMount } from 'solid-js'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'
 
-export interface PacerDevtoolsSolidInit {
-  theme?: 'light' | 'dark'
-}
+const [PacerDevtoolsPanel, PacerDevtoolsPanelNoOp] =
+  createSolidPanel(PacerDevtoolsCore)
+export interface PacerDevtoolsSolidInit extends DevtoolsPanelProps {}
 
-export const PacerDevtoolsPanel = (props?: PacerDevtoolsSolidInit) => {
-  let devToolRef: HTMLDivElement | undefined
-  const [devtools] = createSignal(new PacerDevtoolsCore({}))
-  onMount(() => {
-    if (devToolRef) {
-      devtools().mount(devToolRef, props?.theme ?? 'dark')
-
-      onCleanup(() => {
-        devtools().unmount()
-      })
-    }
-  })
-
-  return <div style={{ height: '100%' }} ref={devToolRef} />
-}
+export { PacerDevtoolsPanel, PacerDevtoolsPanelNoOp }

package/src/index.ts

@@ -1,14 +1,14 @@
-'use client'
-
 import * as Devtools from './SolidPacerDevtools'
+import * as plugin from './plugin'
 
-export const PacerDevtoolsPanel: (typeof Devtools)['PacerDevtoolsPanel'] =
+export const PacerDevtoolsPanel =
   process.env.NODE_ENV !== 'development'
-    ? function () {
-        return null
-      }
+    ? Devtools.PacerDevtoolsPanelNoOp
     : Devtools.PacerDevtoolsPanel
 
-export type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'
+export const pacerDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.pacerDevtoolsNoOpPlugin
+    : plugin.pacerDevtoolsPlugin
 
-export { pacerDevtoolsPlugin } from './plugin'
+export type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'

package/src/plugin.tsx

@@ -1,10 +1,9 @@
-import { PacerDevtoolsPanel } from './index'
+import { createSolidPlugin } from '@tanstack/devtools-utils/solid'
+import { PacerDevtoolsPanel } from './SolidPacerDevtools'
 
-export function pacerDevtoolsPlugin() {
-  return {
-    name: 'TanStack Pacer',
-    render: (_el: HTMLElement, theme: 'light' | 'dark') => {
-      return <PacerDevtoolsPanel theme={theme} />
-    },
-  }
-}
+const [pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin] = createSolidPlugin(
+  'TanStack Pacer',
+  PacerDevtoolsPanel,
+)
+
+export { pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin }

package/src/production.ts

@@ -1,9 +1,5 @@
-'use client'
-
-import * as Devtools from './SolidPacerDevtools'
-
-export const PacerDevtoolsPanel = Devtools.PacerDevtoolsPanel
+export { PacerDevtoolsPanel } from './SolidPacerDevtools'
 
 export type { PacerDevtoolsSolidInit } from './SolidPacerDevtools'
 
-export { pacerDevtoolsPlugin } from './plugin-prod'
+export { pacerDevtoolsPlugin } from './plugin'

package/dist/esm/plugin-prod.d.ts

@@ -1,4 +0,0 @@
-export declare function pacerDevtoolsPlugin(): {
-    name: string;
-    render: (_el: HTMLElement, theme: "light" | "dark") => import("solid-js").JSX.Element;
-};

package/dist/esm/plugin-prod.js

@@ -1,16 +0,0 @@
-import { createComponent } from "solid-js/web";
-import { PacerDevtoolsPanel } from "./production.js";
-function pacerDevtoolsPlugin() {
-  return {
-    name: "TanStack Pacer",
-    render: (_el, theme) => {
-      return createComponent(PacerDevtoolsPanel, {
-        theme
-      });
-    }
-  };
-}
-export {
-  pacerDevtoolsPlugin
-};
-//# sourceMappingURL=plugin-prod.js.map

package/dist/esm/plugin-prod.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugin-prod.js","sources":["../../src/plugin-prod.tsx"],"sourcesContent":["import { PacerDevtoolsPanel } from './production'\n\nexport function pacerDevtoolsPlugin() {\n  return {\n    name: 'TanStack Pacer',\n    render: (_el: HTMLElement, theme: 'light' | 'dark') => {\n      return <PacerDevtoolsPanel theme={theme} />\n    },\n  }\n}\n"],"names":["pacerDevtoolsPlugin","name","render","_el","theme","_$createComponent","PacerDevtoolsPanel"],"mappings":";;AAEO,SAASA,sBAAsB;AACpC,SAAO;AAAA,IACLC,MAAM;AAAA,IACNC,QAAQA,CAACC,KAAkBC,UAA4B;AACrD,aAAAC,gBAAQC,oBAAkB;AAAA,QAACF;AAAAA,MAAAA,CAAY;AAAA,IAAA;AAAA,EACzC;AAEJ;"}

package/src/plugin-prod.tsx

@@ -1,10 +0,0 @@
-import { PacerDevtoolsPanel } from './production'
-
-export function pacerDevtoolsPlugin() {
-  return {
-    name: 'TanStack Pacer',
-    render: (_el: HTMLElement, theme: 'light' | 'dark') => {
-      return <PacerDevtoolsPanel theme={theme} />
-    },
-  }
-}