Improve @finos/perspective-viewer typings

packages/perspective-phosphor/src/ts/widget.ts

@@ -16,7 +16,7 @@ import {Message} from "@phosphor/messaging";
 import {Widget} from "@phosphor/widgets";
 import {MIME_TYPE, PSP_CLASS, PSP_CONTAINER_CLASS, PSP_CONTAINER_CLASS_DARK} from "./utils";
 
-import {PerspectiveViewer, PerspectiveViewerOptions} from "@finos/perspective-viewer";
+import {HTMLPerspectiveViewerElement, PerspectiveViewerOptions} from "@finos/perspective-viewer";
 
 let _increment = 0;
 
@@ -199,7 +199,7 @@ export class PerspectiveWidget extends Widget {
      *
      * @returns {PerspectiveViewer} The widget's viewer instance.
      */
-    get viewer(): PerspectiveViewer {
+    get viewer(): HTMLPerspectiveViewerElement {
         return this._viewer;
     }
 
@@ -359,10 +359,10 @@ export class PerspectiveWidget extends Widget {
         this._viewer.toggleConfig();
     }
 
-    static createNode(node: HTMLDivElement): PerspectiveViewer {
+    static createNode(node: HTMLDivElement): HTMLPerspectiveViewerElement {
         node.classList.add("p-Widget");
         node.classList.add(PSP_CONTAINER_CLASS);
-        const viewer = document.createElement("perspective-viewer") as PerspectiveViewer;
+        const viewer = document.createElement("perspective-viewer");
         viewer.classList.add(PSP_CLASS);
         viewer.setAttribute("type", MIME_TYPE);
 
@@ -383,7 +383,7 @@ export class PerspectiveWidget extends Widget {
         return viewer;
     }
 
-    private _viewer: PerspectiveViewer;
+    private _viewer: HTMLPerspectiveViewerElement;
     private _plugin_config: PerspectiveViewerOptions;
     private _client: boolean;
     private _dark: boolean;

packages/perspective-phosphor/src/ts/workspace/workspace.ts

@@ -13,7 +13,7 @@ import {Menu} from "@phosphor/widgets";
 import {createCommands} from "../dockpanel/contextmenu";
 import {CommandRegistry} from "@phosphor/commands";
 
-import PerspectiveViewer from "@finos/perspective-viewer";
+import {HTMLPerspectiveViewerElement} from "@finos/perspective-viewer";
 import {PerspectiveWidget} from "../widget";
 import {toArray} from "@phosphor/algorithm";
 import uniqBy from "lodash/uniqBy";
@@ -94,7 +94,7 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
     }
 
     private onPerspectiveClick = (event: CustomEvent): void => {
-        const config = (event.target as PerspectiveViewer).save();
+        const config = (event.target as HTMLPerspectiveViewerElement).save();
         const candidates = new Set([...(config["row-pivots"] || []), ...(config["column-pivots"] || []), ...(config.filters || []).map(x => x[0])]);
         const filters = [...event.detail.config.filters];
         this.filterWidget(candidates, filters);

packages/perspective-viewer/index.d.ts

@@ -1,37 +1,48 @@
-import {Table, TableData, TableOptions, Schema, View, ViewConfig} from '@finos/perspective';
+import React from "react";
+import {Table, TableData, TableOptions, Schema} from "@finos/perspective";
 
-declare module '@finos/perspective-viewer' {
-    export interface PerspectiveViewer extends PerspectiveViewerOptions, HTMLElement {
-        load(data: TableData | Table, options?: TableOptions): void;
-        load(schema: Schema, options?: TableOptions): void;
-        update(data: TableData): void;
-        notifyResize(): void;
-        delete(delete_table: boolean): Promise<void>;
-        clear() : void;
-        replace(data: TableData) : void;
-        flush(): Promise<void>;
-        toggleConfig(): void;
-        save(): PerspectiveViewerOptions;
-        reset(): void;
-        restore(x: any): Promise<void>;
-        restyleElement(): void;
-        readonly table?: Table;
-    }
+export interface HTMLPerspectiveViewerElement extends PerspectiveViewerOptions, HTMLElement {
+    load(data: TableData | Table, options?: TableOptions): void;
+    load(schema: Schema, options?: TableOptions): void;
+    update(data: TableData): void;
+    notifyResize(): void;
+    delete(delete_table: boolean): Promise<void>;
+    clear(): void;
+    replace(data: TableData): void;
+    flush(): Promise<void>;
+    toggleConfig(): void;
+    save(): PerspectiveViewerOptions;
+    reset(): void;
+    restore(x: any): Promise<void>;
+    restyleElement(): void;
+    readonly table?: Table;
+}
+
+export interface PerspectiveViewerOptions {
+    aggregates?: {[column_name: string]: string};
+    editable?: boolean;
+    plugin?: string;
+    columns?: string[];
+    "computed-columns"?: {[column_name: string]: string}[];
+    "row-pivots"?: string[];
+    "column-pivots"?: string[];
+    filters?: Array<Array<string>>;
+    sort?: string[][];
+    selectable?: boolean;
+}
 
-    export interface PerspectiveViewerOptions extends Omit<ViewConfig, "row_pivots"|"column_pivots"|"filter" > {
-        aggregates?: { [column_name:string]: string};
-        editable? : boolean;
-        plugin? : string;
-        columns? : string[];
-        "computed-columns"? : { [column_name:string]: string}[];
-        "row-pivots"? : string[];
-        "column-pivots"? : string[];
-        filters?: Array<Array<string>>;
-        sort?: string[][];
-        selectable? : boolean;
+interface PerspectiveViewerHTMLAttributes<T> extends PerspectiveViewerOptions, React.HTMLAttributes<T> {}
+
+type PerspectiveElement = React.DetailedHTMLProps<PerspectiveViewerHTMLAttributes<HTMLPerspectiveViewerElement>, HTMLPerspectiveViewerElement>;
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": PerspectiveElement;
+        }
     }
-
 
+    interface Document {
+        createElement(tagName: "perspective-viewer", options?: ElementCreationOptions): HTMLPerspectiveViewerElement;
+    }
 }
-
-export default PerspectiveViewer;

packages/perspective-viewer/package.json

@@ -55,6 +55,7 @@
     "dependencies": {
         "@babel/runtime": "^7.3.4",
         "@finos/perspective": "^0.4.0",
+        "@types/react": "^16.9.17",
         "@webcomponents/shadycss": "^1.5.2",
         "@webcomponents/webcomponentsjs": "~2.0.4",
         "awesomplete": "^1.1.2",

yarn.lock

@@ -1693,6 +1693,14 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react@^16.9.17":
+  version "16.9.17"
+  resolved "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
+  integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/react@~16.8.18":
   version "16.8.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.25.tgz#0247613ab58b1b11ba10fed662e1947c5f2bb89c"
@@ -14484,7 +14492,7 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.31.0:
+webpack@^4.31.0, webpack@^4.41.2:
   version "4.41.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
   integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==