@tanstack/devtools 0.6.20 → 0.6.22

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

@@ -0,0 +1,248 @@
+import { getAllPluginMetadata } from '../plugin-registry'
+import { satisfiesVersionRange } from '../semver-utils'
+import type { PackageJson } from '@tanstack/devtools-client'
+import type { ActionType, FRAMEWORKS, PluginCard, PluginSection } from './types'
+
+export const detectFramework = (
+  pkg: PackageJson,
+  frameworks: typeof FRAMEWORKS,
+): string => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+
+  // Map of framework to their actual package names
+  const frameworkPackageMap: Record<string, Array<string>> = {
+    react: ['react', 'react-dom'],
+    vue: ['vue', '@vue/core'],
+    solid: ['solid-js'],
+    svelte: ['svelte'],
+    angular: ['@angular/core'],
+  }
+
+  // Check for actual framework packages
+  for (const framework of frameworks) {
+    const frameworkPackages = frameworkPackageMap[framework]
+    if (frameworkPackages && frameworkPackages.some((pkg) => allDeps[pkg])) {
+      return framework
+    }
+  }
+
+  return 'unknown'
+}
+
+export const isPluginRegistered = (
+  registeredPlugins: Set<string>,
+  packageName: string,
+  pluginName: string,
+  framework: string,
+  pluginId?: string,
+): boolean => {
+  // If a custom pluginId is provided, use it for matching
+  if (pluginId) {
+    return Array.from(registeredPlugins).some((id) => {
+      const idLower = id.toLowerCase()
+      const pluginIdLower = pluginId.toLowerCase()
+      // Match if the registered id starts with the pluginId or contains it
+      return (
+        idLower.startsWith(pluginIdLower) || idLower.includes(pluginIdLower)
+      )
+    })
+  }
+
+  // Direct match on package name
+  if (registeredPlugins.has(packageName)) return true
+
+  // Check if any registered plugin name contains the key parts
+  // Extract meaningful words from pluginName (split by common delimiters)
+  const pluginWords = pluginName
+    .toLowerCase()
+    .split(/[-_/@]/)
+    .filter((word) => word.length > 0)
+  const frameworkPart = framework.toLowerCase()
+
+  return Array.from(registeredPlugins).some((id) => {
+    const idLower = id.toLowerCase()
+
+    // Match if registered id contains the full pluginName
+    if (idLower.includes(pluginName.toLowerCase())) {
+      return true
+    }
+
+    // Match if multiple key words from pluginName are found in the registered id
+    const matchedWords = pluginWords.filter((word) => idLower.includes(word))
+
+    // If we match multiple words, it's likely the same plugin
+    if (matchedWords.length >= 2) {
+      return true
+    }
+
+    // Match if framework and at least one plugin word match
+    if (idLower.includes(frameworkPart) && matchedWords.length >= 1) {
+      return true
+    }
+
+    return false
+  })
+}
+
+export const buildPluginCards = (
+  pkg: PackageJson,
+  currentFramework: string,
+  registeredPlugins: Set<string>,
+  existingCards: Array<PluginCard>,
+): Array<PluginCard> => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+
+  const allCards: Array<PluginCard> = []
+
+  // Iterate through all plugins in the registry
+  const allPlugins = getAllPluginMetadata()
+
+  allPlugins.forEach((metadata) => {
+    const devtoolsPackage = metadata.packageName
+
+    // Check if plugin's framework matches current framework or is 'other' (framework-agnostic)
+    const isCurrentFramework =
+      metadata.framework === currentFramework || metadata.framework === 'other'
+
+    // Extract package name from devtools package
+    // For @tanstack/react-query-devtools, the base package is @tanstack/react-query
+    const requiredPackageName = metadata.requires?.packageName
+
+    const hasPackage = requiredPackageName
+      ? !!allDeps[requiredPackageName]
+      : false
+    const hasDevtools = !!allDeps[devtoolsPackage]
+
+    // Check version requirements based on the requires field
+    let versionInfo: PluginCard['versionInfo'] | undefined
+    if (hasPackage && metadata.requires) {
+      const currentVersion = requiredPackageName
+        ? allDeps[requiredPackageName]
+        : undefined
+      if (currentVersion) {
+        const versionCheck = satisfiesVersionRange(
+          currentVersion,
+          metadata.requires.minVersion,
+          metadata.requires.maxVersion,
+        )
+        versionInfo = {
+          current: currentVersion,
+          required: metadata.requires.minVersion,
+          satisfied: versionCheck.satisfied,
+          reason: versionCheck.reason,
+        }
+      }
+    }
+
+    // Check if plugin is registered
+    const isRegistered = isPluginRegistered(
+      registeredPlugins,
+      devtoolsPackage,
+      metadata.packageName,
+      metadata.framework,
+      metadata.pluginId,
+    )
+
+    // Determine action type
+    let actionType: ActionType
+    if (!isCurrentFramework) {
+      actionType = 'wrong-framework'
+    } else if (metadata.requires && !hasPackage) {
+      actionType = 'requires-package'
+    } else if (versionInfo && !versionInfo.satisfied) {
+      // Version doesn't meet requirements - need to bump
+      actionType = 'bump-version'
+    } else if (hasDevtools && isRegistered) {
+      actionType = 'already-installed'
+    } else if (hasDevtools && !isRegistered) {
+      actionType = 'add-to-devtools'
+    } else if (!hasDevtools && metadata.requires && hasPackage) {
+      // Requirement is met but devtools package not installed
+      actionType = 'install-devtools'
+    } else if (!hasDevtools) {
+      actionType = 'install'
+    } else {
+      // Fallback - should not reach here
+      actionType = 'install'
+    }
+
+    // Find existing card to preserve status
+    const existing = existingCards.find(
+      (c) => c.devtoolsPackage === devtoolsPackage,
+    )
+
+    allCards.push({
+      requiredPackageName: requiredPackageName || '',
+      devtoolsPackage,
+      framework: metadata.framework,
+      hasPackage,
+      hasDevtools,
+      isRegistered,
+      actionType,
+      status: existing?.status || 'idle',
+      error: existing?.error,
+      isCurrentFramework,
+      metadata,
+      versionInfo,
+    })
+  })
+
+  return allCards
+}
+
+export const groupIntoSections = (
+  allCards: Array<PluginCard>,
+): Array<PluginSection> => {
+  const sections: Array<PluginSection> = []
+
+  // Add Active Plugins section
+  const activeCards = allCards.filter(
+    (c) => c.actionType === 'already-installed' && c.isRegistered,
+  )
+  if (activeCards.length > 0) {
+    sections.push({
+      id: 'active',
+      displayName: '✓ Active Plugins',
+      cards: activeCards,
+    })
+  }
+
+  // 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) =>
+      c.isCurrentFramework &&
+      c.actionType !== 'already-installed' &&
+      !c.metadata?.featured, // Not featured (already in featured section)
+  )
+
+  if (availableCards.length > 0) {
+    sections.push({
+      id: 'available',
+      displayName: 'Available Plugins',
+      cards: availableCards,
+    })
+  }
+
+  return sections
+}

