feat({solid,svelte}-query-devtools): add './production' entry to lazy load the devtools in production builds

.changeset/solid-svelte-query-devtools-production-entry.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/solid-query-devtools': minor
+'@tanstack/svelte-query-devtools': minor
+---
+
+feat({solid,svelte}-query-devtools): add './production' entry to lazy load the devtools in production builds

docs/framework/solid/devtools.md

@@ -143,3 +143,52 @@ function App() {
 - `theme?: "light" | "dark" | "system"`
   - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected.
   - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu.
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import { createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const SolidQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/solid-query-devtools/production').then((d) => ({
+    default: d.SolidQueryDevtools,
+  })),
+)
+
+function App() {
+  const [showDevtools, setShowDevtools] = createSignal(false)
+
+  onMount(() => {
+    Object.assign(window, {
+      toggleDevtools: () => setShowDevtools((old) => !old),
+    })
+  })
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <SolidQueryDevtools initialIsOpen />
+      <Show when={showDevtools()}>
+        <Suspense fallback={null}>
+          <SolidQueryDevtoolsProduction />
+        </Suspense>
+      </Show>
+    </QueryClientProvider>
+  )
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+`@tanstack/solid-query-devtools/production` also exports `SolidQueryDevtoolsPanel` for Embedded Mode.
+
+For TypeScript, you would need to set `moduleResolution` to `'bundler'`, `'node16'`, or `'nodenext'` in your tsconfig.

docs/framework/svelte/devtools.md

