@tanstack/devtools 0.6.20 → 0.6.22

package/src/tabs/plugin-marketplace.tsx

@@ -0,0 +1,346 @@
+import { For, Show, createSignal, onCleanup, onMount } from 'solid-js'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
+import { usePlugins } from '../context/use-devtools-context'
+import { useStyles } from '../styles/use-styles'
+import { PluginSectionComponent } from './marketplace/plugin-section'
+import { SettingsPanel } from './marketplace/settings-panel'
+import { MarketplaceHeader } from './marketplace/marketplace-header'
+import { FRAMEWORKS } from './marketplace/types'
+import {
+  buildPluginCards,
+  detectFramework,
+  groupIntoSections,
+} from './marketplace/plugin-utils'
+import type { PackageJson } from '@tanstack/devtools-client'
+import type { PluginCard, PluginSection } from './marketplace/types'
+
+export const PluginMarketplace = () => {
+  const styles = useStyles()
+  const { plugins } = usePlugins()
+  const [pluginSections, setPluginSections] = createSignal<
+    Array<PluginSection>
+  >([])
+  const [currentPackageJson, setCurrentPackageJson] =
+    createSignal<PackageJson | null>(null)
+  const [searchInput, setSearchInput] = createSignal('')
+  const [searchQuery, setSearchQuery] = createSignal('')
+  const [collapsedSections, setCollapsedSections] = createSignal<Set<string>>(
+    new Set(),
+  )
+  const [showActivePlugins, setShowActivePlugins] = createSignal(true)
+  const [selectedTags, setSelectedTags] = createSignal<Set<string>>(new Set())
+  const [isSettingsOpen, setIsSettingsOpen] = createSignal(false)
+
+  let debounceTimeout: ReturnType<typeof setTimeout> | undefined
+
+  // Debounce search input
+  const handleSearchInput = (value: string) => {
+    setSearchInput(value)
+
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout)
+    }
+
+    debounceTimeout = setTimeout(() => {
+      setSearchQuery(value)
+    }, 300)
+  }
+
+  const toggleSection = (framework: string) => {
+    setCollapsedSections((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(framework)) {
+        newSet.delete(framework)
+      } else {
+        newSet.add(framework)
+      }
+      return newSet
+    })
+  }
+
+  const matchesSearch = (card: PluginCard, query: string): boolean => {
+    if (!query) return true
+
+    const lowerQuery = query.toLowerCase()
+    return (
+      card.devtoolsPackage.toLowerCase().includes(lowerQuery) ||
+      card.requiredPackageName.toLowerCase().includes(lowerQuery) ||
+      card.framework.toLowerCase().includes(lowerQuery)
+    )
+  }
+
+  const getFilteredSections = () => {
+    const query = searchQuery()
+    const showActive = showActivePlugins()
+    const tags = selectedTags()
+    const pkg = currentPackageJson()
+
+    // Regenerate sections from current plugin state
+    if (!pkg) return []
+
+    const currentFramework = detectFramework(pkg, FRAMEWORKS)
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || '') || [])
+
+    // Build fresh cards from current state
+    const allCards = buildPluginCards(
+      pkg,
+      currentFramework,
+      registeredPlugins,
+      pluginSections().flatMap((s) => s.cards), // Preserve status from existing cards
+    )
+
+    // Generate sections from cards
+    let sections = groupIntoSections(allCards)
+
+    // Filter out active plugins section if hidden
+    if (!showActive) {
+      sections = sections.filter((section) => section.id !== 'active')
+    }
+
+    // Filter by tags if any are selected
+    if (tags.size > 0) {
+      sections = sections
+        .map((section) => ({
+          ...section,
+          cards: section.cards.filter((card) => {
+            if (!card.metadata?.tags) return false
+            return card.metadata.tags.some((tag) => tags.has(tag))
+          }),
+        }))
+        .filter((section) => section.cards.length > 0)
+    }
+
+    // Apply search filter
+    if (!query) return sections
+
+    return sections
+      .map((section) => ({
+        ...section,
+        cards: section.cards.filter((card) => matchesSearch(card, query)),
+      }))
+      .filter((section) => section.cards.length > 0)
+  }
+
+  onMount(() => {
+    // Listen for package.json updates
+    const cleanupJsonRead = devtoolsEventClient.on(
+      'package-json-read',
+      (event) => {
+        setCurrentPackageJson(event.payload.packageJson)
+        updatePluginCards(event.payload.packageJson)
+      },
+    )
+
+    const cleanupJsonUpdated = devtoolsEventClient.on(
+      'package-json-updated',
+      (event) => {
+        setCurrentPackageJson(event.payload.packageJson)
+        updatePluginCards(event.payload.packageJson)
+      },
+    )
+
+    // Listen for installation results
+    const cleanupDevtoolsInstalled = devtoolsEventClient.on(
+      'devtools-installed',
+      (event) => {
+        setPluginSections((prevSections) =>
+          prevSections.map((section) => ({
+            ...section,
+            cards: section.cards.map((card) =>
+              card.devtoolsPackage === event.payload.packageName
+                ? {
+                    ...card,
+                    status: event.payload.success ? 'success' : 'error',
+                    error: event.payload.error,
+                  }
+                : card,
+            ),
+          })),
+        )
+      },
+    )
+
+    // Listen for plugin added results
+    const cleanupPluginAdded = devtoolsEventClient.on(
+      'plugin-added',
+      (event) => {
+        setPluginSections((prevSections) =>
+          prevSections.map((section) => ({
+            ...section,
+            cards: section.cards.map((card) =>
+              card.devtoolsPackage === event.payload.packageName
+                ? {
+                    ...card,
+                    status: event.payload.success ? 'success' : 'error',
+                    error: event.payload.error,
+                  }
+                : card,
+            ),
+          })),
+        )
+
+        // When plugin is successfully added, recalculate to move it to active section
+        if (event.payload.success) {
+          const pkg = currentPackageJson()
+          if (pkg) {
+            updatePluginCards(pkg)
+          }
+        }
+      },
+    )
+
+    onCleanup(() => {
+      cleanupJsonRead()
+      cleanupJsonUpdated()
+      cleanupDevtoolsInstalled()
+      cleanupPluginAdded()
+    })
+    // Emit mounted event to trigger package.json read
+    devtoolsEventClient.emit('mounted', undefined)
+  })
+
+  const updatePluginCards = (pkg: PackageJson | null) => {
+    if (!pkg) return
+
+    const currentFramework = detectFramework(pkg, FRAMEWORKS)
+
+    // Get list of registered plugin names
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || '') || [])
+
+    const allCards = buildPluginCards(
+      pkg,
+      currentFramework,
+      registeredPlugins,
+      pluginSections().flatMap((s) => s.cards),
+    )
+
+    const sections = groupIntoSections(allCards)
+    setPluginSections(sections)
+  }
+
+  const handleAction = (card: PluginCard) => {
+    if (
+      card.actionType === 'requires-package' ||
+      card.actionType === 'wrong-framework' ||
+      card.actionType === 'already-installed' ||
+      card.actionType === 'version-mismatch'
+    ) {
+      // Can't install devtools without the base package, wrong framework, already installed, or version mismatch
+      return
+    }
+
+    // change state to installing of the plugin user clicked
+    setPluginSections((prevSections) =>
+      prevSections.map((section) => ({
+        ...section,
+        cards: section.cards.map((c) =>
+          c.devtoolsPackage === card.devtoolsPackage
+            ? { ...c, status: 'installing' }
+            : c,
+        ),
+      })),
+    )
+
+    // Bump the version of the required package and then add to devtools
+    if (card.actionType === 'bump-version') {
+      // emits the event to vite plugin to bump the package version, this will add it to devtools after
+      devtoolsEventClient.emit('bump-package-version', {
+        packageName: card.requiredPackageName,
+        devtoolsPackage: card.devtoolsPackage,
+        pluginName: card.metadata?.title || card.devtoolsPackage,
+        minVersion: card.metadata?.requires?.minVersion,
+        pluginImport: card.metadata?.pluginImport,
+      })
+      return
+    }
+
+    if (card.actionType === 'add-to-devtools') {
+      // emits the event to vite plugin to add the plugin
+      devtoolsEventClient.emit('add-plugin-to-devtools', {
+        packageName: card.devtoolsPackage,
+        // should always be defined
+        pluginName: card.metadata?.title ?? card.devtoolsPackage,
+        pluginImport: card.metadata?.pluginImport,
+      })
+      return
+    }
+    devtoolsEventClient.emit('install-devtools', {
+      packageName: card.devtoolsPackage,
+      // should always be defined
+      pluginName: card.metadata?.title ?? card.devtoolsPackage,
+      pluginImport: card.metadata?.pluginImport,
+    })
+  }
+
+  // Get all available tags from plugins (excluding active plugins)
+  const getAllTags = () => {
+    const tags = new Set<string>()
+    pluginSections().forEach((section) => {
+      // Only get tags from featured and available sections, not active plugins
+      if (section.id === 'featured' || section.id === 'available') {
+        section.cards.forEach((card) => {
+          if (card.metadata?.tags) {
+            card.metadata.tags.forEach((tag) => tags.add(tag))
+          }
+        })
+      }
+    })
+    return Array.from(tags).sort()
+  }
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) => {
+      const newTags = new Set(prev)
+      if (newTags.has(tag)) {
+        newTags.delete(tag)
+      } else {
+        newTags.add(tag)
+      }
+      return newTags
+    })
+  }
+
+  return (
+    <div class={styles().pluginMarketplace}>
+      {/* Settings Panel */}
+      <SettingsPanel
+        isOpen={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        showActivePlugins={showActivePlugins}
+        setShowActivePlugins={setShowActivePlugins}
+      />
+
+      <MarketplaceHeader
+        searchInput={searchInput}
+        onSearchInput={handleSearchInput}
+        onSettingsClick={() => setIsSettingsOpen(!isSettingsOpen())}
+        tags={getAllTags}
+        selectedTags={selectedTags}
+        onToggleTag={toggleTag}
+      />
+
+      <Show when={getFilteredSections().length > 0}>
+        <For each={getFilteredSections()}>
+          {(section) => (
+            <PluginSectionComponent
+              section={section}
+              isCollapsed={() => collapsedSections().has(section.id)}
+              onToggleCollapse={() => toggleSection(section.id)}
+              onCardAction={handleAction}
+            />
+          )}
+        </For>
+      </Show>
+
+      <Show when={getFilteredSections().length === 0}>
+        <div class={styles().pluginMarketplaceEmpty}>
+          <p class={styles().pluginMarketplaceEmptyText}>
+            {searchQuery()
+              ? `No plugins found matching "${searchQuery()}"`
+              : 'No additional plugins available. You have all compatible devtools installed and registered!'}
+          </p>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/tabs/plugin-registry.ts

@@ -0,0 +1,222 @@
+/**
+ * Plugin Registry - Metadata for TanStack and third-party devtools plugins
+ *
+ * This registry allows plugin authors to customize their marketplace cards with:
+ * - Custom titles and descriptions
+ * - Logo/image URLs
+ * - Minimum version requirements (semver)
+ * - External links
+ *
+ * External companies can open PRs to add their plugins here!
+ */
+
+export interface PluginMetadata {
+  /** Package name (e.g., '@tanstack/react-query-devtools') */
+  packageName: string
+
+  /** Display title shown in the marketplace card */
+  title: string
+
+  /** Short description of what the plugin does */
+  description?: string
+
+  /** URL to a logo image (SVG, PNG, etc.) */
+  logoUrl?: string
+
+  /** Required package dependency */
+  requires?: {
+    /** Required package name (e.g., '@tanstack/react-query') */
+    packageName: string
+    /** Minimum required version (semver) */
+    minVersion: string
+    /** Maximum version (if there's a known breaking change) */
+    maxVersion?: string
+  }
+
+  /** Plugin import configuration */
+  pluginImport?: {
+    /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
+    importName: string
+    /** Whether this is a JSX component or a function that returns a plugin */
+    type: 'jsx' | 'function'
+  }
+
+  /** Custom plugin ID pattern for matching against registered plugins in devtools.
+   * If specified, this will be used to match plugin IDs that may have suffixes.
+   * For example, pluginId: "tanstack-form" will match "tanstack-form-4" in devtools.
+   * The default behavior of devtools is to lowercase the package name and replace non-alphanumeric characters with -
+   * so if the name of the plugin is "My awesome Plugin", the default pluginId would be "my-awesome-plugin".
+   */
+  pluginId?: string
+
+  /** Official documentation URL / URL to the docs on how to implement devtools */
+  docsUrl?: string
+
+  /** Plugin author/maintainer */
+  author?: string
+
+  /** Repository URL */
+  repoUrl?: string
+
+  /** Framework this plugin supports */
+  framework: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other'
+
+  /** Mark as featured to appear in the Featured section with animated border */
+  featured?: boolean
+
+  /** Mark as new to show a "New" banner on the card */
+  isNew?: boolean
+
+  /** Tags for filtering and categorization */
+  tags?: Array<string>
+}
+
+/**
+ * Registry of all known devtools plugins
+ * External contributors: Add your plugin metadata here!
+ */
+const PLUGIN_REGISTRY: Record<string, PluginMetadata> = {
+  // TanStack Query
+  '@tanstack/react-query-devtools': {
+    packageName: '@tanstack/react-query-devtools',
+    title: 'TanStack Query Devtools',
+    description:
+      'Powerful devtools for TanStack Query - inspect queries, mutations, and cache',
+    requires: {
+      packageName: '@tanstack/react-query',
+      minVersion: '5.0.0',
+    },
+    pluginId: 'tanstack-query',
+    docsUrl: 'https://tanstack.com/query/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    featured: true, // Featured plugin
+    tags: ['TanStack', 'data-fetching', 'caching', 'state-management'],
+  },
+  '@tanstack/solid-query-devtools': {
+    packageName: '@tanstack/solid-query-devtools',
+    title: 'TanStack Query Devtools',
+    description:
+      'Powerful devtools for TanStack Query - inspect queries, mutations, and cache',
+    requires: {
+      packageName: '@tanstack/solid-query',
+      minVersion: '5.0.0',
+    },
+    pluginId: 'tanstack-query',
+    docsUrl: 'https://tanstack.com/query/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'solid',
+    tags: ['TanStack', 'data-fetching', 'caching', 'state-management'],
+  },
+
+  // TanStack Router
+  '@tanstack/react-router-devtools': {
+    packageName: '@tanstack/react-router-devtools',
+    title: 'TanStack Router Devtools',
+    description: 'Inspect routes, navigation, and router state in real-time',
+    requires: {
+      packageName: '@tanstack/react-router',
+      minVersion: '1.0.0',
+    },
+    pluginId: 'tanstack-router',
+    docsUrl: 'https://tanstack.com/router/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    featured: true, // Featured plugin
+    tags: ['TanStack', 'routing', 'navigation'],
+  },
+  '@tanstack/solid-router-devtools': {
+    packageName: '@tanstack/solid-router-devtools',
+    title: 'TanStack Router Devtools',
+    description: 'Inspect routes, navigation, and router state in real-time',
+    requires: {
+      packageName: '@tanstack/solid-router',
+      minVersion: '1.0.0',
+    },
+    pluginId: 'tanstack-router',
+    docsUrl: 'https://tanstack.com/router/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'solid',
+    tags: ['TanStack', 'routing', 'navigation'],
+  },
+
+  // TanStack Form
+  '@tanstack/react-form-devtools': {
+    packageName: '@tanstack/react-form-devtools',
+    title: 'TanStack Form Devtools',
+    description: 'Debug form state, validation, and field values',
+    requires: {
+      packageName: '@tanstack/react-form',
+      minVersion: '1.23.0',
+    },
+    pluginImport: {
+      importName: 'FormDevtoolsPlugin',
+      type: 'function',
+    },
+    pluginId: 'tanstack-form',
+    docsUrl: 'https://tanstack.com/form/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    isNew: true,
+    tags: ['TanStack', 'forms', 'validation'],
+  },
+  '@tanstack/solid-form-devtools': {
+    packageName: '@tanstack/solid-form-devtools',
+    title: 'TanStack Form Devtools',
+    description: 'Debug form state, validation, and field values',
+    requires: {
+      packageName: '@tanstack/solid-form',
+      minVersion: '1.23.0',
+    },
+    pluginImport: {
+      importName: 'FormDevtoolsPlugin',
+      type: 'function',
+    },
+    pluginId: 'tanstack-form',
+    docsUrl: 'https://tanstack.com/form/latest/docs/devtools',
+    author: 'TanStack',
+    isNew: true,
+    framework: 'solid',
+    tags: ['TanStack', 'forms', 'validation'],
+  },
+
+  // TanStack Pacer (Example - adjust as needed)
+  '@tanstack/react-pacer-devtools': {
+    packageName: '@tanstack/react-pacer-devtools',
+    title: 'Pacer Devtools',
+    description: 'Monitor and debug your Pacer animations and transitions',
+    requires: {
+      packageName: '@tanstack/react-pacer',
+      minVersion: '0.16.4',
+    },
+    author: 'TanStack',
+    framework: 'react',
+    isNew: true, // New plugin banner
+    tags: ['TanStack'],
+  },
+  '@tanstack/solid-pacer-devtools': {
+    packageName: '@tanstack/solid-pacer-devtools',
+    title: 'Pacer Devtools',
+    description: 'Monitor and debug your Pacer animations and transitions',
+    requires: {
+      packageName: '@tanstack/solid-pacer',
+      minVersion: '0.14.4',
+    },
+    author: 'TanStack',
+    framework: 'solid',
+    isNew: true, // New plugin banner
+    tags: ['TanStack'],
+  },
+
+  // ==========================================
+  // THIRD-PARTY PLUGINS - Examples
+  // ==========================================
+  // External contributors can add their plugins below!
+}
+
+/**
+ * Get all registered plugin metadata
+ */
+export function getAllPluginMetadata(): Array<PluginMetadata> {
+  return Object.values(PLUGIN_REGISTRY)
+}