Upgrade to Storybook v8 and latest Solid

[JonahPlusPlus]

This project is long overdue for an update, so I'm giving it a shot.

The main goal of this update is to get it on Storybook v8 and the latest version of SolidJS.

Work done so far:

• Removed old artifacts (like Lerna git heads)
• Updated yarn
• Made bundling experience closer to main repo
• Fixed out-of-date code
• Updated dependencies
• Added .editorconfig

Things to do:

• Make sure reactivity is preserved (when splitting the render.tsx into renderToCanvas.tsx)
• Investigate the use of delay (there appears to be a 20ms delay to take care of a race condition in async code; smells really bad)
• Investigate use of npx to run jiti on other platforms (jiti doesn't appear on Windows, so I call it through npx)
• Make sure exports are set up correctly
• Update templates
• Add in documentation for future devs
• Update README
• Investigate Vite's deprecation of the CJS build of the Node API
• Investigate race condition in bundler
• Add CI for formatting and linting
• Refactor CD actions
• Add bundling check script

Right now, my branch appears to work (with a small project linked via yarn). I say appears to work, since I never used Storybook (came from React Cosmos and my own Vite tool), so I have a limited frame of reference to use.

[JonahPlusPlus]

@webblocksapp Hey, is there a reason for delaying rendering in docs mode? It seems to work properly without it (at least in Storybook v8).

[webblocksapp]

Hello @JonahPlusPlus , I’m currently not very active in contributing to this library. I added this delay because the Storybook documentation mode took a while to render, and sometimes the screen would remain blank. If you find that this delay is unnecessary and everything works fine without it, feel free to discuss the PR with the Storybook team through their official Discord channel. Best regards.

[shilman]

@JonahPlusPlus Exciting, thanks so much for picking this up! If you have any Storybook q's please give us a holler here or in our Discord and we'll do our best to help

[JonahPlusPlus]

@webblocksapp Understood, thanks for the super quick reply! I suppose I'll try creating more stories until I get some lag and see if the problem remains.

@shilman No problem, I need something like this in my projects and I would rather not write an entire library from scratch!

[shilman]

@JonahPlusPlus If you're coming from Cosmos and have a few minutes to spare, I'd love to ask you some questions about things we might do better in Storybook.

[JonahPlusPlus]

@shilman Sure, we can discuss it on the Discord server (same handle).

[JonahPlusPlus]

Everything is almost done, but I ran into that blank canvas bug when running hundreds of stories via MDX in docs mode. I'm going to have to figure out how to wait for Solid to re-render before returning (if that is the case).

[JonahPlusPlus]

I improved the workaround for the race condition. My working theory is that it's a scheduling issue, probably with Storybook and the browser, due to assumptions with how many other frameworks render. Instead of using a delay, it's enough to space out render calls by using a semaphore (I noticed that calling timeout with 0 delay was enough to get just one story to render, which means it's likely related to DOM rendering).

Now I tested with rendering ~700 stories with no issue (200 was enough to get the bug). I also noticed the bug showed up in both docs and normal mode, so this change applies to both.

[JonahPlusPlus]

Refactored the CD scripts to use yarn idiomatically.

[JonahPlusPlus]

Ready for review! That took longer than expected (I was really busy with midterms and school projects), but it's finally at a point where I think it's acceptable.

Future work:

• Investigate more robust solutions to the race condition (either in Storybook or Solid).
• Add features listed in README

[shilman]

@JonahPlusPlus Thanks so much for reviving this!!!! This is an impressive set of changes 🙌

Can we please add:

• A script for building the repo
• A "hello world" Solid project in the monorepo with a storybook, for testing purposes

This might be a good reference project -- another framework developed outside of the monorepo that has a test app & a test lib: https://github.com/literalpie/storybook-framework-qwik

[TheComputerM]

Also instead on using common js, it would be better to use esm in preset.js in packages/frameworks/solid-vite since:

1. Node has good support for ESM so running it shouldn't be a problem
2. package.json has "type": "module"
3. Storybook crashes if using require on node v23.1.0 with ReferenceError: module is not defined

[JonahPlusPlus]

@shilman okay, I completed the requested changes (wish I could have done it faster, but school projects kept getting in my way)

@TheComputerM I wasn't able to get it working. Perhaps there was a fault in my testing (I used a project that worked with the CJS version, but it kept giving errors about not finding the module, so maybe I didn't properly name the files). I think I want to hold off on this for now, just so I can get this update out.

[JonahPlusPlus]

Actually, I suppose I can mess around more with Vite's ESM API.

[JonahPlusPlus]

Okay, the example now uses Vite's ESM API. I switched over to my laptop (I use Arch btw), and it became apparent that I just need to set the project type to "module" for the example. I don't see any need to use ESM for the presets (since the CJS works fine without any warning, but if there is some other reason that's undocumented, I would love to hear it).

Lesson learnt: don't use yarn on Windows. It breaks too often, which makes stuff like this confusing.

[shilman]

Amazing work @JonahPlusPlus !!! Thanks so much for taking this on & for your patience getting it reviewed/merged.

[Chudesnov]

TypeScript types seem to be broken in the new version released after this got merged. The only contents of index.d.ts are now:

// dev-mode
export * from '../src/index';

but there is no src/ directory in the published package (likely stripped out as a pre-publish step).