NEW Add support for React UI modding! #457

zardoy · 2025-11-30T01:05:34Z

Note

Adds an extendable React UI modding system (with injectable components and wrapper registration) and updates the app to load/await mods; also moves connection state into global UI state and makes minor renderer/UI tweaks.

Modding framework (React UI injection):
- Add react/extendableSystem with withInjectableUi HOC, InjectUiPlace, error-boundary wrapping, and window.builtinComponents exposure.
- Update window.mcraft.ui API to registeredReactWrappers: Record<place, Record<id, FC>> and registerReactWrapper(place, id, component).
- Track mod UI readiness via hadReactUiRegistered and activation via hadModsActivated; load parent-frame mods; expose React/Valtio to mods.
UI components made injectable:
- Wrap core components with withInjectableUi and refactor to *Base + default export across many files (e.g., MainMenu*, AppStatus*, Chat*, CreateWorld, ServersList, Singleplayer, Button, Input, Select, Slider, Scoreboard, ArmorBar, BossBarOverlay, DebugOverlay, DiveTransition, Title, Screen with new ScreenDirtBg).
- reactUi: wrap root App and re-render keyed by hadReactUiRegistered.
App flow and utils:
- MainMenuRenderApp: hide until FS ready and mods activated.
- utilsApp: track watchedModalsFromHooks globally.
Connection state:
- Add miscUiState.hadConnected and use it instead of local state in index.ts for disconnect cleanup and login tracking.
Renderer:
- worldrendererThree: store sectionKey on created section objects for easier lookup.
Misc UI tweaks:
- DiveTransition animation handling tweak; minor className additions in Slider; Singleplayer uses injectable ScreenDirtBg.

^{Written by Cursor Bugbot for commit 69f0a98. This will update automatically on new commits. Configure here.}

Summary by CodeRabbit

New Features
- Introduced a new extensible UI component system enabling third-party modifications to UI elements with built-in error handling.
- Updated UI registration API to support individual component identification and better organization.
Improvements
- Enhanced connection state tracking with persistent status monitoring.
- Improved rendering reliability and component composition.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-11-30T01:05:46Z

Caution

Review failed

The pull request is closed.

Walkthrough

Introduces an injectable UI system via withInjectableUi HOC that progressively wraps 20+ React components to support registered UI wrapper injection. Modifies the ClientModUiApi interface to map inject places to ID-keyed component dictionaries instead of arrays. Adds hadConnected state tracking throughout the global state and connection lifecycle. Adds section key storage in the world renderer and modal hook tracking in utilities.

Changes

Cohort / File(s)	Summary
Injectable UI System `src/react/extendableSystem.tsx`	Introduces new `withInjectableUi` HOC that wraps components with registered UI wrappers in reverse order, each wrapped with `ErrorBoundary`. Defines `InjectUiPlace` type and `injectUiPlaces` constant for supported injection points.
Core Connection & State Management `src/globalState.ts`, `src/index.ts`	Adds `hadConnected: false` boolean field to `miscUiState` for tracking connection status. Replaces local `hadConnected` variable with public state reference; session end payload and login flow now derive from `miscUiState.hadConnected`.
Client Mods API `src/clientMods.ts`	Changes `ClientModUiApi.registeredReactWrappers` from mapping inject places to component arrays to ID-keyed component dictionaries. Updates `registerReactWrapper` signature to require `id: string` parameter.
App Entry Point `src/reactUi.tsx`	Wraps top-level `App` with `withInjectableUi(AppBase, 'root')`. Introduces `AppRender` wrapper that remounts based on `hadReactUiRegistered` state change.
React Component Wrapping `src/react/AddServerOrConnect.tsx`, `src/react/AppStatus.tsx`, `src/react/AppStatusProvider.tsx`, `src/react/ArmorBar.tsx`, `src/react/BossBarOverlay.tsx`, `src/react/Button.tsx`, `src/react/Chat.tsx`, `src/react/ChatProvider.tsx`, `src/react/CreateWorld.tsx`, `src/react/DeathScreen.tsx`, `src/react/DebugOverlay.tsx`, `src/react/DiveTransition.tsx`, `src/react/Fullmap.tsx`, `src/react/Input.tsx`, `src/react/MainMenu.tsx`, `src/react/Notification.tsx`, `src/react/OptionsItems.tsx`, `src/react/Scoreboard.tsx`, `src/react/Select.tsx`, `src/react/ServersList.tsx`, `src/react/Singleplayer.tsx`, `src/react/Title.tsx`	Refactors each component from anonymous default export to named base component wrapped via `withInjectableUi`. Adds corresponding import for `withInjectableUi` from `./extendableSystem`. Behavior and props unchanged; export path altered to HOC wrapper.
Provider & Complex Component Wrapping `src/react/MainMenuRenderApp.tsx`, `src/react/Screen.tsx`, `src/react/Slider.tsx`	Wraps components with `withInjectableUi` similar to above. `MainMenuRenderApp` adds gating on `hadModsActivatedState`. `Screen` extracts new `ScreenDirtBg` component wrapped separately. `Slider` adds CSS classes to container and thumb elements.
Utilities & Rendering `src/react/utilsApp.ts`, `renderer/viewer/three/worldrendererThree.ts`	Adds global exposure for `watchedModalsFromHooks` proxy state. Replaces commented push with actual modal tracking in `useEffect`. Stores section key on chunk object as `(object as any).sectionKey = data.key` for runtime lookup.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~35 minutes

