@tanstack/pacer-devtools 0.14.0 → 1.0.1

package/src/core.tsx

@@ -1,41 +1,10 @@
+import { constructCoreClass } from '@tanstack/devtools-utils/solid'
 import { lazy } from 'solid-js'
-import { Portal, render } from 'solid-js/web'
 
-export interface PacerDevtoolsInit {}
-
-export class PacerDevtoolsCore {
-  #isMounted = false
-  #dispose?: () => void
-  #Component: any
+const Component = lazy(() => import('./PacerDevtools'))
 
-  constructor(_init?: PacerDevtoolsInit | undefined) {}
-
-  mount<T extends HTMLElement>(el: T) {
-    if (this.#isMounted) {
-      throw new Error('Devtools is already mounted')
-    }
-    const mountTo = el
-    const dispose = render(() => {
-      this.#Component = lazy(() => import('./PacerDevtools'))
-      const Devtools = this.#Component
+export interface PacerDevtoolsInit {}
 
-      return (
-        <Portal mount={mountTo}>
-          <div style={{ height: '100%' }}>
-            <Devtools />
-          </div>
-        </Portal>
-      )
-    }, mountTo)
-    this.#isMounted = true
-    this.#dispose = dispose
-  }
+const [PacerDevtoolsCore, PacerDevtoolsCoreNoOp] = constructCoreClass(Component)
 
-  unmount() {
-    if (!this.#isMounted) {
-      throw new Error('Devtools is not mounted')
-    }
-    this.#dispose?.()
-    this.#isMounted = false
-  }
-}
+export { PacerDevtoolsCore, PacerDevtoolsCoreNoOp }

package/src/index.ts

@@ -2,16 +2,9 @@
 
 import * as Devtools from './core'
 
-// Create a dummy class for production that does nothing
-class DummyPacerDevtoolsCore {
-  constructor() {}
-  mount() {}
-  unmount() {}
-}
-
-export const PacerDevtoolsCore: (typeof Devtools)['PacerDevtoolsCore'] =
+export const PacerDevtoolsCore =
   process.env.NODE_ENV !== 'development'
-    ? (DummyPacerDevtoolsCore as any)
+    ? Devtools.PacerDevtoolsCoreNoOp
     : Devtools.PacerDevtoolsCore
 
 export type { PacerDevtoolsInit } from './core'

package/src/production.ts

@@ -1,7 +1,5 @@
 'use client'
 
-import * as Devtools from './core'
-
-export const PacerDevtoolsCore = Devtools.PacerDevtoolsCore
+export { PacerDevtoolsCore } from './core'
 
 export type { PacerDevtoolsInit } from './core'

package/src/styles/use-styles.ts

@@ -1,40 +1,15 @@
 import * as goober from 'goober'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
+import { useTheme } from '@tanstack/devtools-ui'
 import { tokens } from './tokens'
 
