feat: first-class TanStack Router integration + Tailwind create scaffold#8317
feat: first-class TanStack Router integration + Tailwind create scaffold#8317BleedingDev wants to merge 1 commit intoweb-infra-dev:mainfrom
Conversation
✅ Deploy Preview for modernjs-v3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 32b44a7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 115 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 failed. Why did it fail? →
|
|
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
3 participants
Summary
@modern-js/createsupport for--router tanstackand Tailwind v4 scaffold via--tailwind@modern-js/createand@modern-js/runtimeValidation
cd tests && pnpm test:framework -- integration/routes-tanstack/tests/index.test.ts integration/routes-tanstack-create-routes/tests/index.test.ts integration/routes-tanstack-mf/test/index.test.ts integration/tailwindcss/tests/tailwindcss-v4.test.tscd tests && pnpm test:framework -- integration/create-tailwind/tests/index.test.tspnpm --filter @modern-js/create build