UI workbench app vs Solid-Start - need help

[viridia]

You may have already seen my comments on the discord about this, but I wanted to write my questions down in a more structured way.

I've been working on a small solid-start project named Codex, which is a simple workbench for developing UI widgets, similar to Storybook.js, but one that works with Solid-based components and Vite. I spent a long time researching the alternatives, and none of them would work for me. Storybook in particular is incompatible with the version of Vite that I'm using, and (apparently) requires a significant amount of hackery to get to work with Solid. Of all the solutions I looked at, the one that I was most impressed with is Ladle for its ease of use and installation; but Ladle only supports React and has no plans to support other frameworks.

After several false starts, the approach I am taking is to have a small cli command that starts up a Vite server (using Vite's createServer() function) with the solid-start plugins configured in it. The stories are discovered via a server-side call which uses globby to walk the configured project root looking for stories. Once the user selects a story in the menu, it does a standard dynamic import() (given the absolute file path returned by globby). The story is rendered in an iframe to prevent the CSS from the story from colliding with the CSS from Codex.

It's important to understand that stories are not confined to the Codex project directory, since the whole point of a workbench like this is to view content for other projects. This means that the import() statement cannot be a string literal, which makes Vite generate a warning. The Vite docs say you can silence the warning by adding /* @vite-ignore */ inside the import, but this doesn't actually work - I get warnings regardless, and the stack trace that it prints out shows that the vite-ignore comments have been stripped. I don't know why.

However, a bigger problem I am facing is simply this: what directory should I be cd'd to when I start the solid-start server? There are two obvious candidates:

• The project directory for the application whose widgets are being tested. In other words, the dir that you invoked the cli command from.
• The codex project directory

The former option makes sense to me - you'd want the current directory to remain where it was when you executed the command. Unfortunately, this doesn't work - solid-start cannot find the routes/ folder, and thus renders nothing. I see that the solid-start plugin has a number of configuration parameters like appRoot and routesDir, but setting these parameters doesn't solve the problem (I've tried a bunch of different permutations with no luck).

The latter option - changing the directory to the solid-start project dir - works, but only "sort-of". That is, it works in some deployments and not others, and I haven't figured out why, although I suspect it may have something to do with conflicting dependency versions. (For legacy reasons, my main project - the one I'm writing this tool for - is currently on Vite 2, because apparently ESM web workers have problems in Vite 3 and 4.) The widgets I am testing use vanilla-extract, and I get a fatal error from the vanilla plugin, but only in some projects. In other projects it works fine.

I've looked at the source code for Ladle to see how they do it - and it's very, very complicated, involving an express server with the Vite middleware added, and a custom Vite plugin for preprocessing the stories and a ton of other code - like 5x more code than my little project. I'm a frontend / graphics / UI guy, and the prospect of writing a Vite plugin is a bigger challenge than I am willing to take on. I had hoped that I could just use solid-start as my server infrastructure, but so far that hasn't worked out.

The thing is, I can imagine that if I can somehow get this tool to work robustly in a broad range of environments, that other people developing UI with Solid.js would find it useful.