chore: bump to deck 9.1

.gitignore

@@ -8,6 +8,7 @@ coverage/
 .cache/
 
 tsconfig.tsbuildinfo
+tsconfig.build.tsbuildinfo
 
 */**/yarn.lock
 !website/yarn.lock

examples/worldview/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "deck.gl": "8.2.0",
-    "@loaders.gl/core": "^2.3.13",
-    "@loaders.gl/json": "^2.3.13",
+    "@loaders.gl/core": "^4.3.3",
+    "@loaders.gl/json": "^4.3.3",
     "@reduxjs/toolkit": "^1.5.0",
     "d3-request": "^1.0.6",
     "global": "^4.3.0",

modules/core/package.json

@@ -35,28 +35,25 @@
     "build-bundle": "ocular-bundle ./bundle.ts"
   },
   "dependencies": {
-    "@loaders.gl/core": "^3.0.0",
-    "@loaders.gl/video": "^3.0.12",
-    "@loaders.gl/zip": "^3.0.12",
-    "@math.gl/core": "^3.6.0",
-    "@math.gl/web-mercator": "^3.6.2",
+    "@loaders.gl/core": "^4.3.3",
+    "@loaders.gl/video": "^4.3.3",
+    "@loaders.gl/zip": "^4.3.3",
+    "@math.gl/core": "^4.1.0",
+    "@math.gl/web-mercator": "^4.1.0",
     "downloadjs": "^1.4.7",
     "popmotion": "9.3.1",
     "probe.gl": "^3.4.0",
     "webm-writer": "^1.0.0"
   },
-  "resolutions": {
-    "@loaders.gl/video": "3.0.12"
-  },
   "peerDependencies": {
-    "@deck.gl/core": ">=8.3",
-    "@luma.gl/core": ">=8.3",
-    "@luma.gl/engine": ">=8.3"
+    "@deck.gl/core": ">=9.0",
+    "@luma.gl/core": ">=9.0",
+    "@luma.gl/engine": ">=9.0"
   },
   "devDependencies": {
-    "@deck.gl/core": "^8.9",
-    "@luma.gl/core": "^8.5.0",
-    "@luma.gl/engine": "^8.5.0",
+    "@deck.gl/core": "^9.0",
+    "@luma.gl/core": "^9.0.0",
+    "@luma.gl/engine": "^9.0.0",
     "@types/tape-catch": "^1.0.2"
   }
 }

modules/core/src/adapters/deck-adapter.ts

@@ -6,22 +6,22 @@
 import {type FrameEncoder, PreviewEncoder, type FormatConfigs} from '../encoders/index';
 import {AnimationManager} from '../animations/index';
 import {type Timecode, VideoCapture} from '../capture/video-capture';