@@ -41,6 +41,8 @@ You can import the devtools like this:
 import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 ```
 
+By default, Svelte Query Devtools are only rendered in development, using `DEV` from `esm-env`. In production, the devtools component renders nothing.
+
 ## Floating Mode
 
 Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
@@ -85,3 +87,40 @@ Place the following code as high in your Svelte app as you can. The closer it is
 - `theme?: Theme`
   - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected.
   - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu.
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+  import Example from './Example.svelte'
+
+  const queryClient = new QueryClient()
+
+  let showDevtools = $state(false)
+
+  onMount(() => {
+    Object.assign(window, {
+      toggleDevtools: () => (showDevtools = !showDevtools),
+    })
+  })
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <Example />
+  <SvelteQueryDevtools initialIsOpen />
+  {#if showDevtools}
+    {#await import('@tanstack/svelte-query-devtools/production') then { SvelteQueryDevtools: SvelteQueryDevtoolsProduction }}
+      <SvelteQueryDevtoolsProduction />
+    {/await}
+  {/if}
+</QueryClientProvider>
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+For TypeScript, you would need to set `moduleResolution` to `'bundler'`, `'node16'`, or `'nodenext'` in your tsconfig.

packages/solid-query-devtools/.attw.json

@@ -0,0 +1,3 @@
+{
+  "ignoreRules": ["no-resolution"]
+}

packages/solid-query-devtools/package.json

@@ -37,23 +37,35 @@
   "types": "./build/index.d.ts",
   "browser": {},
   "exports": {
-    "@tanstack/custom-condition": "./src/index.tsx",
-    "solid": {
-      "development": "./build/dev.jsx",
-      "import": "./build/index.jsx"
-    },
-    "development": {
+    ".": {
+      "@tanstack/custom-condition": "./src/index.tsx",
+      "solid": {
+        "development": "./build/dev.jsx",
+        "import": "./build/index.jsx"
+      },
+      "development": {
+        "import": {
+          "types": "./build/index.d.ts",
+          "default": "./build/dev.js"
+        },
+        "require": "./build/dev.cjs"
+      },
       "import": {
         "types": "./build/index.d.ts",
-        "default": "./build/dev.js"
+        "default": "./build/index.js"
       },
-      "require": "./build/dev.cjs"
+      "require": "./build/index.cjs"
     },
-    "import": {
-      "types": "./build/index.d.ts",
-      "default": "./build/index.js"
+    "./production": {
+      "@tanstack/custom-condition": "./src/production.tsx",
+      "solid": "./build/production.jsx",
+      "import": {
+        "types": "./build/production.d.ts",
+        "default": "./build/production.js"
+      },
+      "require": "./build/production.cjs"
     },
-    "require": "./build/index.cjs"
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [

packages/solid-query-devtools/src/production.tsx

@@ -0,0 +1,7 @@
+import SolidQueryDevtoolsComp from './devtools'
+import SolidQueryDevtoolsCompPanel from './devtoolsPanel'
+
+export const SolidQueryDevtools = SolidQueryDevtoolsComp
+export const SolidQueryDevtoolsPanel = SolidQueryDevtoolsCompPanel
+
+export type { DevtoolsPanelOptions } from './devtoolsPanel'

packages/solid-query-devtools/tsdown.config.ts

@@ -55,8 +55,15 @@ const jsxConfig = (
 })
 
 export default defineConfig([
-  compiledConfig({ index: 'src/index.tsx' }, false, true),
-  jsxConfig({ index: 'src/index.tsx' }, false),
+  compiledConfig(
+    { index: 'src/index.tsx', production: 'src/production.tsx' },
+    false,
+    true,
+  ),
+  jsxConfig(
+    { index: 'src/index.tsx', production: 'src/production.tsx' },
+    false,
+  ),
   compiledConfig({ dev: 'src/index.tsx' }, true, false),
   jsxConfig({ dev: 'src/index.tsx' }, true),
 ])

packages/svelte-query-devtools/.attw.json

@@ -1,3 +1,7 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm", "internal-resolution-error"]
+  "ignoreRules": [
+    "cjs-resolves-to-esm",
+    "internal-resolution-error",
+    "no-resolution"
+  ]
 }

packages/svelte-query-devtools/package.json

@@ -45,6 +45,12 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
+    "./production": {
+      "@tanstack/custom-condition": "./src/production.ts",
+      "types": "./dist/production.d.ts",
+      "svelte": "./dist/production.js",
+      "import": "./dist/production.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [

packages/svelte-query-devtools/src/Devtools.svelte → packages/svelte-query-devtools/src/SvelteQueryDevtools.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { BROWSER, DEV } from 'esm-env'
+  import { BROWSER } from 'esm-env'
   import { onlineManager, useQueryClient } from '@tanstack/svelte-query'
   import type { QueryClient } from '@tanstack/svelte-query'
   import type {
@@ -74,7 +74,7 @@
   let ref: HTMLDivElement
   let devtools = $state<TanstackQueryDevtools | undefined>(undefined)
 
-  if (DEV && BROWSER) {
+  if (BROWSER) {
     onMount(() => {
       import('@tanstack/query-devtools').then((m) => {
         const QueryDevtools = m.TanstackQueryDevtools

packages/svelte-query-devtools/src/index.ts

@@ -1 +1,10 @@
-export { default as SvelteQueryDevtools } from './Devtools.svelte'
+import { DEV } from 'esm-env'
+import Devtools from './SvelteQueryDevtools.svelte'
+import type { Component, ComponentProps } from 'svelte'
+
+export const SvelteQueryDevtools: Component<ComponentProps<typeof Devtools>> =
+  DEV
+    ? Devtools
+    : function () {
+        return {}
+      }

packages/svelte-query-devtools/src/production.ts

@@ -0,0 +1 @@
+export { default as SvelteQueryDevtools } from './SvelteQueryDevtools.svelte'

packages/svelte-query-devtools/tests/Devtools.svelte.test.ts → packages/svelte-query-devtools/tests/SvelteQueryDevtools.svelte.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/svelte-query'
-import SvelteQueryDevtools from '../src/Devtools.svelte'
+import SvelteQueryDevtools from '../src/SvelteQueryDevtools.svelte'
 import Wrapper from './Wrapper.svelte'
 import type { TanstackQueryDevtools } from '@tanstack/query-devtools'
 
@@ -187,4 +187,24 @@ describe('SvelteQueryDevtools', () => {
 
     expect(setThemeMock).toHaveBeenCalledWith('dark')
   })
+
+  it('should not export the devtools component in non-development environments', async () => {
+    vi.doMock(import('esm-env'), async (importOriginal) => ({
+      ...(await importOriginal()),
+      DEV: false,
+    }))
+    vi.resetModules()
+
+    try {
+      const { SvelteQueryDevtools: ProductionDevtools } =
+        await import('../src/index')
+      const { default: Devtools } =
+        await import('../src/SvelteQueryDevtools.svelte')
+
+      expect(ProductionDevtools).not.toBe(Devtools)
+    } finally {
+      vi.doUnmock('esm-env')
+      vi.resetModules()
+    }
+  })
 })

packages/svelte-query-devtools/tests/Wrapper.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { QueryClientProvider } from '@tanstack/svelte-query'
-  import SvelteQueryDevtools from '../src/Devtools.svelte'
+  import SvelteQueryDevtools from '../src/SvelteQueryDevtools.svelte'
   import type { QueryClient } from '@tanstack/svelte-query'
 
   type Props = {