refactor: Extract Monaco/Sandpack as DOM components, add RN stubs#3
Closed
BrandeisPatrick wants to merge 1 commit into
Closed
refactor: Extract Monaco/Sandpack as DOM components, add RN stubs#3BrandeisPatrick wants to merge 1 commit into
BrandeisPatrick wants to merge 1 commit into
Conversation
Prepares the codebase for the upcoming iOS app (Expo + DOM Components):
- Extract Monaco editor into src/components/dom/MonacoEditor.jsx with
the "use dom" directive so it can render inside a WebView on native
while behaving identically on web. EditorPanel now consumes it.
- Extract Sandpack provider + layout + error listener into
src/components/dom/SandpackPreview.jsx with "use dom". LiveReactEditor
now consumes it (the web-only CDN check, controls, and loading wrapper
stay put).
- Add Metro-picked .native.js stubs so shared code can compile on
React Native without crashing at bundle time:
- src/config/firebase.native.js (throws clearly until Phase 1 wires
@react-native-firebase/*)
- src/hooks/useIsMobile.native.js (returns true on RN)
- src/hooks/useVirtualKeyboard.native.js (placeholder shape; Phase 1
will use react-native Keyboard events)
Web runtime behavior is unchanged; npm run build still passes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
Closing per team decision to keep mobile and production branches separate — the DOM extraction stays on the mobile branch only, production stays untouched. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/components/dom/MonacoEditor.jsxwith the"use dom"directive.EditorPanelnow consumes it. On web the directive is a no-op and behavior is unchanged; on native it lets the editor render inside a WebView via Expo DOM Components.src/components/dom/SandpackPreview.jsxwith"use dom".LiveReactEditornow consumes it (web-only CDN check, controls, and loading wrapper stay put)..native.jsstubs so shared code can compile on React Native without crashing at bundle time:src/config/firebase.native.js,src/hooks/useIsMobile.native.js,src/hooks/useVirtualKeyboard.native.js.This is Phase 0 of the iOS-first pivot (see
~/.claude/plans/we-want-to-make-partitioned-goblet.md). The actual iOS app lives on the long-livedmobilebranch; this PR only lands the shared-code refactor that both web and iOS benefit from.Test plan
npm run buildpasses on webnpm run lint— no new errors introduced (pre-existingEditorPanel.jsx:17set-state-in-effectis unchanged)🤖 Generated with Claude Code