Prepare Threlte for Svelte 5 upgrade (#600)

viamrobotics · Nov 13, 2024 · 721c886 · 721c886
1 parent bb60e1c
commit 721c886
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 42 deletions.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",
@@ -81,12 +81,12 @@
     "vitest": "^1.1.0"
   },
   "peerDependencies": {
-    "@threlte/core": ">=7 <8",
-    "@threlte/extras": ">=8 <9",
+    "@threlte/core": ">=7 <9",
+    "@threlte/extras": ">=8 <10",
     "@viamrobotics/prime-core": ">=0.0.48",
     "@viamrobotics/three": ">=0.0.3",
     "maplibre-gl": ">=4",
-    "svelte": ">=4 <5",
+    "svelte": ">=4 <6",
     "tailwindcss": ">=3",
     "three": ">=0.167.0"
   },

diff --git a/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte b/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import type * as THREE from 'three';
-import { T, createRawEventDispatcher } from '@threlte/core';
+import { T } from '@threlte/core';
 import {
   useMapLibreEvent,
   useMapLibre,
@@ -21,12 +21,13 @@ import {
 import { view } from '../stores';
 import { theme } from '@viamrobotics/prime-core/theme';
 
-interface $$Events extends Record<string, unknown> {
-  /** Fires when a rectangle is drawn. */
-  update: { width: number; height: number; center: LngLat };
-}
+/** Fires when a rectangle is drawn. */
+export let onUpdate: (payload: {
+  width: number;
+  height: number;
+  center: LngLat;
+}) => void;
 
-const dispatch = createRawEventDispatcher<$$Events>();
 const { map } = useMapLibre();
 
 let downLngLat = new LngLat(0, 0);
@@ -82,7 +83,7 @@ const handlePointerUp = () => {
 
   const center = downMercator.toLngLat();
 
-  dispatch('update', { width, height, center });
+  onUpdate({ width, height, center });
 
   width = 0;
   height = 0;

diff --git a/packages/blocks/src/lib/navigation-map/components/map.svelte b/packages/blocks/src/lib/navigation-map/components/map.svelte
@@ -15,6 +15,7 @@ import RobotMarker from './robot-marker.svelte';
 import Nav from './nav/index.svelte';
 import Waypoints from './waypoints.svelte';
 import ObstaclesLegend from './nav/obstacles-legend.svelte';
+import type { Obstacle } from '../types';
 
 /** The Geo-pose of a robot base. */
 export let baseGeoPose: GeoPose | undefined = undefined;
@@ -24,6 +25,8 @@ const maxPitch = 60;
 
 export let map: Map | undefined = undefined;
 
+export let onUpdate: (payload: Obstacle[]) => void;
+
 const handleViewSelect = ({ detail }: CustomEvent<string>) => {
   $view = detail as '2D' | '3D';
 };
@@ -58,7 +61,7 @@ let didHoverTooltip = Boolean(
 
     <SceneLayer
       slot="layer"
-      on:update-obstacles
+      {onUpdate}
     />
 
     <div class="absolute right-12 top-2.5 z-10 flex items-center gap-2">

diff --git a/packages/blocks/src/lib/navigation-map/components/obstacle.svelte b/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { theme } from '@viamrobotics/prime-core/theme';
 import * as THREE from 'three';
-import { T, createRawEventDispatcher } from '@threlte/core';
+import { T } from '@threlte/core';
 import type {
   MapMouseEvent,
   MapLayerMouseEvent,
@@ -19,12 +19,9 @@ import { view, hovered, selected, environment, obstacles } from '../stores';
 /** The obstacle name. */
 export let name: string;
 
-interface $$Events extends Record<string, unknown> {
-  /** Fired when obstacles are created, destroyed, or edited. */
-  update: Obstacle;
-}
+/** Fired when obstacles are created, destroyed, or edited. */
+export let onUpdate: (payload: Obstacle) => void;
 
-const dispatch = createRawEventDispatcher<$$Events>();
 const { map } = useMapLibre();
 
 let pointerdownTheta = 0;
@@ -140,7 +137,7 @@ const handlePointerMove = (event: MapMouseEvent) => {
 
   $obstacles = $obstacles;
 
-  dispatch('update', obstacle);
+  onUpdate(obstacle);
 };
 
 const handlePointerUp = () => {

diff --git a/packages/blocks/src/lib/navigation-map/components/scene-layer.svelte b/packages/blocks/src/lib/navigation-map/components/scene-layer.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 import { Canvas } from '@threlte/core';
 import Scene from './scene.svelte';
+import type { Obstacle } from '../types';
+
+export let onUpdate: (payload: Obstacle[]) => void;
 </script>
 
 <div class="pointer-events-none absolute bottom-0 right-0 h-full w-full">
   <Canvas autoRender={false}>
-    <Scene on:update-obstacles />
+    <Scene {onUpdate} />
   </Canvas>
 </div>
diff --git a/packages/blocks/src/lib/navigation-map/components/scene.svelte b/packages/blocks/src/lib/navigation-map/components/scene.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { Camera, Plane, Vector3 } from 'three';
-import { createEventDispatcher } from 'svelte';
 import { T, useThrelte } from '@threlte/core';
 import type { LngLat } from 'maplibre-gl';
 import type { Obstacle } from '../types';
@@ -15,9 +14,7 @@ import Drawtool from './draw-tool.svelte';
 import Path from './path.svelte';
 import { theme } from '@viamrobotics/prime-core/theme';
 
-const dispatch = createEventDispatcher<{
-  'update-obstacles': Obstacle[];
-}>();
+export let onUpdate: (payload: Obstacle[]) => void;
 
 computeBoundingPlugin();
 interactivityPlugin();
@@ -32,7 +29,7 @@ useMapLibreThreeRenderer(scene, camera, () => {
 });
 
 const handleUpdate = () => {
-  dispatch('update-obstacles', $obstacles);
+  onUpdate($obstacles);
 };
 
 const handleDraw = ({
@@ -56,7 +53,7 @@ const handleDraw = ({
   $obstacles = [obstacle, ...$obstacles];
   $selected = obstacle.name;
 
-  dispatch('update-obstacles', $obstacles);
+  onUpdate($obstacles);
 };
 
 $: flat = $view === '2D';
@@ -74,7 +71,7 @@ $: renderer.clippingPlanes = flat ? [] : [clippingPlane];
 {#each $obstacles as obstacle (obstacle.name)}
   <ObstacleGeometries
     name={obstacle.name}
-    on:update={handleUpdate}
+    onUpdate={handleUpdate}
   />
 {/each}
 
@@ -86,5 +83,5 @@ $: renderer.clippingPlanes = flat ? [] : [clippingPlane];
 {/each}
 
 {#if $environment === 'configure'}
-  <Drawtool on:update={handleDraw} />
+  <Drawtool onUpdate={handleDraw} />
 {/if}
diff --git a/packages/blocks/src/lib/navigation-map/index.svelte b/packages/blocks/src/lib/navigation-map/index.svelte
@@ -60,6 +60,8 @@ export let tabs: NavigationTabType[] = [
 /** The pose (Lng,Lat) and rotation of a base. */
 export let baseGeoPose: GeoPose | undefined = undefined;
 
+export let onUpdate: (payload: Obstacle[]) => void;
+
 $: $tabStore = tab;
 $: $tabsStore = tabs;
 $: $waypointsStore = waypoints;
@@ -71,9 +73,9 @@ $: $envStore = environment;
 <Map
   bind:map
   {baseGeoPose}
+  {onUpdate}
   on:add-waypoint
   on:delete-waypoint
-  on:update-obstacles
 >
   <slot
     name="tab"

diff --git a/packages/blocks/src/lib/slam-map-2d/points.svelte b/packages/blocks/src/lib/slam-map-2d/points.svelte
@@ -8,7 +8,7 @@
 <script lang="ts">
 import * as THREE from 'three';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
-import { T, createRawEventDispatcher } from '@threlte/core';
+import { T } from '@threlte/core';
 import { renderOrder } from './render-order';
 import { onMount } from 'svelte';
 import { mapColorAttributeGrayscale } from './color-map';
@@ -19,15 +19,12 @@ export let pointcloud: Uint8Array | undefined;
 /** The size of each individual point */
 export let size: number;
 
-interface $$Events extends Record<string, unknown> {
-  /** Dispatched whenever a new .pcd file is parsed. Emits the radius and center of the cloud's bounding sphere. */
-  update: {
-    radius: number;
-    center: { x: number; y: number };
-  };
-}
+/** Dispatched whenever a new .pcd file is parsed. Emits the radius and center of the cloud's bounding sphere. */
+export let onUpdate: (payload: {
+  radius: number;
+  center: { x: number; y: number };
+}) => void;
 
-const dispatch = createRawEventDispatcher<$$Events>();
 const loader = new PCDLoader();
 
 let points: THREE.Points;
@@ -55,7 +52,7 @@ const update = (cloud: Uint8Array) => {
     mapColorAttributeGrayscale(color);
   }
 
-  dispatch('update', { center, radius });
+  onUpdate({ center, radius });
 };
 
 $: if (material) {
@@ -66,7 +63,7 @@ $: if (pointcloud) {
 }
 
 onMount(() => {
-  dispatch('update', { center, radius });
+  onUpdate({ center, radius });
 });
 </script>
 

diff --git a/packages/blocks/src/lib/slam-map-2d/scene.svelte b/packages/blocks/src/lib/slam-map-2d/scene.svelte
@@ -101,7 +101,7 @@ $: updateZoom($camera as THREE.OrthographicCamera);
 <Points
   {pointcloud}
   size={pointSize}
-  on:update={handlePointsUpdate}
+  onUpdate={handlePointsUpdate}
 />
 
 <Marker

diff --git a/packages/blocks/src/routes/navigation-map.svelte b/packages/blocks/src/routes/navigation-map.svelte
@@ -181,10 +181,10 @@ $: map?.setCenter({ lat: 40.7, lng: -74.17 });
       {obstacles}
       {waypoints}
       {paths}
+      onUpdate={(event) => console.log('update-obstacles', event)}
       on:create={(event) => console.log('create', event)}
       on:add-waypoint={(event) => console.log('add-waypoint', event)}
       on:delete-waypoint={(event) => console.log('delete-waypoint', event)}
-      on:update-obstacles={(event) => console.log('update-obstacles', event)}
     >
       <div slot="tab">
         <Label>