feat: first-class TanStack Router plugin integration#8317
Conversation
✅ Deploy Preview for modernjs-v3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 2a3ac76 The changes in this PR will be included in the next version bump. This PR includes changesets to release 120 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Thanks for the contribution! We are currently reviewing and discussing this PR, and will provide feedback soon. |
|
Just end the Spring Festival. I'll do a complete review of this PR next week. Thanks again for the contribution! |
|
Thank you for your contribution to Modern.js, we are also eager to complete support for Tanstack Router. However, since this framework is currently used directly by more than 70% of ByteDance's internal projects, we are not want introducing Tanstack packages directly into After reviewing the code, I can see there are mainly three key change points, while the rest of the code is fully decoupled and very clean.
Would it be possible to support Tanstack Router in the form of a plugin? import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
export default defineConfig({
plugins: [tanstackRouterPlugin(...)]
})
So first We should disable the default RouterPlugin in Modern.js. Currently, Modern.js determines whether to enable the React Router plugin by default based on whether the Maybe in tanstackRouterPlugin we can set And we can listen If you think bypassing the routing directory is not ideal, we could also build in plugin detection — though there may be even better ways to handle this.
We currently don't have a rich set of SSR runtime hooks, so the changes you've made in the code cannot be injected directly through a plugin at this point. I'd like to first confirm whether SSR is a requirement in the context of Tanstack for your use case — or rather, in your project. From my perspective, Tanstack is a client-first framework and SSR is still an experimental feature on their end. If it is necessary, we can quickly discuss what hooks are needed here and work on providing support. Thank you again for your support of Modern.js~ |
✅ Deploy Preview for modernjs-byted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thanks for detailed feedback. I'd love to have full powers of Modern.js with Tanstack, so SSR is key for me as well, but it can be split into multiple phases. :) In the end I'd like to have similar or better experience than Tanstack Start, but with powers of RsPack instead of Vite. In fact I decided to take it even further and add EffectTS as alternative to Hono and do some more wild changes to Modern.js, but I keep it in my repository, where it won't polute main project as I am aware of huge usage inside ByteDance. |
BleedingDev
force-pushed
the
feat/tanstack-router-tailwind-first-class
branch
from
8f25fa2 to
b995440
Compare
Yes, we can do this. We can first merge the "Hooks required for SSR runtime extension" separately, and then put Tanstack Router onto it.
We can discuss the required extension capabilities in the issue at any time. Of course, we also do not reject necessary core changes.
I have a slight doubt about this. EffectTS (upper-level type system + solutions for side effects, errors, etc.) and Hono (underlying web server) should be non-conflicting capabilities. I'm not sure how to |
Let me know if I can help or if the hooks and planning is on your side. :)
To be precise I did this after getting inspired by @ScriptedAlchemy, I hadn't study Modern.js in depth. I just had a goal.
Partially yes, Effect is more complex, but they also have HttpApi, that is competing with Hono directly. I have proof of concept in my repository in another branch, where I changed everything Hono based towards Effect based (including context, better type safety etc.). |
I will quickly evaluate the Hooks that need to be added based on your current code changes. If you have any new requirements, feel free to let me know. |
|
In the future I'd like to work with RSC as well, but that would have to wait till proper implementation in Tanstack Start, so that it is close to each other, because I trust Tanner's choices in this area. So that is future area, but not mandatory now. |
BleedingDev
force-pushed
the
feat/tanstack-router-tailwind-first-class
branch
from
b995440 to
32b44a7
Compare
BleedingDev
force-pushed
the
feat/tanstack-router-tailwind-first-class
branch
from
32b44a7 to
44b0499
Compare
BleedingDev
force-pushed
the
feat/tanstack-router-tailwind-first-class
branch
from
44b0499 to
f351380
Compare
BleedingDev
changed the title
|
Thanks for the review context. One thing I want to clarify about the current PR shape: This PR is currently an integrated TanStack Router review branch, not the smallest possible merge slice. I kept it as one PR for now because I do not want to spam the Modern.js team with several PRs before you confirm the preferred review/merge direction. That said, I agree the final merge path can be split if that is easier to review. The natural stacked split would be:
I already have the follow-up parity work implemented in my fork, and I can prepare/refine it as stacked follow-up branches if you want this split:
So my preference is:
|
3 participants
Summary
@modern-js/plugin-tanstack, keeping TanStack packages out of@modern-js/runtime@modern-js/runtime/routervs@modern-js/plugin-tanstack/runtime)Validation
pnpm exec biome check --files-ignore-unknown=true ...pnpm --filter @modern-js/plugin-tanstack buildpnpm --filter @modern-js/plugin-tanstack testpnpm --filter @modern-js/runtime buildpnpm --dir packages/runtime/plugin-runtime exec rstest run tests/router/cliExtension.test.ts tests/router/entryOwnership.test.ts tests/router/lifecycle.test.tsx tests/core/react/wrapper.test.tsx tests/ssr/serverRender/renderToStream/buildTemplate.before.test.ts tests/ssr/serverRender/renderToStream/buildTemplate.after.test.ts tests/ssr/serverRender/renderToString/entry.test.ts tests/ssr/serverRender/requestHandler.test.tsx --passWithNoTestspnpm --dir tests exec rstest run -c rstest.superapp-contracts.config.mtspnpm --dir tests/integration/routes-tanstack buildpnpm --dir tests/integration/routes-tanstack-create-routes build