type fixes various

eslint.config.js

@@ -17,6 +17,7 @@ export default [
       '.storybook/svelte-highlighting.js',
       'bin/css-to-js/',
       'bin/newComponent/',
+      '.svelte-kit/',
     ],
   },
   ...svelte,

package-lock.json

@@ -59,6 +59,7 @@
         "@types/node": "^22.4.2",
         "@types/prompts": "^2.4.9",
         "@types/proper-url-join": "^2.1.1",
+        "@types/pym.js": "^1.3.2",
         "@types/react-syntax-highlighter": "^15.5.7",
         "autoprefixer": "^10.4.14",
         "change-case": "^4.1.2",
@@ -6341,6 +6342,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/pym.js": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/pym.js/-/pym.js-1.3.2.tgz",
+      "integrity": "sha512-VOW0zLYOoBA2XTUN4W7wONN8nVe0Ir7zbJi7UzvHwAX2728tw6ggfM2Cz4D8HnGQLbRHn8Qf0WrGQNsLQxqIKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.9.15",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz",

package.json

@@ -72,6 +72,7 @@
     "@types/node": "^22.4.2",
     "@types/prompts": "^2.4.9",
     "@types/proper-url-join": "^2.1.1",
+    "@types/pym.js": "^1.3.2",
     "@types/react-syntax-highlighter": "^15.5.7",
     "autoprefixer": "^10.4.14",
     "change-case": "^4.1.2",

src/components/AdSlot/AdScripts.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
   import { loadBootstrap } from './adScripts/bootstrap';
   import { loadScript } from './adScripts/loadScript';

src/components/AdSlot/InlineAd.stories.svelte

@@ -7,15 +7,14 @@
   import AdScripts from './AdScripts.svelte';
   import InlineAd from './InlineAd.svelte';
 
