resolve svelte-fix errors (#106)

# Description
When running `npm run check` we should get no errors. Resolve all errors
or as many as possible.

- Closes #105 

## Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)

# How to Test?

run `npm run check` and see that there is only the mouse exit/enter
errors. According to multiple forums, that is a known error that we
can't yet solve.

# Checklist:

- [ ] I have performed a self-review of my code
- [ ] I have commented my code & PR, particularly in hard-to-understand
areas
- [ ] I have checked at all the breakpoints to make sure it works on all
screen sizes

---------

Co-authored-by: Claire Olmstead <[email protected]>

package.json

@@ -47,6 +47,7 @@
   "type": "module",
   "dependencies": {
     "@frequency-chain/style-guide": "^0.1.24",
-    "@lottiefiles/dotlottie-web": "^0.37.0-beta.8"
+    "@lottiefiles/dotlottie-web": "^0.37.0-beta.8",
+    "@tsconfig/svelte": "^5.0.4"
   }
 }

src/components/Animations/Home.svelte

@@ -8,7 +8,7 @@
   src="{base}/animation/home-dot.lottie"
   autoplay
   playOnVisible
-  speed="0.8"
+  speed={0.8}
   layout={{ fit: 'fit-width', align: [0.5, 0.5] }}
   renderConfig={{ autoResize: true }}
 />

src/components/GetNotified/ContactThankYou.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import ThankYouWaves from '$lib/assets/Contact/ThankYouWave.svg';
 
-  let { onClick = async () => {} } = $props();
+  export let onClick: (e: MouseEvent) => void;
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="flex cursor-pointer items-center justify-center" onclick={onClick}>
+<button class="flex cursor-pointer items-center justify-center" onclick={onClick}>
   <img src={ThankYouWaves} alt="Frequency waves with 'Thank you!' caption" />
-</div>
+</button>

src/components/GetNotified/GetNotified.svelte

