fix: 🐛 avoid duplicate renders when reusing widget in loader

When both setState and setProps were available on a reused widget, the
previous logic triggered two sequential updates — one per setter — and
setProps would invoke load(), potentially overwriting story-provided state.

Refactored createWidgetLoader to handle three distinct cases:
- Only setState: assign props directly, use setState as single update trigger
- Only setProps: assign state directly, use setProps as single update/load trigger
- Both or neither: assign state/props directly, perform one lifecycle update

Updated the corresponding test to assert the new single-render behaviour
instead of spying on setState.

Author: Jiří Fencl

packages/tool-storybook/src/__tests__/indexSpec.js

@@ -103,16 +103,16 @@ describe('Merkur tool storybook', () => {
       expect(widget.props).toEqual({ title: 'Updated' });
     });
 
-    it('should call setState with new state when reusing widget for the same story', async () => {
+    it('should update state directly and trigger a single render when reusing widget for the same story', async () => {
       let loader = createWidgetLoader({ widgetProperties, render });
 
-      let { widget: firstWidget } = await loader(storyArgs);
-      jest.spyOn(firstWidget, 'setState');
+      render.mockClear();
 
       storyArgs.args.widget.state = { count: 42 };
-      await loader(storyArgs);
+      let { widget } = await loader(storyArgs);
 
-      expect(firstWidget.setState).toHaveBeenCalledWith({ count: 42 });
+      expect(widget.state).toEqual({ count: 42 });
+      expect(render).toHaveBeenCalledTimes(1);
     });
 
     it('should throw when widget is created without component plugin', async () => {

packages/tool-storybook/src/index.js

@@ -33,27 +33,28 @@ function createWidgetLoader({ render, widgetProperties }) {
       const lifeCycle = widget?.$in?.component?.lifeCycle;
       const hasSetState = typeof widget.setState === 'function';
       const hasSetProps = typeof widget.setProps === 'function';
-      // Reset existing state/props to avoid stale keys when reusing the widget.
-      if (hasSetState) {
+      if (hasSetState && !hasSetProps) {
+        // Use setState as the single source of truth for triggering an update.
         widget.state = {};
+        widget.props = nextProps;
         await widget.setState(nextState);
-      } else {
-        widget.state = nextState;
+        return { widget };
       }
-      if (hasSetProps) {
+      if (hasSetProps && !hasSetState) {
+        // Use setProps as the single source of truth for triggering an update/load.
+        widget.state = nextState;
         widget.props = {};
         await widget.setProps(nextProps);
-      } else {
-        widget.props = nextProps;
+        return { widget };
       }
-      // When setState/setProps are available, they should trigger widget.update()
-      // via @merkur/plugin-component, so avoid forcing an extra lifecycle update.
-      if (!hasSetState && !hasSetProps) {
-        if (lifeCycle && typeof lifeCycle.update === 'function') {
-          await lifeCycle.update(widget);
-        } else {
-          render(widget);
-        }
+      // When both setters are available (or neither), replace state/props directly
+      // and perform a single lifecycle update to avoid duplicate work.
+      widget.state = nextState;
+      widget.props = nextProps;
+      if (lifeCycle && typeof lifeCycle.update === 'function') {
+        await lifeCycle.update(widget);
+      } else {
+        render(widget);
       }
       return { widget };
     }