Merge pull request #3131 from perspective-dev/relax-react

Relax React version

Author: texodus

packages/react/tsconfig.json

@@ -9,7 +9,7 @@
         "rootDir": "./src",
         "moduleResolution": "bundler",
         "skipLibCheck": true,
-        "jsx": "react-jsx",
+        "jsx": "preserve",
     },
     "files": [
         "src/index.tsx"

packages/workspace/package.json

@@ -49,6 +49,7 @@
         "@perspective-dev/esbuild-plugin": "workspace:",
         "@perspective-dev/test": "workspace:",
         "@types/lodash": "catalog:",
+        "@types/react": "catalog:",
         "typescript": "catalog:",
         "zx": "catalog:"
     }

packages/workspace/src/ts/extensions.ts

@@ -10,7 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { HTMLPerspectiveWorkspaceElement } from "./perspective-workspace";
+import type { HTMLPerspectiveWorkspaceElement } from "./perspective-workspace";
+import type * as React from "react";
 
 type ReactPerspectiveWorkspaceAttributes<T> = React.HTMLAttributes<T>;
 
@@ -21,6 +22,8 @@ type JsxPerspectiveWorkspaceElement = {
     HTMLPerspectiveWorkspaceElement
 >;
 
+// React <19
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -29,6 +32,34 @@ declare global {
     }
 }
 
+// React >=19
+
+// @ts-ignore
+declare module "react/jsx-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-workspace": JsxPerspectiveWorkspaceElement;
+        }
+    }
+}
+
+// @ts-ignore
+declare module "react/jsx-dev-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-workspace": JsxPerspectiveWorkspaceElement;
+        }
+    }
+}
+
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-workspace": JsxPerspectiveWorkspaceElement;
+        }
+    }
+}
+
 // Custom Elements extensions
 
 declare global {

packages/workspace/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "jsx": "preserve",
         "strict": true,
         "module": "ESNext",
         "target": "ESNext",

pnpm-lock.yaml

@@ -37,8 +37,8 @@ catalog:
     "d3fc": "^15.2.13"
     "ol": "^5.3.2"
     "pro_self_extracting_wasm": "0.0.9"
-    "react-dom": "^18"
-    "react": "^18"
+    "react-dom": ">17 <20"
+    "react": ">17 <20"
     "regular-table": "=0.8.1"
     "stoppable": "=1.1.0"
     "ws": "^8.17.0"
@@ -56,8 +56,8 @@ catalog:
     "@types/d3": "^7.4.3"
     "@types/lodash": "^4.17.20"
     "@types/node": ">=22"
-    "@types/react-dom": "^18"
-    "@types/react": "^18"
+    "@types/react-dom": ">17 <20"
+    "@types/react": ">17 <20"
     "@types/stoppable": ">=1"
     "@types/ws": ">=8"
     "@types/chroma-js": "^3.1.2"

pnpm-workspace.yaml

@@ -47,6 +47,7 @@
         "@playwright/test": "catalog:",
         "@playwright/experimental-ct-react": "catalog:",
         "@types/react": "catalog:",
+        "@types/react-dom": "catalog:",
         "prettier": "catalog:",
         "typedoc": "catalog:",
         "typescript": "catalog:",

rust/perspective-viewer/package.json

@@ -48,11 +48,15 @@ export type PerspectiveSelectEventDetail = {
 
 type ReactPerspectiveViewerAttributes<T> = React.HTMLAttributes<T>;
 
-type JsxPerspectiveViewerElement = { class?: string } & React.DetailedHTMLProps<
+type JsxPerspectiveViewerElement = {
+    class?: string;
+} & React.DetailedHTMLProps<
     ReactPerspectiveViewerAttributes<HTMLPerspectiveViewerElement>,
     HTMLPerspectiveViewerElement
 >;
 
+// React <19
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -61,6 +65,39 @@ declare global {
     }
 }
 
+// React >=19
+
+// Why are these `ts-ignore`? React 19 makes choice of JSX runtime in `tsconfig`
+// the determination of which runtime this needs to be, but this is chosen
+// by the user ... so I'm not sure what the React authors want from me here
+// exactly. Divination?
+
+// @ts-ignore
+declare module "react/jsx-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
+// @ts-ignore
+declare module "react/jsx-dev-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
 // Custom Elements extensions
 
 declare global {

rust/perspective-viewer/src/ts/extensions.ts

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "jsx": "preserve",
         "strict": true,
         "module": "ESNext",
         "target": "ESNext",

rust/perspective-viewer/tsconfig.json

@@ -13,7 +13,6 @@
 import * as url from "url";
 import * as dotenv from "dotenv";
 import { lint_js, lint_python } from "./lint.mjs";
-import * as cppLint from "./lint_cpp.mjs";
 
 if (import.meta.url.startsWith("file:")) {
     if (process.argv[1] === url.fileURLToPath(import.meta.url)) {
@@ -23,6 +22,5 @@ if (import.meta.url.startsWith("file:")) {
         dotenv.config({ path: "./.perspectiverc", quiet: true });
         await lint_js(true);
         lint_python(true);
-        cppLint.fixFormatting();
     }
 }