-  import { withComponentDocs } from '../../docs/utils/withParams.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';
 
   const meta = {
-    component: InlineAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/InlineAd" {...meta} />
+<Meta title="Components/InlineAd" component="{InlineAd}" {...meta} />
 
 <Template>
   <div>

src/components/AdSlot/LeaderboardAd.stories.svelte

@@ -7,15 +7,14 @@
   import AdScripts from './AdScripts.svelte';
   import LeaderboardAd from './LeaderboardAd.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';
 
   const meta = {
-    component: LeaderboardAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/LeaderboardAd" {...meta} />
+<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />
 
 <Template>
   <div>

src/components/AdSlot/OneTrust.svelte

@@ -1,12 +1,12 @@
 <!-- This component manages the OneTrust prefs button, so it's not permanently fixed on page... -->
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
-  import { throttle } from 'lodash-es';
+  import throttle from 'lodash-es/throttle';
 
   let lastScroll = 0;
   let showManagePreferences = true;
 
-  const togglePrefs = (on = true) => {
+  const togglePrefs = (on: boolean = true) => {
     const btn = document.getElementById('ot-sdk-btn-floating');
     if (!btn) return;
     if (on) {
@@ -32,8 +32,13 @@
   };
 
   onMount(() => {
-    window.addEventListener('scroll', throttle(handleScroll, 250), {
+    if (typeof window === 'undefined') return;
+    const throttledHandle = throttle(handleScroll, 250);
+    window.addEventListener('scroll', throttledHandle, {
       passive: true,
     });
+    return () => {
+      window.removeEventListener('scroll', throttledHandle);
+    };
   });
 </script>

src/components/AdSlot/SponsorshipAd.stories.svelte

@@ -7,15 +7,14 @@
   import AdScripts from './AdScripts.svelte';
   import SponsorshipAd from './SponsorshipAd.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from './../../docs/utils/withParams';
 
   const meta = {
-    component: SponsorshipAd,
     ...withComponentDocs(adDocs),
   };
 </script>
 
-<Meta title="Components/SponsorshipAd" {...meta} />
+<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />
 
 <Template>
   <div>

src/components/AdSlot/adScripts/bootstrap.ts

@@ -30,7 +30,7 @@ export const loadBootstrap = () => {
         getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
       onetrust_script_id: ONETRUST_SCRIPT_ID,
     },
-    (onetrustResponse) => {
+    (onetrustResponse: any) => {
       const iasPromise = Ias();
       return Promise.all([iasPromise]).then((responses) => {
         const [iasResponse] = responses;

src/components/AdSlot/adScripts/loadScript.ts

@@ -10,7 +10,7 @@ export const loadScript = (src: string, attributes?: attributesInterface) => {
   if (existingScript) return;
 
   const script = document.createElement('script');
-  script.addEventListener('load', onload);
+  if (onload) script.addEventListener('load', onload);
   script.async = async;
   script.src = src;
   document.head.append(script);

src/components/BeforeAfter/BeforeAfter.svelte

@@ -68,13 +68,13 @@
    */
   export let id: string = 'before-after-' + random4() + random4();
 
-  let img;
-  let imgOffset = null;
+  let img: HTMLImageElement;
+  let imgOffset: DOMRect | null = null;
   let sliding = false;
-  let figure;
+  let figure: HTMLElement;
   let beforeOverlayWidth = 0;
   let isFocused = false;
-  let containerWidth;
+  let containerWidth: number;
 
   $: containerHeight =
     containerWidth && heightRatio ? containerWidth * heightRatio : height;
@@ -88,7 +88,7 @@
 
   const onFocus = () => (isFocused = true);
   const onBlur = () => (isFocused = false);
-  const handleKeyDown = (e) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (!isFocused) return;
     const { keyCode } = e;
     const margin = handleMargin / w;
@@ -107,15 +107,16 @@
     measureImage();
   };
 
-  const measureLoadedImage = (e) => {
+  const measureLoadedImage = (e: Event) => {
     if (e.type === 'load') {
-      imgOffset = e.target.getBoundingClientRect();
+      imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
     }
   };
 
-  const move = (e) => {
+  const move = (e: MouseEvent | TouchEvent) => {
     if (sliding && imgOffset) {
-      const el = e.touches ? e.touches[0] : e;
+      const el =
+        e instanceof TouchEvent && e.touches ? e.touches[0] : (e as MouseEvent);
       const figureOffset =
         figure ?
           parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
@@ -128,7 +129,7 @@
       offset = x / w;
     }
   };
-  const start = (e) => {
+  const start = (e: MouseEvent | TouchEvent) => {
     sliding = true;
     move(e);
   };
@@ -171,7 +172,7 @@
         on:touchstart="{start}"
         on:mousedown="{start}"
         bind:this="{figure}"
-        aria-labelledby="{$$slots.caption && `${id}-caption`}"
+        aria-labelledby="{($$slots.caption && `${id}-caption`) || undefined}"
       >
         <img
           bind:this="{img}"
@@ -181,7 +182,8 @@
           on:mousedown|preventDefault
           style="{imgStyle}"
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
+          aria-describedby="{($$slots.beforeOverlay && `${id}-before`) ||
+            undefined}"
         />
 
         <img
@@ -190,7 +192,8 @@
           on:mousedown|preventDefault
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
+          aria-describedby="{($$slots.afterOverlay && `${id}-after`) ||
+            undefined}"
         />
         {#if $$slots.beforeOverlay}
           <div

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -92,6 +92,7 @@
   } from '@fortawesome/free-solid-svg-icons';
   import { fly } from 'svelte/transition';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
 
   let containerWidth: number;
 
@@ -102,7 +103,8 @@
       Math.min(containerWidth * heightRatio, maxHeight)
     : maxHeight;
 
-  const handleActiveChange = (e) => {
+  const handleActiveChange = (e?: CustomEvent<MoveEventDetail>) => {
+    if (!e) return;
     activeImageIndex = e.detail.dest;
   };
 </script>

src/components/PhotoPack/PhotoPack.svelte

@@ -59,9 +59,9 @@
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
 
-  let containerWidth;
+  let containerWidth: number;
 
-  const groupRows = (images, layout) => {
+  const groupRows = (images: Image[], layout?: Layout) => {
     // Default layout, one img per row
     if (!layout) return images.map((img) => [img]);
     // Otherwise, chunk into rows according to layout scheme

src/components/ReferralBlock/ReferralBlock.svelte

@@ -50,7 +50,7 @@
   import { onMount } from 'svelte';
   import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
 
-  let clientWidth;
+  let clientWidth: number;
 
   const SECTION_API = 'recent-stories-by-sections-v1';
   const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';