@hpcc-js/html 2.44.0 → 3.1.0

package/package.json

@@ -1,52 +1,53 @@
 {
     "name": "@hpcc-js/html",
-    "version": "2.44.0",
+    "version": "3.1.0",
     "description": "hpcc-js - Viz HTML",
-    "main": "dist/index.js",
-    "module": "dist/index.es6",
-    "unpkg": "dist/index.min.js",
-    "jsdelivr": "dist/index.min.js",
-    "types": "types/index.d.ts",
-    "typesVersions": {
-        "<3.8": {
-            "*": [
-                "types-3.4/index.d.ts"
-            ]
-        }
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./dist/*": "./dist/*"
     },
+    "module": "./dist/index.js",
+    "browser": "./dist/index.js",
+    "types": "./types/index.d.ts",
     "files": [
         "dist/*",
-        "types/*",
-        "types-3.4/*",
-        "src/*"
+        "src/*",
+        "types/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo",
-        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
-        "compile-es6-watch": "npm run compile-es6 -- -w",
-        "compile-umd": "tsc --module umd --outDir ./lib-umd",
-        "compile-umd-watch": "npm run compile-umd -- -w",
-        "bundle": "rollup -c",
-        "bundle-watch": "npm run bundle -- -w",
-        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
-        "build": "npm run compile-es6 && npm run bundle",
-        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
-        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
+        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "bundle": "node esbuild.js",
+        "bundle-watch": "npm run bundle -- --development --watch",
+        "gen-types": "tsc --project tsconfig.json",
+        "gen-types-watch": "npm run gen-types -- --watch",
+        "build": "run-p gen-types bundle",
         "lint": "eslint ./src",
+        "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
-        "update": "npx --yes npm-check-updates -u -t minor"
+        "test-browser": "vitest run --project browser",
+        "test": "vitest run",
+        "coverage": "vitest run --coverage",
+        "update": "npx --yes npm-check-updates -u -t minor",
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^2.73.0",
-        "@hpcc-js/preact-shim": "^2.18.0",
-        "@hpcc-js/util": "^2.53.0"
+        "@hpcc-js/common": "^3.2.0",
+        "@hpcc-js/util": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
+        "@hpcc-js/esbuild-plugins": "^1.3.0",
         "d3-format": "^1",
         "d3-selection": "^1",
-        "tslib": "2.7.0"
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
     },
     "repository": {
         "type": "git",
@@ -59,5 +60,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "fbbef050700b0e9d76ef99714856383d95155149"
+    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
 }

package/src/BreakdownTable.ts

@@ -1,10 +1,10 @@
-import { HTMLTooltip } from "./HTMLTooltip";
-import { StyledTable } from "./StyledTable";
+import { HTMLTooltip } from "./HTMLTooltip.ts";
+import { StyledTable } from "./StyledTable.ts";
 
 export class BreakdownTable extends StyledTable {
-    protected _table;
-    protected _tbody;
-    protected _tooltip;
+    // protected _table;
+    // protected _tbody;
+    protected _tooltip: HTMLTooltip;
     constructor() {
         super();
     }

package/src/HTMLTooltip.ts

@@ -1,6 +1,5 @@
-import { HTMLWidget } from "@hpcc-js/common";
+import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
 import { scopedLogger, ScopedLogging } from "@hpcc-js/util";
-import { select as d3Select } from "d3-selection";
 
 type Direction = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
 type Position = { x: number, y: number };
@@ -56,19 +55,19 @@ export class HTMLTooltip extends HTMLWidget {
     update(domNode, element) {
         super.update(domNode, element);
 
-        if(this._contentNode !== this._prevContentNode){
+        if (this._contentNode !== this._prevContentNode) {
             const node = this._tooltipElement.node();
             [...node.querySelectorAll("*")]
-            .map(n=>n.__data__)
-            .filter(n=>n)
-            .forEach(w=>{
-                if(typeof w.target === "function"){
-                    w.target(null);
-                }
-                if(typeof w.exit === "function"){
-                    w.exit();
-                }
-            });
+                .map(n => n.__data__)
+                .filter(n => n)
+                .forEach(w => {
+                    if (typeof w.target === "function") {
+                        w.target(null);
+                    }
+                    if (typeof w.exit === "function") {
+                        w.exit();
+                    }
+                });
             node.innerHTML = "";
             node.appendChild(this._contentNode);
             this._prevContentNode = this._contentNode;
@@ -82,7 +81,7 @@ export class HTMLTooltip extends HTMLWidget {
                     return this._tooltipHTMLCallback(this.data());
                 });
         }
-        if(this.fitContent()){
+        if (this.fitContent()) {
             this._tooltipElement
                 .style("width", "auto")
                 .style("height", "auto")
@@ -112,7 +111,7 @@ export class HTMLTooltip extends HTMLWidget {
     }
 
     onShowContent(node) {
-        
+
     }
 
     protected updateTooltipPosition(): Position {
@@ -259,8 +258,8 @@ export class HTMLTooltip extends HTMLWidget {
         const p = this.padding();
         const p2 = p * 2;
 
-        if(this.followCursor() && this._cursorLoc) {
-            
+        if (this.followCursor() && this._cursorLoc) {
+
             left = this._cursorLoc[0];
             top = this._cursorLoc[1];
             width = 1;
@@ -312,8 +311,8 @@ export class HTMLTooltip extends HTMLWidget {
         this._tooltipElement.on("mouseout", () => {
             this.mouseout();
         });
-        setTimeout(()=>{
-            if(this._closing){
+        setTimeout(() => {
+            if (this._closing) {
                 this.visible(false);
             }
         }, this.closeDelay());
@@ -368,7 +367,7 @@ export interface HTMLTooltip {
     closeDelay(_: number): this;
     fitContent(): boolean;
     fitContent(_: boolean): this;
-    
+
 }
 
 HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");

package/src/JSXWidget.ts

@@ -1,9 +1,10 @@
+import React from "react";
+import { render } from "react-dom";
 import { HTMLWidget } from "@hpcc-js/common";
-import { Component, createElement, render } from "@hpcc-js/preact-shim";
 
 export class JSXWidget extends HTMLWidget {
-    static Component = Component;
-    static createElement = createElement;
+    static Component = React.Component;
+    static createElement = React.createElement;
     protected rootNode;
 
     jsxRender(jsx, domNode) {

package/src/SimpleTable.ts

@@ -1,5 +1,4 @@
-import { HTMLWidget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
+import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
 
 export class SimpleTable extends HTMLWidget {
     protected _table;

package/src/StatsTable.ts

@@ -1,5 +1,5 @@
 import { format as d3Format } from "d3-format";
-import { StyledTable } from "./StyledTable";
+import { StyledTable } from "./StyledTable.ts";
 
 export class StatsTable extends StyledTable {
 
@@ -99,5 +99,5 @@ StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font col
 StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
 StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
 StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, {optional: true});
-StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, {optional: true});
+StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
+StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });

package/src/StyledTable.ts

@@ -1,4 +1,4 @@
-import { SimpleTable } from "./SimpleTable";
+import { SimpleTable } from "./SimpleTable.ts";
 
 export class StyledTable extends SimpleTable {
     constructor() {
@@ -30,11 +30,11 @@ export class StyledTable extends SimpleTable {
         const lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
         const tbodyRows = element.selectAll("tbody > tr");
         if (evenRowStylesExist) {
-            const tbodyEvenRows = tbodyRows.select(function (d, i) { return i % 2 ? this : null; });
+            const tbodyEvenRows = tbodyRows.select(function (this: HTMLElement, d, i) { return i % 2 ? this : null; });
             this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
         }
         if (lastRowStylesExist) {
-            const tbodyLastRow = tbodyRows.select(function (d, i, arr) { return i === arr.length - 1 ? this : null; });
+            const tbodyLastRow = tbodyRows.select(function (this: HTMLElement, d, i, arr) { return i === arr.length - 1 ? this : null; });
             this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
         }
     }
@@ -46,18 +46,18 @@ export interface StyledTable {
     fontFamily(_: string): this;
     fontColor(): string;
     fontColor(_: string): this;
-    tbodyColumnStyles(): Array<{[styleID: string]: any}>;
-    tbodyColumnStyles(_: Array<{[styleID: string]: any}>): this;
-    tbodyColumnStyles_default(_: Array<{[styleID: string]: any}>): this;
-    theadColumnStyles(): Array<{[styleID: string]: any}>;
-    theadColumnStyles(_: Array<{[styleID: string]: any}>): this;
-    theadColumnStyles_default(_: Array<{[styleID: string]: any}>): this;
-    lastRowStyles(): {[styleID: string]: any};
-    lastRowStyles(_: {[styleID: string]: any}): this;
-    lastRowStyles_default(_: {[styleID: string]: any}): this;
-    evenRowStyles(): {[styleID: string]: any};
-    evenRowStyles(_: {[styleID: string]: any}): this;
-    evenRowStyles_default(_: {[styleID: string]: any}): this;
+    tbodyColumnStyles(): Array<{ [styleID: string]: any }>;
+    tbodyColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    tbodyColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles(): Array<{ [styleID: string]: any }>;
+    theadColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    lastRowStyles(): { [styleID: string]: any };
+    lastRowStyles(_: { [styleID: string]: any }): this;
+    lastRowStyles_default(_: { [styleID: string]: any }): this;
+    evenRowStyles(): { [styleID: string]: any };
+    evenRowStyles(_: { [styleID: string]: any }): this;
+    evenRowStyles_default(_: { [styleID: string]: any }): this;
 }
 
 StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");

package/src/TitleBar.ts

@@ -1,5 +1,5 @@
 import { HTMLWidget } from "@hpcc-js/common";
-import { JSXWidget } from "./JSXWidget";
+import { JSXWidget } from "./JSXWidget.ts";
 
 import "../src/TitleBar.css";
 
@@ -9,7 +9,6 @@ export interface IClickHandler {
 
 export class Item extends HTMLWidget {
     protected _owner: IClickHandler;
-    protected _element;
 
     constructor(owner: IClickHandler) {
         super();
@@ -17,6 +16,7 @@ export class Item extends HTMLWidget {
         this._tag = "a";
     }
 }
+Item.prototype._class += " html_Item";
 
 export class Button extends Item {
     private _icon: string;
@@ -40,6 +40,7 @@ export class Button extends Item {
             ;
     }
 }
+Button.prototype._class += " html_Button";
 
 export class ToggleButton extends Button {
 
@@ -56,6 +57,7 @@ export class ToggleButton extends Button {
         this._element.classed("selected", this.selected());
     }
 }
+ToggleButton.prototype._class += " html_ToggleButton";
 export interface ToggleButton {
     selected(): boolean;
     selected(_: boolean): this;
@@ -73,6 +75,7 @@ export class Spacer extends Item {
             ;
     }
 }
+Spacer.prototype._class += " html_Spacer";
 
 export class TitleBar extends JSXWidget {
     protected _divMain;

package/src/VizComponent.tsx

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizComponent extends JSXWidget.Component<any, any> {
     widget;

package/src/VizInstance.tsx

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizInstance extends JSXWidget.Component<any, any> {
     widget;

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/html";
-export const PKG_VERSION = "2.44.0";
-export const BUILD_VERSION = "2.107.0";
+export const PKG_VERSION = "3.1.0";
+export const BUILD_VERSION = "3.2.0";

package/src/index.ts

@@ -1,11 +1,11 @@
-export * from "./__package__";
-export * from "./BreakdownTable";
-export * from "./HTMLTooltip";
-export * from "./JSXWidget";
-export * from "./reactD3";
-export * from "./VizComponent";
-export * from "./VizInstance";
-export * from "./SimpleTable";
-export * from "./StatsTable";
-export * from "./StyledTable";
-export * from "./TitleBar";
+export * from "./__package__.ts";
+export * from "./BreakdownTable.ts";
+export * from "./HTMLTooltip.ts";
+export * from "./JSXWidget.ts";
+export * from "./reactD3.ts";
+export * from "./VizComponent.tsx";
+export * from "./VizInstance.tsx";
+export * from "./SimpleTable.ts";
+export * from "./StatsTable.ts";
+export * from "./StyledTable.ts";
+export * from "./TitleBar.ts";

package/src/reactD3.ts

@@ -1,4 +1,4 @@
-import { select as d3Select } from "d3-selection";
+import { select as d3Select } from "@hpcc-js/common";
 
 export type ReactFn = (attrs: { [key: string]: string }) => VNode;
 
@@ -42,7 +42,7 @@ export class VNode {
         return thisElement.enter().append(this.type())
             .attr("reactd3", 0)
             .merge(thisElement)
-            .each(function (d: VNode) {
+            .each(function (this: HTMLElement, d: VNode) {
                 const element = d3Select(this);
                 d.update(element);
                 d.renderChildren(element);
@@ -57,7 +57,7 @@ export class VNode {
         return thisElement.enter().append(d => document.createElement(d.type()))
             .attr("reactd3", (_d, i) => i)
             .merge(thisElement)
-            .each(function (d: VNode) {
+            .each(function (this: HTMLElement, d: VNode) {
                 const element = d3Select(this);
                 d.update(element);
                 d.renderChildren(element);

package/types/BreakdownTable.d.ts

@@ -1,8 +1,7 @@
-import { StyledTable } from "./StyledTable";
+import { HTMLTooltip } from "./HTMLTooltip.ts";
+import { StyledTable } from "./StyledTable.ts";
 export declare class BreakdownTable extends StyledTable {
-    protected _table: any;
-    protected _tbody: any;
-    protected _tooltip: any;
+    protected _tooltip: HTMLTooltip;
     constructor();
     protected transformData(): any[];
     protected breakdownData(limit: number): any[];
@@ -46,4 +45,3 @@ export interface BreakdownTable {
     otherPercentageBold(): boolean;
     otherPercentageBold(_: boolean): this;
 }
-//# sourceMappingURL=BreakdownTable.d.ts.map

package/types/HTMLTooltip.d.ts

@@ -104,4 +104,3 @@ export interface HTMLTooltip {
     fitContent(_: boolean): this;
 }
 export {};
-//# sourceMappingURL=HTMLTooltip.d.ts.map

package/types/JSXWidget.d.ts

@@ -1,9 +1,8 @@
+import React from "react";
 import { HTMLWidget } from "@hpcc-js/common";
-import { Component, createElement } from "@hpcc-js/preact-shim";
 export declare class JSXWidget extends HTMLWidget {
-    static Component: typeof Component;
-    static createElement: typeof createElement;
+    static Component: typeof React.Component;
+    static createElement: typeof React.createElement;
     protected rootNode: any;
     jsxRender(jsx: any, domNode: any): void;
 }
-//# sourceMappingURL=JSXWidget.d.ts.map

package/types/SimpleTable.d.ts

@@ -13,4 +13,3 @@ export interface SimpleTable {
     autoWidth(): boolean;
     autoWidth(_: boolean): this;
 }
-//# sourceMappingURL=SimpleTable.d.ts.map

package/types/StatsTable.d.ts

@@ -1,4 +1,4 @@
-import { StyledTable } from "./StyledTable";
+import { StyledTable } from "./StyledTable.ts";
 export declare class StatsTable extends StyledTable {
     protected transformData(): any;
     update(domNode: any, element: any): void;
@@ -27,4 +27,3 @@ export interface StatsTable {
     thirdColumnFormat(_: string): this;
     thirdColumnFormat_exists(): boolean;
 }
-//# sourceMappingURL=StatsTable.d.ts.map

package/types/StyledTable.d.ts

@@ -1,4 +1,4 @@
-import { SimpleTable } from "./SimpleTable";
+import { SimpleTable } from "./SimpleTable.ts";
 export declare class StyledTable extends SimpleTable {
     constructor();
     protected applyStyleObject(selection: any, styleObject: any): void;
@@ -46,4 +46,3 @@ export interface StyledTable {
         [styleID: string]: any;
     }): this;
 }
-//# sourceMappingURL=StyledTable.d.ts.map

package/types/TitleBar.d.ts

@@ -1,12 +1,11 @@
 import { HTMLWidget } from "@hpcc-js/common";
-import { JSXWidget } from "./JSXWidget";
+import { JSXWidget } from "./JSXWidget.ts";
 import "../src/TitleBar.css";
 export interface IClickHandler {
     titleBarClick(src: Item, d: any, idx: number, groups: any): void;
 }
 export declare class Item extends HTMLWidget {
     protected _owner: IClickHandler;
-    protected _element: any;
     constructor(owner: IClickHandler);
 }
 export declare class Button extends Item {
@@ -40,4 +39,3 @@ export interface TitleBar {
     buttons(): Item[];
     buttons(items: Item[]): this;
 }
-//# sourceMappingURL=TitleBar.d.ts.map

package/types/VizComponent.d.ts

@@ -1,10 +1,10 @@
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 export declare class VizComponent extends JSXWidget.Component<any, any> {
     widget: any;
     refreshProps(): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): any;
+    render(): React.JSX.Element;
     componentDidUpdate(): void;
 }
-//# sourceMappingURL=VizComponent.d.ts.map

package/types/VizInstance.d.ts

@@ -1,10 +1,10 @@
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 export declare class VizInstance extends JSXWidget.Component<any, any> {
     widget: any;
     refreshProps(): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): any;
+    render(): React.JSX.Element;
     componentDidUpdate(): void;
 }
-//# sourceMappingURL=VizInstance.d.ts.map

package/types/__package__.d.ts

@@ -1,4 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/html";
-export declare const PKG_VERSION = "2.44.0";
-export declare const BUILD_VERSION = "2.107.0";
-//# sourceMappingURL=__package__.d.ts.map
+export declare const PKG_VERSION = "3.1.0";
+export declare const BUILD_VERSION = "3.2.0";

package/types/index.d.ts

@@ -1,12 +1,11 @@
-export * from "./__package__";
-export * from "./BreakdownTable";
-export * from "./HTMLTooltip";
-export * from "./JSXWidget";
-export * from "./reactD3";
-export * from "./VizComponent";
-export * from "./VizInstance";
-export * from "./SimpleTable";
-export * from "./StatsTable";
-export * from "./StyledTable";
-export * from "./TitleBar";
-//# sourceMappingURL=index.d.ts.map
+export * from "./__package__.ts";
+export * from "./BreakdownTable.ts";
+export * from "./HTMLTooltip.ts";
+export * from "./JSXWidget.ts";
+export * from "./reactD3.ts";
+export * from "./VizComponent.tsx";
+export * from "./VizInstance.tsx";
+export * from "./SimpleTable.ts";
+export * from "./StatsTable.ts";
+export * from "./StyledTable.ts";
+export * from "./TitleBar.ts";

package/types/reactD3.d.ts

@@ -28,4 +28,3 @@ export declare class ReactD3 {
     }, ...children: Array<string | VNode>): VNode;
     static render(vdom: VNode, targetElement: any): void;
 }
-//# sourceMappingURL=reactD3.d.ts.map