diff --git a/package.json b/package.json index bc949e0d..ea609309 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ }, "size-limit": [ { - "path": "packages/devtools/dist/index.js", + "path": "packages/devtools/dist/esm/index.js", "limit": "60 KB" }, { diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts index 93248fef..14de2d59 100644 --- a/packages/devtools-vite/src/plugin.ts +++ b/packages/devtools-vite/src/plugin.ts @@ -178,8 +178,14 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array => { }, { name: '@tanstack/devtools:remove-devtools-on-build', - apply(_, { command }) { - return command === 'build' && removeDevtoolsOnBuild + apply(config, { command }) { + // Check both command and mode to support various hosting providers + // Some providers (Cloudflare, Netlify, Heroku) might not use 'build' command + // but will always set mode to 'production' for production builds + return ( + (command !== 'serve' || config.mode === 'production') && + removeDevtoolsOnBuild + ) }, enforce: 'pre', transform(code, id) { diff --git a/packages/devtools/package.json b/packages/devtools/package.json index c1917121..daf9a8e4 100644 --- a/packages/devtools/package.json +++ b/packages/devtools/package.json @@ -18,27 +18,16 @@ "devtools" ], "type": "module", - "types": "dist/index.d.ts", - "module": "dist/index.js", + "types": "dist/esm/index.d.ts", + "module": "dist/esm/index.js", "exports": { - "workerd": { - "types": "./dist/index.d.ts", - "import": "./dist/server.js" + ".": { + "import": { + "types": "./dist/esm/index.d.ts", + "default": "./dist/esm/index.js" + } }, - "browser": { - "development": { - "types": "./dist/index.d.ts", - "import": "./dist/dev.js" - }, - "types": "./dist/index.d.ts", - "import": "./dist/index.js" - }, - "node": { - "types": "./dist/index.d.ts", - "import": "./dist/server.js" - }, - "types": "./dist/index.d.ts", - "import": "./dist/index.js" + "./package.json": "./package.json" }, "sideEffects": false, "engines": { @@ -56,7 +45,7 @@ "test:lib:dev": "pnpm test:lib --watch", "test:types": "tsc", "test:build": "publint --strict", - "build": "tsup" + "build": "vite build" }, "dependencies": { "@solid-primitives/event-listener": "^2.4.3", diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx index 813690e8..1b31c944 100644 --- a/packages/devtools/src/context/devtools-context.tsx +++ b/packages/devtools/src/context/devtools-context.tsx @@ -7,7 +7,7 @@ import { getStorageItem, setStorageItem, } from '../utils/storage' -import { initialState } from './devtools-store' +import { initialState } from './initial-state' import type { DevtoolsStore } from './devtools-store' import type { JSX, Setter } from 'solid-js' diff --git a/packages/devtools/src/context/devtools-store.ts b/packages/devtools/src/context/devtools-store.ts index 8ff46b39..5a125181 100644 --- a/packages/devtools/src/context/devtools-store.ts +++ b/packages/devtools/src/context/devtools-store.ts @@ -79,29 +79,3 @@ export type DevtoolsStore = { } plugins?: Array } - -export const initialState: DevtoolsStore = { - settings: { - defaultOpen: false, - hideUntilHover: false, - position: 'bottom-right', - panelLocation: 'bottom', - openHotkey: ['Shift', 'A'], - requireUrlFlag: false, - urlFlag: 'tanstack-devtools', - theme: - typeof window !== 'undefined' && - typeof window.matchMedia !== 'undefined' && - window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light', - triggerImage: '', - triggerHidden: false, - }, - state: { - activeTab: 'plugins', - height: 400, - activePlugins: [], - persistOpen: false, - }, -} diff --git a/packages/devtools/src/context/initial-state.ts b/packages/devtools/src/context/initial-state.ts new file mode 100644 index 00000000..05bf4683 --- /dev/null +++ b/packages/devtools/src/context/initial-state.ts @@ -0,0 +1,27 @@ +import type { DevtoolsStore } from './devtools-store' + +export const initialState: DevtoolsStore = { + settings: { + defaultOpen: false, + hideUntilHover: false, + position: 'bottom-right', + panelLocation: 'bottom', + openHotkey: ['Shift', 'A'], + requireUrlFlag: false, + urlFlag: 'tanstack-devtools', + theme: + typeof window !== 'undefined' && + typeof window.matchMedia !== 'undefined' && + window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light', + triggerImage: '', + triggerHidden: false, + }, + state: { + activeTab: 'plugins', + height: 400, + activePlugins: [], + persistOpen: false, + }, +} diff --git a/packages/devtools/src/core.tsx b/packages/devtools/src/core.tsx index 63ca8307..2d728ecb 100644 --- a/packages/devtools/src/core.tsx +++ b/packages/devtools/src/core.tsx @@ -1,9 +1,5 @@ -import { lazy } from 'solid-js' -import { Portal, render } from 'solid-js/web' import { ClientEventBus } from '@tanstack/devtools-event-bus/client' -import { DevtoolsProvider } from './context/devtools-context' -import { initialState } from './context/devtools-store' -import { PiPProvider } from './context/pip-context' +import { initialState } from './context/initial-state' import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client' import type { TanStackDevtoolsConfig, @@ -61,16 +57,25 @@ export class TanStackDevtoolsCore { } } - mount(el: T) { - // tsup-preset-solid statically replaces this variable during build, which eliminates this code from server bundle - if (import.meta.env.SSR) return - + async mount(el: T) { if (this.#isMounted) { throw new Error('Devtools is already mounted') } + const { render, Portal } = await import('solid-js/web') + const { lazy } = await import('solid-js') const mountTo = el const dispose = render(() => { this.#Component = lazy(() => import('./devtools')) + const DevtoolsProvider = lazy(() => + import('./context/devtools-context').then((m) => ({ + default: m.DevtoolsProvider, + })), + ) + const PiPProvider = lazy(() => + import('./context/pip-context').then((m) => ({ + default: m.PiPProvider, + })), + ) const Devtools = this.#Component this.#eventBus = new ClientEventBus(this.#eventBusConfig) this.#eventBus.start() diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx index 14adad62..54b4d702 100644 --- a/packages/react-devtools/src/devtools.tsx +++ b/packages/react-devtools/src/devtools.tsx @@ -111,7 +111,7 @@ export const TanStackDevtools = ({ eventBusConfig, }: TanStackDevtoolsReactInit): ReactElement | null => { const devToolRef = useRef(null) - + const devtoolInstance = useRef(null) const [pluginContainers, setPluginContainers] = useState< Record >({}) @@ -170,28 +170,33 @@ export const TanStackDevtools = ({ [plugins], ) - const [devtools] = useState( - () => - new TanStackDevtoolsCore({ - config, - eventBusConfig, - plugins: pluginsMap, - }), - ) + // initialize devtools instance + useEffect(() => { + if (devtoolInstance.current) { + return + } + devtoolInstance.current = new TanStackDevtoolsCore({ + config, + eventBusConfig, + plugins: pluginsMap, + }) + }, [config, eventBusConfig, pluginsMap]) useEffect(() => { - devtools.setConfig({ + devtoolInstance.current?.setConfig({ plugins: pluginsMap, }) - }, [devtools, pluginsMap]) + }, [devtoolInstance, pluginsMap]) useEffect(() => { - if (devToolRef.current) { - devtools.mount(devToolRef.current) + if (!devToolRef.current) { + return } - return () => devtools.unmount() - }, [devtools]) + devtoolInstance.current?.mount(devToolRef.current) + + return () => devtoolInstance.current?.unmount() + }, [devtoolInstance]) const hasPlugins = Object.values(pluginContainers).length > 0 &&