@hpcc-js/react 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/react",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "description": "hpcc-js - Viz React",
     "type": "module",
     "exports": {
@@ -39,12 +39,7 @@
     },
     "devDependencies": {
         "@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"
+        "@hpcc-js/preact-shim": "^3.0.0"
     },
     "repository": {
         "type": "git",
@@ -57,5 +52,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
+    "gitHead": "b4f63e027feea45ebdfc578ef9c85d107bd97322"
 }

package/src/ImageChar.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 
 export interface ImageCharProps {
     x?: number;
@@ -24,7 +24,7 @@ export const ImageChar: React.FunctionComponent<ImageCharProps> = ({
     fontWeight
 }) => {
 
-    const renderChar = useMemo(() => {
+    const renderChar = React.useMemo(() => {
         return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
     }, [char, fontFamily]);
 

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/react";
-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/edge.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { VertexProps } from "./vertex.tsx";
 import { Text } from "./text.tsx";
 

package/src/icon.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Palette } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Image } from "./image.tsx";
 import { ImageChar } from "./ImageChar.tsx";
 import { Shape } from "./shape.tsx";

package/src/image.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 interface ImageProps {
     href: string;

package/src/index.ts

@@ -14,7 +14,7 @@ export * from "./vertex3.tsx";
 export * from "./vertex4.tsx";
 export * from "./subgraph.tsx";
 
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export {
     React
 };

package/src/render.ts

@@ -1,16 +1,18 @@
-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";
+import * as React from "@hpcc-js/preact-shim";
 
-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 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 class HTMLAdapter<P> extends HTMLWidget {
+export interface FunctionComponent<T> extends React.FunctionComponent<T> {
+}
 
-    protected _root: Root;
+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 class HTMLAdapter<P> extends HTMLWidget {
 
     props(): P;
     props(_: Partial<P>): this;
@@ -32,19 +34,9 @@ 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);
-        this._root.render(React.createElement(this._component, this.props()));
-    }
-
-    exit(domNode, element) {
-        this._root.unmount();
-        super.exit(domNode, element);
+        render(this._component, this._props, domNode);
     }
 }
 HTMLAdapter.prototype._class += " react_HTMLAdapter";
@@ -56,8 +48,6 @@ HTMLAdapter.prototype.publish("props", {}, "object", "Properties");
 
 export class SVGAdapter<P> extends SVGWidget {
 
-    protected _root: Root;
-
     props(): P;
     props(_: Partial<P>): this;
     props(_?: Partial<P>): P | this {
@@ -78,20 +68,9 @@ 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);
-        this._root.render(React.createElement(this._component, this.props()));
-    }
-
-    exit(domNode, element) {
-        this._root.unmount();
-        super.exit(domNode, element);
+        render(this._component, this._props, domNode);
     }
 }
 SVGAdapter.prototype._class += " react_SVGAdapter";

package/src/shape.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 interface CircleProps {
     radius?: number;

package/src/span.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 export interface SpanProps {
     text: string;

package/src/subgraph.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Rectangle } from "./shape.tsx";
 import { Text } from "./text.tsx";
 

package/src/text.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon } from "./icon.tsx";
 import { Rectangle } from "./shape.tsx";
 
@@ -21,10 +21,10 @@ export const TextLine: React.FunctionComponent<TextLineProps> = ({
     fill = "black"
 }) => {
     return <text
-        fontFamily={fontFamily}
-        fontSize={`${height}px`}
-        textAnchor={anchor}
-        dominantBaseline={baseline}
+        font-family={fontFamily}
+        font-size={`${height}px`}
+        text-anchor={anchor}
+        dominant-baseline={baseline}
         fill={fill}
     >{text}</text>;
 };

package/src/vertex.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 

package/src/vertex2.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 import { Annotations, VertexProps } from "./vertex.tsx";

package/src/vertex3.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
 import { VertexProps } from "./vertex.tsx";

package/src/vertex4.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
 import { VertexProps } from "./vertex.tsx";

package/types/ImageChar.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export interface ImageCharProps {
     x?: number;
     y?: number;

package/types/__package__.d.ts

@@ -1,3 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/react";
-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/edge.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { VertexProps } from "./vertex.tsx";
 type Point = [number, number];
 export interface EdgeProps<V extends VertexProps = VertexProps> {

package/types/icon.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export interface IconProps {
     shape?: "circle" | "square" | "rectangle";
     width?: number;

package/types/image.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 interface ImageProps {
     href: string;
     x?: number;

package/types/index.d.ts

@@ -12,5 +12,5 @@ export * from "./vertex2.tsx";
 export * from "./vertex3.tsx";
 export * from "./vertex4.tsx";
 export * from "./subgraph.tsx";
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export { React };

package/types/render.d.ts

@@ -1,34 +1,29 @@
-import React from "react";
-import { Root } from "react-dom/client";
 import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
-export declare function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment): void;
+import * as React from "@hpcc-js/preact-shim";
+export declare function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
+export interface FunctionComponent<T> extends React.FunctionComponent<T> {
+}
+export declare function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
 export declare class HTMLAdapter<P> extends HTMLWidget {
     protected readonly _component: React.FunctionComponent<P>;
-    protected _root: Root;
     props(): P;
     props(_: Partial<P>): this;
     prop<K extends keyof P>(_: K): P[K];
     prop<K extends keyof P>(_: K, value: P[K]): this;
     constructor(_component: React.FunctionComponent<P>);
-    enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
-    exit(domNode: any, element: any): void;
 }
 export interface HTMLAdapter<P> {
     _props: P;
 }
 export declare class SVGAdapter<P> extends SVGWidget {
     protected readonly _component: React.FunctionComponent<P>;
-    protected _root: Root;
     props(): P;
     props(_: Partial<P>): this;
     prop<K extends keyof P>(_: K): P[K];
     prop<K extends keyof P>(_: K, value: P[K]): this;
     constructor(_component: React.FunctionComponent<P>);
-    _c2: React.ReactElement;
-    enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
-    exit(domNode: any, element: any): void;
 }
 export interface SVGAdapter<P> {
     _props: P;

package/types/shape.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 interface CircleProps {
     radius?: number;
     fill?: string;

package/types/span.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export interface SpanProps {
     text: string;
 }

package/types/subgraph.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export interface SubgraphProps {
     id: string;
     origData?: any;

package/types/text.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export interface TextLineProps {
     text: string;
     height?: number;

package/types/vertex.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { IconProps } from "./icon.tsx";
 export interface AnnotationsProps {
     x: number;

package/types/vertex2.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { VertexProps } from "./vertex.tsx";
 export declare const Vertex2: React.FunctionComponent<VertexProps>;

package/types/vertex3.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { IconProps } from "./icon.tsx";
 import { TextBoxProps } from "./text.tsx";
 import { VertexProps } from "./vertex.tsx";

package/types/vertex4.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { IconProps } from "./icon.tsx";
 import { VertexProps } from "./vertex.tsx";
 export interface IVertex4Annotation extends IconProps {