@secundus-studio/stift-tanstack-devtool-plugin

TanStack Devtools plugin for Stift: locale switch, namespace buckets, context params + units editors, searchable missing-key/param logs, pack install/refresh/delete with byte progress and coverage, and a cross-locale table with live editing.

pnpm add @secundus-studio/stift-tanstack-devtool-plugin

Mount (dev only)

import { TanStackDevtools } from '@tanstack/react-devtools'
import { createStiftDevtoolsPlugin } from '@secundus-studio/stift-tanstack-devtool-plugin/tanstack'

export function Devtools() {
  const Stift = useStift() // the booted instance, from provider context
  const plugins = useMemo(() => {
    if (!import.meta.env.DEV) return []
    const [StiftDevtoolsPlugin] = createStiftDevtoolsPlugin({
      Stift,
      supportedLocales: Stift.config.locales.supported,
      allowFileWrites: true, // live editing (also enable on the Vite plugin)
    })
    return [StiftDevtoolsPlugin()]
  }, [Stift])
  if (!import.meta.env.DEV) return null
  return <TanStackDevtools plugins={plugins} />
}

import.meta.env.DEV gating lets Vite drop the whole shell from production. NoOpPlugin() covers hosts that still build the plugins array in prod.

Live editing

Edits persist through the Vite dev-server bridge and reload in place (no page refresh). Requires both:

• stiftPlugin({ devtools: { allowFileWrites: true } }), and
• allowFileWrites: true on the factory.

Defaults are false on both sides � zero disk-write code path otherwise. Transports are swappable (createViteDevtoolsTransport default; in-process and TanStack EventClient transports available) for non-Vite setups.

Pack panel

Pack rows show install state per supported locale (install when missing, refresh when stale, delete anytime), byte-true progress, and translation coverage. Rows hide entirely unless a durable persister is wired (pack.durability) � a memory-only setup shows a note instead of fake install state. The header's check for updates runs one catalog fetch across every installed locale.

Developing the plugin

See docs/18-devtools-plugin-guide.md (event map, state producer, factory, bidirectional commands, verification checklist) and the devtools skill.