Function PackageJsonPanel

examples/react/basic/src/package-json-panel.tsx:5–341

()

import type { CSSProperties } from 'react'

export const PackageJsonPanel = () => {
  const [packageJson, setPackageJson] = useState<any>(null)
  const [outdatedDeps, setOutdatedDeps] = useState<
    Record<
      string,
      {
        current: string
        wanted: string
        latest: string
        type?: 'dependencies' | 'devDependencies'
      }
    >
  >({})

  useEffect(() => {
    devtoolsEventClient.emit('mounted', undefined as any)
    const cleanupOutdated = devtoolsEventClient.on(
      'outdated-deps-read',
      (event) => {
        setOutdatedDeps(event.payload.outdatedDeps || {})
      },
    )
    const cleanupPackageJson = devtoolsEventClient.on(
      'package-json-read',
      (event) => {
        console.log('package-json-read', event)
        setPackageJson(event.payload.packageJson)
      },
    )
    return () => {
      cleanupOutdated()
      cleanupPackageJson()
    }
  }, [])

  const hasOutdated = Object.keys(outdatedDeps).length > 0

  // Helpers
  const stripRange = (v?: string) => (v ?? '').replace(/^[~^><=v\s]*/, '')
  const parseSemver = (v?: string) => {
    const s = stripRange(v)
    const m = s.match(/^(\d+)\.(\d+)\.(\d+)/)
    if (!m) return null
    return { major: +m[1], minor: +m[2], patch: +m[3] }
  }
  const diffType = (
    current?: string,
    latest?: string,
  ): 'major' | 'minor' | 'patch' | null => {
    const c = parseSemver(current)
    const l = parseSemver(latest)
    if (!c || !l) return null
    if (l.major > c.major) return 'major'
    if (l.major === c.major && l.minor > c.minor) return 'minor'
    if (l.major === c.major && l.minor === c.minor && l.patch > c.patch)
      return 'patch'
    return null
  }