@tanstack/devtools 0.6.23 → 0.7.0

package/src/context/devtools-context.tsx

@@ -1,5 +1,6 @@
 import { createContext, createEffect } from 'solid-js'
 import { createStore } from 'solid-js/store'
+import { getDefaultActivePlugins } from '../utils/get-default-active-plugins'
 import { tryParseJson } from '../utils/sanitize'
 import {
   TANSTACK_DEVTOOLS_SETTINGS,
@@ -49,6 +50,12 @@ export interface TanStackDevtoolsPlugin {
    * If not provided, it will be generated based on the name.
    */
   id?: string
+  /**
+   * Whether the plugin should be open by default when there are no active plugins.
+   * If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.
+   * @default false
+   */
+  defaultOpen?: boolean
   /**
    * Render the plugin UI by using the provided element. This function will be called
    * when the plugin tab is clicked and expected to be mounted.
@@ -127,26 +134,39 @@ export function getStateFromLocalStorage(
   return existingState
 }
 
-const getExistingStateFromStorage = (
+export const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
   const existingState = getStateFromLocalStorage(plugins)
   const settings = getSettings()
 
+  const pluginsWithIds =
+    plugins?.map((plugin, i) => {
+      const id = generatePluginId(plugin, i)
+      return {
+        ...plugin,
+        id,
+      }
+    }) || []
+
+  // If no active plugins exist, add plugins with defaultOpen: true
+  // Or if there's only 1 plugin, activate it automatically
+  let activePlugins = existingState?.activePlugins || []
+
+  const shouldFillWithDefaultOpenPlugins =
+    activePlugins.length === 0 && pluginsWithIds.length > 0
+  if (shouldFillWithDefaultOpenPlugins) {
+    activePlugins = getDefaultActivePlugins(pluginsWithIds)
+  }
+
   const state: DevtoolsStore = {
     ...initialState,
-    plugins:
-      plugins?.map((plugin, i) => {
-        const id = generatePluginId(plugin, i)
-        return {
-          ...plugin,
-          id,
-        }
-      }) || [],
+    plugins: pluginsWithIds,
     state: {
       ...initialState.state,
       ...existingState,
+      activePlugins,
     },
     settings: {
       ...initialState.settings,

package/src/context/use-devtools-context.ts

@@ -1,4 +1,5 @@
 import { createEffect, createMemo, useContext } from 'solid-js'
+import { MAX_ACTIVE_PLUGINS } from '../utils/constants.js'
 import { DevtoolsContext } from './devtools-context.jsx'
 import { useDrawContext } from './draw-context.jsx'
 
@@ -50,7 +51,7 @@ export const usePlugins = () => {
       const updatedPlugins = isActive
         ? prev.state.activePlugins.filter((id) => id !== pluginId)
         : [...prev.state.activePlugins, pluginId]
-      if (updatedPlugins.length > 3) return prev
+      if (updatedPlugins.length > MAX_ACTIVE_PLUGINS) return prev
       return {
         ...prev,
         state: {

package/src/styles/use-styles.ts

@@ -1168,6 +1168,75 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
+    pluginMarketplaceFeatureBanner: css`
+      margin-top: 1rem;
+      padding: 1.25rem 1.5rem;
+      background: ${t(
+        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+        'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
+      )};
+      border-radius: 0.75rem;
+      border: 1px solid ${t(colors.blue[400], colors.blue[800])};
+      box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    `,
+    pluginMarketplaceFeatureBannerContent: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    pluginMarketplaceFeatureBannerTitle: css`
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    pluginMarketplaceFeatureBannerIcon: css`
+      width: 24px;
+      height: 24px;
+      display: inline-flex;
+    `,
+    pluginMarketplaceFeatureBannerText: css`
+      font-size: 0.95rem;
+      color: ${t('rgba(255, 255, 255, 0.95)', 'rgba(255, 255, 255, 0.9)')};
+      line-height: 1.5;
+      margin: 0;
+    `,
+    pluginMarketplaceFeatureBannerButton: css`
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 1.25rem;
+      background: white;
+      color: ${colors.blue[600]};
+      font-weight: 600;
+      font-size: 0.95rem;
+      border-radius: 0.5rem;
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-decoration: none;
+      align-self: flex-start;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background: ${t(colors.gray[50], colors.gray[100])};
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    `,
+    pluginMarketplaceFeatureBannerButtonIcon: css`
+      width: 18px;
+      height: 18px;
+    `,
     pluginMarketplaceCardDisabled: css`
       opacity: 0.6;
       filter: grayscale(0.3);

package/src/tabs/marketplace/plugin-section.tsx

@@ -12,6 +12,31 @@ interface PluginSectionComponentProps {
   onCardAction: (card: PluginCard) => void
 }
 
+const StarIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+)
+
+const MailIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+)
+
 export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
   const styles = useStyles()
 
@@ -38,6 +63,33 @@ export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
       </div>
 
       <Show when={!props.isCollapsed()}>
+        <Show when={props.section.id === 'featured'}>
+          <div class={styles().pluginMarketplaceFeatureBanner}>
+            <div class={styles().pluginMarketplaceFeatureBannerContent}>
+              <h4 class={styles().pluginMarketplaceFeatureBannerTitle}>
+                <span class={styles().pluginMarketplaceFeatureBannerIcon}>
+                  <StarIcon />
+                </span>
+                Want to be featured here?
+              </h4>
+              <p class={styles().pluginMarketplaceFeatureBannerText}>
+                If you've built a plugin for TanStack Devtools and would like to
+                showcase it in the featured section, we'd love to hear from you!
+                Reach out to us to discuss partnership opportunities.
+              </p>
+              <a
+                href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"
+                class={styles().pluginMarketplaceFeatureBannerButton}
+              >
+                <span class={styles().pluginMarketplaceFeatureBannerButtonIcon}>
+                  <MailIcon />
+                </span>
+                Contact Us
+              </a>
+            </div>
+          </div>
+        </Show>
+
         <div class={styles().pluginMarketplaceGrid}>
           <For each={props.section.cards}>
             {(card) => (

package/src/tabs/marketplace/plugin-utils.test.ts

@@ -223,10 +223,11 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections[0]?.displayName).toBe('✓ Active Plugins')
-    expect(sections[0]?.cards).toHaveLength(1)
+    expect(sections).toHaveLength(2) // Featured (always present) + Active
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
+    expect(sections[1]?.displayName).toBe('✓ Active Plugins')
+    expect(sections[1]?.cards).toHaveLength(1)
   })
 
   it('should group featured plugins', () => {
@@ -266,9 +267,11 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections.find((s) => s.id === 'featured')).toBeUndefined()
+    expect(sections).toHaveLength(2) // Featured (always present) + Active
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
+    expect(sections[0]?.cards).toHaveLength(0) // Featured section empty
+    expect(sections[1]?.cards).toHaveLength(1) // Active has the plugin
   })
 
   it('should group available plugins', () => {
@@ -286,9 +289,10 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('available')
-    expect(sections[0]?.displayName).toBe('Available Plugins')
+    expect(sections).toHaveLength(2) // Featured (always present) + Available
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('available')
+    expect(sections[1]?.displayName).toBe('Available Plugins')
   })
 
   it('should not include featured plugins in available section', () => {
@@ -345,8 +349,8 @@ describe('groupIntoSections', () => {
     const sections = groupIntoSections(cards)
 
     expect(sections).toHaveLength(3)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections[1]?.id).toBe('featured')
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
     expect(sections[2]?.id).toBe('available')
   })
 
@@ -365,12 +369,16 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(0)
+    expect(sections).toHaveLength(1) // Only featured section (always present, empty)
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[0]?.cards).toHaveLength(0)
   })
 
   it('should handle empty card array', () => {
     const sections = groupIntoSections([])
-    expect(sections).toHaveLength(0)
+    expect(sections).toHaveLength(1) // Featured section always present
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[0]?.cards).toHaveLength(0)
   })
 })
 

package/src/tabs/marketplace/plugin-utils.ts

@@ -201,6 +201,20 @@ export const groupIntoSections = (
 ): Array<PluginSection> => {
   const sections: Array<PluginSection> = []
 
+  // Add Featured section first - always show this section
+  const featuredCards = allCards.filter(
+    (c) =>
+      c.metadata?.featured &&
+      c.actionType !== 'already-installed' &&
+      c.isCurrentFramework, // Only show featured plugins for current framework
+  )
+  // Always add featured section, even if no cards to show the partner banner
+  sections.push({
+    id: 'featured',
+    displayName: '⭐ Featured',
+    cards: featuredCards,
+  })
+
   // Add Active Plugins section
   const activeCards = allCards.filter(
     (c) => c.actionType === 'already-installed' && c.isRegistered,
@@ -213,21 +227,6 @@ export const groupIntoSections = (
     })
   }
 
-  // Add Featured section
-  const featuredCards = allCards.filter(
-    (c) =>
-      c.metadata?.featured &&
-      c.actionType !== 'already-installed' &&
-      c.isCurrentFramework, // Only show featured plugins for current framework
-  )
-  if (featuredCards.length > 0) {
-    sections.push({
-      id: 'featured',
-      displayName: '⭐ Featured',
-      cards: featuredCards,
-    })
-  }
-
   // Add Available section - all plugins for current framework (TanStack + third-party)
   const availableCards = allCards.filter(
     (c) =>

package/src/tabs/plugin-registry.ts

@@ -212,6 +212,35 @@ const PLUGIN_REGISTRY: Record<string, PluginMetadata> = {
   // THIRD-PARTY PLUGINS - Examples
   // ==========================================
   // External contributors can add their plugins below!
+
+  // Dimano — Prefetch Heatmap for TanStack Router
+  '@dimano/ts-devtools-plugin-prefetch-heatmap': {
+    packageName: '@dimano/ts-devtools-plugin-prefetch-heatmap',
+    title: 'Prefetch Heatmap',
+    description:
+      'Visualize TanStack Router prefetch intent, hits, and waste with a color overlay and a live metrics panel.',
+    requires: {
+      packageName: '@tanstack/react-router',
+      minVersion: '1.0.0',
+    },
+    // default export registers the plugin
+    pluginImport: {
+      importName: 'registerPrefetchHeatmapPlugin',
+      type: 'function',
+    },
+    // helps the host match your plugin deterministically
+    pluginId: 'prefetch-heatmap',
+    // show a nice card in the marketplace
+    logoUrl:
+      'https://raw.githubusercontent.com/dimitrianoudi/tanstack-prefetch-heatmap/main/assets/prefetch-heatmap-card.png',
+    docsUrl:
+      'https://github.com/dimitrianoudi/tanstack-prefetch-heatmap#prefetch-heatmap-devtools-plugin',
+    repoUrl: 'https://github.com/dimitrianoudi/tanstack-prefetch-heatmap',
+    author: 'Dimitris Anoudis (@dimitrianoudi)',
+    framework: 'react',
+    isNew: true,
+    tags: ['Router', 'Prefetch', 'Analytics', 'Overlay', 'TanStack'],
+  },
 }
 
 /**

package/src/utils/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Maximum number of plugins that can be active simultaneously in the devtools
+ */
+export const MAX_ACTIVE_PLUGINS = 3

package/src/utils/get-default-active-plugins.test.ts

@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest'
+import { getDefaultActivePlugins } from './get-default-active-plugins'
+import type { PluginWithId } from './get-default-active-plugins'
+
+describe('getDefaultActivePlugins', () => {
+  it('should return empty array when no plugins provided', () => {
+    const result = getDefaultActivePlugins([])
+    expect(result).toEqual([])
+  })
+
+  it('should automatically activate a single plugin', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should automatically activate a single plugin even if defaultOpen is false', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+        defaultOpen: false,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should return empty array when multiple plugins without defaultOpen', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+      },
+      {
+        id: 'plugin2',
+      },
+      {
+        id: 'plugin3',
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual([])
+  })
+
+  it('should activate plugins with defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['plugin1', 'plugin3'])
+  })
+
+  it('should limit defaultOpen plugins to MAX_ACTIVE_PLUGINS (3)', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin5',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Should only return first 3
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+  })
+
+  it('should activate exactly MAX_ACTIVE_PLUGINS when that many have defaultOpen', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: false,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+  })
+
+  it('should handle mix of defaultOpen true/false/undefined', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        // undefined defaultOpen
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Only plugin1 and plugin4 have defaultOpen: true
+    expect(result).toEqual(['plugin1', 'plugin4'])
+  })
+
+  it('should return single plugin even if it has defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should stop at MAX_ACTIVE_PLUGINS limit when 5 plugins have defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin5',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Should only activate the first 3, plugin4 and plugin5 should be ignored
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+    expect(result).not.toContain('plugin4')
+    expect(result).not.toContain('plugin5')
+  })
+})

