fix: 🐛 improve widget state handling and async render support

- Allow stories to provide only state without props by relaxing guard condition
- Clear widget.state before setState to prevent stale load()-generated keys from persisting
- Ensure Storybook args.widget.state remains authoritative during widget reuse
- Make render calls async-aware by awaiting them in lifecycle.update and fallback branches
- Add test coverage for state clearing behavior and state-only widget creation
- Fix documentation: add missing WidgetDescription function in custom render example
- Fix documentation: correct CSF3 to CSF2 in Preact stories description

Author: Jiří Fencl

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

@@ -43,15 +43,27 @@ describe('Merkur tool storybook', () => {
       });
     });
 
-    it('should return empty widget for not defined props', async () => {
+    it('should return empty widget when widget is not defined', async () => {
       let loader = createWidgetLoader({ widgetProperties, render });
 
-      delete storyArgs.args.widget.props;
+      delete storyArgs.args.widget;
       let { widget } = await loader(storyArgs);
 
       expect(widget).toEqual(null);
     });
 
+    it('should return widget instance when only state is provided (without props)', async () => {
+      let loader = createWidgetLoader({ widgetProperties, render });
+
+      storyArgs.args.widget = { state: { count: 42 } };
+      let { widget } = await loader(storyArgs);
+
+      expect(widget.name).toEqual(widgetProperties.name);
+      expect(widget.version).toEqual(widgetProperties.version);
+      expect(widget.state).toEqual({ count: 42 });
+      expect(widget.props).toEqual({});
+    });
+
     it('should return widget instance for defined props', async () => {
       let loader = createWidgetLoader({ widgetProperties, render });
 

packages/tool-storybook/src/index.js

@@ -21,7 +21,7 @@ function createWidgetLoader({ render, widgetProperties }) {
       lastStory = {};
     }
 
-    if (!args?.args?.widget?.props) {
+    if (!args?.args?.widget) {
       return { widget: null };
     }
 
@@ -49,7 +49,7 @@ function createWidgetLoader({ render, widgetProperties }) {
         if (lifeCycle && typeof lifeCycle.update === 'function') {
           await lifeCycle.update(widget);
         } else {
-          render(widget);
+          await render(widget);
         }
         return { widget };
       }
@@ -72,7 +72,7 @@ function createWidgetLoader({ render, widgetProperties }) {
       if (lifeCycle && typeof lifeCycle.update === 'function') {
         await lifeCycle.update(widget);
       } else {
-        render(widget);
+        await render(widget);
       }
       return { widget };
     }
@@ -89,8 +89,8 @@ function createWidgetLoader({ render, widgetProperties }) {
       );
     }
     lifeCycle.mount = () => {};
-    lifeCycle.update = () => {
-      render(widget);
+    lifeCycle.update = async () => {
+      return await render(widget);
     };
     lifeCycle.unmount = () => {};
 

website/docs/storybook-integration-into-merkur.md

@@ -395,7 +395,7 @@ The `bindEvents` function is crucial for vanilla widgets as it reconnects event
 - **Preact widgets**: 
   - Use `.jsx` extension and JSX syntax
   - Decorators provide context and handle re-rendering
-  - Stories use CSF3 format with `Template.bind({})`
+  - Stories use CSF2 format with `Template.bind({})`
   - Components receive individual props
   
 - **Vanilla widgets**: