fix: update Vue template syntax and improve Vite config

- Fix Vue template syntax in App.vue by using proper event handler format
- Update Vite config to properly handle ESM imports and crypto modules
- Add manual chunks for better code splitting
- Improve environment variable handling in vite-env.d.ts
- Fix TypeScript linting errors in App.vue

src/components/InfiniteScroll.vue

@@ -7,12 +7,12 @@ loading state management. * * @author Matthew Raymer * @version 1.0.0 */
 <template>
   <div ref="scrollContainer">
     <slot />
-    <div ref="sentinel" style="height: 1px"></div>
+    <div ref="sentinel" style="height: 1px" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
 
 /**
  * InfiniteScroll Component
@@ -38,19 +38,19 @@ import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
 export default class InfiniteScroll extends Vue {
   /** Distance in pixels from the bottom at which to trigger the reached-bottom event */
   @Prop({ default: 200 })
-  readonly distance!: number;
+  readonly distance!: number
 
   /** Intersection Observer instance for detecting scroll position */
-  private observer!: IntersectionObserver;
+  private observer!: IntersectionObserver
 
   /** Flag to track initial render state */
-  private isInitialRender = true;
+  private isInitialRender = true
 
   /** Flag to prevent multiple simultaneous loading states */
-  private isLoading = false;
+  private isLoading = false
 
   /** Timeout ID for debouncing scroll events */
-  private debounceTimeout: number | null = null;
+  private debounceTimeout: number | null = null
 
   /**
    * Vue lifecycle hook that runs after component updates.
@@ -64,13 +64,10 @@ export default class InfiniteScroll extends Vue {
       const options = {
         root: null,
         rootMargin: `0px 0px ${this.distance}px 0px`,
-        threshold: 1.0,
-      };
-      this.observer = new IntersectionObserver(
-        this.handleIntersection,
-        options,
-      );
-      this.observer.observe(this.$refs.sentinel as HTMLElement);
+        threshold: 1.0
+      }
+      this.observer = new IntersectionObserver(this.handleIntersection, options)
+      this.observer.observe(this.$refs.sentinel as HTMLElement)
     }
   }
 
@@ -83,10 +80,10 @@ export default class InfiniteScroll extends Vue {
    */
   beforeUnmount() {
     if (this.observer) {
-      this.observer.disconnect();
+      this.observer.disconnect()
     }
     if (this.debounceTimeout) {
-      window.clearTimeout(this.debounceTimeout);
+      window.clearTimeout(this.debounceTimeout)
     }
   }
 
@@ -101,25 +98,25 @@ export default class InfiniteScroll extends Vue {
    * Used internally by the Intersection Observer
    * @emits reached-bottom - Emitted when the user scrolls near the bottom
    */
-  @Emit("reached-bottom")
+  @Emit('reached-bottom')
   handleIntersection(entries: IntersectionObserverEntry[]) {
-    const entry = entries[0];
+    const entry = entries[0]
     if (entry.isIntersecting && !this.isLoading) {
       // Debounce the intersection event
       if (this.debounceTimeout) {
-        window.clearTimeout(this.debounceTimeout);
+        window.clearTimeout(this.debounceTimeout)
       }
 
       this.debounceTimeout = window.setTimeout(() => {
-        this.isLoading = true;
-        this.$emit("reached-bottom", true);
+        this.isLoading = true
+        this.$emit('reached-bottom', true)
         // Reset loading state after a short delay
         setTimeout(() => {
-          this.isLoading = false;
-        }, 1000);
-      }, 300);
+          this.isLoading = false
+        }, 1000)
+      }, 300)
     }
-    return false;
+    return false
   }
 }
 </script>