State is retained when switching between stories

[matthias-ccri]

Hi titonobre, thanks for your work on this library. I'm seeing some behavior that I'm not sure if it's intentional or not:

The state of a story is retained when switching to another story and back again. You can see this with the Mock component story. Increase the count to 4, switch to a different story, and switch back -- the count is still 4. So the state is being retained somehow.

It seems that storybook is best suited to be a showcase of stateless components, and angularjs is not completely stateless, but it would be helpful to tear down the root element and do a new angular.bootstrap() each time a story loads. From debugging the page, I observed that angular.bootstrap was being called at most once per story, per page load.

It would be even better if storybook would reload the actual iframe between each story, but apparently that's too expensive of an operation to parse javascript and register postMessage listeners.... storybookjs/storybook#729 (comment)

So my main question is: do you see what I'm seeing, and is there a way to force storybook to refresh? Maybe this library could provide an option to do that? Other library plugins (react native and webcomponents) make use of a forceRefresh param to their render functions, but it seems this library is different. I don't know that much about the internals.

[titonobre]

Hi @matthias-ccri

This behaviour was indeed intentional. The decorator has a cache mechanism to avoid recreating everything all over again.

I've made a simple test that works in the mock component story. However, all these examples are very simple. Could you help me with this by doing the same test in your project with your components?

Just open the file node_modules/storybook-addon-angularjs/decorator.js and make the change as in the diff below.

This will force the root element to be recreated every time.

--- Old
+++ New
@@ -33,13 +33,13 @@
     const modules = Array.isArray(module) ? module : [module];
 
     const { template, props = {} } = typeof story === "string" ? { template: story } : story;
 
     const key = context.id;
 
-    if (!cache[key] || cache[key].template !== template) {
+    if (true || !cache[key] || cache[key].template !== template) {
       const element = document.createElement("div");
 
       // Initialize mocked modules
       if (mock && mock.modules) {
         mock.modules.forEach((moduleToMock) => {
           modules.unshift(angular.module(moduleToMock, []).name);

If this works, I can make this behaviour configurable per story.

[matthias-ccri]

That certainly refreshes things, though it also refreshes when I change a knob value.

Ideally it would only refresh when you switch between stories. But this still might be useful to have as an option!

[titonobre]

It is possible to avoid that by using the context.id which changes when navigating between stories but not when changing the knobs.

[titonobre]

Hi @matthias-ccri

So sorry for taking so much time to fix this. I've added a new parameter rebuild that allows you to control when each story is rebuilt.

Please check the examples. There is one story for each possible value.

Let me know if it worked for your use case.