I came across this new package by Tanner Linsley (Tanstack) a few days ago and wanted to try it out because of its fantastic handling of URL search parameters.
So I’ve tested it out and found that it will also allow file based routing in Meteor projects. I think this is great and greatly improves the DX.
It’s fairly basic and I haven’t tried any of the more advanced features yet, but I can’t imagine it would have any issues if the basics are running alright.
Coincidentally, you can also get file based page routing working in a Vue 3 Project using the Meteor Vite plugin (I’m using the version maintained by Jorgen Vatle, not the original from Akryum which I believe doesn’t have Meteor 3 compatibility yet), and using Unplugin Vue Router instead of Tanstack Router.
Caveats:
I don’t have an dedicated example repo yet
I had to do something to my tsconfig against the instructions given by UVR to get it to use both the generated route types & my meteor type aliases at the same time
And there’s a “phantom error” complaining about the vue-router/auto package not existing and Meteor urging me to install vue-router in NPM (I need to make an example to try and reproduce the bug but I left an issue here)
… but it works (+ running on Meteor Cloud with Meteor v3)
The main difference between these two solutions (apart from Vue vs React) is that Tanstack Router seems to not require Vite(?), which is a good bonus for compatibility.
That said, for React developers using Vite you might be able to plug Remix into Meteor… which is basically “file-based React Router with a fullstack dataflow framework attached”.
But I don’t know enough about how Remix handles the request side, I think it expects underlying WinterCG compatible Request/Response objects, which isn’t going to work well with Meteor methods (and HTTP calls on Meteor don’t work out the box with Meteor accounts due to the way DDP sessions work)
I think in this case, Tanstack is closer in behaviour to UVR + Data Loading RFC in that it’s fairly agnostic as to how you’re getting the data (see doc page below for details).
That’s really cool!
I also saw that you were trying to use MantineUI with Meteor, and I can say for sure that it works really well. We are using internally Meteor + MantineUI + Grubba-RPC and the team couldn’t be more productive, we are delivering things fast.
I’ll give it a try on your example, tanstack router looks amazing. I Really like what Tanner does
Thanks for sharing @hemalr87
Excellent news - I’m in the process of moving away from React Semantic UI, which is starting to look quite dated - needed to make our desktop app mobile responsive and seemed like a good time to switch.
I tried using Tailwind UI but found I was far too slow with it and not as efficient. I’m still experimenting - if I hit into any roadblocks I might ask you for some guidance.
I’m a big fan of MantineUI, so feel free to ask anything about it
I didn’t check about CSS modules because I prefer to use Mantine with props and customize everything on the theme level. I do know the mixins work, like this one, but this is due to the postcss plugin
I also have a template for Meteor + Mantine here.
In this file, I’m using a CSS module, but without importing it like this: import classes from 'styles.module.css'
As far as I remember, you need to have a package to support the CSS modules, to work like in the example above. I can check with @grubba if he knows more about it.
Right, so you simply import the css file directly:
import "./styles.module.css";
Have you found any classnames clashing with that approach? Or is it just a case of fixing up individual classnames in the event that there are multiple components using the same classname.
(+ running on Meteor Cloud with Meteor v3)