@hpcc-js/react 2.54.0 → 3.1.0

package/package.json

@@ -1,49 +1,50 @@
 {
     "name": "@hpcc-js/react",
-    "version": "2.54.0",
+    "version": "3.1.0",
     "description": "hpcc-js - Viz React",
-    "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.72.0",
-        "@hpcc-js/preact-shim": "^2.17.0"
+        "@hpcc-js/common": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
-        "tslib": "2.6.3"
+        "@hpcc-js/esbuild-plugins": "^1.3.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",
@@ -56,5 +57,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "99332f074dd1fff0cbb8eae52c5b6c98d6ad5a7a"
+    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
 }

package/src/ImageChar.tsx

@@ -1,7 +1,7 @@
+import React, { useMemo } from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
 
-interface ImageChar {
+export interface ImageCharProps {
     x?: number;
     y?: number;
     height?: number;
@@ -10,19 +10,21 @@ interface ImageChar {
     fontFamily?: string;
     char?: string;
     yOffset?: number;
+    fontWeight?: number;
 }
 
-export const ImageChar: React.FunctionComponent<ImageChar> = ({
+export const ImageChar: React.FunctionComponent<ImageCharProps> = ({
     x,
     y = 0,
     height = 12,
     fill,
     stroke,
     fontFamily = "FontAwesome",
-    char = ""
+    char = "",
+    fontWeight
 }) => {
 
-    const renderChar = React.useMemo(() => {
+    const renderChar = useMemo(() => {
         return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
     }, [char, fontFamily]);
 
@@ -31,9 +33,10 @@ export const ImageChar: React.FunctionComponent<ImageChar> = ({
         y={y}
         fill={fill}
         stroke={stroke}
-        font-family={fontFamily}
-        font-size={`${height}px`}
-        dominant-baseline="middle"
-        style="text-anchor: middle;alignment-baseline:middle;"
+        fontFamily={fontFamily}
+        fontSize={`${height}px`}
+        fontWeight={fontWeight}
+        dominantBaseline="middle"
+        style={{ textAnchor: "middle", alignmentBaseline: "middle" }}
     >{renderChar}</text>;
 };

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/react";
-export const PKG_VERSION = "2.54.0";
-export const BUILD_VERSION = "2.106.0";
+export const PKG_VERSION = "3.1.0";
+export const BUILD_VERSION = "3.2.0";

package/src/edge.tsx

@@ -1,6 +1,6 @@
-import * as React from "@hpcc-js/preact-shim";
-import { VertexProps } from "./vertex";
-import { Text } from "./text";
+import React from "react";
+import { VertexProps } from "./vertex.tsx";
+import { Text } from "./text.tsx";
 
 type Point = [number, number];
 

package/src/icon.tsx

@@ -1,10 +1,10 @@
+import React from "react";
 import { Palette } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Image } from "./image";
-import { ImageChar } from "./ImageChar";
-import { Shape } from "./shape";
+import { Image } from "./image.tsx";
+import { ImageChar } from "./ImageChar.tsx";
+import { Shape } from "./shape.tsx";
 
-export interface Icon {
+export interface IconProps {
     shape?: "circle" | "square" | "rectangle";
     width?: number;
     height?: number;
@@ -22,7 +22,7 @@ export interface Icon {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Icon: React.FunctionComponent<Icon> = ({
+export const Icon: React.FunctionComponent<IconProps> = ({
     shape = "circle",
     width,
     height = 32,
@@ -64,21 +64,21 @@ export const Icon: React.FunctionComponent<Icon> = ({
                 fontFamily={imageFontFamily}
                 char={imageChar}
                 fill={imageCharFill}
-                font-weight={400}
+                fontWeight={400}
             ></ImageChar>
         }
     </>;
 };
 
-export interface IconEx extends Icon {
+export interface IconEx extends IconProps {
     id: string;
 }
 
-export interface Icons {
+export interface IconsProps {
     icons: IconEx[];
 }
 
-export const Icons: React.FunctionComponent<Icons> = ({
+export const Icons: React.FunctionComponent<IconsProps> = ({
     icons = []
 }) => {
     const IconComponents = icons.map(cat => {

package/src/image.tsx

@@ -1,6 +1,6 @@
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 
-interface Image {
+interface ImageProps {
     href: string;
     x?: number;
     y?: number;
@@ -8,7 +8,7 @@ interface Image {
     yOffset?: number;
 }
 
-export const Image: React.FunctionComponent<Image> = ({
+export const Image: React.FunctionComponent<ImageProps> = ({
     href,
     x,
     y = 0,

package/src/index.ts

@@ -1,18 +1,20 @@
-export * from "./__package__";
+export * from "./__package__.ts";
 
-export * from "./edge";
-export * from "./ImageChar";
-export * from "./icon";
-export * from "./render";
-export * from "./shape";
-export * from "./text";
-export * from "./vertex";
-export * from "./vertex2";
-export * from "./vertex3";
-export * from "./vertex4";
-export * from "./subgraph";
+export * from "./edge.tsx";
+export * from "./ImageChar.tsx";
+export * from "./icon.tsx";
+export * from "./image.tsx";
+export * from "./render.ts";
+export * from "./shape.tsx";
+export * from "./span.tsx";
+export * from "./text.tsx";
+export * from "./vertex.tsx";
+export * from "./vertex2.tsx";
+export * from "./vertex3.tsx";
+export * from "./vertex4.tsx";
+export * from "./subgraph.tsx";
 
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 export {
     React
 };

package/src/render.ts

@@ -1,21 +1,17 @@
-import { HTMLWidget, publish, SVGWidget } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
+import { render as reactRender } from "react-dom";
+import { createRoot, Root } from "react-dom/client";
+import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
 
-export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
-    React.render(React.h(C, props), parent, replaceNode);
-}
-
-export interface FunctionComponent<T> extends React.FunctionComponent<T> {
-}
-
-export function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
-    React.render(React.h("svg", null, React.h(C, props)), parent, replaceNode);
+export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment) {
+    const re = React.createElement(C, props);
+    reactRender(re, parent);
 }
 
 export class HTMLAdapter<P> extends HTMLWidget {
 
-    @publish({}, "object", "Properties")
-    protected _props: P = {} as P;
+    protected _root: Root;
+
     props(): P;
     props(_: Partial<P>): this;
     props(_?: Partial<P>): P | this {
@@ -36,16 +32,32 @@ export class HTMLAdapter<P> extends HTMLWidget {
         super();
     }
 
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._root = createRoot(domNode);
+    }
+
     update(domNode, element) {
         super.update(domNode, element);
-        render(this._component, this._props, domNode);
+        this._root.render(React.createElement(this._component, this.props()));
+    }
+
+    exit(domNode, element) {
+        this._root.unmount();
+        super.exit(domNode, element);
     }
 }
+HTMLAdapter.prototype._class += " react_HTMLAdapter";
+
+export interface HTMLAdapter<P> {
+    _props: P;
+}
+HTMLAdapter.prototype.publish("props", {}, "object", "Properties");
 
 export class SVGAdapter<P> extends SVGWidget {
 
-    @publish({}, "object", "Properties")
-    protected _props: P = {} as P;
+    protected _root: Root;
+
     props(): P;
     props(_: Partial<P>): this;
     props(_?: Partial<P>): P | this {
@@ -66,8 +78,25 @@ export class SVGAdapter<P> extends SVGWidget {
         super();
     }
 
+    _c2: React.ReactElement;
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._root = createRoot(domNode);
+    }
+
     update(domNode, element) {
         super.update(domNode, element);
-        render(this._component, this._props, domNode);
+        this._root.render(React.createElement(this._component, this.props()));
     }
+
+    exit(domNode, element) {
+        this._root.unmount();
+        super.exit(domNode, element);
+    }
+}
+SVGAdapter.prototype._class += " react_SVGAdapter";
+
+export interface SVGAdapter<P> {
+    _props: P;
 }
+SVGAdapter.prototype.publish("props", {}, "object", "Properties");

package/src/shape.tsx

@@ -1,6 +1,6 @@
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 
-interface Circle {
+interface CircleProps {
     radius?: number;
     fill?: string;
     stroke?: string;
@@ -8,7 +8,7 @@ interface Circle {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Circle: React.FunctionComponent<Circle> = ({
+export const Circle: React.FunctionComponent<CircleProps> = ({
     radius = 32,
     fill = "navy",
     stroke = fill,
@@ -18,11 +18,11 @@ export const Circle: React.FunctionComponent<Circle> = ({
         r={radius}
         fill={fill}
         stroke={stroke}
-        stroke-width={strokeWidth}
-        shape-rendering={shapeRendering}
+        strokeWidth={strokeWidth}
+        shapeRendering={shapeRendering}
     />;
 
-interface Square {
+interface SquareProps {
     radius?: number;
     cornerRadius?: number;
     fill?: string;
@@ -31,7 +31,7 @@ interface Square {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Square: React.FunctionComponent<Square> = ({
+export const Square: React.FunctionComponent<SquareProps> = ({
     radius = 30,
     cornerRadius = 0,
     fill = "white",
@@ -47,11 +47,11 @@ export const Square: React.FunctionComponent<Square> = ({
         height={radius * 2}
         fill={fill}
         stroke={stroke || fill}
-        stroke-width={strokeWidth}
-        shape-rendering={shapeRendering}
+        strokeWidth={strokeWidth}
+        shapeRendering={shapeRendering}
     />;
 
-interface Rectangle {
+interface RectangleProps {
     width?: number;
     height?: number;
     cornerRadius?: number;
@@ -61,7 +61,7 @@ interface Rectangle {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Rectangle: React.FunctionComponent<Rectangle> = ({
+export const Rectangle: React.FunctionComponent<RectangleProps> = ({
     width = 30,
     height = 30,
     cornerRadius = 0,
@@ -79,12 +79,12 @@ export const Rectangle: React.FunctionComponent<Rectangle> = ({
         height={height}
         fill={fill}
         stroke={stroke || fill}
-        stroke-width={strokeWidth}
-        shape-rendering={shapeRendering}
+        strokeWidth={strokeWidth}
+        shapeRendering={shapeRendering}
     />;
 };
 
-interface Shape {
+interface ShapeProps {
     shape?: "circle" | "square" | "rectangle";
     height?: number;
     width?: number;
@@ -95,7 +95,7 @@ interface Shape {
     cornerRadius?: number;
 }
 
-export const Shape: React.FunctionComponent<Shape> = ({
+export const Shape: React.FunctionComponent<ShapeProps> = ({
     shape = "circle",
     height = 128,
     width,

package/src/span.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface SpanProps {
+    text: string;
+}
+
+export const Span: React.FunctionComponent<SpanProps> = ({
+    text
+}) => <span>{text}</span>;

package/src/subgraph.tsx

@@ -1,7 +1,7 @@
+import React from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Rectangle } from "./shape";
-import { Text } from "./text";
+import { Rectangle } from "./shape.tsx";
+import { Text } from "./text.tsx";
 
 export interface SubgraphProps {
     id: string;

package/src/text.tsx

@@ -1,9 +1,9 @@
+import React from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { Rectangle } from "./shape";
+import { Icon } from "./icon.tsx";
+import { Rectangle } from "./shape.tsx";
 
-interface TextLine {
+export interface TextLineProps {
     text: string;
     height?: number;
     anchor?: string;
@@ -12,7 +12,7 @@ interface TextLine {
     fill?: string;
 }
 
-export const TextLine: React.FunctionComponent<TextLine> = ({
+export const TextLine: React.FunctionComponent<TextLineProps> = ({
     text,
     height = 12,
     anchor = "middle",
@@ -21,15 +21,15 @@ export const TextLine: React.FunctionComponent<TextLine> = ({
     fill = "black"
 }) => {
     return <text
-        font-family={fontFamily}
-        font-size={`${height}px`}
-        text-anchor={anchor}
-        dominant-baseline={baseline}
+        fontFamily={fontFamily}
+        fontSize={`${height}px`}
+        textAnchor={anchor}
+        dominantBaseline={baseline}
         fill={fill}
     >{text}</text>;
 };
 
-interface Text {
+export interface TextProps {
     text: string;
     height?: number;
     fontFamily?: string;
@@ -37,35 +37,36 @@ interface Text {
     onSizeUpdate?: (size: { width: number, height: number }) => void;
 }
 
-export const Text: React.FunctionComponent<Text> = ({
+export const Text: React.FunctionComponent<TextProps> = ({
     text,
     height = 12,
     fontFamily = "Verdana",
     fill = "black",
     onSizeUpdate
 }) => {
-    const [totalWidth, setTotalWidthUpdate] = React.useState(0);
-    const [totalHeight, setTotalHeightUpdate] = React.useState(0);
+    const [totalWidth, setTotalWidth] = React.useState(0);
+    const [totalHeight, setTotalHeight] = React.useState(0);
 
     React.useEffect(() => {
-        onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
+        if (onSizeUpdate) {
+            onSizeUpdate({ width: totalWidth, height: totalHeight });
+        }
     }, [totalWidth, totalHeight, onSizeUpdate]);
 
     const parts = React.useMemo(() => {
         return text.split("\n");
     }, [text]);
 
-    const ts = React.useMemo(() => {
-        return Utility.textSize(parts, fontFamily, height);
+    React.useLayoutEffect(() => {
+        const size = Utility.textSize(parts, fontFamily, height);
+        setTotalWidth(size.width);
+        setTotalHeight(size.height);
     }, [fontFamily, height, parts]);
 
-    setTotalWidthUpdate(ts.width);
-    setTotalHeightUpdate(parts.length * (height + 2) - 2);
-
-    const yOffset = -(totalHeight / 2) + (height / 2);
     const TextLines = React.useMemo(() => {
+        const yOffset = -(totalHeight / 2) + (height / 2);
         return parts.map((p, i) => {
-            return <g key={i} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
+            return <g key={`key-${i}`} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
                 <TextLine
                     text={p}
                     height={height}
@@ -74,12 +75,12 @@ export const Text: React.FunctionComponent<Text> = ({
                 />
             </g>;
         });
-    }, [fill, fontFamily, height, parts, yOffset]);
+    }, [parts, totalHeight, height, fontFamily, fill]);
 
-    return <>{TextLines}</>;
+    return <g>{TextLines}</g>;
 };
 
-export interface TextBox {
+export interface TextBoxProps {
     text: string;
     height?: number;
     fontFamily?: string;
@@ -93,7 +94,7 @@ export interface TextBox {
     onSizeUpdate?: (size: { width: number, height: number }) => void;
 }
 
-export const TextBox: React.FunctionComponent<TextBox> = ({
+export const TextBox: React.FunctionComponent<TextBoxProps> = ({
     text,
     height = 12,
     fontFamily = "Verdana",
@@ -109,7 +110,9 @@ export const TextBox: React.FunctionComponent<TextBox> = ({
     const [textHeight, setTextHeightUpdate] = React.useState(0);
 
     React.useEffect(() => {
-        onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
+        if (onSizeUpdate) {
+            onSizeUpdate({ width: textWidth, height: textHeight });
+        }
     }, [textWidth, textHeight, onSizeUpdate]);
 
     const onTextSizeUpdate = React.useCallback(size => {
@@ -142,17 +145,11 @@ export const TextBox: React.FunctionComponent<TextBox> = ({
     </>;
 };
 
-export interface LabelledRect extends TextBox {
+export interface LabelledRect extends TextBoxProps {
     width?: number;
     fontSize?: number;
 }
 
-export interface IconLabelledRect extends LabelledRect {
-    icon: string;
-    iconFontFamily: string;
-    iconFontSize: number;
-}
-
 export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
     text,
     height = 12,
@@ -165,18 +162,34 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
     textFill = "black",
     strokeWidth = 1,
     cornerRadius = 0,
-    onSizeUpdate = (size: { width: number, height: number }) => { }
+    onSizeUpdate
 }) => {
+
+    const [actualWidth, setActualWidthUpdate] = React.useState(width);
+    const [actualHeight, setActualHeightUpdate] = React.useState(height);
+
+    React.useLayoutEffect(() => {
+        const size = Utility.textSize(text, fontFamily, fontSize);
+        setActualWidthUpdate(size.width + padding * 2);
+        setActualHeightUpdate(size.height + padding * 2);
+    }, [text, fontFamily, fontSize, padding]);
+
+    React.useLayoutEffect(() => {
+        if (onSizeUpdate) {
+            onSizeUpdate({ width: actualWidth, height: actualHeight });
+        }
+    }, [actualWidth, actualHeight, padding, onSizeUpdate]);
+
     return <>
         <Rectangle
-            width={width}
-            height={height}
+            width={actualWidth}
+            height={actualHeight}
             fill={fill}
             stroke={stroke}
             strokeWidth={strokeWidth}
             cornerRadius={cornerRadius}
         />
-        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
+        <g transform={`translate(${-(actualWidth / 2) + padding} ${-(actualHeight / 2) + padding + fontSize * 0.15})`}>
             <TextLine
                 text={text}
                 fontFamily={fontFamily}
@@ -189,6 +202,12 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
     </>;
 };
 
+export interface IconLabelledRect extends LabelledRect {
+    icon: string;
+    iconFontFamily?: string;
+    iconFontSize?: number;
+}
+
 export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
     icon,
     iconFontFamily,
@@ -202,9 +221,9 @@ export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
     stroke = "lightgray",
     textFill = "black",
     strokeWidth = 1,
-    cornerRadius = 0,
-    onSizeUpdate = (size: { width: number, height: number }) => { }
+    cornerRadius = 0
 }) => {
+
     return <>
         <Rectangle
             width={width}