@@ -27,8 +27,9 @@
   // form.checkValidity doesn't work b/c StyleGuide doesn't propagate
   // 'required' into its form inputs.
   const checkValidity = (form: HTMLElement): boolean => {
-    for (let input of form.getElementsByClassName('required')) {
-      if (!input?.value) return false;
+    for (const element of form.getElementsByClassName('required')) {
+      const input = element as HTMLInputElement;
+      if (!input.value) return false;
     }
     return true;
   };
@@ -49,7 +50,7 @@
     if (isPartnership) formData.append(fieldMapping.partnerInterest, 'Partner');
 
     try {
-      let response: unknown;
+      let response: Partial<Response>;
       if (dev) {
         response = {
           ok: true,

src/components/Grow.svelte

@@ -8,8 +8,8 @@
 <div
   class="grow-out transition-all duration-1000 {grow} {klass}"
   use:viewport
-  onenterViewport={() => (grow = 'grow-in')}
-  onexitViewport={() => (grow = '')}
+  {...{ onenterViewport: () => (grow = 'grow-in') } as any}
+  {...{ onexitViewport: () => (grow = '') } as any}
 >
   {@render children?.()}
 </div>

src/components/OpenCloseIcon.svelte

@@ -2,12 +2,17 @@
   export let onClick: () => void;
   export let isOpen: boolean;
   export let classes: string = '';
+
+  function handleOnClick(event: Event) {
+    event.preventDefault();
+    onClick();
+  }
 </script>
 
 <button
   aria-label="Open main navigation"
   aria-controls="mobile-navigation"
-  on:click|preventDefault={onClick}
+  onclick={handleOnClick}
   class={`z-50 ${classes}`}
 >
   <svg class="h-[40px] w-[40px]" role="none">

src/components/Sections/Mission/MissionStatement.svelte

@@ -13,7 +13,7 @@
   </div>
 </div>
 
-<style>
+<style lang="postcss">
   .text-slider-container {
     @apply flex flex-col gap-0;
     animation: text-slide 10s linear infinite;

src/components/Sections/Top/Top.svelte

@@ -33,7 +33,7 @@
   </div>
 </SectionWrapper>
 
-<style>
+<style lang="postcss">
   .top-title {
     @apply font-title leading-[1] tracking-wide text-primary xs:text-[50px] sm:text-[60px] md:text-[75px] lg:text-[90px];
   }

src/components/SlideIn.svelte

@@ -8,8 +8,8 @@
 <div
   class={`slide-out transition-all duration-1000 ${slide} ${klass}`}
   use:viewport
-  onenterViewport={() => (slide = 'slide-in')}
-  onexitViewport={() => (slide = '')}
+  {...{ onenterViewport: () => (slide = 'slide-in') } as any}
+  {...{ onexitViewport: () => (slide = '') } as any}
 >
   {@render children?.()}
 </div>

src/lib/index.test.ts

@@ -1,5 +1,5 @@
-import { add } from '$lib';
 import { describe, it, expect } from 'vitest';
+import { add } from '$lib/index';
 
 describe('sum test', () => {
   it('adds 1 + 2 to equal 3', () => {

src/lib/vendor/LottieWrapper.svelte

@@ -50,13 +50,13 @@
   let prevSrc: string | undefined = undefined;
   let prevData: Config['data'] = undefined;
   // Render each different src in a different worker
-  let workerId = 'lottie-' + src.replace('/', '-');
+  let workerId = 'lottie-' + src?.replace('/', '-');
 
   onMount(() => {
     const shouldAutoplay = autoplay && !playOnHover;
     dotLottie = new DotLottie({
       canvas,
-      src: src.includes('://') ? src : new URL(src, self.location.href).toString(),
+      src: src?.includes('://') ? src : new URL(src || '', self.location.href).toString(),
       autoplay: shouldAutoplay,
       loop,
       speed,
@@ -142,7 +142,7 @@
 
   $: if (dotLottie && src !== prevSrc) {
     dotLottie.load({
-      src: src.includes('://') ? src : new URL(src, self.location.href).toString(),
+      src: src?.includes('://') ? src : new URL(src || '', self.location.href).toString(),
       autoplay,
       loop,
       speed,
@@ -155,8 +155,8 @@
       marker,
       layout,
       workerId,
-    });
-    prevSrc = src;
+    } as any);
+    prevSrc = src = data as any;
   }
 
   $: if (dotLottie && data !== prevData) {
@@ -174,20 +174,25 @@
       marker,
       layout,
       workerId,
-    });
-    prevData = data;
+    } as any);
+    prevData = data as any;
   }
 
   $: if (dotLottie && dotLottie.isLoaded && dotLottie.activeAnimationId !== animationId) {
-    dotLottie.loadAnimation(animationId);
+    (dotLottie as any).loadAnimation(animationId);
   }
 
   $: if (dotLottie && dotLottie.isLoaded && dotLottie.activeThemeId !== themeId) {
-    dotLottie.loadTheme(themeId);
+    (dotLottie as any).loadTheme(themeId);
   }
 
   $: if (dotLottie && dotLottie.isLoaded) {
-    dotLottie.loadThemeData(themeData);
+    (dotLottie as any).loadThemeData(themeData);
+  }
+
+  function onEnterCanvas() {
+    dotLottie?.setFrame(0);
+    dotLottie?.play();
   }
 </script>
 
@@ -196,13 +201,8 @@
     class="block h-full w-full {$$restProps.class}"
     bind:this={canvas}
     use:viewport={{ threshold: 0.3 }}
-    on:enterViewport={() => {
-      dotLottie?.setFrame(0);
-      dotLottie?.play();
-    }}
-    on:exitViewport={() => {
-      dotLottie?.stop();
-    }}
+    {...{ onenterViewport: () => onEnterCanvas() } as any}
+    {...{ onexitViewport: () => dotLottie?.stop() } as any}
   >
   </canvas>
 {:else}

svelte.config.js

@@ -21,6 +21,11 @@ const config = {
     paths: {
       base: dev ? '' : process.env.BASE_PATH,
     },
+    alias: {
+      $components: 'src/components',
+      $lib: 'src/lib',
+      routes: 'src/routes',
+    },
   },
 };
 

tsconfig.json

@@ -10,9 +10,12 @@
     "sourceMap": true,
     "strict": true,
     "moduleResolution": "bundler",
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+    "types": ["svelte", "@sveltejs/kit", "vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias,
+  // but we still need to define the paths here or else we will get a "Cannot find module '*.svelte' or its corresponding type declarations" error
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in