package/src/tabs/marketplace/settings-panel.tsx

@@ -0,0 +1,41 @@
+import { Show } from 'solid-js'
+import { Checkbox, CloseIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import type { Accessor, Setter } from 'solid-js'
+
+interface SettingsPanelProps {
+  isOpen: Accessor<boolean>
+  onClose: () => void
+  showActivePlugins: Accessor<boolean>
+  setShowActivePlugins: Setter<boolean>
+}
+
+export const SettingsPanel = (props: SettingsPanelProps) => {
+  const styles = useStyles()
+
+  return (
+    <Show when={props.isOpen()}>
+      <div class={styles().pluginMarketplaceSettingsPanel}>
+        <div class={styles().pluginMarketplaceSettingsPanelHeader}>
+          <h3 class={styles().pluginMarketplaceSettingsPanelTitle}>
+            Marketplace Settings
+          </h3>
+          <button
+            class={styles().pluginMarketplaceSettingsPanelClose}
+            onClick={props.onClose}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+        <div class={styles().pluginMarketplaceSettingsPanelContent}>
+          <Checkbox
+            label="Show active plugins"
+            description="Display installed plugins in a separate section"
+            checked={props.showActivePlugins()}
+            onChange={(checked) => props.setShowActivePlugins(checked)}
+          />
+        </div>
+      </div>
+    </Show>
+  )
+}

package/src/tabs/marketplace/tag-filters.tsx

@@ -0,0 +1,35 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import type { Accessor } from 'solid-js'
+
+interface TagFiltersProps {
+  tags: Accessor<Array<string>>
+  selectedTags: Accessor<Set<string>>
+  onToggleTag: (tag: string) => void
+}
+
+export const TagFilters = (props: TagFiltersProps) => {
+  const styles = useStyles()
+
+  return (
+    <Show when={props.tags().length > 0}>
+      <div class={styles().pluginMarketplaceTagsContainer}>
+        <For each={props.tags()}>
+          {(tag) => (
+            <button
+              class={styles().pluginMarketplaceTagButton}
+              classList={{
+                [styles().pluginMarketplaceTagButtonActive]: props
+                  .selectedTags()
+                  .has(tag),
+              }}
+              onClick={() => props.onToggleTag(tag)}
+            >
+              {tag}
+            </button>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}

package/src/tabs/marketplace/types.ts

@@ -0,0 +1,47 @@
+import type { PluginMetadata } from '../plugin-registry'
+
+type InstallStatus = 'idle' | 'installing' | 'success' | 'error'
+
+export type ActionType =
+  | 'install'
+  | 'install-devtools'
+  | 'add-to-devtools'
+  | 'requires-package'
+  | 'wrong-framework'
+  | 'already-installed'
+  | 'version-mismatch'
+  | 'bump-version'
+
+export interface PluginCard {
+  requiredPackageName: string
+  devtoolsPackage: string
+  framework: string
+  hasPackage: boolean
+  hasDevtools: boolean
+  isRegistered: boolean
+  actionType: ActionType
+  status: InstallStatus
+  error?: string
+  isCurrentFramework: boolean
+  metadata?: PluginMetadata
+  versionInfo?: {
+    current: string
+    required?: string
+    satisfied: boolean
+    reason?: string
+  }
+}
+
+export interface PluginSection {
+  id: string
+  displayName: string
+  cards: Array<PluginCard>
+}
+
+export const FRAMEWORKS = [
+  'react',
+  'solid',
+  'vue',
+  'svelte',
+  'angular',
+] as const