@tanstack/devtools 0.6.19 → 0.6.21

package/src/tabs/plugins-tab.tsx

@@ -1,21 +1,33 @@
-import { For, createEffect, createMemo, createSignal } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { useDrawContext } from '../context/draw-context'
 import { usePlugins, useTheme } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
+import { PluginMarketplace } from './plugin-marketplace'
 
 export const PluginsTab = () => {
   const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
-  const { expanded, hoverUtils, animationMs } = useDrawContext()
+  const { expanded, hoverUtils, animationMs, setForceExpand } = useDrawContext()
 
   const [pluginRefs, setPluginRefs] = createSignal(
     new Map<string, HTMLDivElement>(),
   )
+  const [showMarketplace, setShowMarketplace] = createSignal(false)
 
   const styles = useStyles()
 
   const { theme } = useTheme()
+
+  const hasPlugins = createMemo(
+    () => plugins()?.length && plugins()!.length > 0,
+  )
+
+  // Keep sidebar expanded when marketplace is shown
+  createEffect(() => {
+    setForceExpand(showMarketplace())
+  })
+
   createEffect(() => {
     const currentActivePlugins = plugins()?.filter((plugin) =>
       activePlugins().includes(plugin.id!),
@@ -30,76 +42,111 @@ export const PluginsTab = () => {
     })
   })
 
+  const handleMarketplaceClick = () => setShowMarketplace(!showMarketplace())
+
+  const handlePluginClick = (pluginId: string) => {
+    // Close marketplace when switching to a plugin
+    if (showMarketplace()) {
+      setShowMarketplace(false)
+    }
+    toggleActivePlugins(pluginId)
+  }
+
   return (
-    <div class={styles().pluginsTabPanel}>
-      <div
-        class={clsx(
-          styles().pluginsTabDraw(expanded()),
-          {
-            [styles().pluginsTabDraw(expanded())]: expanded(),
-          },
-          styles().pluginsTabDrawTransition(animationMs),
-        )}
-        onMouseEnter={() => hoverUtils.enter()}
-        onMouseLeave={() => hoverUtils.leave()}
-      >
+    <Show when={hasPlugins()} fallback={<PluginMarketplace />}>
+      <div class={styles().pluginsTabPanel}>
         <div
           class={clsx(
-            styles().pluginsTabSidebar(expanded()),
-            styles().pluginsTabSidebarTransition(animationMs),
+            styles().pluginsTabDraw(expanded()),
+            {
+              [styles().pluginsTabDraw(expanded())]: expanded(),
+            },
+            styles().pluginsTabDrawTransition(animationMs),
           )}
+          onMouseEnter={() => hoverUtils.enter()}
+          onMouseLeave={() => {
+            // Don't collapse on mouse leave if marketplace is open
+            if (!showMarketplace()) {
+              hoverUtils.leave()
+            }
+          }}
         >
-          <For each={plugins()}>
-            {(plugin) => {
-              let pluginHeading: HTMLHeadingElement | undefined
-
-              createEffect(() => {
-                if (pluginHeading) {
-                  typeof plugin.name === 'string'
-                    ? (pluginHeading.textContent = plugin.name)
-                    : plugin.name(pluginHeading, theme())
-                }
-              })
-
-              const isActive = createMemo(() =>
-                activePlugins().includes(plugin.id!),
-              )
-
-              return (
+          <div
+            class={clsx(
+              styles().pluginsTabSidebar(expanded()),
+              styles().pluginsTabSidebarTransition(animationMs),
+            )}
+          >
+            <div class={styles().pluginsList}>
+              <For each={plugins()}>
+                {(plugin) => {
+                  let pluginHeading: HTMLHeadingElement | undefined
+
+                  createEffect(() => {
+                    if (pluginHeading) {
+                      typeof plugin.name === 'string'
+                        ? (pluginHeading.textContent = plugin.name)
+                        : plugin.name(pluginHeading, theme())
+                    }
+                  })
+
+                  const isActive = createMemo(() =>
+                    activePlugins().includes(plugin.id!),
+                  )
+
+                  return (
+                    <div
+                      onClick={() => handlePluginClick(plugin.id!)}
+                      class={clsx(styles().pluginName, {
+                        active: isActive(),
+                      })}
+                    >
+                      <h3
+                        id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+                        ref={pluginHeading}
+                      />
+                    </div>
+                  )
+                }}
+              </For>
+            </div>
+
+            {/* Add More Tab - visually distinct */}
+            <div
+              onClick={handleMarketplaceClick}
+              class={clsx(styles().pluginNameAddMore, {
+                active: showMarketplace(),
+              })}
+            >
+              <h3>Add More</h3>
+            </div>
+          </div>
+        </div>
+
+        {/* Show marketplace if active, otherwise show plugin panels */}
+        <Show
+          when={showMarketplace()}
+          fallback={
+            <For each={activePlugins()}>
+              {(pluginId) => (
                 <div
-                  onClick={() => {
-                    toggleActivePlugins(plugin.id!)
+                  id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
+                  ref={(el) => {
+                    setPluginRefs((prev) => {
+                      const updated = new Map(prev)
+                      updated.set(pluginId, el)
+                      return updated
+                    })
                   }}
-                  class={clsx(styles().pluginName, {
-                    active: isActive(),
-                  })}
-                >
-                  <h3
-                    id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
-                    ref={pluginHeading}
-                  />
-                </div>
-              )
-            }}
-          </For>
-        </div>
+                  class={styles().pluginsTabContent}
+                />
+              )}
+            </For>
+          }
+        >
+          <PluginMarketplace />
+        </Show>
       </div>
-
-      <For each={activePlugins()}>
-        {(pluginId) => (
-          <div
-            id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
-            ref={(el) => {
-              setPluginRefs((prev) => {
-                const updated = new Map(prev)
-                updated.set(pluginId, el)
-                return updated
-              })
-            }}
-            class={styles().pluginsTabContent}
-          />
-        )}
-      </For>
-    </div>
+    </Show>
   )
 }

package/src/tabs/semver-utils.test.ts

@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest'
+import {
+  compareVersions,
+  parseVersion,
+  satisfiesMaxVersion,
+  satisfiesMinVersion,
+  satisfiesVersionRange,
+} from './semver-utils'
+
+describe('parseVersion', () => {
+  it('should parse basic semver format', () => {
+    const result = parseVersion('1.2.3')
+    expect(result).toEqual({
+      major: 1,
+      minor: 2,
+      patch: 3,
+      raw: '1.2.3',
+    })
+  })
+
+  it('should parse version with v prefix', () => {
+    const result = parseVersion('v2.0.1')
+    expect(result).toEqual({
+      major: 2,
+      minor: 0,
+      patch: 1,
+      raw: 'v2.0.1',
+    })
+  })
+
+  it('should parse version with ^ prefix', () => {
+    const result = parseVersion('^3.1.4')
+    expect(result).toEqual({
+      major: 3,
+      minor: 1,
+      patch: 4,
+      raw: '^3.1.4',
+    })
+  })
+
+  it('should parse version with ~ prefix', () => {
+    const result = parseVersion('~1.5.2')
+    expect(result).toEqual({
+      major: 1,
+      minor: 5,
+      patch: 2,
+      raw: '~1.5.2',
+    })
+  })
+
+  it('should handle prerelease versions', () => {
+    const result = parseVersion('1.0.0-alpha.1')
+    expect(result).toEqual({
+      major: 1,
+      minor: 0,
+      patch: 0,
+      raw: '1.0.0-alpha.1',
+    })
+  })
+
+  it('should handle build metadata', () => {
+    const result = parseVersion('1.0.0+20130313144700')
+    expect(result).toEqual({
+      major: 1,
+      minor: 0,
+      patch: 0,
+      raw: '1.0.0+20130313144700',
+    })
+  })
+
+  it('should handle version with only major.minor', () => {
+    const result = parseVersion('2.1')
+    expect(result).toEqual({
+      major: 2,
+      minor: 1,
+      patch: 0,
+      raw: '2.1',
+    })
+  })
+
+  it('should return null for invalid version', () => {
+    expect(parseVersion('')).toBeNull()
+    expect(parseVersion('invalid')).toBeNull()
+    expect(parseVersion('1')).toBeNull()
+  })
+
+  it('should return null for version with non-numeric parts', () => {
+    expect(parseVersion('a.b.c')).toBeNull()
+  })
+})
+
+describe('compareVersions', () => {
+  it('should return 0 for equal versions', () => {
+    const v1 = parseVersion('1.2.3')!
+    const v2 = parseVersion('1.2.3')!
+    expect(compareVersions(v1, v2)).toBe(0)
+  })
+
+  it('should return positive for newer major version', () => {
+    const v1 = parseVersion('2.0.0')!
+    const v2 = parseVersion('1.0.0')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+
+  it('should return negative for older major version', () => {
+    const v1 = parseVersion('1.0.0')!
+    const v2 = parseVersion('2.0.0')!
+    expect(compareVersions(v1, v2)).toBeLessThan(0)
+  })
+
+  it('should compare minor versions when major is equal', () => {
+    const v1 = parseVersion('1.5.0')!
+    const v2 = parseVersion('1.3.0')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+
+  it('should compare patch versions when major and minor are equal', () => {
+    const v1 = parseVersion('1.2.5')!
+    const v2 = parseVersion('1.2.3')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+})
+
+describe('satisfiesMinVersion', () => {
+  it('should return true when current version meets minimum', () => {
+    expect(satisfiesMinVersion('2.0.0', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.5.0', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.0.5', '1.0.0')).toBe(true)
+  })
+
+  it('should return true when versions are equal', () => {
+    expect(satisfiesMinVersion('1.2.3', '1.2.3')).toBe(true)
+  })
+
+  it('should return false when current version is below minimum', () => {
+    expect(satisfiesMinVersion('0.9.0', '1.0.0')).toBe(false)
+    expect(satisfiesMinVersion('1.0.0', '1.5.0')).toBe(false)
+    expect(satisfiesMinVersion('1.2.3', '1.2.5')).toBe(false)
+  })
+
+  it('should return true if version cannot be parsed', () => {
+    expect(satisfiesMinVersion('invalid', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.0.0', 'invalid')).toBe(true)
+  })
+})
+
+describe('satisfiesMaxVersion', () => {
+  it('should return true when current version is below maximum', () => {
+    expect(satisfiesMaxVersion('1.0.0', '2.0.0')).toBe(true)
+    expect(satisfiesMaxVersion('1.5.0', '2.0.0')).toBe(true)
+  })
+
+  it('should return true when versions are equal', () => {
+    expect(satisfiesMaxVersion('1.2.3', '1.2.3')).toBe(true)
+  })
+
+  it('should return false when current version exceeds maximum', () => {
+    expect(satisfiesMaxVersion('2.0.0', '1.0.0')).toBe(false)
+    expect(satisfiesMaxVersion('1.5.0', '1.0.0')).toBe(false)
+  })
+
+  it('should return true if version cannot be parsed', () => {
+    expect(satisfiesMaxVersion('invalid', '1.0.0')).toBe(true)
+    expect(satisfiesMaxVersion('1.0.0', 'invalid')).toBe(true)
+  })
+})
+
+describe('satisfiesVersionRange', () => {
+  it('should return satisfied when no range specified', () => {
+    expect(satisfiesVersionRange('1.0.0')).toEqual({ satisfied: true })
+  })
+
+  it('should validate minimum version only', () => {
+    expect(satisfiesVersionRange('2.0.0', '1.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('0.9.0', '1.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v1.0.0 or higher (current: v0.9.0)',
+    })
+  })
+
+  it('should validate maximum version only', () => {
+    expect(satisfiesVersionRange('1.0.0', undefined, '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('3.0.0', undefined, '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v2.0.0 or lower (current: v3.0.0)',
+    })
+  })
+
+  it('should validate both min and max versions', () => {
+    expect(satisfiesVersionRange('1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('0.9.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v1.0.0 or higher (current: v0.9.0)',
+    })
+    expect(satisfiesVersionRange('2.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v2.0.0 or lower (current: v2.5.0)',
+    })
+  })
+
+  it('should handle version prefixes', () => {
+    expect(satisfiesVersionRange('^1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('~1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('v1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+  })
+})

package/src/tabs/semver-utils.ts

@@ -0,0 +1,114 @@
+/**
+ * Simple semver utilities for version comparison
+ * Handles basic semver format: major.minor.patch
+ */
+
+interface ParsedVersion {
+  major: number
+  minor: number
+  patch: number
+  raw: string
+}
+
+/**
+ * Parse a semver string into components
+ */
+export function parseVersion(version: string): ParsedVersion | null {
+  if (!version) return null
+
+  // Remove leading 'v', '^', '~', and any prerelease/build metadata
+  const cleanVersion = version
+    .replace(/^[v^~]/, '')
+    .split('-')[0]
+    ?.split('+')[0]
+
+  if (!cleanVersion) return null
+
+  const parts = cleanVersion.split('.')
+
+  if (parts.length < 2) return null
+
+  const major = parseInt(parts[0] ?? '0', 10)
+  const minor = parseInt(parts[1] ?? '0', 10)
+  const patch = parseInt(parts[2] ?? '0', 10)
+
+  if (isNaN(major) || isNaN(minor) || isNaN(patch)) {
+    return null
+  }
+
+  return {
+    major,
+    minor,
+    patch,
+    raw: version,
+  }
+}
+
+/**
+ * Compare two versions
+ * Returns: -1 if v1 < v2, 0 if equal, 1 if v1 > v2
+ */
+export function compareVersions(v1: ParsedVersion, v2: ParsedVersion): number {
+  if (v1.major !== v2.major) return v1.major - v2.major
+  if (v1.minor !== v2.minor) return v1.minor - v2.minor
+  return v1.patch - v2.patch
+}
+
+/**
+ * Check if a version satisfies a minimum requirement
+ */
+export function satisfiesMinVersion(
+  currentVersion: string,
+  minVersion: string,
+): boolean {
+  const current = parseVersion(currentVersion)
+  const min = parseVersion(minVersion)
+
+  if (!current || !min) return true // If we can't parse, assume it's OK
+
+  return compareVersions(current, min) >= 0
+}
+
+/**
+ * Check if a version is below a maximum requirement
+ */
+export function satisfiesMaxVersion(
+  currentVersion: string,
+  maxVersion: string,
+): boolean {
+  const current = parseVersion(currentVersion)
+  const max = parseVersion(maxVersion)
+
+  if (!current || !max) return true
+
+  return compareVersions(current, max) <= 0
+}
+
+/**
+ * Check if a version satisfies both min and max requirements
+ */
+export function satisfiesVersionRange(
+  currentVersion: string,
+  minVersion?: string,
+  maxVersion?: string,
+): { satisfied: boolean; reason?: string } {
+  if (!minVersion && !maxVersion) {
+    return { satisfied: true }
+  }
+
+  if (minVersion && !satisfiesMinVersion(currentVersion, minVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${minVersion} or higher (current: v${currentVersion})`,
+    }
+  }
+
+  if (maxVersion && !satisfiesMaxVersion(currentVersion, maxVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${maxVersion} or lower (current: v${currentVersion})`,
+    }
+  }
+
+  return { satisfied: true }
+}