chore: bump to deck 9.1

.gitignore

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

docs/README.md

@@ -16,7 +16,7 @@ Hubble.gl is a JavaScript library for animating and video encoding WebGL data vi
 <script src="https://unpkg.com/hubble.gl@latest/dist.min.js"></script>
 ```
 
-- [Standalone example](https://github.com/visgl/hubble.gl/tree/master/examples/standalone)
+- [Standalone example](https://github.com/visgl/hubble.gl/tree/-release/examples/standalone)
 
 ### NPM Module
 
@@ -26,13 +26,13 @@ npm install hubble.gl
 
 #### Pure JS
 
-- [Pure JS example](https://github.com/visgl/hubble.gl/tree/master/examples/get-started/pure-js)
+- [Pure JS example](https://github.com/visgl/hubble.gl/tree/-release/examples/get-started/pure-js)
 
 #### React
 
-- [Get started](https://github.com/visgl/hubble.gl/tree/master/examples/website/camera)
+- [Get started](https://github.com/visgl/hubble.gl/tree/-release/examples/website/camera)
 
-- [With basemap](https://github.com/visgl/hubble.gl/tree/master/examples/website/trips)
+- [With basemap](https://github.com/visgl/hubble.gl/tree/-release/examples/website/trips)
 
 ## Basic Animation
 

docs/api-reference/encoder/README.md

@@ -13,8 +13,8 @@ Encoders are used to capture image frames of an HTML `<canvas/>` and encode them
 | [`WebMEncoder`](/docs/api-reference/encoder/webm-encoder) | Video     | Encodes `.webm` video using [Whammy](https://antimatter15.com/2012/08/whammy-a-real-time-javascript-webm-encoder/). |
 | [`GIFEncoder`](/docs/api-reference/encoder/gif-encoder) | Animated Image | Encodes `.gif` images using `gifshot.js`. | 
 | [`StreamEncoder`](/docs/api-reference/encoder/stream-encoder) | Video     | Encodes `.webm` rough previews, but drops frames. |
-| [`PNGSequenceEncoder`](/docs/api-reference/encoder/png-sequence-encoder) | Image Sequence | Encodes video frames as loseless `.png` contained in a `.tar`. |
-| [`JPEGSequenceEncoder`](/docs/api-reference/encoder/jpeg-sequence-encoder) | Image Sequence | Encodes video frames as compressed `.jpeg` contained in a `.tar`. |
+| [`PNGSequenceEncoder`](/docs/api-reference/encoder/png-sequence-encoder) | Image Sequence | Encodes video frames as loseless `.png` contained in a `.zip`. |
+| [`JPEGSequenceEncoder`](/docs/api-reference/encoder/jpeg-sequence-encoder) | Image Sequence | Encodes video frames as compressed `.jpeg` contained in a `.zip`. |
 
 ### Attributions
 

docs/api-reference/encoder/jpeg-sequence-encoder.md

@@ -1,6 +1,6 @@
 # JPEGSequenceEncoder
 
-A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
+A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".zip"` archive.
 
 ## Constructor
 
@@ -12,7 +12,7 @@ In addition to the [FrameEncoder](/docs/api-reference/encoder/frame-encoder) set
 
 * `quality` - See member note. Defaults to 1.0.
 
-* `archive` - `zip` or `tar`. Defaults to `tar`.
+* `archive` - `zip`.
 
 ## Members
 

docs/api-reference/encoder/png-sequence-encoder.md

@@ -1,6 +1,6 @@
 # PNGSequenceEncoder
 
