@hpcc-js/dgrid2 3.1.0 → 3.2.0

package/package.json

@@ -1,28 +1,29 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "hpcc-js - DGrid2",
     "type": "module",
+    "main": "./dist/index.umd.cjs",
+    "module": "./dist/index.js",
     "exports": {
         ".": {
             "types": "./types/index.d.ts",
-            "default": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.umd.cjs"
         },
         "./dist/*": "./dist/*"
     },
-    "module": "./dist/index.js",
-    "browser": "./dist/index.js",
+    "browser": "./dist/index.umd.cjs",
     "types": "./types/index.d.ts",
     "files": [
         "dist/*",
         "src/*",
-        "types/*",
-        "font-awesome/**/*"
+        "types/*"
     ],
     "scripts": {
         "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
-        "bundle": "node esbuild.js",
-        "bundle-watch": "npm run bundle -- --development --watch",
+        "bundle": "vite build",
+        "bundle-watch": "vite --port 5507",
         "gen-types": "tsc --project tsconfig.json",
         "gen-types-watch": "npm run gen-types -- --watch",
         "build": "run-p gen-types bundle",
@@ -36,18 +37,14 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.2.0",
-        "@hpcc-js/util": "^3.2.0"
+        "@hpcc-js/common": "^3.3.0",
+        "@hpcc-js/util": "^3.3.0"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react": "18.3.1",
-        "react-data-grid": "7.0.0-beta.47",
-        "react-dom": "18.3.1"
-    },
-    "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "@hpcc-js/esbuild-plugins": "^1.4.0",
+        "@preact/preset-vite": "2.9.2",
+        "preact": "10.25.0",
+        "react-data-grid": "7.0.0-beta.47"
     },
     "repository": {
         "type": "git",
@@ -60,5 +57,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
+    "gitHead": "145a4d4c8189c70f08e9804e63959d6dd398bd9f"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/dgrid2";
-export const PKG_VERSION = "3.1.0";
-export const BUILD_VERSION = "3.2.0";
+export const PKG_VERSION = "3.1.1";
+export const BUILD_VERSION = "3.2.1";

package/src/hooks.ts

@@ -1,11 +1,10 @@
-import React from "react";
+import React from "preact/compat";
 import { Widget } from "@hpcc-js/common";
 
 export function useData(widget: Widget): [string[], Array<string | number>[]] {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const columns: string[] = React.useMemo(() => widget.columns(), [widget, widget.dataChecksum()]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const data: Array<string | number>[] = React.useMemo(() => widget.data(), [widget, widget.dataChecksum()]);
 
     return [columns, data];
 }
+

package/src/reactTable.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
 import { format, timeFormat, timeParse } from "@hpcc-js/common";
 import { useData } from "./hooks.ts";
@@ -23,7 +24,7 @@ interface EmptyRowsRendererProps {
     message: string
 }
 
-const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
+const EmptyRowsRenderer: FunctionComponent<EmptyRowsRendererProps> = ({
     message
 }) => {
 
@@ -33,7 +34,7 @@ const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
 };
 
 interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
-    renderCell?: (props: any) => React.JSX.Element;
+    renderCell?: (props: any) => any;
     __hpcc_pattern?: ReturnType<typeof timeParse>;
     __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
 }
@@ -43,7 +44,7 @@ export interface ReactTableProps {
     sort?: QuerySortItem,
 }
 
-export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
+export const ReactTable: FunctionComponent<ReactTableProps> = ({
     table,
     sort
 }) => {
@@ -53,13 +54,13 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
     const columnPatterns = table.columnPatterns();
     const columnFormats = table.columnFormats();
 
-    const [listColumns, setListColumns] = React.useState<ColumnEx<any[]>[]>([]);
-    const [sortColumn, setSortColumn] = React.useState<SortColumn>();
-    const [rows, setRows] = React.useState<any[]>([]);
-    const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(new Set());
+    const [listColumns, setListColumns] = useState<ColumnEx<any[]>[]>([]);
+    const [sortColumn, setSortColumn] = useState<SortColumn>();
+    const [rows, setRows] = useState<any[]>([]);
+    const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(new Set());
 
     //  Columns  ---
-    React.useEffect(() => {
+    useEffect(() => {
         setListColumns([
             ...multiSelect ? [SelectColumn as ColumnEx<any[]>] : [],
             ...columns.map((column): ColumnEx<any[]> => {
@@ -94,7 +95,7 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
         ]);
     }, [columnFormats, columnPatterns, columnTypes, columns, multiSelect]);
 
-    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
+    const onSortColumnsChange = useCallback((sortColumns: SortColumn[]) => {
         const futureSortColumn = sortColumns.slice(-1)[0];
         const sorted = futureSortColumn !== undefined;
         const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
@@ -102,20 +103,20 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
         setRows(copyAndSort(rows, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
     }, [rows]);
 
-    const rowKeyGetter = React.useCallback((row: any) => {
+    const rowKeyGetter = useCallback((row: any) => {
         return row.key;
     }, []);
 
-    const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
+    const onSelectedRowsChange = useCallback((selectedRows: Set<any>) => {
         setSelectedRows(selectedRows);
     }, []);
 
-    const onCellClick = React.useCallback((row, column) => {
+    const onCellClick = useCallback((row, column) => {
         table.onRowClickCallback(row, column.key);
     }, [table]);
 
     //  Rows  ---
-    React.useEffect(() => {
+    useEffect(() => {
         let items = data.map((row, index) => {
             const retVal = {
                 key: index
@@ -145,7 +146,7 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         rowHeight={20}
-        renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> }}
+        renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
         className={table.darkMode() ? "rdg-dark" : "rdg-light"}
         sortColumns={sortColumn ? [sortColumn] : []}
         onSortColumnsChange={onSortColumnsChange}

package/src/table.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { createRoot, Root } from "react-dom/client";
+import { render, createElement } from "preact";
 import { HTMLWidget } from "@hpcc-js/common";
 import { ReactTable } from "./reactTable.tsx";
 
@@ -10,7 +9,6 @@ export type ColumnType = "boolean" | "number" | "string" | "time";
 export class Table extends HTMLWidget {
 
     protected _div;
-    protected _root: Root;
 
     constructor() {
         super();
@@ -59,18 +57,16 @@ export class Table extends HTMLWidget {
             .append("div")
             .style("display", "grid")
             ;
-        this._root = createRoot(this._div.node());
     }
 
     update(domNode, element) {
         super.update(domNode, element);
         this._div.style("width", this.width() + "px");
         this._div.style("height", this.height() + "px");
-        this._root.render(React.createElement(ReactTable, { table: this }));
+        render(createElement(ReactTable, { table: this }), this._div.node());
     }
 
     exit(domNode, element) {
-        this._root.unmount();
         this._div.remove();
         super.exit(domNode, element);
     }

package/types/__package__.d.ts

@@ -1,3 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/dgrid2";
-export declare const PKG_VERSION = "3.1.0";
-export declare const BUILD_VERSION = "3.2.0";
+export declare const PKG_VERSION = "3.1.1";
+export declare const BUILD_VERSION = "3.2.1";

package/types/reactTable.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 import type { Table } from "./table.ts";
 import "react-data-grid/lib/styles.css";
 export type QuerySortItem = {
@@ -9,4 +9,4 @@ export interface ReactTableProps {
     table: Table;
     sort?: QuerySortItem;
 }
-export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
+export declare const ReactTable: FunctionComponent<ReactTableProps>;

package/types/table.d.ts

@@ -1,10 +1,8 @@
-import { Root } from "react-dom/client";
 import { HTMLWidget } from "@hpcc-js/common";
 import "./table.css";
 export type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
-    protected _root: Root;
     constructor();
     columnType(column: string): ColumnType;
     columnType(column: string, type: ColumnType): this;