chore: bump to deck 9.1 (#285)

* chore: bump deps

* refactor: replace deck instance with props in MapboxOverlay

* chore: apply suggestions

* chore: resolve comments, warnings

* chore: bump to deck9.1

* fix: build error

* yarn and lint

* mapbox as peer, remove loader resolution

* wip refactor: improve types, bump example decks

* chore: pin yarn version

* wip chore: bump & test examples

* fix: #277

Co-authored-by: sraimund <[email protected]>

* feat: add types to react quick animation component

* minor: linting, formatting

* chore(examples): bump / migrate, depend on local repo

* Apply suggestions from code review

* Disable node tests

* Enable headless browser tests

* Use deck 9.1 in scripting

* audit html

* Fix website build

* add packageManager to website

* define clear color in views for each example

* use browser tests in CI instead of node tests

* hack around dev-tools running node tests in CI

* TODO

* old docs

---------

Co-authored-by: Chris Gervang <[email protected]>
Co-authored-by: sraimund <[email protected]>
Co-authored-by: Chris Gervang <[email protected]>

Author: 3 people

.github/workflows/test.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Run tests
         run: |
-          yarn lint  
+          yarn lint
           yarn test ci
 
       - name: Coveralls

.gitignore

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

.ocularrc.js

@@ -27,7 +27,7 @@ const config = {
   },
 
   coverage: {
-    test: 'browser'
+    test: 'force-browser-tests' // TODO: revert to 'browser' after resolving https://github.com/visgl/dev-tools/issues/10
   },
 
   entry: {

docs/README.md

@@ -1,5 +1,17 @@
 # Introduction
 
+<p align="center">
+  <span>These docs are for <a href="https://github.com/visgl/hubble.gl/blob/2.0-release/docs/README.md"><img src="https://img.shields.io/badge/hubble.gl-v2.0-brightgreen.svg?style=flat-square" /></a></span>
+  <br />
+  Looking for an old version?
+  <a href="https://github.com/visgl/hubble.gl/blob/1.4-release/docs/README.md">
+    <img src="https://img.shields.io/badge/hubble.gl-v1.4-green.svg?style=flat-square" />
+  </a>
+  <a href="https://github.com/visgl/hubble.gl/blob/1.3-release/docs/README.md">
+    <img src="https://img.shields.io/badge/hubble.gl-v1.3-green.svg?style=flat-square" />
+  </a>
+</p>
+
 Hubble.gl is a JavaScript library for animating and video encoding WebGL data visualizations.
 
 - **High Quality Video:** 60+fps framerates, up to 8k resolution, and a variety of formats. Render a quick draft or with loseless encoding. Fine tune timing and look with keyframe markers and render everything in the same app.

docs/api-reference/keyframe/keyframes.md

@@ -15,7 +15,7 @@ class CameraKeyFrames extends Keyframes {
 }
 
 // It can be used directly too.
-new Keyframes({timings, keyframes, easings = linear, interpolators = 'linear'})
+new Keyframes({ timings, keyframes, easings = linear, interpolators = 'linear'})
 ```
 
 ## Constructor

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

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@hubble.gl/core": "^1.4.0",
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }

examples/get-started/scripting/index.html

@@ -1,10 +1,8 @@
 <html>
   <head>
     <!-- deck.gl standalone bundle -->
-    <script src="https://unpkg.com/deck.gl@8.9.35/dist.min.js"></script>
+    <script src="https://unpkg.com/deck.gl@9.1/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' />
     <style>
       body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;}
       #geo, #non-geo {position: absolute; width: 50vw; height: 50vh;}
@@ -14,21 +12,26 @@
         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">
@@ -104,12 +107,14 @@ <h3 id="render-status">Rendering video...</h3>
     const nonGeoExample = new deck.DeckGL({
       container: document.getElementById('non-geo'),
       mapbox: false /* disable map */,
-      views: [new deck.OrbitView()],
+      views: new deck.OrbitView({
+        // most video formats don't fully support transparency
+        clear: {
+          color: [255, 255, 255, 1]
+        }
+      }),
       initialViewState: {distance: 1, fov: 50, rotationX: 10, rotationOrbit: 160, zoom: 3.5},
       controller: false,
-      parameters: {
-        clearColor: [255, 255, 255, 1]
-      },
       // retina displays will double resolution
       useDevicePixels: false
     });

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

@@ -80,6 +80,7 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   setRef(ref, deck._deck);
   return null;
 });
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div

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

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>hubble.gl Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
   <style>
     body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
     #app {width: 100%; height: 100%;}