-A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
+A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".zip"` archive.
 
 ## Constructor
 
@@ -10,7 +10,7 @@ Construction of the encoder class is not required. Refer to [DeckAdapter.render]
 
 In addition to the [FrameEncoder](/docs/api-reference/encoder/frame-encoder) settings, these settings are available under the `png` namespace.
 
-* `archive` - `zip` or `tar`. Defaults to `tar`.
+* `archive` - `zip`.
 
 **Notes:**
 

docs/api-reference/keyframe/deck-layer-keyframes.md

@@ -1,6 +1,6 @@
 # DeckLayerKeyframes
 
-The `DeckLayerKeyframes` class extends the hubble.gl `Keyframes` class and offers support for animating deck.gl layers. The animated `features` can be any deck.gl layer prop, such as `getRadius`. The `id` property may be provided, and should match the layer id of the deck.gl layer it's linked too.
+The `DeckLayerKeyframes` class extends the hubble.gl `Keyframes` class and offers support for animating deck.gl layers.
 
 ## Usage
 
@@ -12,8 +12,6 @@ Parameters:
 
 * `id` (`string`) - deck.gl layer id.
 
-* `features` (`Array<string>`, Optional) - An array of features to animate. If not provided explicitly, the first keyframe must have all animated features.
-
 * `timings` (`Array<number>`) - "N" timestamps for beginning of keyframe.
 
 * `keyframes` (`Array<Object>`) - "N" camera objects to transition between.

docs/api-reference/keyframe/keyframes.md

@@ -1,6 +1,6 @@
 # Keyframes (Class)
 
-The Keyframes class extends the luma.gl [Keyframes](https://luma.gl/docs/api-reference/engine/animation/key-frames) class and adds additional features. In your application, extend from hubble.gl's Keyframes as shown in the `CameraKeyFrames` example. Add `features` to animate, such as `latitude`. When designing your animation, keyframe values are required for each feature you define.
+The Keyframes class extends the luma.gl [Keyframes](https://luma.gl/docs/api-reference/engine/animation/key-frames) class and adds additional features. In your application, extend from hubble.gl's Keyframes as shown in the `CameraKeyFrames` example. 
 
 ## Usage
 
@@ -12,21 +12,18 @@ class CameraKeyFrames extends Keyframes {
   constructor(props) {
     super({
       ...props,
-      features: ['latitude', 'longitude', 'zoom', 'pitch', 'bearing']
     });
   }
 }
 
 // It can be used directly too.
-new Keyframes({features, timings, keyframes, easings = linear, interpolators = 'linear'})
+new Keyframes({ timings, keyframes, easings = linear, interpolators = 'linear'})
 ```
 
 ## Constructor
 
 Parameters:
 
-* `features` (`Array<string>`) - An array of features to animate.
-
 * `timings` (`Array<number>`) - "N" timestamps for beginning of keyframe.
 
 * `keyframes` (`Array<Object>`) - "N" camera objects to transition between.

examples/get-started/pure-js/app.js

@@ -1,5 +1,5 @@
 /* global document, URL */
-import {Deck} from '@deck.gl/core';
+import {Deck, MapView} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {DeckAdapter, DeckAnimation, AnimationManager, WebMEncoder} from '@hubble.gl/core';
 import {easeInOut} from 'popmotion';
@@ -82,6 +82,12 @@ export const deck = new Deck({
     deck.setProps({viewState});
   },
   controller: true,
+  views: new MapView({
+    // most video formats don't fully support transparency
+    clear: {
+      color: [255, 255, 255, 1]
+    }
+  }),
   layers: [
     new GeoJsonLayer({
       id: 'base-map',
@@ -118,10 +124,6 @@ export const deck = new Deck({
       getWidth: 1
     })
   ],
-  // most video formats don't fully support transparency
-  parameters: {
-    clearColor: [255, 255, 255, 1]
-  },
   // retina displays will double resolution
   useDevicePixels: false
 });

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

@@ -9,11 +9,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@hubble.gl/core": "^1.4.0",
-    "deck.gl": "^8.9",
+    "@hubble.gl/core": "file:../../../modules/main",
+    "deck.gl": "^9.1.3",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }

examples/get-started/scripting/index.html

@@ -3,32 +3,46 @@
     <!-- deck.gl standalone bundle -->
     <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
+    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css" rel="stylesheet" />
     <style>
-      body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;}
-      #geo, #non-geo {position: absolute; width: 50vw; height: 50vh;}
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: Helvetica, Arial, sans-serif;
+      }
+      #geo,
+      #non-geo {
+        position: absolute;
+        width: 50vw;
+        height: 50vh;
+      }
       /* #non-geo {left: 50vw; top: 0;} */
       .render-result {
         position: absolute;
         z-index: 1;
         top: 0;
         right: 0;
-        background-color: #FFF;
+        background-color: #fff;
         margin: 24px;
         padding: 10px 24px;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
         min-width: 300px;
       }
