zero-virtual 0.7: Grids and Masonry

Installation

npm install @rocicorp/zero-virtual@0.7

Overview

zero-virtual 0.7 adds grid and masonry layouts, and makes back/forward restores and permalink jumps more reliable.

Features

• Lists can now be laid out as a grid of equal columns with lanes. Each row's lane is its column. (#84)
• Masonry packs cards of different heights into the shortest column, Pinterest style. Cards keep their column as the list pages, stay put when cards above them resize, and return to the same place on back/forward. Apps that don't use masonryLayout don't bundle it. (#87)

Fixes

• Back/forward restores and permalink jumps now hold their position while the rows around them load, instead of drifting as rows arrive above. (#83)
• useHistoryScrollState and Solid's createHistoryScrollState now save a scroll position that is still pending when the page navigates, so going back returns to where you left. (#85)
• Apps that store the scroll state somewhere that hands it straight back, such as a router reading history.state, no longer make the list restore its own position on every scroll. (#89)
• Stick-to-bottom keeps following new content when getScrollElement is not a stable function. (#91)
• The npm package no longer includes a test helper that imports vitest. (#88)

Breaking Changes

Most apps need no changes:

• If you pass observeElementRect or observeElementOffset, remove them; the element and window hooks watch their scroll container as before. If you read result.options, use result.scrollElement. The observe* functions and their types are no longer exported. (#91)
• If your getPageQuery reads fields of start that toStartRow doesn't return, add them to toStartRow. start is now exactly what toStartRow returns, as its type always said; before 0.7, page queries received the whole row. (#88)
• If you build a binding on the experimental @rocicorp/zero-virtual/core, pass elementScroller or windowScroller to ZeroVirtualizer instead of observer options, and read a row lookup from rows.lookup. The core's DOM and history-store internals are no longer exported. (#89, #90, #91)