vanilla-virtua: virtua for vanilla js

[aabccd021]

vanilla-virtua is virtua for vanilla js, made for whose don't use any frontend library but want to use virtua for virtualized list.

Currently, the implementation and supported arguments are very minimal, and appendChildren is the only list modification method supported.

Example usage:

import { appendChildren, init } from "vanilla-virtua";

const heights = [20, 40, 80, 77];

const createRows = () => 
  Array.from({ length: 30 }).map((_, i) => {
    const item = document.createElement("div");
    const height = heights[i % 4];
    item.style.height = `${height}px`;
    item.style.borderBottom = "solid 1px #ccc";
    item.textContent = `Height: ${height}px`;
    return item;
  });

// Initialize list with 30 items
const initialRows = createRows();
const vlist = init({ children: initialRows });

// Mount list
document
  .getElementById("app")!
  .appendChild(vlist.root);

// Append 30 items when button is clicked
document
  .getElementById("append-button")!
  .addEventListener("click", () => {
    const newRows = createRows();
    appendChildren(vlist.context, newRows);
  })

Currenlty I use fork of virtua that exposes core module in package.json, and will migrate to upstream once #428 is implmented.

Please let me know if you have an opinion for wether this package should be merged to virtua for tighter integration through tests, or should be kept as separate project for separation of concern.

[inokawa]

@aabccd021
Hi, thank you for creating such a nice project!

Currently I don't have any plan to add new adapters to this repo, because maintaining adapters for 4 major frameworks and answering questions for them are hard enough for me.

Also I think it's OK anyone create their own adapter and maintain it by themselves. I can publish core module of virtua in a few days. It's API is still unstable (almost mature
though) so please use at your own risk. And with your permission, I can include your library in readme and recommend it to visitors.

[aabccd021]

Thank you for the response!

Currently I don't have any plan to add new adapters to this repo, because maintaining adapters for 4 major frameworks and answering questions for them are hard enough for me.

Also I think it's OK anyone create their own adapter and maintain it by themselves. I can publish core module of virtua in a few days. It's API is still unstable (almost mature
though) so please use at your own risk.

Very understandable. I personally think the core module is one nice way to abstract virtua, and having a react adaptor implementation as an example makes development of other adapters much easier, so thank you for doing that.

And yes I'd like to have this library to be included in virtua's readme 👍

[inokawa]

@aabccd021
OK. Could you try 0.40.0?
It doesn't have d.ts for now. We should fix it later if needed.

[aabccd021]

It worked fine and all the tests (that previously passed) also passed. d.ts files definitely would be helpful since I also use typescript.

[bexzodaxmadjonov]

Nice job, appreciate your effort!!!