Run Charts documentation examples - #1132
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe PR migrates TanStack Charts to 0.9.0, adds Charts and Octane example environments, updates workspace compilation, improves chart navigation, and replaces live-example metadata with grouped runnable examples and collapsed support files. ChangesCharts migration and catalog
Environment-aware workspaces
Grouped runnable examples
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant MarkdownParser
participant WorkspaceBuilder
participant EnvironmentProfile
participant OctaneCompiler
participant Browser
MarkdownParser->>WorkspaceBuilder: parse grouped example metadata
WorkspaceBuilder->>EnvironmentProfile: resolve example environment
WorkspaceBuilder->>OctaneCompiler: compile .tsrx sources
OctaneCompiler-->>WorkspaceBuilder: return compiled source and diagnostics
WorkspaceBuilder->>Browser: provide generated entry module
Browser->>EnvironmentProfile: mount configured chart application
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | ab840d3 | Commit Preview URL Branch Preview URL |
Aug 10 2026, 04:13 AM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/utils/example-esbuild.client.ts (1)
139-146: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winSurface octane compiler diagnostics instead of discarding them.
compileOctaneSourcereads only.code. It dropsdiagnostics. If the octane compiler reports syntax errors throughdiagnosticsand still returns code, a broken.tsrxfile produces a misleading esbuild error or silently wrong output. Return the diagnostics to theonLoadcallback and map them to esbuilderrors.♻️ Proposed change
- const contents = args.path.endsWith('.tsrx') - ? await compileOctaneSource(source, args.path) - : source + if (args.path.endsWith('.tsrx')) { + const compiled = await compileOctaneSource(source, args.path) + if (compiled.diagnostics.length) { + return { + errors: compiled.diagnostics.map((diagnostic) => ({ + text: String(diagnostic), + })), + } + } + return { + contents: compiled.code, + loader: getLoader(args.path), + resolveDir: getDirectory(args.path), + } + } + + const contents = sourceasync function compileOctaneSource(source: string, path: string) { const { compile } = await import('octane/compiler') return compile(source, path, { dev: false, hmr: false, mode: 'client', - }).code + }) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/utils/example-esbuild.client.ts` around lines 139 - 146, Update compileOctaneSource to preserve and return the compiler diagnostics alongside code instead of selecting only .code. In the onLoad callback, consume those diagnostics and map them into esbuild errors before returning the compiled contents, while retaining the existing successful compilation behavior.src/utils/markdown/live-example.ts (2)
166-172: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winReject the reserved environment entry path at parse time.
isCanonicalExamplePathaccepts/__tanstack-example-entry.ts. An author can declare that path in a fence. Parsing succeeds, the page renders, andaddEnvironmentEntryinsrc/utils/example-esbuild.client.tsthen throwsReserved environment fileonly after the reader presses Run. Fail open to static code here instead, which matches the other validation in this function.♻️ Proposed guard
const entry = entryItem.attributes.file const environment = entryItem.attributes.env if (!entry || !environment || !isExampleEnvironment(environment)) { return undefined } + if (files[getExampleEnvironmentProfile(environment).entryPath] !== undefined) { + return undefined + } + const workspace = createExampleWorkspace({ entry, environment, files })🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/utils/markdown/live-example.ts` around lines 166 - 172, Update the validation in the live-example parsing function around entryItem.attributes.file and isExampleEnvironment to reject the reserved /__tanstack-example-entry.ts path before createExampleWorkspace runs. Return undefined for that entry so parsing falls back to static code, while preserving the existing validation for missing or invalid entry and environment values.
188-202: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTwo parsers read the same
metastring and can disagree.
readAttributeNamesre-tokenizesblock.metawith its own regex, whileparseAttributesparses the same string separately. Duplicate detection depends on both parsers agreeing on token boundaries. Any divergence makescountAttributereturn a wrong count, which either rejects a valid fence or lets a duplicate attribute through.Consider extending
parseAttributesto return the ordered attribute names alongside the values, then remove this second pass.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/utils/markdown/live-example.ts` around lines 188 - 202, The duplicate-detection path currently reparses meta independently of parseAttributes, allowing tokenization discrepancies. Extend parseAttributes to return ordered attribute names alongside parsed values, update countAttribute’s callers to use those names, and remove readAttributeNames so both validation and values share the same parser.tests/notebook-environment.test.ts (1)
59-76: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAssert
entryPathand derive the environment list from the source of truth.The test name states "every Charts environment", but the three environments are hardcoded. A new entry in
exampleEnvironmentNameswithout a profile still passes this test. The test also never assertsentryPath, whichaddEnvironmentEntryinsrc/utils/example-esbuild.client.tsuses for the reserved-path collision check.💚 Proposed additions
+import { exampleEnvironmentNames } from '../src/utils/example-workspace' + test('provides hidden entry modules for every Charts environment', () => { + for (const name of exampleEnvironmentNames) { + const profile = exampleEnvironmentProfiles[name] + assert.equal(typeof profile.createEntrySource, 'function') + assert.equal(profile.entryPath, '/__tanstack-example-entry.ts') + } + const charts = exampleEnvironmentProfiles.charts.createEntrySource('/src/chart.ts')🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/notebook-environment.test.ts` around lines 59 - 76, Update the test around createEntrySource to iterate over the source-of-truth exampleEnvironmentNames and validate each corresponding Charts profile, ensuring missing profiles fail the test. For every generated environment entry, assert that its configured entryPath is present and retain the existing environment-specific source assertions where applicable.tests/markdown-live-example.test.ts (1)
183-194: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd negative cases for zero and duplicate
envdeclarations.
createLiveComponentrequires exactly oneenvin a group and requires it on the entry fence. The list covers an unknownenvvalue andenvon a support file. It does not cover a group with noenvat all, and it does not cover two fences that both declare a validenv. Both rules are stated inliveDocsRules.💚 Proposed additions
'group=counter env=charts file=/main.tsx entry collapsed=false', 'live=counter file=/main.tsx', + 'group=counter file=/main.tsx entry',Add the duplicate-
envcase as a separate multi-fence fixture next to the checks at lines 219-231.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/markdown-live-example.test.ts` around lines 183 - 194, Extend the invalid metadata coverage in the test named “invalid runnable metadata fails open to static code” with a zero-env case, then add a separate multi-fence fixture near the existing checks around lines 219-231 where two fences declare valid env values. Assert both cases fail open to static code, preserving the rules that each group has exactly one env declaration and the entry fence must provide it.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/utils/markdown/live-example.ts`:
- Around line 174-186: Update transformBlocks and the live-example component
construction so each component receives a unique occurrence-based id, including
for non-adjacent groups with the same name. Pass the occurrence counter into the
component-building flow and append it to attributes.id, while keeping
data-example-group set to the raw group name.
---
Nitpick comments:
In `@src/utils/example-esbuild.client.ts`:
- Around line 139-146: Update compileOctaneSource to preserve and return the
compiler diagnostics alongside code instead of selecting only .code. In the
onLoad callback, consume those diagnostics and map them into esbuild errors
before returning the compiled contents, while retaining the existing successful
compilation behavior.
In `@src/utils/markdown/live-example.ts`:
- Around line 166-172: Update the validation in the live-example parsing
function around entryItem.attributes.file and isExampleEnvironment to reject the
reserved /__tanstack-example-entry.ts path before createExampleWorkspace runs.
Return undefined for that entry so parsing falls back to static code, while
preserving the existing validation for missing or invalid entry and environment
values.
- Around line 188-202: The duplicate-detection path currently reparses meta
independently of parseAttributes, allowing tokenization discrepancies. Extend
parseAttributes to return ordered attribute names alongside parsed values,
update countAttribute’s callers to use those names, and remove
readAttributeNames so both validation and values share the same parser.
In `@tests/markdown-live-example.test.ts`:
- Around line 183-194: Extend the invalid metadata coverage in the test named
“invalid runnable metadata fails open to static code” with a zero-env case, then
add a separate multi-fence fixture near the existing checks around lines 219-231
where two fences declare valid env values. Assert both cases fail open to static
code, preserving the rules that each group has exactly one env declaration and
the entry fence must provide it.
In `@tests/notebook-environment.test.ts`:
- Around line 59-76: Update the test around createEntrySource to iterate over
the source-of-truth exampleEnvironmentNames and validate each corresponding
Charts profile, ensuring missing profiles fail the test. For every generated
environment entry, assert that its configured entryPath is present and retain
the existing environment-specific source assertions where applicable.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1836501d-ce90-4da1-8f45-4fb0248f46f7
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (40)
package.jsonscripts/charts-landing/activation-chart.tsscripts/charts-landing/kinetic-area-chart.tsscripts/charts-landing/kinetic-bar-chart.tsscripts/charts-landing/kinetic-donut-chart.tsscripts/charts-landing/kinetic-dumbbell-chart.tsscripts/charts-landing/kinetic-heatmap-chart.tsscripts/charts-landing/kinetic-layered-chart.tsscripts/charts-landing/kinetic-line-chart.tsscripts/charts-landing/kinetic-lollipop-chart.tsscripts/charts-landing/kinetic-radar-chart.tsscripts/charts-landing/kinetic-scatter-chart.tsscripts/generate-charts-landing-svg.tssrc/components/LibraryLayout.tsxsrc/components/charts/TimeSeriesChart.tsxsrc/components/examples/ExampleWorkbench.client.tsxsrc/components/intent/SkillDependencyGraph.tsxsrc/components/intent/SkillSparkline.tsxsrc/components/landing/ChartsLanding.tsxsrc/components/library-layout-navigation.tssrc/components/markdown/LiveExample.tsxsrc/components/npm-stats/NPMStatsChart.tsxsrc/libraries/libraries.tssrc/types/octane-compiler.d.tssrc/utils/charts-catalog-example.tssrc/utils/charts-catalog.server.tssrc/utils/example-esbuild.client.tssrc/utils/example-workspace.tssrc/utils/markdown/live-example.tssrc/utils/notebook-environment.tssrc/utils/notebook-examples.tssrc/utils/npm-packages.tstests/charts-catalog-example.test.tstests/charts-catalog-source.test.tstests/charts-framework-support.test.tstests/charts-sidebar-navigation.test.tstests/example-workspace.test.tstests/markdown-live-example.test.tstests/notebook-environment.test.tstests/octane-framework-support.test.ts
1 participant
Summary
Validation
Summary by CodeRabbit
New Features
Bug Fixes