From 5834fd30082bbdd749359448d7719731e4aedfd8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 16:22:31 -0700
Subject: [PATCH] component working now, need sanity check for other svelte 5
 updates

---
 .../BeforeAfter/BeforeAfter.stories.svelte    | 50 +++++++++++--------
 src/components/BeforeAfter/BeforeAfter.svelte | 26 ++++++----
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 4b4ed935..5ba7b736 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -39,15 +39,21 @@
     afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div slot="beforeOverlay" class="overlay p-3 before">
-      <p class="h4 font-bold">July 7, 2020</p>
-      <p class="body-note">Initially, this site was far smaller.</p>
-    </div>
-    <div slot="afterOverlay" class="overlay p-3 after">
-      <p class="h4 font-bold">Oct. 20, 2020</p>
-      <p class="body-note">But then forces built up.</p>
-    </div>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+    {#snippet beforeOverlay()}
+      <div class="overlay p-3 before">
+        <p class="h4 font-bold">July 7, 2020</p>
+        <p class="body-note">Initially, this site was far smaller.</p>
+      </div>
+    {/snippet}
+    {#snippet afterOverlay()}
+      <div class="overlay p-3 after">
+        <p class="h4 font-bold">Oct. 20, 2020</p>
+        <p class="body-note">But then forces built up.</p>
+      </div>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
   </BeforeAfter>
 
   <style lang="scss">
@@ -71,15 +77,16 @@
     afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div let:description={id} slot="beforeOverlay" class="overlay p-3">
-      <p class="body-caption" {id}>
-        On July 7, 2020, the base contained only a few transport vehicles.
-      </p>
-    </div>
-    <div let:description={id} slot="afterOverlay" class="overlay p-3">
-      <!-- 👇 id can also be used on an element containing multiple text elements -->
-      <div {id}>
-        <p class="body-caption">
+    {#snippet beforeOverlay()}
+      <div let:description={id} class="overlay p-3">
+        <p class="body-caption" {id}>
+          On July 7, 2020, the base contained only a few transport vehicles.
+        </p>
+      </div>
+    {/snippet}
+    {#snippet afterOverlay()}
+      <div let:description={id} class="overlay p-3">
+        <p class="body-caption" {id}>
           But by October, tanks and artillery could be seen.
         </p>
         <p class="body-caption">
@@ -87,9 +94,12 @@
           based here.
         </p>
       </div>
-    </div>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
   </BeforeAfter>
+
   <style lang="scss">
     div.overlay {
       max-width: 250px;
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 293bb582..a97a33a4 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -88,19 +88,23 @@
     caption,
   }: Props = $props();
 
-  let img: HTMLImageElement;
-  let imgOffset: DOMRect | null = null;
+  /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
+   */
+  let img: HTMLImageElement | undefined = $state(undefined);
+
+  /** Defaults with an empty DOMRect with all values set to 0 */
+  let imgOffset: DOMRect = $state(new DOMRect());
   let sliding = false;
-  let figure: HTMLElement;
-  let beforeOverlayWidth = 0;
+  let figure: HTMLElement | undefined = $state(undefined);
+  let beforeOverlayWidth = $state(0);
   let isFocused = false;
-  let containerWidth: number;
+  let containerWidth: number = $state(0); // check if this should be undefined
 
   let containerHeight = $derived(
     containerWidth && heightRatio ? containerWidth * heightRatio : height
   );
 
-  let w = $derived((imgOffset && imgOffset.width) || 0);
+  let w = $derived(imgOffset.width);
   let x = $derived(w * offset);
   let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
   const imgStyle = 'width:100%;height:100%;';
@@ -110,13 +114,15 @@
 
   const onfocus = () => (isFocused = true);
   const onblur = () => (isFocused = false);
+
+  /** Handle left or right arrows being pressed */
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isFocused) return;
-    const { keyCode } = e; // DEPRECATED, change to key or code tk
+    const { code, key } = e;
     const margin = handleMargin / w;
-    if (keyCode === 39) {
+    if (code === 'ArrowRight' || key === 'ArrowRight') {
       offset = Math.min(1 - margin, offset + keyPressStep);
-    } else if (keyCode === 37) {
+    } else if (code === 'ArrowLeft' || key === 'ArrowLeft') {
       offset = Math.max(0 + margin, offset - keyPressStep);
     }
   };
@@ -129,6 +135,7 @@
     measureImage();
   };
 
+  /** This can probably get fixed?? */
   const measureLoadedImage = (e: Event) => {
     if (e.type === 'load') {
       imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
@@ -182,6 +189,7 @@
   <Block {width} {id} class="photo before-after fmy-6 {cls}">
     <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+
       <figure
         style={figStyle}
         class="before-after-container relative overflow-hidden my-0 mx-auto"