Run Charts catalog sandboxes from public examples

[tannerlinsley]

Updates the Charts catalog consumer to accept the self-contained example schema while retaining the existing adapter schema during rollout. Public example.tsx is now the first sandbox file and runs through a hidden React entrypoint; legacy catalog entries continue to work unchanged.\n\nThis must land before the corresponding TanStack Charts catalog migration.\n\nValidation: full repository pre-commit suite; focused catalog tests; TypeScript; formatting; type-aware lint.

Summary by CodeRabbit

• New Features

  • Added support for React-based chart examples using example.tsx.
  • Improved rendering for public examples, including responsive resizing and cleanup.
  • Updated catalog entries to use a unified example format.

• Compatibility

  • Existing legacy chart examples continue to work without changes.

• Validation

  • Added stronger checks for example paths, dependencies, ordering, and duplicate entries.
  • Catalog support now covers both current and legacy publication formats.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cb1fb2ca-b0b8-45ba-ae3d-222a14b07b6b

📥 Commits

Reviewing files that changed from the base of the PR and between ec06325 and 01fe174.

📒 Files selected for processing (8)

• src/utils/charts-catalog-example.ts
• src/utils/charts-catalog-index.ts
• src/utils/charts-catalog.server.ts
• tests/charts-catalog-example.test.ts
• tests/charts-catalog-index.test.ts
• tests/charts-catalog-site-contracts.test.ts
• tests/charts-catalog-source-previews.test.ts
• tests/charts-catalog-source.test.ts

---

📝 Walkthrough

Walkthrough

The charts catalog now supports native React example.tsx entries and generated TSX renderers. Version 2 catalogs use the new entry format, while version 1 legacy catalogs continue to use TanStack mount adapters.

Changes

Charts catalog migration

Layer / File(s)	Summary
Versioned catalog schemas src/utils/charts-catalog-index.ts, tests/charts-catalog-index.test.ts	The catalog accepts version 1 legacy cases and version 2 cases with entries.example.
React and legacy entry generation src/utils/charts-catalog-example.ts, tests/charts-catalog-example.test.ts	Public examples generate TSX entries with React rendering, resize updates, and cleanup. Legacy examples retain the mount renderer.
Entry discovery and source loading src/utils/charts-catalog.server.ts, tests/charts-catalog-source.test.ts	Catalog loading derives the active entry path and rejects external imports from self-contained examples.
Publication and preview compatibility tests/charts-catalog-site-contracts.test.ts, tests/charts-catalog-source-previews.test.ts	Fixtures use version 2 example entries while retaining legacy publication coverage.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to 01fe1

The catalog schema compatibility change is merge-ready after normal checks and review; no actionable merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant CatalogIndex
  participant ChartsCatalogServer
  participant CatalogExampleGenerator
  participant ReactExample
  CatalogIndex->>ChartsCatalogServer: provide version 1 or version 2 case
  ChartsCatalogServer->>ChartsCatalogServer: resolve entries.example or entries.tanstack
  ChartsCatalogServer->>CatalogExampleGenerator: load resolved entry
  CatalogExampleGenerator->>ReactExample: generate React renderer for example.tsx
  ReactExample-->>ChartsCatalogServer: render catalog example

Loading

Possibly related PRs

• TanStack/tanstack.com#1068: Adds the native React example.tsx format used by this catalog pipeline.
• TanStack/tanstack.com#1083: Covers related catalog server and schema migration work.
• TanStack/tanstack.com#1132: Updates related catalog example generation and loading for the React entry format.

Suggested labels: source-audit

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: running Charts catalog sandboxes from self-contained public examples.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch taren/charts-catalog-public-examples

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	01fe174	Commit Preview URL Branch Preview URL	Aug 14 2026, 07:39 PM