Hot reload

See the README, quoted here.

If you want to monitor story changes to compile Twig stories into JSON, execute it with `watch`. Like so:

watch --color drush storybook:generate-all-stories

The watch package is standard on ddev and most Linux systems.

Possible the OP was asking hot we get storybook to reload when we make change to SDC twig\css\JS - something I am also thinking about...

I guess this (unanswered) issue is relevant: https://github.com/storybookjs/storybook/discussions/15873

Actually, the above not so relevant but this one is pretty much the same problem:
https://stackoverflow.com/questions/77044691/how-can-i-force-storybook-t...

+1 For this feature, been looking through the docs of storybook and webpack, but I cannot make out, how to tell them to hot-reload stories, when the CSS files change.

I tried to add the scss compilation to storybooks webpack-config, and got the compilation working, but it still did not trigger the reloading of the stories when needed.

If I remember right, hot-reloading was possible in the past with the drupal-storybook-addon - but I'm not 100% sure.

We either need to manually trigger the storybook reload - or find a way to tell it, that it should watch the files that are picked up as sdc-libraries automatically - and reload on changes of them.

Sadly without hot-reloading frontend-development with storybook is more painful than it needs to be :D

@fisherman90 definitely possible using the addon as this is what I've ended up reverting to.

This issue I think is quite considerable when it comes to development efficiency.
@rattusrattus #9 - Wondering what's the difference as to implementation that makes it work. I guess `server-webpack5` is used on both approaches?

EDIT: The hot reload runs as can be seen within network tab. If the `arg` is changed, component is re-rendered. The provided component arg properties MUST be modified for the reload to happen.

When an arg’s value changes, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args.

https://storybook.js.org/docs/writing-stories/args

It would be great if there's a way to force render when the stories.json itself has been modified. For now I can only think of some clunky "generate and add / remove random argument every time twig -> json conversion happens".

As to CSS not triggering render.

$should_generate = $destination_file->getMTime() < $template_file->getMTime();

^ This then should be extended to check for modificiation for assets files within specific component dir. But it ties again to the requirement of updating `args`.

After furthing looking into this:

PoC:

https://github.com/e0ipso/twig-storybook/blob/main/src/Service/StoryRend...
Adding something like:

        array_walk($stories, function (&$story) {
            $story['args']['hash'] = uniqid();
         });

Will add a random arg thus re-rendering the component on any component's .twig change. As for `storybook:generate-all-stories`, it further could be expanded to watch for other asset changes within component's directory. Or --force could be used.

Anyway, not ideal way by any means, just brainstorming. In the end would like to force re-render one stories.json change instead.

Based on my previous comment, created this PoC. If somebody can come with more cleaner approach, would be great.
The possible downside - `stories.json` will get modified. Is it a problem? Probably not if those are .gitignore'd & built on CI/CD side. The logic could be further improved to generate a hash and then remove it.

You can ignore my previous approach, as it can be achieved a lot easier. I just looked at the old `storybook-druplal-addon` and took the logic from preview.js (need to fix some types though).

https://gist.github.com/DavisAre/be2c4b74eb60d4dd1d6030729365b6e0

I'm following SDC approach, so I have a .scss & .js within the specific component directory that is packed using webpack. Make sure that the assets are not cached by local server to see live changes.

Thank you davisa, Gist mentioned in #12 worked with `pnpm i @storybook/csf @storybook/global`