chore: fix demo

packages/dockview-demo/src/events.ts

@@ -0,0 +1,122 @@
+import { IDisposable } from './lifecycle';
+
+export interface Event<T> {
+    (listener: (e: T) => any): IDisposable;
+}
+
+export interface EmitterOptions {
+    replay?: boolean;
+}
+
+export namespace Event {
+    export const any = <T>(...children: Event<T>[]): Event<T> => {
+        return (listener: (e: T) => void) => {
+            const disposables = children.map((child) => child(listener));
+
+            return {
+                dispose: () => {
+                    disposables.forEach((d) => {
+                        d.dispose();
+                    });
+                },
+            };
+        };
+    };
+}
+
+// dumb event emitter with better typings than nodes event emitter
+// https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
+export class Emitter<T> implements IDisposable {
+    private _event?: Event<T>;
+
+    private _last?: T;
+    private _listeners: Array<(e: T) => any> = [];
+    private _disposed = false;
+
+    constructor(private readonly options?: EmitterOptions) {}
+
+    get event() {
+        if (!this._event) {
+            this._event = (listener: (e: T) => void): IDisposable => {
+                if (this.options?.replay && this._last !== undefined) {
+                    listener(this._last);
+                }
+
+                this._listeners.push(listener);
+
+                return {
+                    dispose: () => {
+                        const index = this._listeners.indexOf(listener);
+                        if (index > -1) {
+                            this._listeners.splice(index, 1);
+                        }
+                    },
+                };
+            };
+        }
+        return this._event;
+    }
+
+    public fire(e: T) {
+        this._last = e;
+        for (const listener of this._listeners) {
+            listener(e);
+        }
+    }
+
+    public dispose() {
+        this._listeners = [];
+        this._disposed = true;
+    }
+}
+
+export function addDisposableWindowListener<K extends keyof WindowEventMap>(
+    element: Window,
+    type: K,
+    listener: (this: Window, ev: WindowEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+): IDisposable {
+    element.addEventListener(type, listener, options);
+
+    return {
+        dispose: () => {
+            element.removeEventListener(type, listener);
+        },
+    };
+}
+
+export function addDisposableListener<K extends keyof HTMLElementEventMap>(
+    element: HTMLElement,
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+): IDisposable {
+    element.addEventListener(type, listener, options);
+
+    return {
+        dispose: () => {
+            element.removeEventListener(type, listener);
+        },
+    };
+}
+
+export class TickDelayedEvent implements IDisposable {
+    private timer: any;
+
+    private readonly _onFired = new Emitter<void>();
+    readonly onEvent = this._onFired.event;
+
+    fire(): void {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+            this._onFired.fire();
+            clearTimeout(this.timer);
+        });
+    }
+
+    dispose(): void {
+        this._onFired.dispose();
+    }
+}

packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx

@@ -1,7 +1,9 @@
 import {
     CompositeDisposable,
     DockviewComponents,
+    IDockviewPanelHeaderProps,
     IDockviewPanelProps,
+    PanelCollection,
 } from 'dockview';
 import * as React from 'react';
 import './exampleFunctions.scss';

packages/dockview-demo/src/lifecycle.ts

@@ -0,0 +1,54 @@
+export interface IDisposable {
+    dispose: () => void;
+}
+
+export interface IValueDisposable<T> {
+    value: T;
+    disposable: IDisposable;
+}
+
+export namespace Disposable {
+    export const NONE: IDisposable = {
+        dispose: () => {
+            // noop
+        },
+    };
+}
+
+export class CompositeDisposable {
+    private readonly disposables: IDisposable[];
+
+    public static from(...args: IDisposable[]) {
+        return new CompositeDisposable(...args);
+    }
+
+    constructor(...args: IDisposable[]) {
+        this.disposables = args;
+    }
+
+    public addDisposables(...args: IDisposable[]) {
+        args.forEach((arg) => this.disposables.push(arg));
+    }
+
+    public dispose() {
+        this.disposables.forEach((arg) => arg.dispose());
+    }
+}
+
+export class MutableDisposable implements IDisposable {
+    private _disposable = Disposable.NONE;
+
+    set value(disposable: IDisposable) {
+        if (this._disposable) {
+            this._disposable.dispose();
+        }
+        this._disposable = disposable;
+    }
+
+    public dispose() {
+        if (this._disposable) {
+            this._disposable.dispose();
+            this._disposable = Disposable.NONE;
+        }
+    }
+}

