Migrate to SolidJS - #30
Conversation
Remove unnecessary fake element navigation. Remove unnecessary dependency. Fix useQuery cache key. Minor cleanup.
Add TS linting with oxlint.
Run linter & fix linting issues.
|
@JackTench I also just migrated the project to OXFmt instead of prettier. The formatting rules set are very similar, but it allows for flexibility to configure as we like. Also added OXLint for linting more serious typescript issues and such. Then ran the linter and formatter. |
|
Currently the components that live in src/compnents/ui are all from shadcn (or "addons" to shadcn). Is it a good idea to use the SolidJS port of shadcn, so new components can be added via the CLI when they are required? If so, it may be better to use them now, instead of the hand ported components. |
Ah interesting, I didn't know that's how those were added I'll take a look |
So for something that works similar to this, the one you linked hasn't been maintained in almost a year and is currently broken. There's a much more active one over here: https://github.com/stefan-karger/solid-ui But they are waiting on Solid v2 before updating Tailwind to v4. I think we should just accept the hand ported versions for now, then examine that project if we actually want to start importing more components and then have it rewrite the existing ones once Solid v2 is out. (currently in RC) |
|
As you know solid better than me, I'll take your word for it. As for everything else, LGTM, happy to merge and go live. |
I did a test deploy on my fork's github pages that you can view for the purposes of comparing this version using Solid to the current version using react. It's accessible here: https://lsorg.starlitluna.com/
For the most part; all visuals, functionality, behavior etc should be preserved and the migration should be relatively small with minimal changes.
Some bigger changes including using native methods of handling dom state, reactivity etc. Some bigger changes include using the Kobalte UI toolchain which is a first-party UI package for SolidJS that handles some common UI features.
Finally, I did also choose to make some changes that I felt made sense despite not strictly speaking being a proper port/migration. These are:
npm ciwhich is the more appropriate dependency installation command for unattended setup. It requires a package-lock.json be present, performs a clean install of it, and guarantees it's using the versions specified in package-lock instead of installing new versions or something along those lines.Screencast_20260819_181349.webm
Might be a thing or two I missed, but feel free to ask if you have any questions!