@hpcc-js/react 3.1.0 → 3.2.0

package/src/render.ts

@@ -1,16 +1,15 @@
-import React from "react";
-import { render as reactRender } from "react-dom";
-import { createRoot, Root } from "react-dom/client";
+import { h, FunctionComponent, render as preactRender } from "preact";
 import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
 
-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: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    preactRender(h(C, props), parent, replaceNode);
 }
 
-export class HTMLAdapter<P> extends HTMLWidget {
+export function svgRender<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    preactRender(h("svg", null, h(C, props)), parent, replaceNode);
+}
 
-    protected _root: Root;
+export class HTMLAdapter<P> extends HTMLWidget {
 
     props(): P;
     props(_: Partial<P>): this;
@@ -28,23 +27,13 @@ export class HTMLAdapter<P> extends HTMLWidget {
         return this;
     }
 
-    constructor(protected readonly _component: React.FunctionComponent<P>) {
+    constructor(protected readonly _component: FunctionComponent<P>) {
         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 +45,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 {
@@ -74,24 +61,13 @@ export class SVGAdapter<P> extends SVGWidget {
         return this;
     }
 
-    constructor(protected readonly _component: React.FunctionComponent<P>) {
+    constructor(protected readonly _component: FunctionComponent<P>) {
         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 { FunctionComponent } from "preact";
 
 interface CircleProps {
     radius?: number;
@@ -8,7 +8,7 @@ interface CircleProps {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Circle: React.FunctionComponent<CircleProps> = ({
+export const Circle: FunctionComponent<CircleProps> = ({
     radius = 32,
     fill = "navy",
     stroke = fill,
@@ -31,7 +31,7 @@ interface SquareProps {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Square: React.FunctionComponent<SquareProps> = ({
+export const Square: FunctionComponent<SquareProps> = ({
     radius = 30,
     cornerRadius = 0,
     fill = "white",
@@ -61,7 +61,7 @@ interface RectangleProps {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Rectangle: React.FunctionComponent<RectangleProps> = ({
+export const Rectangle: FunctionComponent<RectangleProps> = ({
     width = 30,
     height = 30,
     cornerRadius = 0,
@@ -95,7 +95,7 @@ interface ShapeProps {
     cornerRadius?: number;
 }
 
-export const Shape: React.FunctionComponent<ShapeProps> = ({
+export const Shape: FunctionComponent<ShapeProps> = ({
     shape = "circle",
     height = 128,
     width,

package/src/span.tsx

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

package/src/subgraph.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 import { Utility } from "@hpcc-js/common";
 import { Rectangle } from "./shape.tsx";
 import { Text } from "./text.tsx";
@@ -15,7 +15,7 @@ export interface SubgraphProps {
     fontFamily?: string;
 }
 
-export const Subgraph: React.FunctionComponent<SubgraphProps> = ({
+export const Subgraph: FunctionComponent<SubgraphProps> = ({
     text,
     width = 100,
     height = 100,

package/src/text.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "preact/hooks";
 import { Utility } from "@hpcc-js/common";
 import { Icon } from "./icon.tsx";
 import { Rectangle } from "./shape.tsx";
@@ -12,7 +13,7 @@ export interface TextLineProps {
     fill?: string;
 }
 
-export const TextLine: React.FunctionComponent<TextLineProps> = ({
+export const TextLine: FunctionComponent<TextLineProps> = ({
     text,
     height = 12,
     anchor = "middle",
@@ -21,10 +22,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>;
 };
@@ -37,33 +38,33 @@ export interface TextProps {
     onSizeUpdate?: (size: { width: number, height: number }) => void;
 }
 
-export const Text: React.FunctionComponent<TextProps> = ({
+export const Text: FunctionComponent<TextProps> = ({
     text,
     height = 12,
     fontFamily = "Verdana",
     fill = "black",
     onSizeUpdate
 }) => {
-    const [totalWidth, setTotalWidth] = React.useState(0);
-    const [totalHeight, setTotalHeight] = React.useState(0);
+    const [totalWidth, setTotalWidth] = useState(0);
+    const [totalHeight, setTotalHeight] = useState(0);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (onSizeUpdate) {
             onSizeUpdate({ width: totalWidth, height: totalHeight });
         }
     }, [totalWidth, totalHeight, onSizeUpdate]);
 
-    const parts = React.useMemo(() => {
+    const parts = useMemo(() => {
         return text.split("\n");
     }, [text]);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const size = Utility.textSize(parts, fontFamily, height);
         setTotalWidth(size.width);
         setTotalHeight(size.height);
     }, [fontFamily, height, parts]);
 
-    const TextLines = React.useMemo(() => {
+    const TextLines = useMemo(() => {
         const yOffset = -(totalHeight / 2) + (height / 2);
         return parts.map((p, i) => {
             return <g key={`key-${i}`} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
@@ -94,7 +95,7 @@ export interface TextBoxProps {
     onSizeUpdate?: (size: { width: number, height: number }) => void;
 }
 
-export const TextBox: React.FunctionComponent<TextBoxProps> = ({
+export const TextBox: FunctionComponent<TextBoxProps> = ({
     text,
     height = 12,
     fontFamily = "Verdana",
@@ -106,16 +107,16 @@ export const TextBox: React.FunctionComponent<TextBoxProps> = ({
     cornerRadius = 0,
     onSizeUpdate
 }) => {
-    const [textWidth, setTextWidthUpdate] = React.useState(0);
-    const [textHeight, setTextHeightUpdate] = React.useState(0);
+    const [textWidth, setTextWidthUpdate] = useState(0);
+    const [textHeight, setTextHeightUpdate] = useState(0);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (onSizeUpdate) {
             onSizeUpdate({ width: textWidth, height: textHeight });
         }
     }, [textWidth, textHeight, onSizeUpdate]);
 
-    const onTextSizeUpdate = React.useCallback(size => {
+    const onTextSizeUpdate = useCallback(size => {
         setTextWidthUpdate(size.width);
         setTextHeightUpdate(size.height);
     }, []);
@@ -150,7 +151,7 @@ export interface LabelledRect extends TextBoxProps {
     fontSize?: number;
 }
 
-export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
+export const LabelledRect: FunctionComponent<LabelledRect> = ({
     text,
     height = 12,
     width = 12,
@@ -165,16 +166,16 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
     onSizeUpdate
 }) => {
 
-    const [actualWidth, setActualWidthUpdate] = React.useState(width);
-    const [actualHeight, setActualHeightUpdate] = React.useState(height);
+    const [actualWidth, setActualWidthUpdate] = useState(width);
+    const [actualHeight, setActualHeightUpdate] = useState(height);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const size = Utility.textSize(text, fontFamily, fontSize);
         setActualWidthUpdate(size.width + padding * 2);
         setActualHeightUpdate(size.height + padding * 2);
     }, [text, fontFamily, fontSize, padding]);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (onSizeUpdate) {
             onSizeUpdate({ width: actualWidth, height: actualHeight });
         }
@@ -182,14 +183,14 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
 
     return <>
         <Rectangle
-            width={actualWidth}
-            height={actualHeight}
+            width={width}
+            height={height}
             fill={fill}
             stroke={stroke}
             strokeWidth={strokeWidth}
             cornerRadius={cornerRadius}
         />
-        <g transform={`translate(${-(actualWidth / 2) + padding} ${-(actualHeight / 2) + padding + fontSize * 0.15})`}>
+        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
             <TextLine
                 text={text}
                 fontFamily={fontFamily}
@@ -208,7 +209,7 @@ export interface IconLabelledRect extends LabelledRect {
     iconFontSize?: number;
 }
 
-export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
+export const IconLabelledRect: FunctionComponent<IconLabelledRect> = ({
     icon,
     iconFontFamily,
     text,

package/src/vertex.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 
@@ -9,7 +10,7 @@ export interface AnnotationsProps {
     stepSize?: number;
 }
 
-export const Annotations: React.FunctionComponent<AnnotationsProps> = ({
+export const Annotations: FunctionComponent<AnnotationsProps> = ({
     x,
     y,
     annotationIDs = [],
@@ -20,7 +21,7 @@ export const Annotations: React.FunctionComponent<AnnotationsProps> = ({
         transform={`translate(${x + i * stepSize} ${y})`}
     >
         <use
-            href={"#" + id}
+            xlinkHref={"#" + id}
         />
     </g>
     );
@@ -47,7 +48,7 @@ export interface VertexProps {
     scale?: number
 }
 
-export const Vertex: React.FunctionComponent<VertexProps> = ({
+export const Vertex: FunctionComponent<VertexProps> = ({
     categoryID = "",
     text = "",
     textHeight = 12,
@@ -70,10 +71,10 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
         ...icon
     };
 
-    const [textBoxWidth, setTextBoxWidthUpdate] = React.useState(0);
-    const [textBoxHeight, setTextBoxHeightUpdate] = React.useState(0);
+    const [textBoxWidth, setTextBoxWidthUpdate] = useState(0);
+    const [textBoxHeight, setTextBoxHeightUpdate] = useState(0);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (onSizeUpdate) {
             onSizeUpdate({ width: 0, height: 0 });
         }
@@ -89,7 +90,7 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
         annotationOffsetY -= textBoxHeight + textPadding;
     }
 
-    const onTextBoxSizeUpdate = React.useCallback(size => {
+    const onTextBoxSizeUpdate = useCallback(size => {
         setTextBoxWidthUpdate(size.width);
         setTextBoxHeightUpdate(size.height);
     }, []);
@@ -108,7 +109,7 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
     </g> : undefined;
     return categoryID ?
         <g transform={`translate(0 ${offsetY}) scale(${scale})`}>
-            <use href={"#" + categoryID} />
+            <use xlinkHref={"#" + categoryID} />
             {label}
             <Annotations x={width / 2} y={annotationOffsetY} annotationIDs={annotationIDs} />
         </g> :

package/src/vertex2.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useMemo } from "preact/hooks";
 import { Utility } from "@hpcc-js/common";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 import { Annotations, VertexProps } from "./vertex.tsx";
 
-export const Vertex2: React.FunctionComponent<VertexProps> = ({
+export const Vertex2: FunctionComponent<VertexProps> = ({
     categoryID = "",
     text = "",
     textHeight = 12,
@@ -26,7 +27,7 @@ export const Vertex2: React.FunctionComponent<VertexProps> = ({
         ...icon
     };
     const textBoxHeight = textHeight + textPadding * 2;
-    const { width } = React.useMemo(() => {
+    const { width } = useMemo(() => {
         return Utility.textSize(text, textFontFamily, textHeight, false);
     }, [text, textFontFamily, textHeight]);
 
@@ -51,7 +52,7 @@ export const Vertex2: React.FunctionComponent<VertexProps> = ({
                 transform={`translate(${iconOffsetX} ${iconOffsetY})`}
             >
                 <use
-                    href={"#" + categoryID}
+                    xlinkHref={"#" + categoryID}
                 />
             </g>
             <g

package/src/vertex3.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useMemo } from "preact/hooks";
 import { Utility } from "@hpcc-js/common";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
@@ -29,7 +30,7 @@ export interface Vertex3Props extends VertexProps {
     scale?: number;
 }
 
-export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
+export const Vertex3: FunctionComponent<Vertex3Props> = ({
     text = "",
     textHeight = 10,
     textPadding = 4,
@@ -79,7 +80,7 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
 
     const annoOffsetY = 0;
 
-    const labelWidth = React.useMemo(() => {
+    const labelWidth = useMemo(() => {
         return Utility.textSize(text, textFontFamily, textHeight, false).width;
     }, [text, textFontFamily, textHeight]);
 
@@ -174,7 +175,7 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
     </g >;
 };
 
-export const CentroidVertex3: React.FunctionComponent<Vertex3Props> = function ({
+export const CentroidVertex3: FunctionComponent<Vertex3Props> = function ({
     id,
     categoryID = "",
     text = "",

package/src/vertex4.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
+import { useMemo } from "preact/hooks";
 import { Utility } from "@hpcc-js/common";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
@@ -32,7 +33,7 @@ export interface IVertex4 extends VertexProps {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
 
-export const Vertex4: React.FunctionComponent<IVertex4> = ({
+export const Vertex4: FunctionComponent<IVertex4> = ({
     categoryID = "",
     text = "",
     textHeight = 10,
@@ -86,7 +87,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     };
 
     const annoOffsetY = 0;
-    const labelWidth = React.useMemo(() => {
+    const labelWidth = useMemo(() => {
         return Utility.textSize(text, textFontFamily, textHeight, false).width;
     }, [text, textFontFamily, textHeight]);
 
@@ -211,7 +212,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         ;
 };
 
-export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
+export const CentroidVertex4: FunctionComponent<IVertex4> = function ({
     id,
     categoryID = "",
     text = "",

package/types/ImageChar.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 export interface ImageCharProps {
     x?: number;
     y?: number;
@@ -10,4 +10,4 @@ export interface ImageCharProps {
     yOffset?: number;
     fontWeight?: number;
 }
-export declare const ImageChar: React.FunctionComponent<ImageCharProps>;
+export declare const ImageChar: FunctionComponent<ImageCharProps>;

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 { FunctionComponent } from "preact";
 import { VertexProps } from "./vertex.tsx";
 type Point = [number, number];
 export interface EdgeProps<V extends VertexProps = VertexProps> {
@@ -19,5 +19,5 @@ export interface EdgeProps<V extends VertexProps = VertexProps> {
     points?: Array<[number, number]>;
     curveDepth?: number;
 }
-export declare const Edge: React.FunctionComponent<EdgeProps>;
+export declare const Edge: FunctionComponent<EdgeProps>;
 export {};

package/types/icon.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 export interface IconProps {
     shape?: "circle" | "square" | "rectangle";
     width?: number;
@@ -16,11 +16,11 @@ export interface IconProps {
     cornerRadius?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Icon: React.FunctionComponent<IconProps>;
+export declare const Icon: FunctionComponent<IconProps>;
 export interface IconEx extends IconProps {
     id: string;
 }
 export interface IconsProps {
     icons: IconEx[];
 }
-export declare const Icons: React.FunctionComponent<IconsProps>;
+export declare const Icons: FunctionComponent<IconsProps>;

package/types/image.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 interface ImageProps {
     href: string;
     x?: number;
@@ -6,5 +6,5 @@ interface ImageProps {
     height?: number;
     yOffset?: number;
 }
-export declare const Image: React.FunctionComponent<ImageProps>;
+export declare const Image: FunctionComponent<ImageProps>;
 export {};

package/types/index.d.ts

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

package/types/preact-shim.d.ts

@@ -0,0 +1,4 @@
+export { createElement, Component, Fragment, h, render } from "preact";
+export { unmountComponentAtNode } from "preact/compat";
+export type { FunctionComponent } from "preact";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";

package/types/render.d.ts

@@ -1,34 +1,27 @@
-import React from "react";
-import { Root } from "react-dom/client";
+import { FunctionComponent } from "preact";
 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;
+export declare function render<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
+export declare function svgRender<P>(C: 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;
+    protected readonly _component: FunctionComponent<P>;
     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;
+    constructor(_component: FunctionComponent<P>);
     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;
+    protected readonly _component: FunctionComponent<P>;
     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;
+    constructor(_component: FunctionComponent<P>);
     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 { FunctionComponent } from "preact";
 interface CircleProps {
     radius?: number;
     fill?: string;
@@ -6,7 +6,7 @@ interface CircleProps {
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Circle: React.FunctionComponent<CircleProps>;
+export declare const Circle: FunctionComponent<CircleProps>;
 interface SquareProps {
     radius?: number;
     cornerRadius?: number;
@@ -15,7 +15,7 @@ interface SquareProps {
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Square: React.FunctionComponent<SquareProps>;
+export declare const Square: FunctionComponent<SquareProps>;
 interface RectangleProps {
     width?: number;
     height?: number;
@@ -25,7 +25,7 @@ interface RectangleProps {
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Rectangle: React.FunctionComponent<RectangleProps>;
+export declare const Rectangle: FunctionComponent<RectangleProps>;
 interface ShapeProps {
     shape?: "circle" | "square" | "rectangle";
     height?: number;
@@ -36,5 +36,5 @@ interface ShapeProps {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
     cornerRadius?: number;
 }
-export declare const Shape: React.FunctionComponent<ShapeProps>;
+export declare const Shape: FunctionComponent<ShapeProps>;
 export {};

package/types/span.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 export interface SpanProps {
     text: string;
 }
-export declare const Span: React.FunctionComponent<SpanProps>;
+export declare const Span: FunctionComponent<SpanProps>;

package/types/subgraph.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { FunctionComponent } from "preact";
 export interface SubgraphProps {
     id: string;
     origData?: any;
@@ -10,4 +10,4 @@ export interface SubgraphProps {
     fontHeight?: number;
     fontFamily?: string;
 }
-export declare const Subgraph: React.FunctionComponent<SubgraphProps>;
+export declare const Subgraph: FunctionComponent<SubgraphProps>;