Skip to content

Plan for migrating to unplugin to make the router-plugin compatible with other bundlers #1756

Closed
Closed
Plan for migrating to unplugin to make the router-plugin compatible with other bundlers#1756
Assignees
SeanCassiere
Labels
enhancementNew feature or request

Description

@SeanCassiere
SeanCassiere
opened on Jun 16, 2024

Currently, the router plugin is only available for vite. This leaves people who use bundlers like webpack and rollup having to install the @tanstack/router-cli package and run it every time they start up their dev server. This is not the most optimal experience. Additionally, it also makes features like experimental.enableCodeSplitting only available to the vite users.

The intention here is to begin the migration to using unplugin so the router plugin can be made available for other bundlers like webpack, rspack, etc. in the future.

Currently, the router plugin packages are:

  • @tanstack/router-generator
  • @tanstack/router-cli
  • @tanstack/router-vite-plugin

And by the end of this migration, it should be:

  • @tanstack/router-generator
  • @tanstack/router-cli
  • @tanstack/router-plugin
  • @tanstack/router-vite-plugin
  • @tanstack/start-vite-plugin

For this task to be considered complete, the following milestones need to be achieved.

Note

Each of these major tasks (like 1, 2, ...), should go through in separate PRs to make reverts easier, whilst minor tasks (like 2.1, 2.2, ...) would be batched together under their respective majors.

