perf: React Compiler compat, bundle size & architecture improvements#1465
Open
haddoumounir wants to merge 8 commits intovercel:mainfrom
Open
perf: React Compiler compat, bundle size & architecture improvements#1465haddoumounir wants to merge 8 commits intovercel:mainfrom
haddoumounir wants to merge 8 commits intovercel:mainfrom
Conversation
Switch from `motion` to `m` components across all files and wrap the app in a LazyMotion provider with `domAnimation` features. This avoids bundling the full framer-motion runtime (~30kb savings). Also replaces dangerouslySetInnerHTML script with next/script for safer loading.
Use Next.js Image component for automatic optimization, lazy loading, and responsive sizing in image-editor, console, and model-selector.
- Derive hasReasoning inline instead of useState+useEffect latch - Use conditional setState during render instead of ref patterns for detecting prop/state changes (shell, sheet-editor, use-messages) - Add portalTarget state in text-editor to avoid reading ref during render These patterns are compatible with React Compiler optimization.
Merge currentModelId, input, showCreditCardAlert, and hasLoadedCookieModel into a single useReducer in ActiveChatProvider. Make setInput and setShowCreditCardAlert stable callbacks with empty dependency arrays since no callers use functional updates.
Break PureArtifact (412 lines) into focused pieces: - ArtifactHeader: title, save status, version badge - ArtifactContentArea: content renderer, toolbar, version footer - useArtifactDocuments: document fetching, versioning, content saving Also consolidates mode/document/versionIndex/isContentDirty into a single useReducer and fixes try/finally patterns for compiler compat.
Extract useFileUpload and useSlashCommands hooks from PureMultimodalInput (475 → 292 lines). Simplify toolbar by removing redundant isHovered state and driving tooltip from selection state.
…Input Break PromptInput (429 → 137 lines) by extracting file management into usePromptInputFiles hook and drag-and-drop setup into useDropHandlers hook. Add onKeyDown support to input-group.
- Add prefers-reduced-motion CSS media query to disable animations - Add page metadata for SEO on chat routes - Add use-reduced-motion hook for runtime motion preference detection - Remove autoFocus from auth form input (a11y best practice)
Contributor
|
@haddoumounir is attempting to deploy a commit to the Templates Test vtest314 Team on Vercel. A member of the Team first needs to authorize it. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
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
motion→mcomponents + wrap app inLazyMotionprovider (~30kb savings), replacedangerouslySetInnerHTMLscript withnext/script<img>withnext/imagein image-editor, console, and model-selectoruseStatecalls intouseReducerinActiveChatProviderandPureArtifactPureArtifact(412 → 179 lines):ArtifactHeader,ArtifactContentArea,useArtifactDocumentsPureMultimodalInput(475 → 292 lines):useFileUpload,useSlashCommandsPromptInput(429 → 137 lines):usePromptInputFiles,useDropHandlersprefers-reduced-motionCSS media query,use-reduced-motionhook, removeautoFocus