virtual-scroller 1.14.0 → 1.15.0

package/source/react/useState.js

@@ -2,7 +2,7 @@ import log, { isDebug } from '../utility/debug.js'
 import getStateSnapshot from '../utility/getStateSnapshot.js'
 
 import { useRef, useCallback } from 'react'
-import useStateNoStaleBug from './useStateNoStaleBug.js'
+import useStateWithRepeatableRead from './useStateWithRepeatableRead.js'
 import useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js'
 import useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'
 
@@ -16,7 +16,7 @@ export default function _useState({
 	// `VirtualScroller` state gets updated from this variable.
 	// The reason for that is that `VirtualScroller` state must always
 	// correspond exactly to what's currently rendered on the screen.
-	const [_newState, _setNewState] = useStateNoStaleBug(initialState)
+	const [_newState, _setNewState] = useStateWithRepeatableRead(initialState)
 
 	// This `state` reference is what `VirtualScroller` uses internally.
 	// It's the "source of truth" on the actual `VirtualScroller` state.
@@ -38,11 +38,11 @@ export default function _useState({
 	// called `onHeightDidChange()` from its own `useLayoutEffect()`.
 	// In those cases, the `itemCompoent`'s effect would run before
 	// the `<VirtualScroller/>`'s effect, resulting in
-	// `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time
+	// `VirtualScroller.onItemHeightDidChange(item)` being run at a moment in time
 	// when the DOM has already been updated for the next `VirtualScroller` state
 	// but the actual `VirtualScroller` state is still a previous ("stale") one
 	// containing "stale" first/last shown item indexes, which would result in an
-	// "index out of bounds" error when `onItemHeightDidChange(i)` tries to access
+	// "index out of bounds" error when `onItemHeightDidChange(item)` tries to access
 	// and measure the DOM element from item index `i` which doesn't already/yet exist.
 	//
 	// An example of such situation could be seen from a `VirtualScroller` debug log
@@ -98,11 +98,11 @@ export default function _useState({
 	// ~ Rendered ~
 
 	// "~ Rendered ~" is what gets output when `onRender()` function gets called.
-	// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`
+	// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(item)`
 	// was called and after the "ERROR" happened.
 	//
 	// The "ERROR" happened because new item indexes 4…5 were actually rendered instead of
-	// item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function
+	// item indexes 2…5 by the time the application called `onItemHeightDidChange(item)` function
 	// inside `itemComponent`'s `useLayoutEffect()`.
 	// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.
 	// This means that `_newState` changes have been applied to the DOM

package/source/react/{useStateNoStaleBug.js → useStateWithRepeatableRead.js}

@@ -2,7 +2,7 @@ import { useRef, useState, useCallback } from 'react'
 
 // This hook fixes any weird intermediate inconsistent/invalid/stale state values.
 // https://github.com/facebook/react/issues/25023#issuecomment-1480463544
-export default function useStateNoStaleBug(initialState) {
+export default function useStateWithRepeatableRead(initialState) {
   // const latestValidState = useRef(initialState)
   const latestWrittenState = useRef(initialState)
   const [_state, _setState] = useState(initialState)

package/source/react/useStyle.js

@@ -1,11 +1,11 @@
 import px from '../utility/px.js'
 
-export default function useStyle({
+export default function useStyle(style, {
 	tbody,
 	state
 }) {
 	if (tbody) {
-		return
+		return style
 	}
 
 	const {
@@ -14,6 +14,7 @@ export default function useStyle({
 	} = state
 
 	return {
+		...style,
 		paddingTop: px(beforeItemsHeight),
 		paddingBottom: px(afterItemsHeight)
 	}

package/source/react/useValidateTableBodyItemsContainer.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+
+// A developer might "forget" to pass `itemsContainerComponent="tbody"` property
+// when using a `<tbody/>` as a container for list items.
+// This hook validates that the developer didn't "forget" to do that in such case.
+export default function useValidateTableBodyItemsContainer({
+	virtualScroller,
+	tbody
+}) {
+	useEffect(() => {
+		const isTableBodyItemsContainer = virtualScroller.isItemsContainerElementTableBody()
+		if (isTableBodyItemsContainer && !tbody) {
+			console.error('[virtual-scroller] When using `<tbody/>` as a container for list items, `itemsContainerComponent` property must be `"tbody"`')
+		}
+	}, [])
+}

package/source/react/useVirtualScroller.js

@@ -9,6 +9,7 @@ export default function useVirtualScroller({
 	estimatedItemHeight,
 	getEstimatedItemHeight,
 	getEstimatedVisibleItemRowsCount,
+	getEstimatedInterItemVerticalSpacing,
 	bypass,
 	// bypassBatchSize,
 	onItemInitialRender,
@@ -23,17 +24,16 @@ export default function useVirtualScroller({
 	getScrollableContainer,
 	getColumnsCount,
 	getItemId,
-	AsComponent,
 	initialState,
 	getInitialItemState,
 	onStateChange
 }, {
-	container
+	itemsContainer
 }) {
 	return useMemo(() => {
 		// Create `virtual-scroller` instance.
 		return new VirtualScroller(
-			() => container.current,
+			() => itemsContainer.current,
 			items,
 			{
 				_useTimeoutInRenderLoop: true,
@@ -41,6 +41,7 @@ export default function useVirtualScroller({
 				estimatedItemHeight,
 				getEstimatedItemHeight,
 				getEstimatedVisibleItemRowsCount,
+				getEstimatedInterItemVerticalSpacing,
 				bypass,
 				// bypassBatchSize,
 				onItemInitialRender,

package/source/test/ItemsContainer.js

@@ -32,21 +32,21 @@ export default class ItemsContainer {
 
 		let i = 0
 		while (i <= renderedElementIndex) {
-			if (startNewRow || rowWidth + children[i].width > maxWidth) {
+			if (startNewRow || rowWidth + children[i].getWidth() > maxWidth) {
 				if (i > 0) {
 					topOffset += rowHeight
-					topOffset += children[i].marginTop
+					topOffset += children[i].getMarginTop()
 				}
-				rowWidth = children[i].width
-				rowHeight = children[i].height
+				rowWidth = children[i].getWidth()
+				rowHeight = children[i].getHeight()
 				if (rowWidth > maxWidth) {
 					startNewRow = true
 				} else {
 					startNewRow = false
 				}
 			} else {
-				rowWidth += children[i].width
-				rowHeight = Math.max(rowHeight, children[i].height)
+				rowWidth += children[i].getWidth()
+				rowHeight = Math.max(rowHeight, children[i].getHeight())
 			}
 			i++
 		}
@@ -69,7 +69,7 @@ export default class ItemsContainer {
 			})
 		}
 
-		return children[renderedElementIndex].height
+		return children[renderedElementIndex].getHeight()
 	}
 
 	/**
@@ -86,11 +86,11 @@ export default class ItemsContainer {
 			let rowHeight = 0
 			while (rowWidth <= maxWidth && i < children.length) {
 				if (rowWidth === 0 && i > 0) {
-					const verticalSpacing = children[i].marginTop
+					const verticalSpacing = children[i].getMarginTop()
 					contentHeight += verticalSpacing
 				}
-				rowWidth += children[i].width
-				rowHeight = Math.max(rowHeight, children[i].height)
+				rowWidth += children[i].getWidth()
+				rowHeight = Math.max(rowHeight, children[i].getHeight())
 				i++
 			}
 			contentHeight += rowHeight

package/source/test/VirtualScroller.js

@@ -65,17 +65,15 @@ export default class TestVirtualScroller {
 				lastShownItemIndex
 			} = this.virtualScroller.getState()
 
-			console.log('~ Render List ~')
-
 			containerElement.paddingTop = beforeItemsHeight
 			containerElement.paddingBottom = afterItemsHeight
 
 			containerElement.children = items
 				.slice(firstShownItemIndex, lastShownItemIndex + 1)
 				.map((item) => ({
-					width: getItemWidth(),
-					height: item.area / getItemWidth(),
-					marginTop: verticalSpacing
+					getWidth: () => getItemWidth(),
+					getHeight: () => (item.getArea ? item.getArea() : item.area) / getItemWidth(),
+					getMarginTop: () => verticalSpacing
 				}))
 		}
 
@@ -165,7 +163,7 @@ export default class TestVirtualScroller {
 		this.virtualScroller.scrollableContainer.scrollToY(scrollPosition)
 	}
 
-	resize({
+	updateScreenDimensions({
 		screenWidth: scrollableContainerWidth,
 		screenHeight: scrollableContainerHeight,
 		columnsCount
@@ -185,7 +183,7 @@ export default class TestVirtualScroller {
 		columnsCount,
 		verticalSpacing
 	}) {
-		this.resize({
+		this.updateScreenDimensions({
 			screenWidth,
 			screenHeight,
 			columnsCount,
@@ -218,12 +216,20 @@ export default class TestVirtualScroller {
 		this.virtualScroller.updateLayout()
 	}
 
-	getItemScrollPosition(i) {
-		return this.virtualScroller.getItemScrollPosition(i)
+	getItemScrollPosition(itemOrIndex) {
+		return this.virtualScroller.getItemScrollPosition(itemOrIndex)
+	}
+
+	onItemHeightDidChange(itemOrIndex) {
+		this.virtualScroller.onItemHeightDidChange(itemOrIndex)
+	}
+
+	setItemState(itemOrIndex, newState) {
+		this.virtualScroller.setItemState(itemOrIndex, newState)
 	}
 
 	getAverageItemHeight() {
-		return this.virtualScroller.itemHeights.getAverage()
+		return this.virtualScroller.getAverageItemHeight()
 	}
 
 	setItems(newItems, options) {

package/website/index-dom-bypass.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<!-- Fix encoding. -->
+		<meta charset="utf-8">
+		<!-- Fix document width for mobile devices. -->
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<title>VirtualScroller (DOM) (bypass)</title>
+
+		<script src="./virtual-scroller-dom.js"></script>
+		<script src="./items.js"></script>
+
+		<link rel="stylesheet" href="./style.base.css"/>
+		<link rel="stylesheet" href="./style.list.css"/>
+	</head>
+
+	<body>
+		<!-- http://tholman.com/github-corners/ -->
+		<a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+		<section class="container">
+			<h1>
+				<svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+					<path fill="#00AAEC" fill-rule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clip-rule="evenodd"></path>
+				</svg>
+				Latest Tweets on #politics
+			</h1>
+			<div id="show-previous"></div>
+			<div id="list"></div>
+			<div id="show-next"></div>
+			<footer>
+				© Twitter Inc., 2019
+			</footer>
+		</section>
+
+		<script>
+			// Enable debug output to console.
+			window.VirtualScrollerDebug = true
+			// Pass `?pagination=✓` URL query parameter to enable pagination.
+			window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
+		</script>
+
+    <script>
+    	const BATCH_SIZE = 6
+			const COLUMNS_COUNT = 1
+
+			function getColumnsCount(container) {
+				return 1
+			}
+
+			function getInitialState(items) {
+				if (window.PAGINATION) {
+					const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
+					const toIndex = fromIndex + BATCH_SIZE - 1
+					return {
+						fromIndex,
+						toIndex,
+						items: items.slice(fromIndex, toIndex + 1)
+					}
+				} else {
+					return {
+						fromIndex: 0,
+						toIndex: items.length,
+						items: items
+					}
+				}
+			}
+
+			function onShowPrevious(items, getState, setState) {
+				let { fromIndex } = getState()
+				const { toIndex } = getState()
+				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
+				setState({
+					fromIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function onShowNext(items, getState, setState) {
+				const { fromIndex } = getState()
+				let { toIndex } = getState()
+				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
+				setState({
+					toIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function renderItem(item) {
+				const { username, date, text } = item
+
+			  // Comment element.
+			  const itemElement = document.createElement('article')
+			  itemElement.classList.add('list-item')
+
+			  // Comment author.
+			  const authorElement = document.createElement('a')
+			  authorElement.setAttribute('target', '_blank')
+			  authorElement.setAttribute('href', `https://twitter.com/${username}`)
+			  authorElement.textContent = `@${username}`
+			  itemElement.appendChild(authorElement)
+
+			  // Comment date.
+			  const timeElement = document.createElement('time')
+			  timeElement.setAttribute('datetime', date.toISOString())
+			  timeElement.textContent = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
+			  itemElement.appendChild(timeElement)
+
+			  // Comment text.
+			  const textElement = document.createElement('p')
+			  textElement.textContent = text
+			  itemElement.appendChild(textElement)
+
+			  // Return comment element.
+			  return itemElement
+			}
+
+			function renderShowPrevious(items, getState, setState) {
+				const { fromIndex } = getState()
+				const container = document.getElementById('show-previous')
+				while (container.firstChild) {
+					container.removeChild(container.firstChild)
+				}
+				if (window.PAGINATION && fromIndex > 0) {
+					const button = document.createElement('button')
+					button.setAttribute('type', 'button')
+					button.classList.add('load-items-button')
+					button.addEventListener('click', () => onShowPrevious(items, getState, setState))
+					button.textContent = 'Show previous'
+					container.appendChild(button)
+				}
+			}
+
+			function renderShowNext(items, getState, setState) {
+				const { toIndex } = getState()
+				const container = document.getElementById('show-next')
+				while (container.firstChild) {
+					container.removeChild(container.firstChild)
+				}
+				if (window.PAGINATION && toIndex < items.length - 1) {
+					const button = document.createElement('button')
+					button.setAttribute('type', 'button')
+					button.classList.add('load-items-button')
+					button.addEventListener('click', () => onShowNext(items, getState, setState))
+					button.textContent = 'Show next'
+					container.appendChild(button)
+				}
+			}
+
+			class VirtualScrollerDemo {
+				constructor() {
+					this.state = getInitialState(ITEMS)
+				}
+
+				getState = () => {
+					return this.state
+				}
+
+				setState = (newState) => {
+					const prevState = this.state
+					this.state = {
+						...this.state,
+						...newState
+					}
+					this.onStateChange(this.state, prevState)
+				}
+
+				onStateChange(state, prevState) {
+					if (state.items !== prevState.items) {
+						this.virtualScroller.setItems(state.items, {
+							preserveScrollPositionOnPrependItems: true
+						})
+						this.renderPrevNextButtons()
+					}
+				}
+
+				renderPrevNextButtons() {
+					renderShowPrevious(ITEMS, this.getState, this.setState)
+					renderShowNext(ITEMS, this.getState, this.setState)
+				}
+
+				render() {
+					this.virtualScroller = new VirtualScroller(
+						document.getElementById('list'),
+						this.getState().items,
+						renderItem,
+						{ getColumnsCount, bypass: true }
+					)
+					this.renderPrevNextButtons()
+				}
+			}
+
+			const virtualScrollerDemo = new VirtualScrollerDemo()
+			virtualScrollerDemo.render()
+		</script>
+	</body>
+</html>

package/website/index-dom-grid.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<!-- Fix encoding. -->
+		<meta charset="utf-8">
+		<!-- Fix document width for mobile devices. -->
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<title>VirtualScroller (DOM) (Grid)</title>
+
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+		<script src="./virtual-scroller-dom.js"></script>
+		<script src="./items.js"></script>
+
+		<link rel="stylesheet" href="./style.base.css"/>
+		<link rel="stylesheet" href="./style.list.css"/>
+		<link rel="stylesheet" href="./style.list.grid.css"/>
+	</head>
+
+	<body>
+		<!-- http://tholman.com/github-corners/ -->
+		<a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+		<section class="container">
+			<h1>
+				<svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+					<path fill="#00AAEC" fill-rule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clip-rule="evenodd"></path>
+				</svg>
+				Latest Tweets on #politics
+			</h1>
+			<div id="show-previous"></div>
+			<div id="list"></div>
+			<div id="show-next"></div>
+			<footer>
+				© Twitter Inc., 2019
+			</footer>
+		</section>
+
+		<script>
+			// Enable debug output to console.
+			window.VirtualScrollerDebug = true
+			// Pass `?pagination=✓` URL query parameter to enable pagination.
+			window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
+		</script>
+
+    <script type="text/babel">
+    	const BATCH_SIZE = 6
+			const COLUMNS_COUNT = 3
+
+			function getColumnsCount(container) {
+				if (container.getWidth() > 1280) {
+					return COLUMNS_COUNT
+				}
+				return 1
+			}
+
+			function getInitialState(items) {
+				if (window.PAGINATION) {
+					const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
+					const toIndex = fromIndex + BATCH_SIZE - 1
+					return {
+						fromIndex,
+						toIndex,
+						items: items.slice(fromIndex, toIndex + 1)
+					}
+				} else {
+					return {
+						fromIndex: 0,
+						toIndex: items.length,
+						items: items
+					}
+				}
+			}
+
+			function onShowPrevious(items, getState, setState) {
+				let { fromIndex } = getState()
+				const { toIndex } = getState()
+				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
+				setState({
+					fromIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function onShowNext(items, getState, setState) {
+				const { fromIndex } = getState()
+				let { toIndex } = getState()
+				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
+				setState({
+					toIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function renderItem(item) {
+				const { username, date, text } = item
+
+			  // Comment element.
+			  const itemElement = document.createElement('article')
+			  itemElement.classList.add('list-item')
+
+			  // Comment author.
+			  const authorElement = document.createElement('a')
+			  authorElement.setAttribute('target', '_blank')
+			  authorElement.setAttribute('href', `https://twitter.com/${username}`)
+			  authorElement.textContent = `@${username}`
+			  itemElement.appendChild(authorElement)
+
+			  // Comment date.
+			  const timeElement = document.createElement('time')
+			  timeElement.setAttribute('datetime', date.toISOString())
+			  timeElement.textContent = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
+			  itemElement.appendChild(timeElement)
+
+			  // Comment text.
+			  const textElement = document.createElement('p')
+			  textElement.textContent = text
+			  itemElement.appendChild(textElement)
+
+			  // Return comment element.
+			  return itemElement
+			}
+
+			function renderShowPrevious(items, getState, setState) {
+				const { fromIndex } = getState()
+				const container = document.getElementById('show-previous')
+				while (container.firstChild) {
+					container.removeChild(container.firstChild)
+				}
+				if (window.PAGINATION && fromIndex > 0) {
+					const button = document.createElement('button')
+					button.setAttribute('type', 'button')
+					button.classList.add('load-items-button')
+					button.addEventListener('click', () => onShowPrevious(items, getState, setState))
+					button.textContent = 'Show previous'
+					container.appendChild(button)
+				}
+			}
+
+			function renderShowNext(items, getState, setState) {
+				const { toIndex } = getState()
+				const container = document.getElementById('show-next')
+				while (container.firstChild) {
+					container.removeChild(container.firstChild)
+				}
+				if (window.PAGINATION && toIndex < items.length - 1) {
+					const button = document.createElement('button')
+					button.setAttribute('type', 'button')
+					button.classList.add('load-items-button')
+					button.addEventListener('click', () => onShowNext(items, getState, setState))
+					button.textContent = 'Show next'
+					container.appendChild(button)
+				}
+			}
+
+			class VirtualScrollerDemo {
+				constructor() {
+					this.state = getInitialState(ITEMS)
+				}
+
+				getState = () => {
+					return this.state
+				}
+
+				setState = (newState) => {
+					const prevState = this.state
+					this.state = {
+						...this.state,
+						...newState
+					}
+					this.onStateChange(this.state, prevState)
+				}
+
+				onStateChange(state, prevState) {
+					if (state.items !== prevState.items) {
+						this.virtualScroller.setItems(state.items, {
+							preserveScrollPositionOnPrependItems: true
+						})
+						this.renderPrevNextButtons()
+					}
+				}
+
+				renderPrevNextButtons() {
+					renderShowPrevious(ITEMS, this.getState, this.setState)
+					renderShowNext(ITEMS, this.getState, this.setState)
+				}
+
+				render() {
+					this.virtualScroller = new VirtualScroller(
+						document.getElementById('list'),
+						this.getState().items,
+						renderItem,
+						{ getColumnsCount }
+					)
+					this.renderPrevNextButtons()
+				}
+			}
+
+			const virtualScrollerDemo = new VirtualScrollerDemo()
+			virtualScrollerDemo.render()
+		</script>
+	</body>
+</html>