From 9c2e0f0cbf7c43561b7f2c0707d5fb95971bd5ef Mon Sep 17 00:00:00 2001 From: Gordon Smith Date: Wed, 20 Nov 2024 16:23:05 +0000 Subject: [PATCH] fix: Revert react back to preact Signed-off-by: Gordon Smith --- package-lock.json | 34 ++++-------------- packages/dgrid2/esbuild.js | 6 +++- packages/dgrid2/package.json | 10 ++---- packages/dgrid2/src/hooks.ts | 3 +- packages/dgrid2/src/reactTable.tsx | 6 ++-- packages/dgrid2/src/table.ts | 10 +++--- packages/graph/index.html | 7 +--- packages/graph/package.json | 9 ++--- packages/graph/src/graph2/graph.ts | 3 +- packages/graph/src/graph2/graphReactT.ts | 3 +- packages/graph/src/graph2/subgraph.tsx | 3 +- packages/graph/src/graph2/vertex.tsx | 3 +- packages/graph/tsconfig.json | 3 +- packages/html/package.json | 11 +++--- packages/html/src/JSXWidget.ts | 7 ++-- packages/html/src/VizComponent.tsx | 2 +- packages/html/src/VizInstance.tsx | 2 +- packages/preact-shim/src/index.ts | 3 +- packages/react/index.html | 13 ++----- packages/react/package.json | 8 ++--- packages/react/src/ImageChar.tsx | 4 +-- packages/react/src/edge.tsx | 2 +- packages/react/src/icon.tsx | 2 +- packages/react/src/image.tsx | 2 +- packages/react/src/index.ts | 2 +- packages/react/src/render.ts | 45 +++++++----------------- packages/react/src/shape.tsx | 2 +- packages/react/src/span.tsx | 2 +- packages/react/src/subgraph.tsx | 2 +- packages/react/src/text.tsx | 10 +++--- packages/react/src/vertex.tsx | 2 +- packages/react/src/vertex2.tsx | 2 +- packages/react/src/vertex3.tsx | 2 +- packages/react/src/vertex4.tsx | 2 +- packages/react/tsconfig.json | 3 +- 35 files changed, 81 insertions(+), 149 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2986927897..fbb9807b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -228,6 +228,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -20469,13 +20470,8 @@ }, "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/preact-shim": "^3.0.0", + "react-data-grid": "7.0.0-beta.47" } }, "packages/eclwatch": { @@ -20960,13 +20956,7 @@ "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" } }, "packages/html": { @@ -20979,14 +20969,9 @@ }, "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" } }, "packages/layout": { @@ -21201,12 +21186,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" } }, "packages/timeline": { diff --git a/packages/dgrid2/esbuild.js b/packages/dgrid2/esbuild.js index 67b91a9988..36c65c4683 100644 --- 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 index 2e50bddfd5..c1f7033fae 100644 --- 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 index 1ddb29a24c..b09ee01b7e 100644 --- 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[]] { // eslint-disable-next-line react-hooks/exhaustive-deps @@ -9,3 +9,4 @@ export function useData(widget: Widget): [string[], Array[]] { return [columns, data]; } + diff --git a/packages/dgrid2/src/reactTable.tsx b/packages/dgrid2/src/reactTable.tsx index dcd8b1213e..3876a155b0 100644 --- 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 = ({ }; interface ColumnEx extends Column { - renderCell?: (props: any) => React.JSX.Element; + renderCell?: (props: any) => any; __hpcc_pattern?: ReturnType; __hpcc_format?: ReturnType | ReturnType; } @@ -145,7 +145,7 @@ export const ReactTable: React.FunctionComponent = ({ rows={rows} rowKeyGetter={rowKeyGetter} rowHeight={20} - renderers={{ noRowsFallback: }} + renderers={{ noRowsFallback: 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 index 8c2fa50fbf..32a709af5a 100644 --- 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 index 806b8644c8..09b31d5b6e 100644 --- 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" } } diff --git a/packages/graph/package.json b/packages/graph/package.json index 6be19ef0c2..1a459a6db9 100644 --- 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 index 8b42624de3..ec813c4484 100644 --- 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 index 92f0bade44..615aaa81a3 100644 --- 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(reactRenderer: React.FunctionComponent): RendererT { diff --git a/packages/graph/src/graph2/subgraph.tsx b/packages/graph/src/graph2/subgraph.tsx index 4293f05d15..8aeaca08d6 100644 --- 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 index 79b0d9b41d..4b36d83aec 100644 --- 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 index acfd3b2511..73b1d0a5c0 100644 --- 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 index 96d81466ce..9c7c492919 100644 --- 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 index 349af47564..c07f53d513 100644 --- 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 index a38f1dc73a..83b85b1ad9 100644 --- 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 { diff --git a/packages/html/src/VizInstance.tsx b/packages/html/src/VizInstance.tsx index f7f2135f99..a3a5a79230 100644 --- 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 { diff --git a/packages/preact-shim/src/index.ts b/packages/preact-shim/src/index.ts index f25f934fd0..d3859042a6 100644 --- 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 index 5342205e5b..fef20f8fb6 100644 --- 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" } } @@ -54,9 +47,9 @@

ESM Quick Test