packages/dockview-demo/src/stories/dockview/dockview.iframe.stories.tsx

@@ -1,11 +1,8 @@
 import {
-    CompositeDisposable,
     DockviewApi,
     DockviewReact,
     DockviewReadyEvent,
-    GroupChangeKind,
     IDockviewPanelProps,
-    IWatermarkPanelProps,
     PanelCollection,
 } from 'dockview';
 import * as React from 'react';

packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx

@@ -1,12 +1,9 @@
 import {
-    CompositeDisposable,
     DockviewApi,
     DockviewComponents,
     DockviewReact,
     DockviewReadyEvent,
-    GroupChangeKind,
     IDockviewPanelProps,
-    IWatermarkPanelProps,
     PanelCollection,
 } from 'dockview';
 import * as React from 'react';

packages/dockview-demo/src/stories/dockview/dockview.simple.stories.tsx

@@ -3,7 +3,6 @@ import {
     DockviewReact,
     DockviewReadyEvent,
     IDockviewPanelProps,
-    IWatermarkPanelProps,
     PanelCollection,
 } from 'dockview';
 import * as React from 'react';

packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx

@@ -1,12 +1,9 @@
 import {
-    CompositeDisposable,
     DockviewApi,
     DockviewComponents,
     DockviewReact,
     DockviewReadyEvent,
-    GroupChangeKind,
     IDockviewPanelProps,
-    IWatermarkPanelProps,
     PanelCollection,
 } from 'dockview';
 import * as React from 'react';

packages/dockview-demo/src/stories/dockview/dockview.watermark.stories.tsx

@@ -1,5 +1,4 @@
 import {
-    CompositeDisposable,
     DockviewApi,
     DockviewReact,
     DockviewReadyEvent,
@@ -8,6 +7,7 @@ import {
     IWatermarkPanelProps,
     PanelCollection,
 } from 'dockview';
+import { CompositeDisposable } from '../../lifecycle';
 import * as React from 'react';
 import { Meta } from '@storybook/react';
 

packages/dockview-demo/src/stories/paneview/paneview.deserialization.stories.tsx

@@ -4,7 +4,6 @@ import {
     PaneviewApi,
     PaneviewReadyEvent,
     IPaneviewPanelProps,
-    SerializedPaneview,
     PanelConstraintChangeEvent,
     CompositeDisposable,
     PanelDimensionChangeEvent,

packages/dockview-demo/src/stories/paneview/paneview.persistance.stories.tsx

@@ -6,14 +6,14 @@ import {
     IPaneviewPanelProps,
     SerializedPaneview,
     PanelConstraintChangeEvent,
-    CompositeDisposable,
     PanelDimensionChangeEvent,
     ExpansionEvent,
     FocusEvent,
     ActiveEvent,
 } from 'dockview';
+import { CompositeDisposable } from '../../lifecycle';
 import * as React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 const components: PanelCollection<IPaneviewPanelProps<any>> = {
     default: (props: IPaneviewPanelProps<{ color: string }>) => {

packages/dockview-demo/src/stories/paneview/paneview.simple.stories.tsx

@@ -4,14 +4,13 @@ import {
     PaneviewApi,
     PaneviewReadyEvent,
     IPaneviewPanelProps,
-    SerializedPaneview,
     PanelConstraintChangeEvent,
-    CompositeDisposable,
     PanelDimensionChangeEvent,
     ExpansionEvent,
     FocusEvent,
     ActiveEvent,
 } from 'dockview';
+import { CompositeDisposable } from '../../lifecycle';
 import * as React from 'react';
 import { Story, Meta } from '@storybook/react';