chore(react) upgrade to react 18

Signed-off-by: Chris Gervang <[email protected]>

.eslintrc.cjs

@@ -1,7 +1,7 @@
 const {getESLintConfig} = require('ocular-dev-tools/configuration');
 
 const config = getESLintConfig({
-  react: '16.13.1',
+  react: '18.3.0',
   overrides: {
     parser: '',
     parserOptions: {

.nvmrc

@@ -1 +1 @@
-14.19.0
+18.20.2

examples/website/basic-basemap/app.jsx

@@ -5,7 +5,7 @@
  */
 
 import React, {useState, useRef, useEffect} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {StaticMap} from 'react-map-gl';
@@ -178,12 +178,6 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
 }
 
 export async function renderToDOM(container) {
-  render(<App />, container);
-
-  // const root = createRoot(container);
-  // root.render(<App />);
-
-  // const resp = await fetch(DATA_URL);
-  // const {features} = await resp.json();
-  // root.render(<App data={features} />);
+  const root = createRoot(container);
+  root.render(<App />);
 }

examples/website/basic-basemap/package.json

@@ -12,8 +12,8 @@
     "deck.gl": "^8.3.8",
     "hubble.gl": "^1.3.0",
     "d3-color": "^1.4.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-map-gl": "^5.0.0",
     "popmotion": "9.3.1"
   },

examples/website/camera/app.jsx

@@ -1,5 +1,5 @@
 import React, {useState, useRef, useEffect} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';
 import {useHubbleGl, BasicControls} from '@hubble.gl/react';
 import {vignette, fxaa} from '@luma.gl/shadertools';
@@ -151,12 +151,6 @@ export default function App() {
 }
 
 export async function renderToDOM(container) {
-  render(<App />, container);
-
-  // const root = createRoot(container);
-  // root.render(<App />);
-
-  // const resp = await fetch(DATA_URL);
-  // const {features} = await resp.json();
-  // root.render(<App data={features} />);
+  const root = createRoot(container);
+  root.render(<App />);
 }

examples/website/camera/package.json

@@ -12,8 +12,8 @@
     "d3-color": "^1.4.1",
     "hubble.gl": "^1.3.0",
     "deck.gl": "^8.3.8",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "popmotion": "9.3.1"
   },
   "devDependencies": {

examples/website/quick-start/app.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import {QuickAnimation, hold, useDeckAnimation} from 'hubble.gl';
 import {anticipate, easeIn, reverseEasing} from 'popmotion';
@@ -102,12 +102,6 @@ export default function App() {
 }
 
 export async function renderToDOM(container) {
-  render(<App />, container);
-
-  // const root = createRoot(container);
-  // root.render(<App />);
-
-  // const resp = await fetch(DATA_URL);
-  // const {features} = await resp.json();
-  // root.render(<App data={features} />);
+  const root = createRoot(container);
+  root.render(<App />);
 }

examples/website/quick-start/package.json

@@ -12,8 +12,8 @@
     "d3-color": "^1.4.1",
     "hubble.gl": "^1.3.0",
     "deck.gl": "8.8.6",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "popmotion": "9.3.1"
   },
   "devDependencies": {

examples/website/terrain/app.jsx

@@ -1,5 +1,5 @@
 import React, {useState, useRef, useEffect} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';
 import {TerrainLayer} from '@deck.gl/geo-layers';
 import {BasicControls, useHubbleGl} from '@hubble.gl/react';
@@ -204,12 +204,6 @@ export default function App() {
 }
 
 export async function renderToDOM(container) {
-  render(<App />, container);
-
-  // const root = createRoot(container);
-  // root.render(<App />);
-
-  // const resp = await fetch(DATA_URL);
-  // const {features} = await resp.json();
-  // root.render(<App data={features} />);
+  const root = createRoot(container);
+  root.render(<App />);
 }

examples/website/terrain/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "hubble.gl": "^1.3.0",
     "deck.gl": "^8.3.8",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "popmotion": "9.3.1"
   },
   "devDependencies": {

examples/website/trips/app.jsx

@@ -5,7 +5,7 @@
  */
 
 import React, {useState, useRef, useEffect, useCallback} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
@@ -235,12 +235,6 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
 }
 
 export async function renderToDOM(container) {
-  render(<App />, container);
-
-  // const root = createRoot(container);
-  // root.render(<App />);
-
-  // const resp = await fetch(DATA_URL);
-  // const {features} = await resp.json();
-  // root.render(<App data={features} />);
+  const root = createRoot(container);
+  root.render(<App />);
 }

examples/website/trips/package.json

@@ -13,8 +13,8 @@
     "react-map-gl": "^5.0.0",
     "hubble.gl": "^1.3.0",
     "deck.gl": "^8.3.8",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "popmotion": "9.3.1"
   },
   "devDependencies": {

modules/react/package.json

@@ -58,14 +58,14 @@
     "@loaders.gl/core": "^3.0.0",
     "deck.gl": "^8.0.0",
     "mapbox-gl": "<=2.4.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-native": "^0.60.0",
     "@types/styled-components": "^4.4.1",
     "@types/tape-catch": "^1.0.2"

modules/react/src/components/basic-controls.tsx

@@ -1,7 +1,7 @@
 // hubble.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import React, {ReactChildren, useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState, type PropsWithChildren} from 'react';
 
 import EncoderDropdown from './encoder-dropdown';
 import styled from 'styled-components';
@@ -68,6 +68,15 @@ const TogglePlayer = styled.div`
   }
 `;
 
+type BasicControlsProps = {
+  adapter: DeckAdapter;
+  busy: boolean;
+  setBusy: (busy: boolean) => void;
+  formatConfigs: Partial<FormatConfigs>;
+  timecode: Timecode;
+  embed?: boolean;
+};
+
 export default function BasicControls({
   children,
   adapter,
@@ -76,15 +85,7 @@ export default function BasicControls({
   formatConfigs,
   timecode,
   embed = true
-}: {
-  children?: ReactChildren;
-  adapter: DeckAdapter;
-  busy: boolean;
-  setBusy: (busy: boolean) => void;
-  formatConfigs: Partial<FormatConfigs>;
-  timecode: Timecode;
-  embed?: boolean;
-}) {
+}: PropsWithChildren<BasicControlsProps>) {
   const [encoder, setEncoder] = useState<Encoders>(WEBM);
   const [blob, setBlob] = useState<Blob>(undefined);
   const [renderStatus, setRenderStatus] = useState<string>(undefined);

modules/react/src/components/export-video/export-video-modal.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 /* global window */
-import React, {Component, createRef} from 'react';
+import React, {Component, createRef, type PropsWithChildren} from 'react';
 import Modal from 'react-modal';
 import {ThemeProvider} from 'styled-components';
 import {ModalContainer} from './styled-components';
@@ -28,7 +28,7 @@ type ExportVideoModalProps = {
   showSettings: boolean;
 };
 
-class ExportVideoModal extends Component<ExportVideoModalProps> {
+class ExportVideoModal extends Component<PropsWithChildren<ExportVideoModalProps>> {
   static defaultProps = {
     defaultSettingsPos: {top: '320px', left: '320px'},
     bottomBuffer: 212

modules/react/src/components/inject-kepler.tsx

@@ -1,7 +1,7 @@
 // hubble.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import React, {ReactChildren, createContext} from 'react';
+import React, {type PropsWithChildren, createContext} from 'react';
 
 /*
 // Hook up mutual kepler imports
@@ -33,10 +33,9 @@ export const WithKeplerUI = KeplerUIContext.Consumer;
 export const InjectKeplerUI = ({
   children,
   keplerUI
-}: {
-  children: ReactChildren;
+}: PropsWithChildren<{
   keplerUI: KeplerUI;
-}) => <KeplerUIContext.Provider value={keplerUI}>{children}</KeplerUIContext.Provider>;
+}>) => <KeplerUIContext.Provider value={keplerUI}>{children}</KeplerUIContext.Provider>;
 
 export const injectKeplerUI = (Component: any, keplerUI: KeplerUI) => props =>
   (

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "description": "Hubble.gl is a powerful open source animation tool for large-scale data sets.",
   "repository": "https://github.com/uber/hubble.gl.git",
-  "author": "Chris Gervang <chr@uber.com>",
+  "author": "Chris Gervang <chris@gervang.com>",
   "license": "MIT",
   "scripts": {
     "bootstrap": "yarn && ocular-bootstrap",
@@ -52,8 +52,8 @@
     "ocular-dev-tools": "2.0.0-alpha.33",
     "pre-commit": "^1.2.2",
     "pre-push": "^0.1.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-map-gl": "^5.2.10",
     "tap-spec": "^5.0.0",
     "tape-catch": "^1.0.6"
@@ -65,9 +65,7 @@
   ],
   "resolutions": {
     "prettier": "^2.4.1",
-    "@loaders.gl/video": "3.0.12",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0"
+    "@loaders.gl/video": "3.0.12"
   },
   "dependencies": {}
 }