feat(plugin-react-router): React Router 7 / Remix support for Rsbuild #4186
Conversation
✅ Deploy Preview for rsbuild ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -25,6 +25,14 @@ type ManifestList = { | |||
| }; | |||
| /** Flatten all assets */ | |||
| allFiles: FilePath[]; | |||
| /** Assets grouped by chunk name */ | |||
| namedChunks: { | |||
There was a problem hiding this comment.
How about adding an option like /webpack-manifest-plugin#generate for customizing the manifest content?
I feel that different users may need different manifest formats, and the generate function can meet differentiated needs. For example, plugin-react-router can generate namedChunks through the generate function.
If this is feasible, I will add the generate option to Rsbuild soon.
There was a problem hiding this comment.
okay yeah i can add a generate option, will keep the named chunks for now, then once rsbuild api allows me to send more than true/false to it for manifest, i can move this to my plugin if you do not want to keep named chunks - however i do think named chunks is quite standard output from many stats tools as a default :P. so may be worth providing OOTB?
There was a problem hiding this comment.
quite standard output from many stats tools as a default
Can you provide some references?
We might want to consider making namedChunk optional since it appears to share some overlapping information with the existing entries property. This could help optimize the manifest size.
- Updated '@types/react' and '@types/react-dom' to version 18.3.16 and 18.3.5 respectively. - Added '@types/react-router' at version 5.1.20. - Enhanced server-side rendering (SSR) response handling in entry.server.tsx and server.mjs for better streaming support. - Refactored HTML generation in handleDocumentRequest for improved readability and maintainability. - Adjusted TypeScript configuration to target ES2022 and include additional libraries.
- Enhanced server-side rendering (SSR) capabilities in entry.server.tsx by introducing new functions for handling data requests and managing streaming responses. - Refactored response handling in server.mjs to streamline streaming and buffered response management. - Updated TypeScript configuration to target ES2020 and utilize ESNext module resolution for better compatibility. - Improved error handling and response header management for SSR requests.
…king - Added a cspell comment to entry.server.tsx to specify words for spell checking, enhancing code quality and maintainability.
ScriptedAlchemy
changed the title
- Deleted obsolete entry.client.tsx and entry.server.tsx files to streamline the project structure. - Updated entry paths in plugin-react-router to reflect the removal of file extensions for better compatibility. - Refactored entry.client.tsx template to improve code consistency and maintainability.
…te handling - Introduced a new `loadRouteModule` function to enhance the loading of route modules in development mode, improving error handling and caching. - Renamed the original `loadRouteModule` function to `_loadRouteModule` to avoid conflicts. - Updated the transform logic in the plugin to accommodate the new function, ensuring better performance and reliability during route imports.
Summary
This pull request includes several updates and additions to the
examples/react-router-sampledirectory, enhancing the React Router integration and adding various features such as server-side rendering, custom loaders, and CSS styles. The most important changes are summarized below:Enhancements to React Router Integration:
app/about.loader.tsxto simulate data fetching with a delay and return environment-specific messages.app/layout.tsxwith a header, navigation, and message board using React Router'suseLoaderDataanduseNavigationhooks.app/routes.tsxthat dynamically loads components and their respective loaders/actions based on the environment (client/server).Server-Side and Client-Side Enhancements:
app/layout.server.tsxto handle data fetching and form submissions on the server.app/layout.client.tsxfor handling client-side data fetching and form submissions.Styling and UI Improvements:
app/layout.module.css,app/home.module.css, andapp/about.module.css. [1] [2] [3]Documentation and Configuration:
README.mdin theexamples/react-router-sampledirectory to include instructions for running and developing the app.biome.jsonandcspell.config.cjsto include new paths for ignoring build artifacts and public directories. [1] [2]These changes collectively enhance the functionality, maintainability, and user experience of the sample React Router application.
Related Links
Checklist