virtual Improvements (Dynamic Item Sizes, Fix Broken Reactivity)

[jaydevelopsstuff]

This adds support for dynamic item sizes in the virtual package.

This is accomplished by adding | (row: T[number], index: number) => number) to the rowHeight parameter, and type-checking for either case within createVirtualList.

type VirtualListConfig<T extends readonly any[]> = {
    // ...
    rowHeight: MaybeAccessor<number | ((row: T[number], index: number) => number)>;
};

I also added scrollToItem to VirtualListReturn as a utility function for scrolling to a specified item index.

I'm implementing this because I need it for use in another project, so if I end up needing more features I'll implement them (but I'm also happy to work on other stuff if it's requested). This is an early stage PR and my first crack back at SolidJS in almost half a year after working on other projects, so I'm very rusty and probably didn't implement all of this idiomatically—please correct me if necessary.

(Also contains a small patch to add type to an import in site/src/primitives/DocumentHydrationHelper.tsx, since the dev server would not run without that change)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9dc934b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jaydevelopsstuff]

I tried to provide a way to access scrollToItem from the VirtualList component, but after doing a bit of searching I couldn't seem to find any documentation on idiomatic ways to do this. So I implemented this wildly hacky method which I'm hoping someone can help me replace with something more practical:

type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
    // ...
    setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};

// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));

In Use:

let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
    // ...
    setScrollToItem={fn => (scrollToItem = fn)}
    // ...
>
{/* ... */}
</VirtualList>

Broken Reactivity *Now Fixed by this PR*

Also, reactivity seems to be broken for the VirtualList component. On the demo site (both in dev and at the main site, changes to # of rows, root height, row height, etc., will be reflected everywhere but inside the component. I fiddled around with things for awhile in an attempt to fix this to no avail.

[jaydevelopsstuff]

Alright, I fixed the issue with reactivity being broken by not unwrapping accessors at the top level of createVirtualList.

Would still like some help with exposing scrollToItem properly outside of the VirtualList component though.

[atk]

An accessor that returns a function is a bit stupid. Shouldn't it be MaybeAccessor<number> | ((row: T[number], index: number) => number)?

[atk]

The whole function is already pretty complex without the binary search being included inside. I would like to ask you to extract from the function and use offsets as another parameter.