fixup demo wrt React.StrictMode

Author: mathuo

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -176,75 +176,92 @@ const DockviewDemo = (props: { theme?: string }) => {
         setPending([]);
     }, [pending]);
 
-    const onReady = (event: DockviewReadyEvent) => {
-        setApi(event.api);
-
-        event.api.onDidAddPanel((event) => {
-            setPanels((_) => [..._, event.id]);
-            addLogLine(`Panel Added ${event.id}`);
-        });
-        event.api.onDidActivePanelChange((event) => {
-            setActivePanel(event?.id);
-            addLogLine(`Panel Activated ${event?.id}`);
-        });
-        event.api.onDidRemovePanel((event) => {
-            setPanels((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
-                );
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
 
-                return next;
-            });
-            addLogLine(`Panel Removed ${event.id}`);
-        });
-
-        event.api.onDidAddGroup((event) => {
-            setGroups((_) => [..._, event.id]);
-            addLogLine(`Group Added ${event.id}`);
-        });
-
-        event.api.onDidMovePanel((event) => {
-            addLogLine(`Panel Moved ${event.panel.id}`);
-        });
-
-        event.api.onDidMaximizedGroupChange((event) => {
-            addLogLine(
-                `Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
-            );
-        });
-
-        event.api.onDidRemoveGroup((event) => {
-            setGroups((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
+        const disposables = [
+            api.onDidAddPanel((event) => {
+                setPanels((_) => [..._, event.id]);
+                addLogLine(`Panel Added ${event.id}`);
+            }),
+            api.onDidActivePanelChange((event) => {
+                setActivePanel(event?.id);
+                addLogLine(`Panel Activated ${event?.id}`);
+            }),
+            api.onDidRemovePanel((event) => {
+                setPanels((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
+
+                    return next;
+                });
+                addLogLine(`Panel Removed ${event.id}`);
+            }),
+
+            api.onDidAddGroup((event) => {
+                setGroups((_) => [..._, event.id]);
+                addLogLine(`Group Added ${event.id}`);
+            }),
+
+            api.onDidMovePanel((event) => {
+                addLogLine(`Panel Moved ${event.panel.id}`);
+            }),
+
+            api.onDidMaximizedGroupChange((event) => {
+                addLogLine(
+                    `Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
                 );
+            }),
+
+            api.onDidRemoveGroup((event) => {
+                setGroups((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
+
+                    return next;
+                });
+                addLogLine(`Group Removed ${event.id}`);
+            }),
+
+            api.onDidActiveGroupChange((event) => {
+                setActiveGroup(event?.id);
+                addLogLine(`Group Activated ${event?.id}`);
+            }),
+        ];
+
+        const loadLayout = () => {
+            const state = localStorage.getItem('dv-demo-state');
+
+            if (state) {
+                try {
+                    api.fromJSON(JSON.parse(state));
+                    return;
+                } catch {
+                    localStorage.removeItem('dv-demo-state');
+                }
+                return;
+            }
 
-                return next;
-            });
-            addLogLine(`Group Removed ${event.id}`);
-        });
+            defaultConfig(api);
+        };
 
-        event.api.onDidActiveGroupChange((event) => {
-            setActiveGroup(event?.id);
-            addLogLine(`Group Activated ${event?.id}`);
-        });
+        loadLayout();
 
-        const state = localStorage.getItem('dv-demo-state');
-        if (state) {
-            try {
-                event.api.fromJSON(JSON.parse(state));
-                return;
-            } catch {
-                localStorage.removeItem('dv-demo-state');
-            }
-            return;
-        }
+        return () => {
+            disposables.forEach((disposable) => disposable.dispose());
+        };
+    }, [api]);
 
-        defaultConfig(event.api);
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
     };
 
     const [watermark, setWatermark] = React.useState<boolean>(false);

packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx

@@ -88,7 +88,6 @@ const GroupAction = (props: {
                     }
                     onClick={() => {
                         if (group) {
-
                             props.api.addFloatingGroup(group, {
                                 width: 400,
                                 height: 300,
@@ -99,7 +98,6 @@ const GroupAction = (props: {
                                     right: 50,
                                 },
                             });
-
                         }
                     }}
                 >

packages/docs/src/theme/Root.tsx

@@ -3,5 +3,9 @@ import { RecoilRoot } from 'recoil';
 
 // Default implementation, that you can customize
 export default function Root({ children }) {
-    return <RecoilRoot>{children}</RecoilRoot>;
+    return (
+        <React.StrictMode>
+            <RecoilRoot>{children}</RecoilRoot>
+        </React.StrictMode>
+    );
 }