[Feature]: Types Routes

[GiancarlosIO]

What problem does this feature solve?

Hi there!

Inspired by tanstack router, I have developed a simple script that analyzes the src/routes/ folder and then generates typescript code. Then it is used in our custom <Link /> component to have autocomplete in the paths and params props.

I'm just wondering if there is a plan to develop something like this. If not, maybe I can try to contribute to have this in modernjs?

Thanks!!!

What does the proposed API look like?

Simple path without params

Path with required params

For this you must use an object { path, params, searchParams }

The params property is only required by typescript if the path is a dynamic path. It also autocomplete the required params.

[caohuilin]

PR welcome

[GiancarlosIO]

Hi @caohuilin

I have created the initial version of a rspack plugin (using unplugin) with the base features (code generation). But I don't know how to integrate it with modernjs. Could you please help me with the following questions? 🙏🏼

• Where do I put this plugin? I have reviewed the repository and found the package plugin-swc inside the cli folder. Should I add a new package there? or maybe should I create a new folder packages/plugins/route-type-generator? 🤔
• Once I have finished with the plugin, how can I integrate it in modernjs web framework? Where is the rsbuild/rspack config that I can add the plugin? 🤔

I would also like to create a few end-to-end tests to make sure the plugin is generating the types correctly

Thanks!!!

[caohuilin]

You can directly write to https://github.com/web-infra-dev/modern.js/tree/main/packages/runtime/plugin-runtime/src/router/cli. It needs to support both rspack and webpack. See if you can implement it as a plugin for rsbuild. Then add the plugin into the config function of the router plugin.