Areas requiring extra attention:

src/react/extendableSystem.tsx — Core HOC system with error handling and wrapper composition logic; critical for understanding entire PR
src/clientMods.ts — Public API breaking changes affecting mod registration interface
src/globalState.ts & src/index.ts — State management changes for connection tracking across lifecycle
Component wrapping consistency — Verify all 20+ components follow identical pattern and import paths are correct
src/react/MainMenuRenderApp.tsx & src/react/Screen.tsx — Additional logic changes beyond standard wrapping pattern

Possibly related PRs

feat: Client side js mods. Modding! #255 — Modifies src/clientMods.ts and changes the shape of registeredReactWrappers, directly impacting the new ID-keyed component dictionary structure introduced here.
More build configs & optimise reconnect and immediate game enter #398 — Modifies src/index.ts connection and startup logic, overlapping with the state tracking changes for hadConnected.
feat: Performance benchmark!! #153 — Modifies renderer/viewer/three/worldrendererThree.ts, the same file updated here for section key storage.

Suggested labels

review-effort-4/5, feature, refactor, ui-system

Poem

🐰 hops around excitedly
Components now can inject with flair,
Wrapped with care and registered with care!
State connects, the system flows,
Watch the injectable UI grow! ✨

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch arwes

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e8b968e and 69f0a98.

📒 Files selected for processing (32)

renderer/viewer/three/worldrendererThree.ts (1 hunks)
src/clientMods.ts (2 hunks)
src/globalState.ts (1 hunks)
src/index.ts (3 hunks)
src/react/AddServerOrConnect.tsx (3 hunks)
src/react/AppStatus.tsx (2 hunks)
src/react/AppStatusProvider.tsx (3 hunks)
src/react/ArmorBar.tsx (2 hunks)
src/react/BossBarOverlay.tsx (3 hunks)
src/react/Button.tsx (3 hunks)
src/react/Chat.tsx (3 hunks)
src/react/ChatProvider.tsx (2 hunks)
src/react/CreateWorld.tsx (3 hunks)
src/react/DeathScreen.tsx (2 hunks)
src/react/DebugOverlay.tsx (2 hunks)
src/react/DiveTransition.tsx (3 hunks)
src/react/Fullmap.tsx (2 hunks)
src/react/Input.tsx (4 hunks)
src/react/MainMenu.tsx (3 hunks)
src/react/MainMenuRenderApp.tsx (3 hunks)
src/react/Notification.tsx (3 hunks)
src/react/OptionsItems.tsx (3 hunks)
src/react/Scoreboard.tsx (3 hunks)
src/react/Screen.tsx (3 hunks)
src/react/Select.tsx (3 hunks)
src/react/ServersList.tsx (3 hunks)
src/react/Singleplayer.tsx (4 hunks)
src/react/Slider.tsx (5 hunks)
src/react/Title.tsx (3 hunks)
src/react/extendableSystem.tsx (1 hunks)
src/react/utilsApp.ts (2 hunks)
src/reactUi.tsx (3 hunks)

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

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

cursor

This PR is being reviewed by Cursor Bugbot

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

cursor · 2025-11-30T01:10:58Z

src/react/utilsApp.ts

  }, [])
  useEffect(() => {
-    // watchedModalsFromHooks.add(modal)
+    watchedModalsFromHooks.value.push(modal)


Bug: Duplicate modal push causes entries to appear twice

The useIsModalActive hook now pushes the modal value twice to watchedModalsFromHooks.value — once in the useMemo callback (line 23) and again in the newly uncommented useEffect callback (line 26). The old code had the useEffect push commented out. While the cleanup filter removes all matching entries on unmount, during the component's mounted lifetime each modal appears twice in the array. This could cause issues if any code iterates over or counts the watched modals.

Additional Locations (1)

src/react/utilsApp.ts#L21-L24

zardoy added 9 commits March 21, 2025 04:16

start a very big thing

f96ba5d

Merge remote-tracking branch 'origin/next' into arwes

72cf434

Merge branch 'next' into arwes

8cd5942

injectable system

b7ed367

finish all

e381b88

rm all

856e1cd

Merge branch 'next' into arwes

979ae73

revert stuff

78657bd

rm file

69f0a98

zardoy merged commit 131fe3f into next Nov 30, 2025
2 of 4 checks passed

cursor bot reviewed Nov 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

NEW Add support for React UI modding! #457

NEW Add support for React UI modding! #457

Uh oh!

zardoy commented Nov 30, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Nov 30, 2025 •

edited

Loading

Review failed

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Nov 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NEW Add support for React UI modding! #457

NEW Add support for React UI modding! #457

Uh oh!

Conversation

zardoy commented Nov 30, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

This PR is being reviewed by Cursor Bugbot

Uh oh!

cursor bot Nov 30, 2025

Choose a reason for hiding this comment

Bug: Duplicate modal push causes entries to appear twice

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zardoy commented Nov 30, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 30, 2025 •

edited

Loading