Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Oct 2, 2025

Create Shared DebugInfo Component

Successfully consolidated all DebugInfo implementations into a single shared component and merged with main branch.

Changes Made:

  • Created shared DebugInfo component in src/components/DebugInfo.tsx
  • Support both patterns: hook-based data fetching (Zustand demos) and prop-based data (PropDrilling demos)
  • Accept configurable title (default: "Store snapshot")
  • Handle pending state for prop-based usage
  • Updated all 4 demo files to use the new shared component:
    • Zustand demo: uses inline wrapper function to fetch from store
    • Zustand-Query demo: uses inline wrapper function with TanStack Query + Zustand
    • PropDrilling demo: passes snapshot as prop with custom title
    • PropDrillingNaive demo: passes snapshot as prop with custom title
  • Removed 4 old DebugInfo component files
  • Verified builds and functionality
  • Ran linter (no issues)
  • Ran prettier formatter
  • Code review completed and feedback addressed
  • Merged latest changes from main branch (final merge - commit 4d92369)

Latest Merge:

Successfully merged the latest changes from main branch (commit 8fb86f1). This merge brings in:

  • Package upgrades (React Query, Zustand, Vite, etc.)
  • Bug fixes for unused RenderToken imports
  • Various documentation improvements

All conflicts were resolved and the shared DebugInfo component works correctly with the latest codebase.

Visual Verification:

All demos have been tested and work correctly after the merge:

  • Zustand demo displays "Store snapshot"
  • PropDrilling demos display "Top level state snapshot"
  • All debug panels show correct state information

Implementation Details:

The shared component accepts:

  • snapshot: The state data to display (required)
  • title: Optional custom title (defaults to "Store snapshot")

For hook-based demos (Zustand, Zustand-Query), wrapper functions call the hooks and pass the snapshot data to the shared component. This maintains proper hook usage while eliminating code duplication.

Code Quality:

  • Simplified null check to use snapshot != null for more concise code
  • All tests passing
  • No linting errors
  • Code formatted with Prettier
  • Successfully merged with main branch
Original prompt

find all usages of DebugInfo and create one shared component that works with all demos
find all usages of DebugInfo and create one shared component that works with all demos

Created from VS Code via the [GitHub Pull Request](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) extension.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copilot AI and others added 2 commits October 2, 2025 22:12
Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>
Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Create shared DebugInfo component for all demos Create shared DebugInfo component for all demos Oct 2, 2025
@Copilot Copilot AI requested a review from JasonMore October 2, 2025 22:16
Copilot finished work on behalf of JasonMore October 2, 2025 22:16
@JasonMore
Copy link
Owner

@copilot merge from main and resolve conflicts

Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Oct 5, 2025

@copilot merge from main and resolve conflicts

Merged from main and resolved conflicts. The shared DebugInfo component now works with the updated codebase where World types have been centralized to src/api/worlds.ts. All demos tested and working correctly. Commit: see above

Copy link

netlify bot commented Oct 5, 2025

Deploy Preview for react-performance-examples ready!

Name Link
🔨 Latest commit 1979652
🔍 Latest deploy log https://app.netlify.com/projects/react-performance-examples/deploys/68e2a38887c4cb0008bcbd9c
😎 Deploy Preview https://deploy-preview-15--react-performance-examples.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

netlify bot commented Oct 5, 2025

Deploy Preview for react-performance-examples ready!

Name Link
🔨 Latest commit 4d92369
🔍 Latest deploy log https://app.netlify.com/projects/react-performance-examples/deploys/68e511f37f9ceb0008abf8d9
😎 Deploy Preview https://deploy-preview-15--react-performance-examples.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot finished work on behalf of JasonMore October 5, 2025 16:58
@JasonMore
Copy link
Owner

@copilot merge from main and resolve conflicts

@JasonMore JasonMore marked this pull request as ready for review October 7, 2025 13:00
Copy link
Contributor Author

Copilot AI commented Oct 7, 2025

@copilot merge from main and resolve conflicts

Merged from main and resolved conflicts. All demos tested and working correctly. The shared DebugInfo component remains compatible with the latest main branch. Commit: see above

@copilot merge from main and resolve conflicts

Merged from main and resolved conflicts. All demos tested and working correctly. The shared DebugInfo component remains compatible with the latest main branch. Commit: 4d92369

Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>
Copilot finished work on behalf of JasonMore October 7, 2025 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants