Merge pull request #4309 from GordonSmith/REACT_PREACT

fix: Revert react back to preact
hpcc-systems · Nov 20, 2024 · c75ca63 · c75ca63
2 parents 658c50f + 9c2e0f0
commit c75ca63
Show file tree

Hide file tree

Showing 35 changed files with 81 additions and 149 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dgrid2/esbuild.js b/packages/dgrid2/esbuild.js
@@ -20,7 +20,11 @@ await Promise.all([
             "d3-selection": "@hpcc-js/common",
             "d3-time-format": "@hpcc-js/common",
             "d3-transition": "@hpcc-js/common",
-            "d3-zoom": "@hpcc-js/common"
+            "d3-zoom": "@hpcc-js/common",
+            "react": "preact/compat",
+            "react/jsx-runtime": "preact/jsx-runtime",
+            "react-dom": "preact/compat",
+            "react-dom/test-utils": "preact/test-utils",
         },
         external: [
             ...Object.keys(pkg.dependencies),

diff --git a/packages/dgrid2/package.json b/packages/dgrid2/package.json
@@ -41,14 +41,10 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react-data-grid": "7.0.0-beta.47",
-        "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",
+        "react-data-grid": "7.0.0-beta.47"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"

diff --git a/packages/dgrid2/src/hooks.ts b/packages/dgrid2/src/hooks.ts
@@ -1,5 +1,5 @@
-import React from "react";
 import { Widget } from "@hpcc-js/common";
+import * as React from "react";
 
 export function useData(widget: Widget): [string[], Array<string | number>[]] {
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -9,3 +9,4 @@ export function useData(widget: Widget): [string[], Array<string | number>[]] {
 
     return [columns, data];
 }
+
diff --git a/packages/dgrid2/src/reactTable.tsx b/packages/dgrid2/src/reactTable.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
 import { format, timeFormat, timeParse } from "@hpcc-js/common";
 import { useData } from "./hooks.ts";
@@ -33,7 +33,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>;
 }
@@ -145,7 +145,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}

diff --git a/packages/dgrid2/src/table.ts b/packages/dgrid2/src/table.ts
@@ -1,6 +1,6 @@
-import React from "react";
-import { createRoot, Root } from "react-dom/client";
+import * as React from "react";
 import { HTMLWidget } from "@hpcc-js/common";
+import { render, unmountComponentAtNode } from "react-dom";
 import { ReactTable } from "./reactTable.tsx";
 
 import "./table.css";
@@ -10,7 +10,6 @@ export type ColumnType = "boolean" | "number" | "string" | "time";
 export class Table extends HTMLWidget {
 
     protected _div;
-    protected _root: Root;
 
     constructor() {
         super();
@@ -59,18 +58,17 @@ 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(React.createElement(ReactTable, { table: this }), this._div.node());
     }
 
     exit(domNode, element) {
-        this._root.unmount();
+        unmountComponentAtNode(this._div.node());
         this._div.remove();
         super.exit(domNode, element);
     }

diff --git a/packages/graph/index.html b/packages/graph/index.html
@@ -38,12 +38,7 @@
                 "@hpcc-js/dgrid": "../dgrid/dist/index.js",
                 "@hpcc-js/react": "../react/dist/index.js",
                 "@hpcc-js/html": "../html/dist/index.js",
-                "@hpcc-js/graph": "../graph/dist/index.js",
-                "xreact":"../../node_modules/preact/compat/dist/compat.module.js",
-                "xreact-dom/client":"../../node_modules/preact/compat/client.mjs",
-                "xpreact":"../../node_modules/preact/dist/preact.module.js",
-                "xpreact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
-                "xpreact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js"
+                "@hpcc-js/graph": "../graph/dist/index.js"
             }
         }
     </script>

diff --git a/packages/graph/package.json b/packages/graph/package.json
@@ -52,14 +52,9 @@
         "d3-sankey": "^0",
         "d3-shape": "^1",
         "d3-tile": "^1",
-        "d3-transition": "^1",
-        "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"
+        "d3-transition": "^1"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"

diff --git a/packages/graph/src/graph2/graph.ts b/packages/graph/src/graph2/graph.ts
@@ -1,5 +1,4 @@
-import React from "react";
-import { Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
+import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
 import { GraphDataProps, HierarchyBase } from "./graphT.ts";
 

diff --git a/packages/graph/src/graph2/graphReactT.ts b/packages/graph/src/graph2/graphReactT.ts
@@ -1,5 +1,4 @@
-import React from "react";
-import { SubgraphProps, VertexProps, EdgeProps, render } from "@hpcc-js/react";
+import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
 import { GraphT, RendererT } from "./graphT.ts";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {

diff --git a/packages/graph/src/graph2/subgraph.tsx b/packages/graph/src/graph2/subgraph.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { SubgraphBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicSubgraphProps extends SubgraphBaseProps {

diff --git a/packages/graph/src/graph2/vertex.tsx b/packages/graph/src/graph2/vertex.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { VertexBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicVertexProps extends VertexBaseProps {

diff --git a/packages/graph/tsconfig.json b/packages/graph/tsconfig.json
@@ -7,7 +7,8 @@
         "emitDeclarationOnly": true,
         "declaration": true,
         "declarationDir": "types",
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "strict": true,
         "noImplicitAny": false,
         "strictNullChecks": false,

diff --git a/packages/html/package.json b/packages/html/package.json
@@ -40,15 +40,12 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
+	        "@hpcc-js/preact-shim": "^3.0.0",
+
         "d3-format": "^1",
-        "d3-selection": "^1",
-        "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"
+        "d3-selection": "^1"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"

diff --git a/packages/html/src/JSXWidget.ts b/packages/html/src/JSXWidget.ts
@@ -1,10 +1,9 @@
-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 = React.Component;
-    static createElement = React.createElement;
+    static Component = Component;
+    static createElement = createElement;
     protected rootNode;
 
     jsxRender(jsx, domNode) {

diff --git a/packages/html/src/VizComponent.tsx b/packages/html/src/VizComponent.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizComponent extends JSXWidget.Component<any, any> {

diff --git a/packages/html/src/VizInstance.tsx b/packages/html/src/VizInstance.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizInstance extends JSXWidget.Component<any, any> {

diff --git a/packages/preact-shim/src/index.ts b/packages/preact-shim/src/index.ts
@@ -1,7 +1,8 @@
 export * from "./__package__.ts";
 export { createElement, Component, Fragment, h, render } from "preact";
+export { unmountComponentAtNode } from "preact/compat";
 export type { FunctionComponent } from "preact";
-export { useCallback, useEffect, useMemo, useReducer, useState } from "preact/hooks";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";
 
 /*
  * A Preact 11+ implementation of the `replaceNode` parameter from Preact 10.

diff --git a/packages/react/index.html b/packages/react/index.html
@@ -35,14 +35,7 @@
                 "@hpcc-js/comms": "../comms/dist/index.js",
                 "@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js",
                 "@hpcc-js/html": "../comms/html/index.js",
-                "@hpcc-js/react": "../react/dist/index.js",
-                "react":"../../node_modules/react/umd/react.development.js",
-                "react-dom/client":"../../node_modules/react-dom/client.js",
-                "preact":"../../node_modules/preact/dist/preact.module.js",
-                "preact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
-                "preact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js",
-                "react":"../../node_modules/preact/compat/dist/compat.module.js",
-                "react-dom/client":"../../node_modules/preact/compat/client.mjs"
+                "@hpcc-js/react": "../react/dist/index.js"
             }
         }
     </script>
@@ -54,9 +47,9 @@
     <h1>ESM Quick Test</h1>
     <div id="placeholder"></div>
     <script type="module">
-        import { HTMLAdapter, SVGAdapter, Span, Text, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
+        import { HTMLAdapter, SVGAdapter, Span, TextBox, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
 
-        window.__widget = new SVGAdapter(Text)
+        window.__widget = new SVGAdapter(TextBox)
             .target("placeholder")
             .prop("text", "red")
             .render()

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -39,13 +39,9 @@
     },
     "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"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"

diff --git a/packages/react/src/ImageChar.tsx b/packages/react/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]);
 

diff --git a/packages/react/src/edge.tsx b/packages/react/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";
 

diff --git a/packages/react/src/icon.tsx b/packages/react/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";

diff --git a/packages/react/src/image.tsx b/packages/react/src/image.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 interface ImageProps {
     href: string;

diff --git a/packages/react/src/index.ts b/packages/react/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
 };