feat(marketplace): add @dimano/ts-devtools-plugin-prefetch-heatmap

[dimitrianoudi]

🎯 Changes

Adds @dimano/ts-devtools-plugin-prefetch-heatmap to the Devtools Marketplace registry.
Title: Prefetch Heatmap
Description: Visualize TanStack Router prefetch wins vs. waste with an overlay + metrics panel.
Requires: @tanstack/react-router >= 1.0.0
Import type: default export (function)
Links: README, repo, npm
Tags: Router, Prefetch, Analytics, Overlay

✅ Checklist

• [✓] I have followed the steps in the Contributing guide.

• [✓] I have tested this code locally with pnpm test:pr.

pnpm i
pnpm -r build
pnpm test:pr
pnpm dev

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• [✓] This change is docs/CI/dev-only (no release).

Registry entry added

'@dimano/ts-devtools-plugin-prefetch-heatmap': {
  packageName: '@dimano/ts-devtools-plugin-prefetch-heatmap',
  title: 'Prefetch Heatmap',
  description: 'Visualize TanStack Router prefetch wins vs. waste with an overlay and metrics panel.',
  requires: { packageName: '@tanstack/react-router', minVersion: '1.0.0' },
  pluginImport: { importName: 'default', type: 'function' },
  docsUrl: 'https://github.com/dimitrianoudi/tanstack-prefetch-heatmap#readme',
  repoUrl: 'https://github.com/dimitrianoudi/tanstack-prefetch-heatmap',
  author: 'Dimano',
  framework: 'react',
  tags: ['Router', 'Prefetch', 'Analytics', 'Overlay'],
}

Links

Plugin (npm): https://www.npmjs.com/package/@dimano/ts-devtools-plugin-prefetch-heatmap
Reporter (npm): https://www.npmjs.com/package/@dimano/tsr-prefetch-reporter
Repo: https://github.com/dimitrianoudi/tanstack-prefetch-heatmap
README: https://github.com/dimitrianoudi/tanstack-prefetch-heatmap#readme

[changeset-bot]

🦋 Changeset detected

Latest commit: a5aa2c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@tanstack/devtools	Major
@tanstack/react-devtools	Patch
@tanstack/solid-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dimitrianoudi]

Updated with pluginId + logoUrl; ready for review.”

[AlemTuzlak]

hmm did you test it, I can't remember if I added an edge case to cover the default import?

[dimitrianoudi]

Yep, I tested the default import path.

• The plugin exports a default factory:

// src/index.tsx
export default registerPrefetchHeatmapPlugin;
export { registerPrefetchHeatmapPlugin }; // also exported as a named fallback

• Package entry points resolve to dist/ with ESM exports:

{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } }
}

• I validated loading via dynamic import:

const mod = await import('@dimano/ts-devtools-plugin-prefetch-heatmap');
const factory =
  (mod as any).default ?? (mod as any).registerPrefetchHeatmapPlugin;
console.assert(typeof factory === 'function');
// factory({ registerPanel, subscribeToEvents, sendToPage })

• The marketplace entry uses:

pluginImport: { importName: 'default', type: 'function' }

which works with the above.

If you have an edge case in the loader, this package also exposes the named export (registerPrefetchHeatmapPlugin) so you can switch importName to that without code changes on my side. I’m happy to flip the registry to the named import if you prefer.

[AlemTuzlak]

Sorry, what I meant is did you try clicking on "add to devtools", this would form something like:

import { default } from "your-package";

maybe it would be a better idea to change it to actually be the named export registerPrefetchHeatmapPlugin

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 1ff411b

Command	Status	Duration	Result
nx affected --targets=test:format,test:eslint,t...	✅ Succeeded	48s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	8s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-28 16:14:55 UTC

[pkg-pr-new]

More templates

• ssr
• @tanstack/devtools-example-react-basic
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-solid-start

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@233

@tanstack/devtools-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-client@233

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@233

@tanstack/devtools-utils

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@233

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@233

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@233

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@233

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@233

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@233

commit: 1ff411b