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.gl = 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-alpha.0"
   },
   "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",
@@ -53,19 +53,19 @@
     "styled-components": "^6.1.11"
   },
   "peerDependencies": {
-    "@deck.gl/core": ">=8.3",
-    "@deck.gl/mapbox": ">=8.3",
-    "@deck.gl/react": ">=8.3",
-    "@hubble.gl/core": "^1.3.0",
-    "@loaders.gl/core": "^3.0.0",
+    "@deck.gl/core": ">=9.0",
+    "@deck.gl/mapbox": ">=9.0",
+    "@deck.gl/react": ">=9.0",
+    "@hubble.gl/core": "1.4.0-alpha.0",
+    "@loaders.gl/core": "^4.3.3",
     "mapbox-gl": "<=2.4.1",
-    "react": ">=16.3.0",
+    "react": ">=18.3.0",
     "react-dom": ">=16.3.0"
   },
   "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 {StaticMapProps} 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,10 +4,10 @@
 /* global window */
 
 import React, {Component, RefObject} from 'react';
-import DeckGL, {DeckGLRef} from '@deck.gl/react/typed';
+import DeckGL, {DeckGLRef} from '@deck.gl/react';
 import {MapRef, StaticMap, StaticMapProps} from 'react-map-gl';
-import {MapboxLayer} from '@deck.gl/mapbox/typed';
-import type {DeckProps, MapViewState} from '@deck.gl/core/typed';
+import {MapboxOverlay as MapboxLayer} from '@deck.gl/mapbox';
+import type {DeckProps, MapViewState} from '@deck.gl/core';
 import isEqual from 'lodash.isequal';
 
 import {deckStyle, DeckCanvas} from './styled-components';
@@ -163,13 +163,13 @@ export class ExportVideoPanelPreview extends Component<
 
     // If there aren't any layers, combine map and deck with a fake layer.
     if (!keplerLayers.length) {
-      map.addLayer(new MapboxLayer({id: '%%blank-layer', deck}));
+      map.addLayer(new MapboxLayer({id: '%%blank-layer', ...deck}));
       mapboxLayerIds.push('%%blank-layer');
     }
 
     for (let i = 0; i < keplerLayers.length; i++) {
       // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
-      map.addLayer(new MapboxLayer({id: keplerLayers[i].id, deck}), beforeId);
+      map.addLayer(new MapboxLayer({id: keplerLayers[i].id, ...deck}), beforeId);
       mapboxLayerIds.push(keplerLayers[i].id);
     }
 
@@ -207,7 +207,7 @@ export class ExportVideoPanelPreview extends Component<
             controller={true}
             glOptions={{stencil: true}}
             onWebGLInitialized={gl => this.setState({glContext: gl})}
-            onViewStateChange={({viewState: vs}) => setViewState(vs as MapViewState)}
+            onViewStateChange={({viewState: vs}) => setViewState(vs)}
             {...(disableStaticMap ? {onAfterRender: this._onAfterRender} : {})}
             width={resolution[0]}
             height={resolution[1]}

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

@@ -4,7 +4,7 @@
 import {point} from '@turf/helpers';
 import transformTranslate from '@turf/transform-translate';
 import {WebMercatorViewport} from '@deck.gl/core';
-import type {MapViewState} from '@deck.gl/core/typed';
+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,9 +4,9 @@
 
 import {useState, useCallback, useMemo, RefObject} from 'react';
 import {DeckAdapter, DeckAnimation, DeckAnimationConstructor} from '@hubble.gl/core';
-import {MapboxLayer} from '@deck.gl/mapbox/typed';
-import type {Layer, MapViewState} from '@deck.gl/core/typed';
-import type {DeckGLRef} from '@deck.gl/react/typed';
+import {MapboxOverlay as MapboxLayer} from '@deck.gl/mapbox';
+import type {Layer, MapViewState} from '@deck.gl/core';
+import type {DeckGLRef} from '@deck.gl/react';
 import {MapRef} from 'react-map-gl';
 
 export function useNextFrame() {
@@ -60,11 +60,11 @@ export function useHubbleGl({
       const map = staticMapRef.current.getMap();
       // If there aren't any layers, combine map and deck with a fake layer.
       if (!layers.length) {
-        map.addLayer(new MapboxLayer({id: '%%blank-layer', deck}));
+        map.addLayer(new MapboxLayer({id: '%%blank-layer', ...deck}));
       }
       for (let i = 0; i < layers.length; i++) {
         // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
-        map.addLayer(new MapboxLayer({id: layers[i].id, deck}));
+        map.addLayer(new MapboxLayer({id: layers[i].id, ...deck}));
       }
       map.on('render', () => adapter.onAfterRender(nextFrame, map.areTilesLoaded()));
     }

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,