package/src/utils/get-default-active-plugins.ts

@@ -0,0 +1,36 @@
+import { MAX_ACTIVE_PLUGINS } from './constants'
+
+export interface PluginWithId {
+  id: string
+  defaultOpen?: boolean
+}
+
+/**
+ * Determines which plugins should be active by default when no plugins are currently active.
+ *
+ * Rules:
+ * 1. If there's only 1 plugin, activate it automatically
+ * 2. If there are multiple plugins, activate those with defaultOpen: true (up to MAX_ACTIVE_PLUGINS limit)
+ * 3. If no plugins have defaultOpen: true, return empty array
+ *
+ * @param plugins - Array of plugins with IDs
+ * @returns Array of plugin IDs that should be active by default
+ */
+export function getDefaultActivePlugins(
+  plugins: Array<PluginWithId>,
+): Array<string> {
+  if (plugins.length === 0) {
+    return []
+  }
+
+  // If there's only 1 plugin, activate it automatically
+  if (plugins.length === 1) {
+    return [plugins[0]!.id]
+  }
+
+  // Otherwise, activate plugins with defaultOpen: true (up to the limit)
+  return plugins
+    .filter((plugin) => plugin.defaultOpen === true)
+    .slice(0, MAX_ACTIVE_PLUGINS)
+    .map((plugin) => plugin.id)
+}