Skip to content

Commit c75ca63

Browse files
GordonSmithGordonSmith
authored
Merge pull request hpcc-systems#4309 from GordonSmith/REACT_PREACT
fix: Revert react back to preact
2 parents 658c50f + 9c2e0f0 commit c75ca63

35 files changed

+81
-149
lines changed

‎package-lock.json

+7-27
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dgrid2/esbuild.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ await Promise.all([
2020
"d3-selection": "@hpcc-js/common",
2121
"d3-time-format": "@hpcc-js/common",
2222
"d3-transition": "@hpcc-js/common",
23-
"d3-zoom": "@hpcc-js/common"
23+
"d3-zoom": "@hpcc-js/common",
24+
"react": "preact/compat",
25+
"react/jsx-runtime": "preact/jsx-runtime",
26+
"react-dom": "preact/compat",
27+
"react-dom/test-utils": "preact/test-utils",
2428
},
2529
external: [
2630
...Object.keys(pkg.dependencies),

‎packages/dgrid2/package.json

+3-7
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,10 @@
4141
},
4242
"devDependencies": {
4343
"@hpcc-js/esbuild-plugins": "^1.3.0",
44-
"react-data-grid": "7.0.0-beta.47",
45-
"react": "18.3.1",
46-
"react-dom": "18.3.1"
47-
},
48-
"peerDependencies": {
49-
"react": "^17.0.0 || ^18.0.0",
50-
"react-dom": "^17.0.0 || ^18.0.0"
44+
"@hpcc-js/preact-shim": "^3.0.0",
45+
"react-data-grid": "7.0.0-beta.47"
5146
},
47+
"peerDependencies": {},
5248
"repository": {
5349
"type": "git",
5450
"url": "git+https://github.com/hpcc-systems/Visualization.git"

‎packages/dgrid2/src/hooks.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
21
import { Widget } from "@hpcc-js/common";
2+
import * as React from "react";
33

44
export function useData(widget: Widget): [string[], Array<string | number>[]] {
55
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -9,3 +9,4 @@ export function useData(widget: Widget): [string[], Array<string | number>[]] {
99

1010
return [columns, data];
1111
}
12+

‎packages/dgrid2/src/reactTable.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "react";
22
import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
33
import { format, timeFormat, timeParse } from "@hpcc-js/common";
44
import { useData } from "./hooks.ts";
@@ -33,7 +33,7 @@ const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
3333
};
3434

3535
interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
36-
renderCell?: (props: any) => React.JSX.Element;
36+
renderCell?: (props: any) => any;
3737
__hpcc_pattern?: ReturnType<typeof timeParse>;
3838
__hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
3939
}
@@ -145,7 +145,7 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
145145
rows={rows}
146146
rowKeyGetter={rowKeyGetter}
147147
rowHeight={20}
148-
renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> }}
148+
renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
149149
className={table.darkMode() ? "rdg-dark" : "rdg-light"}
150150
sortColumns={sortColumn ? [sortColumn] : []}
151151
onSortColumnsChange={onSortColumnsChange}

‎packages/dgrid2/src/table.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import { createRoot, Root } from "react-dom/client";
1+
import * as React from "react";
32
import { HTMLWidget } from "@hpcc-js/common";
3+
import { render, unmountComponentAtNode } from "react-dom";
44
import { ReactTable } from "./reactTable.tsx";
55

66
import "./table.css";
@@ -10,7 +10,6 @@ export type ColumnType = "boolean" | "number" | "string" | "time";
1010
export class Table extends HTMLWidget {
1111

1212
protected _div;
13-
protected _root: Root;
1413

1514
constructor() {
1615
super();
@@ -59,18 +58,17 @@ export class Table extends HTMLWidget {
5958
.append("div")
6059
.style("display", "grid")
6160
;
62-
this._root = createRoot(this._div.node());
6361
}
6462

6563
update(domNode, element) {
6664
super.update(domNode, element);
6765
this._div.style("width", this.width() + "px");
6866
this._div.style("height", this.height() + "px");
69-
this._root.render(React.createElement(ReactTable, { table: this }));
67+
render(React.createElement(ReactTable, { table: this }), this._div.node());
7068
}
7169

7270
exit(domNode, element) {
73-
this._root.unmount();
71+
unmountComponentAtNode(this._div.node());
7472
this._div.remove();
7573
super.exit(domNode, element);
7674
}

‎packages/graph/index.html

+1-6
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,7 @@
3838
"@hpcc-js/dgrid": "../dgrid/dist/index.js",
3939
"@hpcc-js/react": "../react/dist/index.js",
4040
"@hpcc-js/html": "../html/dist/index.js",
41-
"@hpcc-js/graph": "../graph/dist/index.js",
42-
"xreact":"../../node_modules/preact/compat/dist/compat.module.js",
43-
"xreact-dom/client":"../../node_modules/preact/compat/client.mjs",
44-
"xpreact":"../../node_modules/preact/dist/preact.module.js",
45-
"xpreact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
46-
"xpreact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js"
41+
"@hpcc-js/graph": "../graph/dist/index.js"
4742
}
4843
}
4944
</script>

