feat: add devtools utils to pacer (#80)

* feat: add devtools utils to pacer

* update lock

* ci: apply automated fixes

* fix2

* changeset

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/shaggy-kiwis-walk.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-pacer-devtools': patch
+'@tanstack/solid-pacer-devtools': patch
+'@tanstack/pacer-devtools': patch
+---
+
+update pacer devtools to use devtools-utils to avoid common issues in user projects

packages/pacer-devtools/package.json

@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@tanstack/devtools-ui": "^0.3.5",
+    "@tanstack/devtools-utils": "^0.0.3",
     "@tanstack/solid-store": "^0.7.7",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.18",

packages/pacer-devtools/src/core.tsx

@@ -1,50 +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
-  #ThemeProvider: any
+const Component = lazy(() => import('./PacerDevtools'))
 
-  constructor(_init?: PacerDevtoolsInit | undefined) {}
-
-  mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
-    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
-      this.#ThemeProvider = lazy(() =>
-        import('@tanstack/devtools-ui').then((mod) => ({
-          default: mod.ThemeContextProvider,
-        })),
-      )
-      const ThemeProvider = this.#ThemeProvider
+export interface PacerDevtoolsInit {}
 
-      return (
-        <Portal mount={mountTo}>
-          <div style={{ height: '100%' }}>
-            <ThemeProvider theme={theme}>
-              <Devtools />
-            </ThemeProvider>
-          </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 }

packages/pacer-devtools/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'

packages/pacer-devtools/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'

packages/react-pacer-devtools/package.json

@@ -65,6 +65,7 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
+    "@tanstack/devtools-utils": "^0.0.3",
     "@tanstack/pacer-devtools": "workspace:*"
   },
   "devDependencies": {

packages/react-pacer-devtools/src/ReactPacerDevtools.tsx

@@ -1,21 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { createReactPanel } from '@tanstack/devtools-utils/react'
 import { PacerDevtoolsCore } from '@tanstack/pacer-devtools'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
 
-export interface PacerDevtoolsReactInit {
-  theme?: 'light' | 'dark'
-}
+export interface PacerDevtoolsReactInit extends DevtoolsPanelProps {}
 
-export const PacerDevtoolsPanel = (props?: PacerDevtoolsReactInit) => {
-  const devToolRef = useRef<HTMLDivElement>(null)
+const [PacerDevtoolsPanel, PacerDevtoolsPanelNoOp] =
+  createReactPanel(PacerDevtoolsCore)
 
-  const [devtools] = useState(() => new PacerDevtoolsCore({}))
-  useEffect(() => {
-    if (devToolRef.current) {
-      devtools.mount(devToolRef.current, props?.theme ?? 'dark')
-    }
-
-    return () => devtools.unmount()
-  }, [devtools, props?.theme])
-
-  return <div style={{ height: '100%' }} ref={devToolRef} />
-}
+export { PacerDevtoolsPanel, PacerDevtoolsPanelNoOp }

packages/react-pacer-devtools/src/index.ts

@@ -1,15 +1,16 @@
 'use client'
 
-import React from 'react'
 import * as Devtools from './ReactPacerDevtools'
+import * as plugin from './plugin'
 
-export const PacerDevtoolsPanel: (typeof Devtools)['PacerDevtoolsPanel'] =
+export const PacerDevtoolsPanel =
   process.env.NODE_ENV !== 'development'
-    ? function () {
-        return React.createElement('div')
-      }
+    ? Devtools.PacerDevtoolsPanelNoOp
     : Devtools.PacerDevtoolsPanel
 
-export { pacerDevtoolsPlugin } from './plugin'
+export const pacerDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.pacerDevtoolsNoOpPlugin
+    : plugin.pacerDevtoolsPlugin
 
 export type { PacerDevtoolsReactInit } from './ReactPacerDevtools'

packages/react-pacer-devtools/src/plugin-prod.tsx

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