Skip to content

Conversation

@david-crespo
Copy link
Collaborator

@david-crespo david-crespo commented Feb 19, 2025

This is the beginning of both #2019 and #2695.

Following this helpful guide https://reactrouter.com/upgrading/router-provider, we

  1. Create a convert function to convert from framework mode route modules with a default export and a clientLoader to what library mode wants, namely a named Component export and a loader.
  2. Convert existing <Route> to use lazy={() => import('./path/to/route')}

For this PR we can leave it at that, but eventually we will

  1. Convert all the route modules to work that way
  2. Shuffle files around and convert routes.tsx to a framework mode route.ts and flip on framework mode by using the RR Vite plugin.

In this PR we also make a couple of other tweaks:

  • Allow previously prohibited default exports in the lint config, but only in app/pages and app/layouts
  • Set output.experimentalMinChunkSize in the Rollup config so we don't get a ton of 300 byte JS chunks.

With output.experimentalMinChunkSize

image

Without output.experimentalMinChunkSize

image

@vercel
Copy link

vercel bot commented Feb 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
console ✅ Ready (Inspect) Visit Preview Feb 19, 2025 10:37pm

import { pb } from '~/util/path-builder'

const Terminal = lazy(() => import('~/components/Terminal'))

Copy link
Collaborator Author

@david-crespo david-crespo Feb 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice example of what is happening here: we get this for free through the route being split.

Before/After

image

@david-crespo david-crespo changed the title Start converting to RRv7 framework mode chore: Start converting to RRv7 framework mode Feb 19, 2025
@david-crespo
Copy link
Collaborator Author

This can be merged as-is, we can convert the rest of the routes gradually.

{overrideContentPane || <ContentPane />}
</PageContainer>
)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just ProjectLayout moved in its entirety. The diff doesn’t show as a rename because the original file is still there, it’s just very short now.

@david-crespo david-crespo merged commit 74005f8 into main Feb 20, 2025
7 checks passed
@david-crespo david-crespo deleted the lazy-routes branch February 20, 2025 03:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants