Vue-Infinity

Vue Infinity is a modular toolkit designed for building high-performance, memory-efficient, and media-rich applications using Vue.js. This tool optimizes user experiences by leveraging smart data fetching and virtualized rendering, ensuring that applications remain responsive even when handling large datasets.

Key Features

InfiniteList

The InfiniteList feature allows for reactive and paginated access to extensive data sets with full type support. Key capabilities include:

• Paginated data access
• Caching that automatically unloads older pages based on a least-recently-used basis
• Access to items by index
• Cancellation of in-flight network requests using AbortController

Example Usage:

const { pages, getItem, fetchPage } = useInfiniteList({
  fetchItems: async (page, signal) => {
    const response = await fetch(`/api/items?page=${page}`, { signal });
    return response.json();
  },
  itemsPerPage: 50,
  maxPagesToCache: 5
});

InfiniteCarousel

The InfiniteCarousel component is designed for grid-style or carousel layouts, featuring:

• Integration with InfiniteList for efficient data management
• Customizable rows and columns
• Configuration for horizontal or vertical scrolling
• Support for custom loading templates and item templates
• Dynamic item sizing via an onGetItemAspectRatio callback function

Example Usage:

<template>
  <InfiniteCarousel
    :infinite-list="infiniteList"
    :height="'50vh'"
    :width="'100%'"
    :numColsToShow="3"
    :numRowsToShow="2"
  >
    <template #item="{ item, index }">
      <img :src="item.url" :alt="item.title" class="carousel-img"/>
    </template>
  </InfiniteCarousel>
</template>

<script setup>
import { useInfiniteList } from 'vue-infinity';

const infiniteList = useInfiniteList({
  fetchItems: (page) => fetchPage(page),
  itemsPerPage: 20,
  maxPagesToCache: 5
});
</script>

AutoObserver

AutoObserver extends the native IntersectionObserver, automatically managing elements in a target container. Features include:

• Observing newly added elements and ceasing observation of removed ones
• Filtering logic for observed elements
• Automatic cleanup upon component unmount

Example Usage:

const containerRef = ref<HTMLElement>();

const { disconnect } = useAutoObserver(
  containerRef,
  (entries) => {
    entries.forEach(entry => {
      console.log('Element visibility changed:', entry.isIntersecting);
    });
  },
  {
    rootMargin: '200px',
    threshold: 0.1,
    filter: el => el.classList.contains('observe-me')
  }
);

Ghost Component

The Ghost component improves performance by conditionally rendering its slot content. When content is off-screen, it is replaced with a dimensionally identical placeholder, optimizing resource use while ensuring layout stability. It also emits events tied to content visibility, such as on-load, before-unload, and on-unload.

Example Usage:

<Ghost @on-load="handleLoad" @before-unload="handleBeforeUnload" @on-unload="handleUnload">
  <div style="height: 300px; background-color: lightblue;">
    This content will be replaced when not visible.
  </div>
</Ghost>

Live Demo

A live demonstration of Vue Infinity is available for exploration here: [Live Demo](https://tewolde.