‎packages/graph/package.json

+2-7
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,9 @@
5252
"d3-sankey": "^0",
5353
"d3-shape": "^1",
5454
"d3-tile": "^1",
55-
"d3-transition": "^1",
56-
"react": "18.3.1",
57-
"react-dom": "18.3.1"
58-
},
59-
"peerDependencies": {
60-
"react": "^17.0.0 || ^18.0.0",
61-
"react-dom": "^17.0.0 || ^18.0.0"
55+
"d3-transition": "^1"
6256
},
57+
"peerDependencies": {},
6358
"repository": {
6459
"type": "git",
6560
"url": "git+https://github.com/hpcc-systems/Visualization.git"

‎packages/graph/src/graph2/graph.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from "react";
2-
import { Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
1+
import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
32
import { GraphReactT } from "./graphReactT.ts";
43
import { GraphDataProps, HierarchyBase } from "./graphT.ts";
54

‎packages/graph/src/graph2/graphReactT.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from "react";
2-
import { SubgraphProps, VertexProps, EdgeProps, render } from "@hpcc-js/react";
1+
import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
32
import { GraphT, RendererT } from "./graphT.ts";
43

54
function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {

‎packages/graph/src/graph2/subgraph.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from "react";
2-
import { Text } from "@hpcc-js/react";
1+
import { React, Text } from "@hpcc-js/react";
32
import { SubgraphBaseProps } from "./layouts/placeholders.ts";
43

54
export interface BasicSubgraphProps extends SubgraphBaseProps {

‎packages/graph/src/graph2/vertex.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from "react";
2-
import { Text } from "@hpcc-js/react";
1+
import { React, Text } from "@hpcc-js/react";
32
import { VertexBaseProps } from "./layouts/placeholders.ts";
43

54
export interface BasicVertexProps extends VertexBaseProps {

‎packages/graph/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"emitDeclarationOnly": true,
88
"declaration": true,
99
"declarationDir": "types",
10-
"jsx": "react",
10+
"jsx": "react-jsx",
11+
"jsxImportSource": "preact",
1112
"strict": true,
1213
"noImplicitAny": false,
1314
"strictNullChecks": false,

‎packages/html/package.json

+4-7
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,12 @@
4040
},
4141
"devDependencies": {
4242
"@hpcc-js/esbuild-plugins": "^1.3.0",
43+
"@hpcc-js/preact-shim": "^3.0.0",
44+
4345
"d3-format": "^1",
44-
"d3-selection": "^1",
45-
"react": "18.3.1",
46-
"react-dom": "18.3.1"
47-
},
48-
"peerDependencies": {
49-
"react": "^17.0.0 || ^18.0.0",
50-
"react-dom": "^17.0.0 || ^18.0.0"
46+
"d3-selection": "^1"
5147
},
48+
"peerDependencies": {},
5249
"repository": {
5350
"type": "git",
5451
"url": "git+https://github.com/hpcc-systems/Visualization.git"

‎packages/html/src/JSXWidget.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React from "react";
2-
import { render } from "react-dom";
31
import { HTMLWidget } from "@hpcc-js/common";
2+
import { Component, createElement, render } from "@hpcc-js/preact-shim";
43

54
export class JSXWidget extends HTMLWidget {
6-
static Component = React.Component;
7-
static createElement = React.createElement;
5+
static Component = Component;
6+
static createElement = createElement;
87
protected rootNode;
98

109
jsxRender(jsx, domNode) {

‎packages/html/src/VizComponent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "@hpcc-js/preact-shim";
22
import { JSXWidget } from "./JSXWidget.ts";
33

44
export class VizComponent extends JSXWidget.Component<any, any> {

‎packages/html/src/VizInstance.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "@hpcc-js/preact-shim";
22
import { JSXWidget } from "./JSXWidget.ts";
33

44
export class VizInstance extends JSXWidget.Component<any, any> {

‎packages/preact-shim/src/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export * from "./__package__.ts";
22
export { createElement, Component, Fragment, h, render } from "preact";
3+
export { unmountComponentAtNode } from "preact/compat";
34
export type { FunctionComponent } from "preact";
4-
export { useCallback, useEffect, useMemo, useReducer, useState } from "preact/hooks";
5+
export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";
56

67
/*
78
* A Preact 11+ implementation of the `replaceNode` parameter from Preact 10.

‎packages/react/index.html

+3-10
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,7 @@
3535
"@hpcc-js/comms": "../comms/dist/index.js",
3636
"@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js",
3737
"@hpcc-js/html": "../comms/html/index.js",
38-
"@hpcc-js/react": "../react/dist/index.js",
39-
"react":"../../node_modules/react/umd/react.development.js",
40-
"react-dom/client":"../../node_modules/react-dom/client.js",
41-
"preact":"../../node_modules/preact/dist/preact.module.js",
42-
"preact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
43-
"preact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js",
44-
"react":"../../node_modules/preact/compat/dist/compat.module.js",
45-
"react-dom/client":"../../node_modules/preact/compat/client.mjs"
38+
"@hpcc-js/react": "../react/dist/index.js"
4639
}
4740
}
4841
</script>
@@ -54,9 +47,9 @@
5447
<h1>ESM Quick Test</h1>
5548
<div id="placeholder"></div>
5649
<script type="module">
57-
import { HTMLAdapter, SVGAdapter, Span, Text, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
50+
import { HTMLAdapter, SVGAdapter, Span, TextBox, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
5851

59-
window.__widget = new SVGAdapter(Text)
52+
window.__widget = new SVGAdapter(TextBox)
6053
.target("placeholder")
6154
.prop("text", "red")
6255
.render()

‎packages/react/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,9 @@
3939
},
4040
"devDependencies": {
4141
"@hpcc-js/esbuild-plugins": "^1.3.0",
42-
"react": "18.3.1",
43-
"react-dom": "18.3.1"
44-
},
45-
"peerDependencies": {
46-
"react": "^17.0.0 || ^18.0.0",
47-
"react-dom": "^17.0.0 || ^18.0.0"
42+
"@hpcc-js/preact-shim": "^3.0.0"
4843
},
44+
"peerDependencies": {},
4945
"repository": {
5046
"type": "git",
5147
"url": "git+https://github.com/hpcc-systems/Visualization.git"

‎packages/react/src/ImageChar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useMemo } from "react";
21
import { Utility } from "@hpcc-js/common";
2+
import * as React from "@hpcc-js/preact-shim";
33

44
export interface ImageCharProps {
55
x?: number;
@@ -24,7 +24,7 @@ export const ImageChar: React.FunctionComponent<ImageCharProps> = ({
2424
fontWeight
2525
}) => {
2626

27-
const renderChar = useMemo(() => {
27+
const renderChar = React.useMemo(() => {
2828
return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
2929
}, [char, fontFamily]);
3030

‎packages/react/src/edge.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "@hpcc-js/preact-shim";
22
import { VertexProps } from "./vertex.tsx";
33
import { Text } from "./text.tsx";
44

‎packages/react/src/icon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
21
import { Palette } from "@hpcc-js/common";
2+
import * as React from "@hpcc-js/preact-shim";
33
import { Image } from "./image.tsx";
44
import { ImageChar } from "./ImageChar.tsx";
55
import { Shape } from "./shape.tsx";

‎packages/react/src/image.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "@hpcc-js/preact-shim";
22

33
interface ImageProps {
44
href: string;

‎packages/react/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export * from "./vertex3.tsx";
1414
export * from "./vertex4.tsx";
1515
export * from "./subgraph.tsx";
1616

17-
import React from "react";
17+
import * as React from "@hpcc-js/preact-shim";
1818
export {
1919
React
2020
};

0 commit comments

Comments
 (0)