dockview 0.0.28 → 1.0.2

package/dist/esm/react/react.js

@@ -1,116 +1,116 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { sequentialNumberGenerator } from '../math';
-/**
- * This component is intended to interface between vanilla-js and React hence we need to be
- * creative in how we update props.
- * A ref of the component is exposed with an update method; which when called stores the props
- * as a ref within this component and forcefully triggers a re-render of the component using
- * the ref of props we just set on the renderered component as the props passed to the inner
- * component
- */
-const ReactComponentBridge = (props, ref) => {
-    const [_, triggerRender] = React.useState();
-    const _props = React.useRef(props.componentProps);
-    React.useImperativeHandle(ref, () => ({
-        update: (componentProps) => {
-            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
-            /**
-             * setting a arbitrary piece of state within this component will
-             * trigger a re-render.
-             * we use this rather than updating through a prop since we can
-             * pass a ref into the vanilla-js world.
-             */
-            triggerRender(Date.now());
-        },
-    }), []);
-    return React.createElement(props.component, _props.current);
-};
-ReactComponentBridge.displayName = 'DockviewReactJsBridge';
-/**
- * Since we are storing the React.Portal references in a rendered array they
- * require a key property like any other React element rendered in an array
- * to prevent excessive re-rendering
- */
-const uniquePortalKeyGenerator = sequentialNumberGenerator();
-export const ReactPartContext = React.createContext({});
-export class ReactPart {
-    constructor(parent, portalStore, component, parameters, context) {
-        this.parent = parent;
-        this.portalStore = portalStore;
-        this.component = component;
-        this.parameters = parameters;
-        this.context = context;
-        this.disposed = false;
-        this.createPortal();
-    }
-    update(props) {
-        var _a;
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
-    }
-    createPortal() {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        // TODO use a better check for isReactFunctionalComponent
-        if (typeof this.component !== 'function') {
-            /**
-             * we know this isn't a React.FunctionComponent so throw an error here.
-             * if we do not intercept this the React library will throw a very obsure error
-             * for the same reason, at least at this point we will emit a sensible stacktrace.
-             */
-            throw new Error('invalid operation: only functional components are supported');
-        }
-        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
-            component: this
-                .component,
-            componentProps: this.parameters,
-            ref: (element) => {
-                this.componentInstance = element;
-            },
-        });
-        const node = this.context
-            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
-            : bridgeComponent;
-        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
-        this.ref = {
-            portal,
-            disposable: this.portalStore.addPortal(portal),
-        };
-    }
-    dispose() {
-        var _a;
-        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
-        this.disposed = true;
-    }
-}
-/**
- * A React Hook that returns an array of portals to be rendered by the user of this hook
- * and a disposable function to add a portal. Calling dispose removes this portal from the
- * portal array
- */
-export const usePortalsLifecycle = () => {
-    const [portals, setPortals] = React.useState([]);
-    React.useDebugValue(`Portal count: ${portals.length}`);
-    const addPortal = React.useCallback((portal) => {
-        setPortals((existingPortals) => [...existingPortals, portal]);
-        let disposed = false;
-        return {
-            dispose: () => {
-                if (disposed) {
-                    throw new Error('invalid operation: resource already disposed');
-                }
-                disposed = true;
-                setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
-            },
-        };
-    }, []);
-    return [portals, addPortal];
-};
-// it does the job...
-export function isReactElement(element) {
-    return element === null || element === void 0 ? void 0 : element.type;
-}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { sequentialNumberGenerator } from '../math';
+/**
+ * This component is intended to interface between vanilla-js and React hence we need to be
+ * creative in how we update props.
+ * A ref of the component is exposed with an update method; which when called stores the props
+ * as a ref within this component and forcefully triggers a re-render of the component using
+ * the ref of props we just set on the renderered component as the props passed to the inner
+ * component
+ */
+const ReactComponentBridge = (props, ref) => {
+    const [_, triggerRender] = React.useState();
+    const _props = React.useRef(props.componentProps);
+    React.useImperativeHandle(ref, () => ({
+        update: (componentProps) => {
+            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
+            /**
+             * setting a arbitrary piece of state within this component will
+             * trigger a re-render.
+             * we use this rather than updating through a prop since we can
+             * pass a ref into the vanilla-js world.
+             */
+            triggerRender(Date.now());
+        },
+    }), []);
+    return React.createElement(props.component, _props.current);
+};
+ReactComponentBridge.displayName = 'DockviewReactJsBridge';
+/**
+ * Since we are storing the React.Portal references in a rendered array they
+ * require a key property like any other React element rendered in an array
+ * to prevent excessive re-rendering
+ */
+const uniquePortalKeyGenerator = sequentialNumberGenerator();
+export const ReactPartContext = React.createContext({});
+export class ReactPart {
+    constructor(parent, portalStore, component, parameters, context) {
+        this.parent = parent;
+        this.portalStore = portalStore;
+        this.component = component;
+        this.parameters = parameters;
+        this.context = context;
+        this.disposed = false;
+        this.createPortal();
+    }
+    update(props) {
+        var _a;
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+    }
+    createPortal() {
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        // TODO use a better check for isReactFunctionalComponent
+        if (typeof this.component !== 'function') {
+            /**
+             * we know this isn't a React.FunctionComponent so throw an error here.
+             * if we do not intercept this the React library will throw a very obsure error
+             * for the same reason, at least at this point we will emit a sensible stacktrace.
+             */
+            throw new Error('invalid operation: only functional components are supported');
+        }
+        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
+            component: this
+                .component,
+            componentProps: this.parameters,
+            ref: (element) => {
+                this.componentInstance = element;
+            },
+        });
+        const node = this.context
+            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            : bridgeComponent;
+        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        this.ref = {
+            portal,
+            disposable: this.portalStore.addPortal(portal),
+        };
+    }
+    dispose() {
+        var _a;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
+        this.disposed = true;
+    }
+}
+/**
+ * A React Hook that returns an array of portals to be rendered by the user of this hook
+ * and a disposable function to add a portal. Calling dispose removes this portal from the
+ * portal array
+ */
+export const usePortalsLifecycle = () => {
+    const [portals, setPortals] = React.useState([]);
+    React.useDebugValue(`Portal count: ${portals.length}`);
+    const addPortal = React.useCallback((portal) => {
+        setPortals((existingPortals) => [...existingPortals, portal]);
+        let disposed = false;
+        return {
+            dispose: () => {
+                if (disposed) {
+                    throw new Error('invalid operation: resource already disposed');
+                }
+                disposed = true;
+                setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
+            },
+        };
+    }, []);
+    return [portals, addPortal];
+};
+// it does the job...
+export function isReactElement(element) {
+    return element === null || element === void 0 ? void 0 : element.type;
+}

