Upgrade dependencies

examples/get-started/pure-js/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@hubble.gl/core": "^1.3.0",
-    "deck.gl": "^8.3.8",
+    "deck.gl": "^8.9",
     "popmotion": "9.3.1"
   },
   "devDependencies": {

examples/vite.config.local.mjs

@@ -13,10 +13,11 @@ export default defineConfig(async () => {
       alias: {
         ...aliases,
         // Use root dependencies
-        // '@luma.gl': join(rootDir, './node_modules/@luma.gl'),
+        '@luma.gl': join(rootDir, './node_modules/@luma.gl'),
         // '@math.gl': join(rootDir, './node_modules/@math.gl'),
         // '@arcgis/core': join(rootDir, './node_modules/@arcgis/core'),
-        // '@loaders.gl/core': join(rootDir, './node_modules/@loaders.gl/core')
+        // '@loaders.gl/core': join(rootDir, './node_modules/@loaders.gl/core'),
+        'react': join(rootDir, './node_modules/react'),
       }
     },
     define: {
@@ -30,6 +31,9 @@ export default defineConfig(async () => {
     },
     optimizeDeps: {
       esbuildOptions: {target: 'es2020'}
-    }
+    },
+    build: {
+      sourcemap: 'inline',
+    },
   };
 });

examples/website/basic-basemap/package.json

@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^8.3.8",
+    "deck.gl": "^8.9",
     "hubble.gl": "^1.3.0",
     "d3-color": "^1.4.1",
     "react": "^18.3.0",

examples/website/camera/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "d3-color": "^1.4.1",
     "hubble.gl": "^1.3.0",
-    "deck.gl": "^8.3.8",
+    "deck.gl": "^8.9",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "popmotion": "9.3.1"

examples/website/quick-start/package.json

@@ -10,16 +10,13 @@
   },
   "dependencies": {
     "d3-color": "^1.4.1",
+    "deck.gl": "^8.9",
     "hubble.gl": "^1.3.0",
-    "deck.gl": "8.8.6",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "popmotion": "9.3.1"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "vite": "^4.0.0"
-  },
-  "resolutions": {
-    "@luma.gl/core": "8.5.16"
   }
 }

examples/website/terrain/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "hubble.gl": "^1.3.0",
-    "deck.gl": "^8.3.8",
+    "deck.gl": "^8.9",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "popmotion": "9.3.1"

examples/website/trips/package.json

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

modules/core/package.json

@@ -38,8 +38,6 @@
     "@loaders.gl/core": "^3.0.0",
     "@loaders.gl/video": "^3.0.12",
     "@loaders.gl/zip": "^3.0.12",
-    "@luma.gl/core": "^8.0.0",
-    "@luma.gl/engine": "^8.0.0",
     "@math.gl/core": "^3.6.0",
     "@math.gl/web-mercator": "^3.6.2",
     "downloadjs": "^1.4.7",
@@ -50,7 +48,15 @@
   "resolutions": {
     "@loaders.gl/video": "3.0.12"
   },
+  "peerDependencies": {
+    "@luma.gl/core": ">=8.3",
+    "@luma.gl/engine": ">=8.3",
+    "@deck.gl/core": ">=8.3"
+  },
   "devDependencies": {
+    "@luma.gl/core": "^8.5.0",
+    "@luma.gl/engine": "^8.5.0",
+    "@deck.gl/core": "^8.9",
     "@types/tape-catch": "^1.0.2"
   }
 }

modules/core/src/lib/init.ts

@@ -4,13 +4,9 @@
 
 import log from '../utils/log';
 
-declare global {
-  const __VERSION__: string;
-}
-
 function checkVersion() {
-  // Version detection using babel plugin
-  // Fallback for tests and SSR since global variable is defined by Webpack.
+  // Version detection using typescript plugin. Note: global type is already declared by deck.
+  // Fallback for tests and SSR since global variable is defined by esbuild.
   const version =
     typeof __VERSION__ !== 'undefined'
       ? __VERSION__

modules/main/package.json

@@ -38,5 +38,17 @@
   "dependencies": {
     "@hubble.gl/core": "1.3.7",
     "@hubble.gl/react": "1.3.7"
+  },
+  "peerDependencies": {
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }

modules/react/package.json

@@ -51,23 +51,28 @@
     "react-modal": "^3.8.1",
     "react-onclickoutside": "^6.9.0",
     "reselect": "^3.0.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^6.1.11"
   },
   "peerDependencies": {
     "@hubble.gl/core": "^1.3.0",
     "@loaders.gl/core": "^3.0.0",
-    "deck.gl": "^8.0.0",
+    "@deck.gl/core": ">=8.3",
+    "@deck.gl/react": ">=8.3",
+    "@deck.gl/mapbox": ">=8.3",
     "mapbox-gl": "<=2.4.1",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   },
   "devDependencies": {
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
     "@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"
+    "@types/tape-catch": "^1.0.2",
+    "@deck.gl/core": "^8.9",
+    "@deck.gl/react": "^8.9",
+    "@deck.gl/mapbox": "^8.9",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   }
 }

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

@@ -1,7 +1,7 @@
 // hubble.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import React, {useEffect, useMemo, useState, type PropsWithChildren} from 'react';
+import React, {useCallback, useEffect, useMemo, useState, type PropsWithChildren} from 'react';
 
 import EncoderDropdown from './encoder-dropdown';
 import styled from 'styled-components';
@@ -33,8 +33,8 @@ const ButtonGroup = styled.div`
   justify-content: flex-end;
 `;
 
