virtual-list | 🧾 React Virtual List Component which worked with animation | Frontend Utils library

I think I managed to solve this.

https://codesandbox.io/s/vertical-list-forked-risye

You did not pass styles property in your rowRenderer to virtualize handle your rows in the right way.

Also you Autosizer was not growing past height: 0 because its' parent did not have any styles.

A VirtualList creates items until the height of the list exceed the height of the parent. It then fakes a scrollbar to select which items it should render.

Apparently, you have placed the VirtualList in a container without height/max-height and it can't determine how many items it should create.

You have to set a max-height or a height on the parent element.

I dug into the AutoSizer component to find the answer.

The error was logged because the children property of the AutoSizer HOC was not being rendered since the width and height values were 0. This is also why everything still functioned normally, as the width and height state values were eventually updated, but only after the initial render.

AutoSizer (index.esm.js):

It's a small issue with your filter. You convert the product name to lower case but not the filter term ;) If you enter acetone instead of Acetone, then it works. The fix:

The svelte field is used by rollup-plugin-svelte and (if properly configured) svelte-loader to locate the source file, so that your third party components get compiled at the same time as the rest of your app (and import from the same internal library).

In a case like svelte-virtual-list, where you can't really use it programmatically from JavaScript (i.e. it has to be inside another component), there's really no point having a main field as well; that's something left over from a previous version I think.

But in some cases you do want non-Svelte-users to be able to use your component as a standalone class, and that's when main is useful, as long as it points to a precompiled JavaScript file. This could be generated with rollup-plugin-svelte during a prepublish script (though we could do a better job of generating some standard workflows around this). For maximum compatibility, a component — or package of components — intended to be used in this way should have a pkg.main (usually index.js which is a CommonJS or UMD file), and a pkg.module (usually index.mjs which is a JavaScript module).

Additionally I am perplexed by the fact that in the package.json.files the VirtualList.svelte is not present?

Regardless of what's in pkg.files, pkg.main will always be included. Since there's an erroneous pkg.main in svelte-virtual-list, the VirtualList.svelte file is included in the package even though I forgot to add it to pkg.files.

If you're having trouble implementing the virtual scroll, note that the order of the imports is important when doing this, so pay heed to this - it could be contributing to your issue. (An aside: There is an npm plugin for implementing a virtual list.)

An overview of the import order for virtual scroll is:

You should alter the array of data instead of mutating the object. By mutating the object inside the array, Svelte does not know that your array has changed.

Mutating the array would go something like this with Svelte v3 and using a store instead of plain-array:

You're doing to much in the data section, instead use a function or a computed value to get your random name.

For example,

yarn upgrade does not update package.json, only the lock file. Actually, none of the yarn upgrade flags do. There's a long discussion about this in here

You can do the following:

• Reinstall React with yarn add react@latest
• Install a npm package to check updates, for example, npm-check-updates. Run it to update package.json and then try yarn install.
• Or you can install that specific React version yarn upgrade react@16.8.2.

This is the intended behaviour, even though it is very confusing in the docs.