feat(react/runtime): add pretty formatting for snapshot patches#1289
Conversation
add formatPatch utility to prettify snapshot patch operations for debugging add corresponding tests for the formatting functionality refactor snapshotPatch to use operation params mapping
🦋 Changeset detectedLatest commit: cedb42e The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
WalkthroughA new utility function, Changes
Sequence Diagram(s)sequenceDiagram
participant Caller
participant prettyFormatSnapshotPatch
participant SnapshotOperationParams
Caller->>prettyFormatSnapshotPatch: Call with snapshotPatch
prettyFormatSnapshotPatch->>SnapshotOperationParams: Lookup operation code
prettyFormatSnapshotPatch->>prettyFormatSnapshotPatch: Map patch array to objects using param names
prettyFormatSnapshotPatch-->>Caller: Return formatted array of operation objects
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ERROR Cannot resolve version $@rspack/core in overrides. The direct dependencies don't have dependency "@rspack/core". ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🔭 Outside diff range comments (1)
.changeset/dull-tips-trade.md (1)
1-4: Add changeset content for the new feature.The changeset file is currently empty. For a feature addition like
prettyFormatSnapshotPatch, it should include the package name, version bump type, and a description of the changes.Add content like:
--- +packages/react/runtime: minor --- + +feat(react/runtime): add pretty formatting for snapshot patches + +Introduces a new debug utility `prettyFormatSnapshotPatch` that formats snapshot patch arrays into readable objects with named properties, making it easier to debug snapshot operations.
🧹 Nitpick comments (1)
packages/react/runtime/__test__/debug/formatPatch.test.ts (1)
5-78: Comprehensive test coverage with good edge case handling.The test suite provides excellent coverage of the
prettyFormatSnapshotPatchfunction:
- Tests all known operation types from
SnapshotOperationParams- Covers edge cases (undefined input, empty array)
- Validates error handling for unknown operations
- Expected output structure correctly matches parameter names
Consider adding a test for malformed patches (e.g., insufficient parameters) to complement the error handling improvements suggested for the main function:
it('should throw an error for insufficient parameters', () => { const snapshotPatch = [ SnapshotOperation.CreateElement, 'span', // missing id parameter ]; expect(() => prettyFormatSnapshotPatch(snapshotPatch)).toThrow(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.changeset/dull-tips-trade.md(1 hunks)packages/react/runtime/__test__/debug/formatPatch.test.ts(1 hunks)packages/react/runtime/src/debug/formatPatch.ts(1 hunks)packages/react/runtime/src/debug/printSnapshot.ts(1 hunks)packages/react/runtime/src/lifecycle/patch/snapshotPatch.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/react/runtime/src/debug/formatPatch.ts (1)
packages/react/runtime/src/lifecycle/patch/snapshotPatch.ts (2)
SnapshotPatch(51-51)SnapshotOperationParams(22-49)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: build / Build (Windows)
- GitHub Check: build / Build (Ubuntu)
- GitHub Check: CodeQL Analyze (actions)
- GitHub Check: CodeQL Analyze (javascript-typescript)
🔇 Additional comments (2)
packages/react/runtime/src/lifecycle/patch/snapshotPatch.ts (1)
22-49: Well-structured parameter mapping implementation.The
SnapshotOperationParamsconstant provides a clean, programmatic way to access operation metadata. The use of/* @__PURE__ */annotation for tree-shaking optimization is a good practice, and the inline type comments in the params array provide useful documentation.packages/react/runtime/src/debug/printSnapshot.ts (1)
4-4: Good optimization with type-only import.Converting to a type-only import for
BackgroundSnapshotInstanceis a good optimization since it's only used for type annotations. This makes the intent clear and can help with tree-shaking.
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. 📢 Thoughts on this report? Let us know! |
CodSpeed Performance ReportMerging #1289 will not alter performanceComparing Summary
|
Web Explorer#2934 Bundle Size — 303.55KiB (0%).cedb42e(current) vs b14232e main#2920(baseline) Bundle metrics
|
| Current #2934 |
Baseline #2920 |
|
|---|---|---|
 Initial JS |
139.94KiB |
139.94KiB |
| Initial CSS |
31.88KiB |
31.88KiB |
| Cache Invalidation |
0% |
0% |
| Chunks |
4 |
4 |
| Assets |
5 |
5 |
 Modules |
206(+0.98%) |
204 |
| Duplicate Modules |
17 |
17 |
| Duplicate Code |
4.23% |
4.23% |
| Packages |
3 |
3 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #2934 |
Baseline #2920 |
|
|---|---|---|
| JS |
220.78KiB |
220.78KiB |
| Other |
50.89KiB |
50.89KiB |
| CSS |
31.88KiB |
31.88KiB |
Bundle analysis report Branch Yradex:debug/dev Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#2943 Bundle Size — 234.12KiB (0%).cedb42e(current) vs b14232e main#2929(baseline) Bundle metrics
|
| Current #2943 |
Baseline #2929 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
153 |
153 |
| Duplicate Modules |
61 |
61 |
| Duplicate Code |
45.87%(+0.04%) |
45.85% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #2943 |
Baseline #2929 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
88.37KiB |
88.37KiB |
Bundle analysis report Branch Yradex:debug/dev Project dashboard
Generated by RelativeCI Documentation Report issue
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
2 participants
Summary
This PR introduces a new debug utility
prettyFormatSnapshotPatchto format snapshot patches into a more human-readable format.This utility helps in debugging by converting the compact snapshot patch array into an array of objects with named properties, making it easier to understand the operations being performed.
Checklist
Summary by CodeRabbit