-import type {Deck, Layer, DeckProps} from '@deck.gl/core/typed';
+import {Deck, Layer, DeckProps} from '@deck.gl/core';
 
 export default class DeckAdapter {
   deck?: Deck;
   animationManager: AnimationManager;
   shouldAnimate: boolean;
   enabled: boolean;
-  glContext?: WebGLRenderingContext;
+  glContext?: WebGL2RenderingContext;
   videoCapture: VideoCapture;
 
   constructor({
     animationManager = undefined,
     glContext = undefined
   }: {
     animationManager?: AnimationManager;
-    glContext?: WebGLRenderingContext;
+    glContext?: WebGL2RenderingContext;
   }) {
     this.animationManager = animationManager || new AnimationManager({});
     this.glContext = glContext;
@@ -65,7 +65,7 @@ export default class DeckAdapter {
     }
 
     if (this.glContext) {
-      props.gl = this.glContext;
+      props.deviceProps.webgl = this.glContext;
     }
     return {...extraProps, ...props};
   }
@@ -124,8 +124,7 @@ export default class DeckAdapter {
     const areAllLayersLoaded =
       this.deck && this.deck.props.layers.every(layer => (layer as Layer).isLoaded);
     if (this.videoCapture.isRecording() && areAllLayersLoaded && readyToCapture) {
-      // @ts-expect-error TODO use getCanvas
-      const canvas = this.deck.canvas;
+      const canvas = this.deck.getCanvas();
       this.videoCapture.capture(canvas, nextTimeMs => {
         this.seek({timeMs: nextTimeMs});
         proceedToNextFrame(nextTimeMs);

modules/core/src/animations/deck-animation.ts

@@ -11,7 +11,7 @@ import {
   DeckLayerKeyframeProps
 } from '../keyframes/index';
 import Animation, {AnimationConstructor} from './animation';
-import type {Layer} from '@deck.gl/core/typed';
+import type {Layer} from '@deck.gl/core';
 
 function noop() {}
 

modules/main/package.json

@@ -40,8 +40,8 @@
     "@hubble.gl/react": "1.4.0-beta.2"
   },
   "peerDependencies": {
-    "react": ">=16.3.0",
-    "react-dom": ">=16.3.0"
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
   },
   "peerDependenciesMeta": {
     "react": {

modules/react/package.json

@@ -34,7 +34,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@loaders.gl/zip": "^3.0.12",
+    "@loaders.gl/zip": "^4.3.3",
     "@turf/helpers": "^5.1.5",
     "@turf/transform-translate": "^5.1.5",
     "classnames": "^2.2.6",
@@ -54,18 +54,19 @@
     "styled-components": "6.1.8"
   },
   "peerDependencies": {
-    "@deck.gl/core": ">=8.3",
-    "@deck.gl/mapbox": ">=8.3",
-    "@deck.gl/react": ">=8.3",
+    "@deck.gl/core": ">=9.0",
+    "@deck.gl/mapbox": ">=9.0",
+    "@deck.gl/react": ">=9.0",
     "@hubble.gl/core": "^1.4.0",
-    "@loaders.gl/core": "^3.0.0",
+    "@loaders.gl/core": "^4.0.0",
+    "mapbox-gl": "<=3.0.0",
     "react": ">=18.2",
     "react-dom": ">=18.2"
   },
   "devDependencies": {
-    "@deck.gl/core": "^8.9",
-    "@deck.gl/mapbox": "^8.9",
-    "@deck.gl/react": "^8.9",
+    "@deck.gl/core": "^9.0",
+    "@deck.gl/mapbox": "^9.0",
+    "@deck.gl/react": "^9.0",
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/react": "^18.3.0",

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

@@ -20,7 +20,7 @@ import ExportVideoPanel from './export-video-panel';
 import {parseSetCameraType, scaleToVideoExport} from './utils';
 import {DEFAULT_FILENAME, getResolutionSetting} from './constants';
 import type {MapProps} from 'react-map-gl';
-import type {DeckProps, MapViewState} from '@deck.gl/core/typed';
+import type {DeckProps, MapViewState} from '@deck.gl/core';
 
 const ENCODERS = {
   gif: GifEncoder,
@@ -39,7 +39,7 @@ export type ExportVideoSettings = {
 
 type ExportVideoPanelContainerProps = {
   initialState?: Partial<ExportVideoPanelContainerState>;
-  glContext?: WebGLRenderingContext;
+  glContext?: WebGL2RenderingContext;
 
   exportVideoWidth: number;
   handleClose: () => void;

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

@@ -4,13 +4,13 @@
 /* global window */
 
 import React, {Component, ForwardedRef, RefObject, forwardRef} from 'react';
-import DeckGL from '@deck.gl/react/typed';
+import DeckGL from '@deck.gl/react';
 import ReactMapGL, {type MapProps, type MapRef, useControl} from 'react-map-gl';
-import {MapboxOverlay, MapboxOverlayProps} from '@deck.gl/mapbox/typed';
-import type {Deck, DeckProps, Layer, MapViewState} from '@deck.gl/core/typed';
+import {MapboxOverlay, MapboxOverlayProps} from '@deck.gl/mapbox';
+import type {Deck, DeckProps, Layer, MapViewState} from '@deck.gl/core';
 import isEqual from 'lodash.isequal';
 
-import {deckStyle, DeckCanvas} from './styled-components';
+import {DeckCanvas} from './styled-components';
 import {RenderingSpinner} from './rendering-spinner';
 import {createKeplerLayers} from '../../kepler-layers';
 import {DeckAdapter} from '@hubble.gl/core';
@@ -52,14 +52,12 @@ const DeckGLOverlay = forwardRef<Deck, MapboxOverlayProps>(
     return null;
   }
 );
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 export class ExportVideoPanelPreview extends Component<
   ExportVideoPanelPreviewProps,
   ExportVideoPanelPreviewState
 > {
-  mapRef: RefObject<MapRef>;
-  deckRef: RefObject<Deck>;
-
   constructor(props: ExportVideoPanelPreviewProps) {
     super(props);
     const mapStyle = this.props.mapData.mapStyle;
@@ -101,6 +99,9 @@ export class ExportVideoPanelPreview extends Component<
     }
   }
 
+  mapRef: RefObject<MapRef>;
+  deckRef: RefObject<Deck>;
+
   _resizeVideo() {
     const {exportVideoWidth, resolution, disableBaseMap} = this.props;
 
@@ -215,7 +216,7 @@ export class ExportVideoPanelPreview extends Component<
             >
               <DeckGLOverlay
                 ref={this.deckRef}
-                glOptions={{stencil: true}}
+                deviceProps={{type: 'webgl', webgl: {stencil: true}}}
                 {...adapter.getProps({deck, extraProps: {...deckProps, layers: deckLayers}})}
               />
             </ReactMapGL>

modules/react/src/components/export-video/utils.ts

@@ -3,8 +3,9 @@
 // Copyright (c) vis.gl contributors
 import {point} from '@turf/helpers';
 import transformTranslate from '@turf/transform-translate';
-import {WebMercatorViewport} from '@deck.gl/core'; // importing non-typed module since it's a peer dependency and node errors while testing
-import type {MapViewState} from '@deck.gl/core/typed';
+import {WebMercatorViewport} from '@deck.gl/core';
+import type {MapViewState} from '@deck.gl/core';
+
 
 export function scaleToVideoExport(
   viewState: MapViewState,

modules/react/src/components/quick-animation.tsx

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 import React, {useState, useRef, useMemo} from 'react';
-import DeckGL, {DeckGLRef} from '@deck.gl/react/typed';
+import DeckGL, {DeckGLRef} from '@deck.gl/react';
 import BasicControls from './basic-controls';
 import {useDeckAdapter, useNextFrame} from '../hooks';
-import type {MapViewState} from '@deck.gl/core/typed';
 import {FormatConfigs} from '@hubble.gl/core';
 
 export const QuickAnimation = ({
@@ -57,9 +56,7 @@ export const QuickAnimation = ({
           ref={deckRef}
           style={{position: 'unset'}}
           viewState={cameraFrame}
-          onViewStateChange={({viewState: vs}) => {
-            setCameraFrame(vs as MapViewState);
-          }}
+          onViewStateChange={({viewState: vs}) => setCameraFrame(vs)}
           controller={true}
           width={resolution.width}
           height={resolution.height}

modules/react/src/components/render-player.tsx

@@ -8,13 +8,14 @@ import styled from 'styled-components';
 import {type Encoders, GIF, JPEG, PNG, WEBM} from './encoders';
 
 const parseImages = async (blob: Blob, encoder?: Encoders): Promise<{[name: string]: string}> => {
-  const images = await parse(blob, ZipLoader);
+  const images = (await parse(blob, ZipLoader)) as {[name: string]: ArrayBuffer};
+  const imageUrls: {[name: string]: string} = {};
   for (const image in images) {
-    images[image] = URL.createObjectURL(
+    imageUrls[image] = URL.createObjectURL(
       new Blob([images[image]], {type: encoder === JPEG ? 'image/jpeg' : 'image/png'})
     );
   }
-  return images;
+  return imageUrls;
 };
 
 const VideoPlayer = styled.video`

modules/react/src/hooks.ts

@@ -4,7 +4,7 @@
 
 import {useState, useCallback, useMemo, RefObject} from 'react';
 import {DeckAdapter, DeckAnimation, DeckAnimationConstructor} from '@hubble.gl/core';
-import type {Layer, MapViewState, Deck} from '@deck.gl/core/typed';
+import type {Layer, MapViewState, Deck} from '@deck.gl/core';
 import type {MapRef} from 'react-map-gl';
 
 export function useNextFrame() {

modules/react/src/kepler-layers.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {createSelector} from 'reselect';
-import type {Layer, MapViewState} from '@deck.gl/core/typed';
+import type {Layer, MapViewState} from '@deck.gl/core';
 
 /**
  * Kepler Layer Creation

tsconfig.module.json

@@ -2,7 +2,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "build": true,
+    // "build": true,
     "esModuleInterop": true,
     "declaration": true,
     "declarationMap": true,