-      .render-result h3 { font-size: 16px; margin: 8px 0; }
-      #re-render { margin-top: 8px; }
+      .render-result h3 {
+        font-size: 16px;
+        margin: 8px 0;
+      }
+      #re-render {
+        margin-top: 8px;
+      }
       #result {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div id="non-geo" ></div>
+    <div id="non-geo"></div>
     <div class="render-result">
       <h3 id="render-status">Rendering video...</h3>
       <div id="result">

examples/website/basic-basemap-mapbox-legacy/app.jsx

@@ -52,11 +52,8 @@ const formatConfigs = {
   webm: {
     quality: 0.8
   },
-  png: {
-    archive: 'zip'
-  },
+  png: {},
   jpeg: {
-    archive: 'zip',
     quality: 0.8
   },
   gif: {
@@ -73,17 +70,16 @@ const timecode = {
 };
 
 const DeckGLOverlay = forwardRef((props, ref) => {
-    // MapboxOverlay handles a variety of props differently than the Deck class.
-    // https://deck.gl/docs/api-reference/mapbox/mapbox-overlay#constructor
-    const deck = useControl(() => new MapboxOverlay({...props, interleaved: true}));
+  // MapboxOverlay handles a variety of props differently than the Deck class.
+  // https://deck.gl/docs/api-reference/mapbox/mapbox-overlay#constructor
+  const deck = useControl(() => new MapboxOverlay({...props, interleaved: true}));
 
-    deck.setProps(props);
+  deck.setProps(props);
 
-    // @ts-expect-error private property
-    setRef(ref, deck._deck);
-    return null;
-  }
-);
+  // @ts-expect-error private property
+  setRef(ref, deck._deck);
+  return null;
+});
 
 const Container = ({children}) => (
   <div
@@ -169,10 +165,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
           onMove={onViewStateChange}
           // Note: 'reuseMap' prop with gatsby and mapbox extension causes stale reference error.
         >
-          <DeckGLOverlay 
-            ref={deckRef} 
-            {...deckProps} 
-          />
+          <DeckGLOverlay ref={deckRef} {...deckProps} />
         </Map>
       </div>
       <BasicControls

examples/website/basic-basemap-mapbox-legacy/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "deck.gl": "^8.9",
-    "hubble.gl": "^1.4.0",
+    "hubble.gl": "file:../../../modules/main",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-map-gl": "^7.1.8",

examples/website/basic-basemap-mapbox/app.jsx

@@ -8,7 +8,7 @@ import React, {useState, useRef, useEffect, forwardRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {MapboxOverlay} from '@deck.gl/mapbox';
-import Map, {useControl} from 'react-map-gl';
+import {Map, useControl} from 'react-map-gl/mapbox';
 import {PolygonLayer} from '@deck.gl/layers';
 import {easeInOut} from 'popmotion';
 import {setRef} from './set-ref';
@@ -52,11 +52,8 @@ const formatConfigs = {
   webm: {
     quality: 0.8
   },
-  png: {
-    archive: 'zip'
-  },
+  png: {},
   jpeg: {
-    archive: 'zip',
     quality: 0.8
   },
   gif: {
@@ -82,8 +79,8 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   // @ts-expect-error private property
   setRef(ref, deck._deck);
   return null;
-}
-);
+});
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div
@@ -169,10 +166,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
           onMove={onViewStateChange}
           // Note: 'reuseMap' prop with gatsby and mapbox extension causes stale reference error.
         >
-          <DeckGLOverlay 
-            ref={deckRef} 
-            {...deckProps} 
-          />
+          <DeckGLOverlay ref={deckRef} {...deckProps} />
         </Map>
       </div>
       <BasicControls

examples/website/basic-basemap-mapbox/index.html

@@ -1,19 +1,29 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>hubble.gl Example</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
-    #app {width: 100%; height: 100%;}
-  </style>
-</head>
-<body>
-<div id="app"></div>
-</body>
-<script type="module">
-  import {renderToDOM} from './app.jsx';
-  renderToDOM(document.getElementById('app'));
-</script>
+  <head>
+    <link href="https://api.mapbox.com/gl-js-seats/v2.13.0/mapbox-gl-seats.css" rel="stylesheet" />
+    <meta charset="utf-8" />
+    <title>hubble.gl Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+      }
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import {renderToDOM} from './app.jsx';
+    renderToDOM(document.getElementById('app'));
+  </script>
 </html>