-const stylesFactory = () => {
+const stylesFactory = (theme: 'light' | 'dark') => {
   const { colors, font, size, alpha, border } = tokens
   const { fontFamily, size: fontSize } = font
   const css = goober.css
+  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
-    devtoolsPanel: css`
-      background: ${colors.darkGray[900]};
-      color: ${colors.gray[100]};
-      font-family: ${fontFamily.sans};
-      font-size: ${fontSize.sm};
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    `,
-    stickyHeader: css`
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      background: ${colors.darkGray[900]};
-      padding: ${size[2]};
-      font-size: ${fontSize.lg};
-      font-weight: ${font.weight.bold};
-      color: #84cc16;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      border-bottom: 1px solid ${colors.darkGray[700]};
-      box-shadow: 0 2px 8px 0 ${colors.black + alpha[40]};
-      flex-shrink: 0;
-    `,
     mainContainer: css`
       display: flex;
       flex: 1;
@@ -42,10 +17,11 @@ const stylesFactory = () => {
       overflow: hidden;
       padding: ${size[2]};
       padding-top: 0;
+      margin-top: ${size[2]};
     `,
     dragHandle: css`
       width: 8px;
-      background: ${colors.darkGray[600]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
       cursor: col-resize;
       position: relative;
       transition: all 0.2s ease;
@@ -55,12 +31,12 @@ const stylesFactory = () => {
       border-radius: 2px;
 
       &:hover {
-        background: ${colors.blue[500]};
+        background: ${t(colors.blue[600], colors.blue[500])};
         margin: 0 ${size[1]};
       }
 
       &.dragging {
-        background: ${colors.blue[600]};
+        background: ${t(colors.blue[700], colors.blue[600])};
         margin: 0 ${size[1]};
       }
 
@@ -72,20 +48,20 @@ const stylesFactory = () => {
         transform: translate(-50%, -50%);
         width: 2px;
         height: 20px;
-        background: ${colors.darkGray[400]};
+        background: ${t(colors.gray[400], colors.darkGray[400])};
         border-radius: 1px;
         pointer-events: none;
       }
 
       &:hover::after,
       &.dragging::after {
-        background: ${colors.blue[300]};
+        background: ${t(colors.blue[500], colors.blue[300])};
       }
     `,
     leftPanel: css`
-      background: ${colors.darkGray[800]};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      border: 1px solid ${colors.darkGray[700]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -93,9 +69,9 @@ const stylesFactory = () => {
       flex-shrink: 0;
     `,
     rightPanel: css`
-      background: ${colors.darkGray[800]};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      border: 1px solid ${colors.darkGray[700]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -105,10 +81,10 @@ const stylesFactory = () => {
     panelHeader: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[700], colors.blue[400])};
       padding: ${size[2]};
-      border-bottom: 1px solid ${colors.darkGray[700]};
-      background: ${colors.darkGray[800]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       flex-shrink: 0;
     `,
     utilList: css`
@@ -123,12 +99,12 @@ const stylesFactory = () => {
     utilGroupHeader: css`
       font-size: ${fontSize.xs};
       font-weight: ${font.weight.semibold};
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: ${size[1]};
       padding: ${size[1]} ${size[2]};
-      background: ${colors.darkGray[700]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
     `,
     utilRow: css`
@@ -137,26 +113,27 @@ const stylesFactory = () => {
       align-items: center;
       padding: ${size[2]};
       margin-bottom: ${size[1]};
-      background: ${colors.darkGray[700]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       cursor: pointer;
       transition: all 0.2s ease;
       border: 1px solid transparent;
 
       &:hover {
-        background: ${colors.darkGray[600]};
-        border-color: ${colors.darkGray[500]};
+        background: ${t(colors.gray[300], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.darkGray[500])};
       }
     `,
     utilRowSelected: css`
-      background: ${colors.blue[900] + alpha[20]};
-      border-color: ${colors.blue[500]};
-      box-shadow: 0 0 0 1px ${colors.blue[500] + alpha[30]};
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
+      border-color: ${t(colors.blue[600], colors.blue[500])};
+      box-shadow: 0 0 0 1px
+        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
     `,
     utilKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -164,11 +141,11 @@ const stylesFactory = () => {
     `,
     utilStatus: css`
       font-size: ${fontSize.xs};
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       text-transform: uppercase;
       letter-spacing: 0.05em;
       padding: ${size[1]} ${size[1]};
-      background: ${colors.darkGray[600]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
       border-radius: ${border.radius.sm};
       margin-left: ${size[1]};
     `,
@@ -181,25 +158,25 @@ const stylesFactory = () => {
     stateHeader: css`
       margin-bottom: ${size[2]};
       padding-bottom: ${size[2]};
-      border-bottom: 1px solid ${colors.darkGray[700]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
     `,
     stateTitle: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[700], colors.blue[400])};
       margin-bottom: ${size[1]};
     `,
     stateKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       word-break: break-all;
     `,
     stateContent: css`
-      background: ${colors.darkGray[700]};
+      background: ${t(colors.gray[100], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[2]};
-      border: 1px solid ${colors.darkGray[600]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
     `,
     detailsGrid: css`
       display: grid;
@@ -208,15 +185,15 @@ const stylesFactory = () => {
       align-items: start;
     `,
     detailSection: css`
-      background: ${colors.darkGray[700]};
-      border: 1px solid ${colors.darkGray[600]};
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
       border-radius: ${border.radius.md};
       padding: ${size[2]};
     `,
     detailSectionHeader: css`
       font-size: ${fontSize.sm};
       font-weight: ${font.weight.bold};
-      color: ${colors.gray[200]};
+      color: ${t(colors.gray[800], colors.gray[200])};
       margin-bottom: ${size[1]};
       text-transform: uppercase;
       letter-spacing: 0.04em;
@@ -232,9 +209,9 @@ const stylesFactory = () => {
       gap: ${size[1]};
       padding: ${size[1]} ${size[2]};
       border-radius: ${border.radius.md};
-      border: 1px solid ${colors.darkGray[500]};
-      background: ${colors.darkGray[600]};
-      color: ${colors.gray[100]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+      color: ${t(colors.gray[900], colors.gray[100])};
       font-size: ${fontSize.xs};
       cursor: pointer;
       user-select: none;
@@ -242,15 +219,15 @@ const stylesFactory = () => {
         background 0.15s,
         border-color 0.15s;
       &:hover {
-        background: ${colors.darkGray[500]};
-        border-color: ${colors.darkGray[400]};
+        background: ${t(colors.gray[300], colors.darkGray[500])};
+        border-color: ${t(colors.gray[400], colors.darkGray[400])};
       }
       &:disabled {
         opacity: 0.5;
         cursor: not-allowed;
         &:hover {
-          background: ${colors.darkGray[600]};
-          border-color: ${colors.darkGray[500]};
+          background: ${t(colors.gray[200], colors.darkGray[600])};
+          border-color: ${t(colors.gray[300], colors.darkGray[500])};
         }
       }
     `,
@@ -298,7 +275,7 @@ const stylesFactory = () => {
       align-items: center;
     `,
     infoLabel: css`
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       font-size: ${fontSize.xs};
       text-transform: uppercase;
       letter-spacing: 0.05em;
@@ -306,7 +283,7 @@ const stylesFactory = () => {
     infoValueMono: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       word-break: break-all;
     `,
     noSelection: css`
@@ -314,7 +291,7 @@ const stylesFactory = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${colors.gray[500]};
+      color: ${t(colors.gray[500], colors.gray[500])};
       font-style: italic;
       text-align: center;
       padding: ${size[4]};
@@ -326,12 +303,14 @@ const stylesFactory = () => {
       gap: ${size[4]};
     `,
     section: css`
-      background: ${colors.darkGray[800]};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      box-shadow: ${tokens.shadow.md(colors.black + alpha[80])};
+      box-shadow: ${tokens.shadow.md(
+        t(colors.gray[400] + alpha[80], colors.black + alpha[80]),
+      )};
       padding: ${size[4]};
       margin-bottom: ${size[4]};
-      border: 1px solid ${colors.darkGray[700]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
       min-width: 0;
       max-width: 33%;
       max-height: fit-content;
@@ -340,14 +319,14 @@ const stylesFactory = () => {
       font-size: ${fontSize.lg};
       font-weight: ${font.weight.bold};
       margin-bottom: ${size[2]};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[600], colors.blue[400])};
       letter-spacing: 0.01em;
       display: flex;
       align-items: center;
       gap: ${size[2]};
     `,
     sectionEmpty: css`
-      color: ${colors.gray[500]};
+      color: ${t(colors.gray[500], colors.gray[500])};
       font-size: ${fontSize.sm};
       font-style: italic;
       margin: ${size[2]} 0;
@@ -356,14 +335,16 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
       gap: ${size[2]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
     `,
     instanceCard: css`
-      background: ${colors.darkGray[700]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[3]};
-      border: 1px solid ${colors.darkGray[600]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
       font-size: ${fontSize.sm};
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       font-family: ${fontFamily.mono};
       overflow-x: auto;
       transition:
@@ -374,6 +355,10 @@ const stylesFactory = () => {
 }
 
 export function useStyles() {
-  const [_styles] = createSignal(stylesFactory())
-  return _styles
+  const { theme } = useTheme()
+  const [styles, setStyles] = createSignal(stylesFactory(theme()))
+  createEffect(() => {
+    setStyles(stylesFactory(theme()))
+  })
+  return styles
 }

package/dist/cjs/PacerContextProvider.cjs

@@ -1,156 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const store = require("solid-js/store");
-const solidJs = require("solid-js");
-const eventClient = require("@tanstack/pacer/event-client");
-const initialPacerDevtoolsStore = {
-  asyncBatchers: [],
-  asyncDebouncers: [],
-  asyncQueuers: [],
-  asyncRateLimiters: [],
-  asyncThrottlers: [],
-  batchers: [],
-  debouncers: [],
-  queuers: [],
-  rateLimiters: [],
-  throttlers: [],
-  lastUpdatedByKey: {}
-};
-const PacerDevtoolsContext = solidJs.createContext([initialPacerDevtoolsStore, () => {
-}]);
-const updateOrAddToArray = (oldArray, newItem) => {
-  const index = oldArray.findIndex((item) => item.key === newItem.key);
-  if (index !== -1) {
-    return oldArray.map((item, i) => i === index ? newItem : item);
-  }
-  return [...oldArray, newItem];
-};
-function PacerContextProvider(props) {
-  const [store$1, setStore] = store.createStore(initialPacerDevtoolsStore);
-  solidJs.createEffect(() => {
-    const cleanup = eventClient.pacerEventClient.onAllPluginEvents((_e) => {
-      const e = _e;
-      switch (e.type) {
-        case "pacer:AsyncBatcher": {
-          setStore({
-            asyncBatchers: updateOrAddToArray(store$1.asyncBatchers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:AsyncDebouncer": {
-          setStore({
-            asyncDebouncers: updateOrAddToArray(store$1.asyncDebouncers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:AsyncQueuer": {
-          setStore({
-            asyncQueuers: updateOrAddToArray(store$1.asyncQueuers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:AsyncRateLimiter": {
-          setStore({
-            asyncRateLimiters: updateOrAddToArray(store$1.asyncRateLimiters, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:AsyncThrottler": {
-          setStore({
-            asyncThrottlers: updateOrAddToArray(store$1.asyncThrottlers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:Batcher": {
-          setStore({
-            batchers: updateOrAddToArray(store$1.batchers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:Debouncer": {
-          setStore({
-            debouncers: updateOrAddToArray(store$1.debouncers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:Queuer": {
-          setStore({
-            queuers: updateOrAddToArray(store$1.queuers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:RateLimiter": {
-          setStore({
-            rateLimiters: updateOrAddToArray(store$1.rateLimiters, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-        case "pacer:Throttler": {
-          setStore({
-            throttlers: updateOrAddToArray(store$1.throttlers, e.payload),
-            lastUpdatedByKey: {
-              ...store$1.lastUpdatedByKey,
-              [e.payload.key]: Date.now()
-            }
-          });
-          break;
-        }
-      }
-    });
-    solidJs.onCleanup(cleanup);
-  });
-  return web.createComponent(PacerDevtoolsContext.Provider, {
-    value: [store$1, setStore],
-    get children() {
-      return props.children;
-    }
-  });
-}
-const usePacerDevtoolsContext = () => {
-  const context = solidJs.useContext(PacerDevtoolsContext);
-  return context;
-};
-const usePacerDevtoolsState = () => {
-  const [state] = usePacerDevtoolsContext();
-  return state;
-};
-exports.PacerContextProvider = PacerContextProvider;
-exports.usePacerDevtoolsState = usePacerDevtoolsState;
-//# sourceMappingURL=PacerContextProvider.cjs.map

package/dist/cjs/PacerContextProvider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PacerContextProvider.cjs","sources":["../../src/PacerContextProvider.tsx"],"sourcesContent":["import { createStore } from 'solid-js/store'\nimport { createContext, createEffect, onCleanup, useContext } from 'solid-js'\nimport { pacerEventClient } from '@tanstack/pacer/event-client'\nimport type {\n  AsyncBatcher,\n  AsyncDebouncer,\n  AsyncQueuer,\n  AsyncRateLimiter,\n  AsyncThrottler,\n  Batcher,\n  Debouncer,\n  Queuer,\n  RateLimiter,\n  Throttler,\n} from '@tanstack/pacer'\n\ninterface PacerDevtoolsContextType {\n  asyncBatchers: Array<AsyncBatcher<any>>\n  asyncDebouncers: Array<AsyncDebouncer<any>>\n  asyncQueuers: Array<AsyncQueuer<any>>\n  asyncRateLimiters: Array<AsyncRateLimiter<any>>\n  asyncThrottlers: Array<AsyncThrottler<any>>\n  batchers: Array<Batcher<any>>\n  debouncers: Array<Debouncer<any>>\n  queuers: Array<Queuer<any>>\n  rateLimiters: Array<RateLimiter<any>>\n  throttlers: Array<Throttler<any>>\n  lastUpdatedByKey: Record<string, number>\n}\n\nconst initialPacerDevtoolsStore = {\n  asyncBatchers: [],\n  asyncDebouncers: [],\n  asyncQueuers: [],\n  asyncRateLimiters: [],\n  asyncThrottlers: [],\n  batchers: [],\n  debouncers: [],\n  queuers: [],\n  rateLimiters: [],\n  throttlers: [],\n  lastUpdatedByKey: {},\n}\n\nconst PacerDevtoolsContext = createContext<\n  [\n    PacerDevtoolsContextType,\n    (newState: Partial<PacerDevtoolsContextType>) => void,\n  ]\n>([initialPacerDevtoolsStore, () => {}])\n\nconst updateOrAddToArray = <T extends { key: string }>(\n  oldArray: Array<T>,\n  newItem: T,\n) => {\n  const index = oldArray.findIndex((item) => item.key === newItem.key)\n  if (index !== -1) {\n    // Update existing item\n    return oldArray.map((item, i) => (i === index ? newItem : item))\n  }\n  // Add new item\n  return [...oldArray, newItem]\n}\n\nexport function PacerContextProvider(props: { children: any }) {\n  const [store, setStore] = createStore<PacerDevtoolsContextType>(\n    initialPacerDevtoolsStore,\n  )\n\n  createEffect(() => {\n    const cleanup = pacerEventClient.onAllPluginEvents((_e) => {\n      const e = _e as unknown as { type: string; payload: any }\n      switch (e.type) {\n        case 'pacer:AsyncBatcher': {\n          setStore({\n            asyncBatchers: updateOrAddToArray(store.asyncBatchers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncDebouncer': {\n          setStore({\n            asyncDebouncers: updateOrAddToArray(\n              store.asyncDebouncers,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncQueuer': {\n          setStore({\n            asyncQueuers: updateOrAddToArray(store.asyncQueuers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncRateLimiter': {\n          setStore({\n            asyncRateLimiters: updateOrAddToArray(\n              store.asyncRateLimiters,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncThrottler': {\n          setStore({\n            asyncThrottlers: updateOrAddToArray(\n              store.asyncThrottlers,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Batcher': {\n          setStore({\n            batchers: updateOrAddToArray(store.batchers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Debouncer': {\n          setStore({\n            debouncers: updateOrAddToArray(store.debouncers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Queuer': {\n          setStore({\n            queuers: updateOrAddToArray(store.queuers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:RateLimiter': {\n          setStore({\n            rateLimiters: updateOrAddToArray(store.rateLimiters, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Throttler': {\n          setStore({\n            throttlers: updateOrAddToArray(store.throttlers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n      }\n    })\n    onCleanup(cleanup)\n  })\n  return (\n    <PacerDevtoolsContext.Provider value={[store, setStore]}>\n      {props.children}\n    </PacerDevtoolsContext.Provider>\n  )\n}\n\nconst usePacerDevtoolsContext = () => {\n  const context = useContext(PacerDevtoolsContext)\n\n  return context\n}\n\nexport const usePacerDevtoolsState = () => {\n  const [state] = usePacerDevtoolsContext()\n  return state\n}\n"],"names":["initialPacerDevtoolsStore","asyncBatchers","asyncDebouncers","asyncQueuers","asyncRateLimiters","asyncThrottlers","batchers","debouncers","queuers","rateLimiters","throttlers","lastUpdatedByKey","PacerDevtoolsContext","createContext","updateOrAddToArray","oldArray","newItem","index","findIndex","item","key","map","i","PacerContextProvider","props","store","setStore","createStore","createEffect","cleanup","pacerEventClient","onAllPluginEvents","_e","e","type","payload","Date","now","onCleanup","_$createComponent","Provider","value","children","usePacerDevtoolsContext","context","useContext","usePacerDevtoolsState","state"],"mappings":"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"}

package/dist/cjs/PacerContextProvider.d.cts

@@ -1,19 +0,0 @@
-import { AsyncBatcher, AsyncDebouncer, AsyncQueuer, AsyncRateLimiter, AsyncThrottler, Batcher, Debouncer, Queuer, RateLimiter, Throttler } from '@tanstack/pacer';
-interface PacerDevtoolsContextType {
-    asyncBatchers: Array<AsyncBatcher<any>>;
-    asyncDebouncers: Array<AsyncDebouncer<any>>;
-    asyncQueuers: Array<AsyncQueuer<any>>;
-    asyncRateLimiters: Array<AsyncRateLimiter<any>>;
-    asyncThrottlers: Array<AsyncThrottler<any>>;
-    batchers: Array<Batcher<any>>;
-    debouncers: Array<Debouncer<any>>;
-    queuers: Array<Queuer<any>>;
-    rateLimiters: Array<RateLimiter<any>>;
-    throttlers: Array<Throttler<any>>;
-    lastUpdatedByKey: Record<string, number>;
-}
-export declare function PacerContextProvider(props: {
-    children: any;
-}): import("solid-js").JSX.Element;
-export declare const usePacerDevtoolsState: () => PacerDevtoolsContextType;
-export {};

package/dist/cjs/PacerDevtools.cjs

@@ -1,13 +0,0 @@
-"use strict";
-const web = require("solid-js/web");
-const PacerContextProvider = require("./PacerContextProvider.cjs");
-const Shell = require("./components/Shell.cjs");
-function PacerDevtools() {
-  return web.createComponent(PacerContextProvider.PacerContextProvider, {
-    get children() {
-      return web.createComponent(Shell.Shell, {});
-    }
-  });
-}
-module.exports = PacerDevtools;
-//# sourceMappingURL=PacerDevtools.cjs.map

package/dist/cjs/PacerDevtools.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PacerDevtools.cjs","sources":["../../src/PacerDevtools.tsx"],"sourcesContent":["import { PacerContextProvider } from './PacerContextProvider'\nimport { Shell } from './components/Shell'\n\nexport default function PacerDevtools() {\n  return (\n    <PacerContextProvider>\n      <Shell />\n    </PacerContextProvider>\n  )\n}\n"],"names":["PacerDevtools","_$createComponent","PacerContextProvider","children","Shell"],"mappings":";;;;AAGA,SAAwBA,gBAAgB;AACtC,SAAAC,IAAAA,gBACGC,qBAAAA,sBAAoB;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAF,IAAAA,gBAClBG,MAAAA,OAAK,EAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAGZ;;"}

package/dist/cjs/PacerDevtools.d.cts

@@ -1 +0,0 @@
-export default function PacerDevtools(): import("solid-js").JSX.Element;