-const Result = styled.div<{show?: boolean}>`
-  display: ${props => (props.show ? 'block' : 'none')};
+const Result = styled.div<{$show?: boolean}>`
+  display: ${props => (props.$show ? 'block' : 'none')};
   max-width: 500px;
 `;
 
@@ -49,11 +49,11 @@ const H3 = styled.h3`
   font-family: Helvetica, Arial, sans-serif;
 `;
 
-const Download = styled.div<{show?: boolean}>`
+const Download = styled.div<{$show?: boolean}>`
   color: blue;
   cursor: pointer;
   padding: 0 8px;
-  display: ${props => (props.show ? 'flex' : 'none')};
+  display: ${props => (props.$show ? 'flex' : 'none')};
 `;
 
 const TogglePlayer = styled.div`
@@ -110,12 +110,12 @@ export default function BasicControls({
     setRenderStatus(undefined);
   }, [encoder]);
 
-  const onSave = (newBlob: Blob) => {
+  const onSave = useCallback((newBlob: Blob) => {
     setBlob(newBlob);
     setRenderStatus('rendered');
-  };
+  }, []);
 
-  const onRender = () => {
+  const onRender = useCallback(() => {
     adapter.render({
       Encoder: ENCODERS[encoder],
       formatConfigs,
@@ -126,23 +126,23 @@ export default function BasicControls({
     });
     setRenderStatus('in-progress');
     setBusy(true);
-  };
+  }, [adapter, onSave, encoder, embed, formatConfigs, timecode]);
 
-  const onStop = () => {
+  const onStop = useCallback(() => {
     adapter.stop({
       onStopped: () => setRenderStatus('saving'),
       onComplete: () => setBusy(false),
       onSave: embed && onSave
     });
-  };
+  }, [adapter, onSave, embed]);
 
   return (
     <RenderResult>
       <div>
         <Status>
           <H3>{renderText}</H3>
           <Download
-            show={Boolean(blob)}
+            $show={Boolean(blob)}
             title="Download"
             onClick={() => {
               adapter.videoCapture.download(blob);
@@ -162,7 +162,7 @@ export default function BasicControls({
             </button>
           </ButtonGroup>
         </RenderControls>
-        <Result show={Boolean(blob)}>
+        <Result $show={Boolean(blob)}>
           <TogglePlayer onClick={() => setShowPlayer(!showPlayer)}>
             {showPlayer ? 'Hide Player' : 'Show Player'}
           </TogglePlayer>

modules/react/src/components/export-video/export-video-panel-preview.tsx

@@ -4,7 +4,7 @@
 /* global window */
 
 import React, {Component, RefObject} from 'react';
-import {DeckGL, DeckGLRef} from '@deck.gl/react/typed';
+import DeckGL, {DeckGLRef} from '@deck.gl/react/typed';
 import {MapRef, StaticMap, StaticMapProps} from 'react-map-gl';
 import {MapboxLayer} from '@deck.gl/mapbox/typed';
 import type {DeckProps, MapViewState} from '@deck.gl/core/typed';
@@ -197,7 +197,7 @@ export class ExportVideoPanelPreview extends Component<
 
     return (
       <>
-        <DeckCanvas id="deck-canvas" width={width} height={height}>
+        <DeckCanvas id="deck-canvas" $width={width} $height={height}>
           <DeckGL
             ref={this.deckRef}
             viewState={viewState}

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

@@ -68,7 +68,7 @@ const PanelBody = ({
 }: PanelBodyProps) => (
   <WithKeplerUI>
     {({Button}) => (
-      <PanelBodyInner className="export-video-panel__body" exportVideoWidth={exportVideoWidth}>
+      <PanelBodyInner className="export-video-panel__body" $exportVideoWidth={exportVideoWidth}>
         <ExportVideoPanelPreview
           mapData={mapData}
           adapter={adapter}
@@ -144,7 +144,7 @@ const ExportVideoPanel = ({
   disableStaticMap
 }: ExportVideoPanelProps) => {
   return (
-    <Panel exportVideoWidth={exportVideoWidth} className="export-video-panel">
+    <Panel $exportVideoWidth={exportVideoWidth} className="export-video-panel">
       {header !== false ? (
         <ExportVideoPanelHeader className="export-video-panel__header">
           <StyledTitle className="export-video-panel__title">Export Video</StyledTitle>

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

@@ -19,7 +19,7 @@ function AnimationTab({settings, disabled}: {settings: ExportVideoSettings; disa
     <WithKeplerUI>
       {({Slider, ItemSelector}) => (
         <>
-          <InputGrid rows={5}>
+          <InputGrid $rows={5}>
             <StyledLabelCell>Duration</StyledLabelCell>
             <StyledValueCell style={{paddingLeft: '0px', paddingRight: '0px'}}>
               <SliderWrapper

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

@@ -28,7 +28,7 @@ function SettingsTab({
     <WithKeplerUI>
       {({Input, ItemSelector}) => (
         <>
-          <InputGrid rows={5}>
+          <InputGrid $rows={5}>
             <StyledLabelCell>File Name</StyledLabelCell>
             <Input
               value={settings.fileName}

modules/react/src/components/export-video/rendering-spinner.tsx

@@ -53,12 +53,12 @@ export function RenderingSpinner({
       {({LoadingSpinner}) => (
         <LoaderWrapper
           className="loader-wrapper"
-          width={width}
-          height={height}
-          rendering={rendering}
+          $width={width}
+          $height={height}
+          $rendering={rendering}
         >
           <LoadingSpinner />
-          <RenderingFeedbackContainer className="rendering-feedback-container" height={height}>
+          <RenderingFeedbackContainer className="rendering-feedback-container" $height={height}>
             {showRenderingPercent && <div className="rendering-percent">{percentRendered} %</div>}
             {saving && <div className="saving-message">{message}</div>}
           </RenderingFeedbackContainer>