package/dist/esm/react/splitview/splitview.d.ts

@@ -1,24 +1,24 @@
-import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
-import { Orientation } from '../../splitview/core/splitview';
-import { PanelCollection, PanelParameters } from '../types';
-export interface SplitviewReadyEvent {
-    api: SplitviewApi;
-}
-export interface ISplitviewPanelProps<T extends {
-    [index: string]: any;
-} = any> extends PanelParameters<T> {
-    api: SplitviewPanelApi;
-    containerApi: SplitviewApi;
-}
-export interface ISplitviewReactProps {
-    orientation: Orientation;
-    onReady?: (event: SplitviewReadyEvent) => void;
-    components: PanelCollection<ISplitviewPanelProps>;
-    proportionalLayout?: boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
-}
-export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+import { SplitviewApi } from '../../api/component.api';
+import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
+import { Orientation } from '../../splitview/core/splitview';
+import { PanelCollection, PanelParameters } from '../types';
+export interface SplitviewReadyEvent {
+    api: SplitviewApi;
+}
+export interface ISplitviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: SplitviewPanelApi;
+    containerApi: SplitviewApi;
+}
+export interface ISplitviewReactProps {
+    orientation: Orientation;
+    onReady?: (event: SplitviewReadyEvent) => void;
+    components: PanelCollection<ISplitviewPanelProps>;
+    proportionalLayout?: boolean;
+    hideBorders?: boolean;
+    className?: string;
+    disableAutoResizing?: boolean;
+}
+export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/react/splitview/splitview.js