### Migration tasks
- [x] 1. Copy the **Start** specific logic (currently that's the babel stuff appending `"use server"` to the `createServerFn` calls) into its own `@tanstack/start-vite-plugin` package. (#1768)
- [x] 2. Remove the logic that's in the new `@tanstack/start-vite-plugin` package from the existing`@tanstack/router-vite-plugin` package. (#1771)
- [x] 3. Create the new `@tanstack/router-plugin` package. (#1778)
- [x] 3.1 Copy the existing `router-vite-plugin` logic (minus the Start stuff) into a new package named `@tanstack/router-plugin` that uses [unplugin](https://unplugin.unjs.io/).
- [x] 3.2 Make sure the new `@tanstack/router-plugin` package exports the relevant vite plugins from `@tanstack/router-plugin/vite`.
- [x] 4. Refactor `@tanstack/router-vite-plugin` package to simply be a proxy, re-exporting from `@tanstack/router-plugin/vite` and the root. (#1785)
- [x] 5. Update the documentation to show the vite plugin setup using `@tanstack/router-plugin/vite`. This'll be a non-breaking change for anyone using `@tanstack/router-vite-plugin`. (#1793)
- [x] 6. Setup the `rspack` export. (#1794)
- [x] 6.1 Setup `@tanstack/router-plugin` with a webpack export (`@tanstack/router-plugin/rspack`).
- [x] 6.2 Documentation for setting up TanStack Router using the rspack plugin.
- [x] 6.3 (optional) setup an example with TanStack Router using rspack.

For now, I've included rspack as the only bundler we're targeting to support next. The plugins for the other bundlers can be added in the future either through community contributions or when maintainers get more bandwidth 😅.

Activity

  1. SeanCassiere
    added
    enhancementNew feature or request
    on Jun 16, 2024
  2. SeanCassiere
    self-assigned this
    on Jun 16, 2024
  3. SeanCassiere
    changed the title [-]migrating to `unplugin` for making the router-plugin compatible with other bundlers[/-] [+]Plan for migrating to `unplugin` to make the router-plugin compatible with other bundlers[/+] on Jun 16, 2024

  4. SeanCassiere commented on Jun 18, 2024

    @SeanCassiere
    SeanCassiere
    on Jun 18, 2024
    MemberAuthor

    Tasks 1 and 2 are done (Start logic has been moved from the router-plugin into its own plugin). Had a minor setback where CI was broken because nx wasn't upgraded 😅 (#9412432), but otherwise all good 👍🏼.

    • @tanstack/start-vite-plugin 🚀

    Tomorrow I'll begin setting up "unplugin".

  5. SeanCassiere commented on Jun 19, 2024

    @SeanCassiere
    SeanCassiere
    on Jun 19, 2024
    MemberAuthor

    Tasks 3 and 4 are done.

    • Now @tanstack/router-vite-plugin is just a proxy for @tanstack/router-plugin/vite

    With just a preliminary search, I'm finding it difficult to find basic webpack react starter repos. I may just have to target rspack as the next bundler supported instead 🤔.

  6. SeanCassiere commented on Jun 20, 2024

    @SeanCassiere
    SeanCassiere
    on Jun 20, 2024
    MemberAuthor

    Tasks 5 and 6 are done.

    The rspack/rsbuild plugin doesn't support the experimental code-splitting functionality yet due some limitations in using the resolveId and transform calls from unplugin to rspack.

    Community contributions and anyone with knowledge on creating plugins for rspack would greatly be appreciated here.

  7. SeanCassiere
    closed this as completedon Jun 20, 2024

  8. lachieh commented on Jun 21, 2024

    @lachieh
    lachieh
    on Jun 21, 2024
    Contributor

    @ScriptedAlchemy might have some ideas about rspack.

  9. SeanCassiere commented on Jun 21, 2024

    @SeanCassiere
    SeanCassiere
    on Jun 21, 2024
    MemberAuthor

    @ScriptedAlchemy might have some ideas about rspack.

    I'm happy to hear em ☺️! Shall we move this to a new issue? Or discord?

  10. honzahruby commented on Jun 25, 2024

    @honzahruby
    honzahruby
    on Jun 25, 2024
    Contributor

    Hi, love your work, it’s great to unplugin being used here. Is there any plan for supporting webpack as well? Rspack is cool but wasn’t the main point of this issue to make this plugin widely available? Webpack still has 300x more users than rspack 👀

  11. SeanCassiere commented on Jun 25, 2024

    @SeanCassiere
    SeanCassiere
    on Jun 25, 2024
    MemberAuthor

    Hi, love your work, it’s great to unplugin being used here. Is there any plan for supporting webpack as well? Rspack is cool but wasn’t the main point of this issue to make this plugin widely available? Webpack still has 300x more users than rspack 👀

    If you are able to make a contribution to this I'd be more than happy to help out with the PR 💪🏼.

    If you are unable, a link to a decent starter bare-bones Webpack React starter with HMR would be appreciated 🙌🏼 (for testing, etc.)

    Realistically, I could just add a webpack.ts file go YOLO and ship the plugin. But I don't want to just "trust" that the unplugin webpack output works, so I'm testing all the router-plugin features for each bundler by hand before ensuring they work.

  12. honzahruby commented on Jun 30, 2024

    @honzahruby
    honzahruby
    on Jun 30, 2024
    Contributor

    @SeanCassiere I was able to put together a webpack quickstart example. Unfortunately, the plugin doesn't "just work"™️ for webpack. Please have a look at #1864 if you find some time.

    When I change anything in the routes folder, it blows up 😕

    [webpack-dev-middleware] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:405:5)
    at validateString (node:internal/validators:162:11)
    at isAbsolute (node:path:1156:5)
    at handleFile (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:37:33)
    at file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:51:15
    at run (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:44:13)
    at Object.watchChange (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:50:13)
    at file:///Users/honza/Sites/router/node_modules/.pnpm/unplugin@1.10.2/node_modules/unplugin/dist/index.mjs:1862:80
    at Set.forEach (<anonymous>)
    at file:///Users/honza/Sites/router/node_modules/.pnpm/unplugin@1.10.2/node_modules/unplugin/dist/index.mjs:1861:41 {
  code: 'ERR_INVALID_ARG_TYPE'

  13. SeanCassiere commented on Jul 1, 2024

    @SeanCassiere
    SeanCassiere
    on Jul 1, 2024
    MemberAuthor

    @SeanCassiere I was able to put together a webpack quickstart example. Unfortunately, the plugin doesn't "just work"™️ for webpack. Please have a look at #1864 if you find some time.

    When I change anything in the routes folder, it blows up 😕

    [webpack-dev-middleware] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:405:5)
    at validateString (node:internal/validators:162:11)
    at isAbsolute (node:path:1156:5)
    at handleFile (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:37:33)
    at file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:51:15
    at run (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:44:13)
    at Object.watchChange (file:///Users/honza/Sites/router/packages/router-plugin/dist/esm/router-generator.js:50:13)
    at file:///Users/honza/Sites/router/node_modules/.pnpm/unplugin@1.10.2/node_modules/unplugin/dist/index.mjs:1862:80
    at Set.forEach (<anonymous>)
    at file:///Users/honza/Sites/router/node_modules/.pnpm/unplugin@1.10.2/node_modules/unplugin/dist/index.mjs:1861:41 {
  code: 'ERR_INVALID_ARG_TYPE'

    Down with the flu ATM. Will look into this in a couple days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions