Virtual List #

import { list } from "@inglorious/web/list"

const productList = {
  ...list,

  renderItem(item, index) {
    return html`
      <div class="product">
        ${index}: <strong>${item.name}</strong> — $${item.price}
      </div>
    `
  },
}

const types = {
  productList,
}

const entities = {
  products: {
    type: "productList",
    items: Array.from({ length: 10000 }, (_, i) => ({
      name: `Product ${i}`,
      price: Math.random() * 100,
    })),
    viewportHeight: 400,
    estimatedHeight: 40,
    bufferSize: 5,
  },
}

{
  type: 'list',
  items: [], // Data to render
  viewportHeight: 400, // Height of scrolling container
  itemHeight: null, // Fixed height (auto-measure if null)
  estimatedHeight: 40, // Fallback estimate
  bufferSize: 5, // Extra items to render before/after visible
  visibleRange: { start: 0, end: 10 }, // Current visible range
}

// On scroll
api.notify("#list:scroll", scrollContainerElement)

// Measure item height
api.notify("#list:measureHeight", containerElement)

const customList = {
  ...list,

  renderItem(item, index) {
    return html`
      <div class="item" @click=${() => console.log(item)}>
        <h3>${item.name}</h3>
        <p>${item.description}</p>
      </div>
    `
  },
}