@@ -1,55 +1,63 @@
-import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewComponent, } from '../../splitview/splitviewComponent';
-import { usePortalsLifecycle } from '../react';
-import { ReactPanelView } from './view';
-import { watchElementResize } from '../../dom';
-export const SplitviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const splitviewRef = React.useRef();
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    React.useEffect(() => {
-        if (props.disableAutoResizing) {
-            return () => {
-                //
-            };
-        }
-        const watcher = watchElementResize(domRef.current, (entry) => {
-            var _a;
-            const { width, height } = entry.contentRect;
-            (_a = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return () => {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(() => {
-        const splitview = new SplitviewComponent(domRef.current, {
-            orientation: props.orientation,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            proportionalLayout: props.proportionalLayout,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        const { clientWidth, clientHeight } = domRef.current;
-        splitview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api: new SplitviewApi(splitview) });
-        }
-        splitviewRef.current = splitview;
-        return () => {
-            splitview.dispose();
-        };
-    }, []);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-SplitviewReact.displayName = 'SplitviewComponent';
+import * as React from 'react';
+import { SplitviewApi } from '../../api/component.api';
+import { SplitviewComponent, } from '../../splitview/splitviewComponent';
+import { usePortalsLifecycle } from '../react';
+import { ReactPanelView } from './view';
+import { watchElementResize } from '../../dom';
+export const SplitviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const splitviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        if (props.disableAutoResizing) {
+            return () => {
+                //
+            };
+        }
+        const watcher = watchElementResize(domRef.current, (entry) => {
+            var _a;
+            const { width, height } = entry.contentRect;
+            (_a = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        });
+        return () => {
+            watcher.dispose();
+        };
+    }, [props.disableAutoResizing]);
+    React.useEffect(() => {
+        const splitview = new SplitviewComponent(domRef.current, {
+            orientation: props.orientation,
+            frameworkComponents: props.components,
+            frameworkWrapper: {
+                createComponent: (id, componentId, component) => {
+                    return new ReactPanelView(id, componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+            proportionalLayout: props.proportionalLayout,
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        const { clientWidth, clientHeight } = domRef.current;
+        splitview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new SplitviewApi(splitview) });
+        }
+        splitviewRef.current = splitview;
+        return () => {
+            splitview.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!splitviewRef.current) {
+            return;
+        }
+        splitviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+SplitviewReact.displayName = 'SplitviewComponent';

package/dist/esm/react/splitview/view.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { SplitviewPanel } from '../../splitview/splitviewPanel';
-import { ReactPart, ReactPortalStore } from '../react';
-import { ISplitviewPanelProps } from './splitview';
-export declare class ReactPanelView extends SplitviewPanel {
-    private readonly reactComponent;
-    private readonly reactPortalStore;
-    constructor(id: string, component: string, reactComponent: React.FunctionComponent<ISplitviewPanelProps>, reactPortalStore: ReactPortalStore);
-    getComponent(): ReactPart<ISplitviewPanelProps<any>, {}>;
-}
+/// <reference types="react" />
+import { SplitviewPanel } from '../../splitview/splitviewPanel';
+import { ReactPart, ReactPortalStore } from '../react';
+import { ISplitviewPanelProps } from './splitview';
+export declare class ReactPanelView extends SplitviewPanel {
+    private readonly reactComponent;
+    private readonly reactPortalStore;
+    constructor(id: string, component: string, reactComponent: React.FunctionComponent<ISplitviewPanelProps>, reactPortalStore: ReactPortalStore);
+    getComponent(): ReactPart<ISplitviewPanelProps<any>, {}>;
+}

package/dist/esm/react/splitview/view.js

@@ -1,18 +1,18 @@
-import { SplitviewPanel } from '../../splitview/splitviewPanel';
-import { ReactPart } from '../react';
-export class ReactPanelView extends SplitviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
-    }
-    getComponent() {
-        var _a;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
-            api: this.api,
-            containerApi: this.params
-                .containerApi,
-        });
-    }
-}
+import { SplitviewPanel } from '../../splitview/splitviewPanel';
+import { ReactPart } from '../react';
+export class ReactPanelView extends SplitviewPanel {
+    constructor(id, component, reactComponent, reactPortalStore) {
+        super(id, component);
+        this.reactComponent = reactComponent;
+        this.reactPortalStore = reactPortalStore;
+    }
+    getComponent() {
+        var _a;
+        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            api: this.api,
+            containerApi: this.params
+                .containerApi,
+        });
+    }
+}

package/dist/esm/react/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-export interface PanelCollection<T extends object> {
-    [name: string]: React.FunctionComponent<T>;
-}
-export interface PanelParameters<T extends {} = Record<string, any>> {
-    params: T;
-}
+import * as React from 'react';
+export interface PanelCollection<T extends object> {
+    [name: string]: React.FunctionComponent<T>;
+}
+export interface PanelParameters<T extends {} = Record<string, any>> {
+    params: T;
+}

package/dist/esm/react/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/esm/splitview/core/options.d.ts

@@ -1,26 +1,26 @@
-import { IPanel, PanelInitParameters } from '../../panel/types';
-import { IView, SplitViewOptions, LayoutPriority } from './splitview';
-import { FrameworkFactory } from '../../types';
-import { SplitviewPanel } from '../splitviewPanel';
-import { SplitviewApi } from '../../api/component.api';
-export interface PanelViewInitParameters extends PanelInitParameters {
-    minimumSize?: number;
-    maximumSize?: number;
-    snap?: boolean;
-    priority?: LayoutPriority;
-    containerApi: SplitviewApi;
-}
-export interface ISerializableView extends IView, IPanel {
-    init: (params: PanelViewInitParameters) => void;
-}
-export interface SplitviewComponentOptions extends SplitViewOptions {
-    components?: {
-        [componentName: string]: {
-            new (id: string, componentName: string): SplitviewPanel;
-        };
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
-}
+import { IPanel, PanelInitParameters } from '../../panel/types';
+import { IView, SplitViewOptions, LayoutPriority } from './splitview';
+import { FrameworkFactory } from '../../types';
+import { SplitviewPanel } from '../splitviewPanel';
+import { SplitviewApi } from '../../api/component.api';
+export interface PanelViewInitParameters extends PanelInitParameters {
+    minimumSize?: number;
+    maximumSize?: number;
+    snap?: boolean;
+    priority?: LayoutPriority;
+    containerApi: SplitviewApi;
+}
+export interface ISerializableView extends IView, IPanel {
+    init: (params: PanelViewInitParameters) => void;
+}
+export interface SplitviewComponentOptions extends SplitViewOptions {
+    components?: {
+        [componentName: string]: {
+            new (id: string, componentName: string): SplitviewPanel;
+        };
+    };
+    frameworkComponents?: {
+        [componentName: string]: any;
+    };
+    frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
+}

package/dist/esm/splitview/core/options.js

@@ -1 +1 @@
-export {};
+export {};