virtual-scroller 1.7.9 → 1.9.0

package/source/Scroll.js

@@ -4,72 +4,67 @@
 // https://github.com/bvaughn/react-virtualized/issues/722
 import { setTimeout, clearTimeout } from 'request-animation-frame-timeout'
 
-import { LAYOUT_REASON } from './Layout'
-import log from './utility/debug'
+import log from './utility/debug.js'
 
 export default class Scroll {
 	constructor({
 		bypass,
 		scrollableContainer,
-		updateLayout,
+		itemsContainer,
+		onScroll,
 		initialScrollPosition,
 		onScrollPositionChange,
 		isImmediateLayoutScheduled,
 		hasNonRenderedItemsAtTheTop,
 		hasNonRenderedItemsAtTheBottom,
-		getLatestLayoutVisibleAreaIncludingMargins,
-		preserveScrollPositionOfTheBottomOfTheListOnMount
+		getLatestLayoutVisibleArea,
+		getListTopOffset,
+		getPrerenderMargin,
+		onScrolledToTop,
+		waitForScrollingToStop
 	}) {
 		this.bypass = bypass
 		this.scrollableContainer = scrollableContainer
-		this.updateLayout = updateLayout
+		this.itemsContainer = itemsContainer
+		this.onScroll = onScroll
 		this.initialScrollPosition = initialScrollPosition
 		this.onScrollPositionChange = onScrollPositionChange
 		this.isImmediateLayoutScheduled = isImmediateLayoutScheduled
 		this.hasNonRenderedItemsAtTheTop = hasNonRenderedItemsAtTheTop
 		this.hasNonRenderedItemsAtTheBottom = hasNonRenderedItemsAtTheBottom
-		this.getLatestLayoutVisibleAreaIncludingMargins = getLatestLayoutVisibleAreaIncludingMargins
-
-		if (preserveScrollPositionOfTheBottomOfTheListOnMount) {
-			if (scrollableContainer) {
-				this.preserveScrollPositionOfTheBottomOfTheListOnMount = {
-					scrollableContainerContentHeight: scrollableContainer.getContentHeight()
-				}
-			}
-		}
+		this.getLatestLayoutVisibleArea = getLatestLayoutVisibleArea
+		this.getListTopOffset = getListTopOffset
+		this.getPrerenderMargin = getPrerenderMargin
+		this.onScrolledToTop = onScrolledToTop
+		this.waitForScrollingToStop = waitForScrollingToStop
 	}
 
-	listen() {
+	start() {
 		if (this.initialScrollPosition !== undefined) {
 			this.scrollToY(this.initialScrollPosition)
+			this.initialScrollPosition = undefined
 		}
 		if (this.onScrollPositionChange) {
-			this.updateScrollPosition()
-			this.removeScrollPositionListener = this.scrollableContainer.addScrollListener(this.updateScrollPosition)
-		}
-		if (!this.bypass) {
-			this.removeScrollListener = this.scrollableContainer.addScrollListener(this.onScroll)
-		}
-		if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {
-			this.scrollToY(this.getScrollY() + (this.scrollableContainer.getContentHeight() - this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight))
+			this.onScrollPositionChange(this.getScrollY())
 		}
+		this.stopListeningToScroll = this.scrollableContainer.onScroll(this.onScrollListener)
 	}
 
 	stop() {
-		if (this.removeScrollPositionListener) {
-			this.removeScrollPositionListener()
-		}
-		if (this.removeScrollListener) {
-			this.removeScrollListener()
-		}
-		this.cancelOnUserStopsScrollingTimer()
+		this.stopListeningToScroll()
+		this.stopListeningToScroll = undefined
+		// this.onStopScrollingListener = undefined
+		this.shouldCallOnScrollListenerWhenStopsScrolling = undefined
+		this.cancelOnStopScrollingTimer()
 	}
 
 	scrollToY(scrollY) {
+		this.ignoreScrollEvents = true
 		this.scrollableContainer.scrollToY(scrollY)
+		this.ignoreScrollEvents = undefined
 	}
 
-	scrollByY(scrollByY) {
+	scrollByY = (scrollByY) => {
 		this.scrollToY(this.getScrollY() + scrollByY)
 	}
 
@@ -77,88 +72,146 @@ export default class Scroll {
 		return this.scrollableContainer.getScrollY()
 	}
 
-	/**
-	 * Updates the current scroll Y position in state.
-	 */
-	updateScrollPosition = () => {
-		this.onScrollPositionChange(this.getScrollY())
-	}
-
-	cancelOnUserStopsScrollingTimer() {
-		if (this.onUserStopsScrollingTimer) {
-			clearTimeout(this.onUserStopsScrollingTimer)
-			this.onUserStopsScrollingTimer = undefined
+	cancelOnStopScrollingTimer() {
+		if (this.onStopScrollingTimer) {
+			clearTimeout(this.onStopScrollingTimer)
+			this.onStopScrollingTimer = undefined
 		}
 	}
 
-	onLayout() {
+	cancelScheduledLayout() {
 		// Cancel a "re-layout when user stops scrolling" timer.
-		this.cancelOnUserStopsScrollingTimer()
+		this.cancelOnStopScrollingTimer()
 	}
 
-	onScroll = () => {
+	onScrollListener = () => {
+		if (this.onScrollPositionChange) {
+			this.onScrollPositionChange(this.getScrollY())
+		}
+
+		// If the user has scrolled up to the top of the items container.
+		// (this option isn't currently used)
+		if (this.onScrolledToTop) {
+			if (this.getScrollY() < this.getListTopOffset()) {
+				this.onScrolledToTop()
+			}
+		}
+
+		if (this.bypass) {
+			return
+		}
+
+		if (this.ignoreScrollEvents) {
+			return
+		}
+
 		// Prefer not performing a re-layout while the user is scrolling (if possible).
 		// If the user doesn't scroll too far and then stops for a moment,
 		// then a mid-scroll re-layout could be delayed until such a brief stop:
 		// presumably, this results in better (smoother) scrolling performance,
 		// delaying the work to when it doesn't introduce any stutter or "jank".
 
-		// Reset `this.onUserStopsScrollingTimer` (will be re-created below).
-		this.cancelOnUserStopsScrollingTimer()
+		// Reset `this.onStopScrollingTimer` (will be re-created below).
+		this.cancelOnStopScrollingTimer()
 
-		// See whether rendering "new" previous/next items is required
-		// right now, or it can wait until the user stops scrolling.
+		// See if the latest "layout" (the currently rendered set of items)
+		// is still sufficient in order to show all the items that're
+		// currently inside the viewport. If there're some non-rendered items
+		// that're visible in the current viewport, then those items
+		// should be rendered "immediately" rather than waiting until
+		// the user stops scrolling.
 		const forceUpdate =
 			// If the items have been rendered at least once
-			this.getLatestLayoutVisibleAreaIncludingMargins() && (
+			this.getLatestLayoutVisibleArea() && (
 				(
-					// If the user has scrolled up past the extra "margin"
-					(this.getScrollY() < this.getLatestLayoutVisibleAreaIncludingMargins().top) &&
-					// and if there're any previous non-rendered items to render.
+					// If the user has scrolled up past the "prerender margin"
+					// and there're some non-rendered items at the top,
+					// then force a re-layout.
+					//
+					// (during these calculations we assume that the list's top coordinate
+					//  hasn't changed since previous layout; even if that's not exactly true,
+					//  the items will be re-layout when the user stops scrolling anyway)
+					//
+					(this.getScrollY() < this.getLatestLayoutVisibleArea().top - this.getPrerenderMargin()) &&
 					this.hasNonRenderedItemsAtTheTop()
 				)
 				||
 				(
-					// If the user has scrolled down past the extra "margin"
-					(this.getScrollY() + this.scrollableContainer.getHeight() > this.getLatestLayoutVisibleAreaIncludingMargins().bottom) &&
-					// and if there're any next non-rendered items to render.
+					// If the user has scrolled down past the "prerender margin"
+					// and there're any non-rendered items left at the end,
+					// then force a re-layout.
+					//
+					// (during these calculations we assume that the list's top coordinate
+					//  hasn't changed since previous layout; even if that's not exactly true,
+					//  the items will be re-layout when the user stops scrolling anyway)
+					//
+					(this.getScrollY() + this.scrollableContainer.getHeight() > this.getLatestLayoutVisibleArea().bottom + this.getPrerenderMargin()) &&
 					this.hasNonRenderedItemsAtTheBottom()
 				)
 			)
 
 		if (forceUpdate) {
-			log('The user has scrolled far enough: force re-layout')
+			log('The user has scrolled far enough: perform a re-layout')
 		} else {
-			log('The user hasn\'t scrolled too much: delay re-layout')
+			log('The user is scrolling: perform a re-layout when they stop scrolling')
 		}
 
-		if (!forceUpdate) {
-			// If a re-layout is already scheduled at the next "frame",
-			// don't schedule a "re-layout when user stops scrolling" timer.
-			if (this.isImmediateLayoutScheduled()) {
-				return
-			}
-			this.onUserStopsScrollingTimer = setTimeout(
-				() => {
-					this.onUserStopsScrollingTimer = undefined
-					this.updateLayout({ reason: LAYOUT_REASON.STOPPED_SCROLLING })
-				},
-				// "scroll" events are usually dispatched every 16 milliseconds
-				// for 60fps refresh rate, so waiting for 100 milliseconds feels
-				// reasonable: that would be about 6 frames of inactivity period,
-				// which could mean that either the user has stopped scrolling
-				// (for a moment) or the browser is lagging and stuttering
-				// (skipping frames due to high load).
-				// If the user continues scrolling then this timeout is constantly
-				// refreshed (cancelled and then re-created).
-				WAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT
-			)
+		if (forceUpdate || this.waitForScrollingToStop === false) {
+			return this.onScroll()
+		}
+
+		// If a re-layout is already scheduled at the next "frame",
+		// don't schedule a "re-layout when user stops scrolling" timer.
+		if (this.isImmediateLayoutScheduled()) {
 			return
 		}
 
-		this.updateLayout({ reason: LAYOUT_REASON.SCROLL })
+		this.shouldCallOnScrollListenerWhenStopsScrolling = true
+		this.watchOnStopScrolling()
+	}
+
+	watchOnStopScrolling() {
+		this.onStopScrollingTimer = setTimeout(
+			() => {
+				this.onStopScrollingTimer = undefined
+
+				if (this.shouldCallOnScrollListenerWhenStopsScrolling) {
+					this.shouldCallOnScrollListenerWhenStopsScrolling = undefined
+					this.onScroll({ delayed: true })
+				}
+
+				// `onStopScrolling()` feature is not currently used.
+				// if (this.onStopScrollingListener) {
+				// 	const onStopScrollingListener = this.onStopScrollingListener
+				// 	this.onStopScrollingListener = undefined
+				// 	// `onStopScrollingListener()` may hypothetically schedule
+				// 	// another `onStopScrolling()` listener, so set
+				// 	// `this.onStopScrollingListener` to `undefined` before
+				// 	// calling it rather than after.
+				// 	log('~ The user has stopped scrolling ~')
+				// 	onStopScrollingListener()
+				// }
+			},
+			// "scroll" events are usually dispatched every 16 milliseconds
+			// for 60fps refresh rate, so waiting for 100 milliseconds feels
+			// reasonable: that would be about 6 frames of inactivity period,
+			// which could mean that either the user has stopped scrolling
+			// (for a moment) or the browser is lagging and stuttering
+			// (skipping frames due to high load).
+			// If the user continues scrolling then this timeout is constantly
+			// refreshed (cancelled and then re-created).
+			ON_STOP_SCROLLING_INACTIVE_PERIOD
+		)
 	}
 
+	// (this function isn't currently used)
+	// onStopScrolling(onStopScrollingListener) {
+	// 	this.onStopScrollingListener = onStopScrollingListener
+	// 	if (!this.onStopScrollingTimer) {
+	// 		this.watchOnStopScrolling()
+	// 	}
+	// }
+
 	/**
 	 * Returns visible area coordinates relative to the scrollable container.
 	 * @return {object} `{ top: number, bottom: number }`
@@ -174,4 +227,4 @@ export default class Scroll {
 	}
 }
 
-const WAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT = 100
+const ON_STOP_SCROLLING_INACTIVE_PERIOD = 100

package/source/VirtualScroller.columns.js

@@ -0,0 +1,26 @@
+export default function createColumnsHelpers({ getColumnsCount }) {
+	if (getColumnsCount) {
+		const scrollableContainerArgument = {
+			getWidth: () => this.scrollableContainer.getWidth()
+		}
+		this.getActualColumnsCountForState = () => {
+			const columnsCount = getColumnsCount(scrollableContainerArgument)
+			// `columnsCount: 1` is effectively same as `columnsCount: undefined`
+			// from the code's point of view. This makes one less property in `state`
+			// which makes `state` a bit less cluttered (easier for inspection).
+			if (columnsCount !== 1) {
+				return columnsCount
+			}
+		}
+	} else {
+		this.getActualColumnsCountForState = () => undefined
+	}
+
+	this.getActualColumnsCount = () => {
+		return this.getActualColumnsCountForState() || 1
+	}
+
+	this.getColumnsCount = () => {
+		return this.getState() && this.getState().columnsCount || 1
+	}
+}

package/source/VirtualScroller.constructor.js

@@ -0,0 +1,336 @@
+import {
+	supportsTbody,
+	BROWSER_NOT_SUPPORTED_ERROR
+} from './DOM/tbody.js'
+
+import DOMEngine from './DOM/Engine.js'
+
+import Layout, { LAYOUT_REASON } from './Layout.js'
+import Resize from './Resize.js'
+import BeforeResize from './BeforeResize.js'
+import Scroll from './Scroll.js'
+import ListHeightMeasurement from './ListHeightMeasurement.js'
+import ItemHeights from './ItemHeights.js'
+
+import log, { warn, isDebug, reportError } from './utility/debug.js'
+
+import createStateHelpers from './VirtualScroller.state.js'
+import createVerticalSpacingHelpers from './VirtualScroller.verticalSpacing.js'
+import createColumnsHelpers from './VirtualScroller.columns.js'
+import createLayoutHelpers from './VirtualScroller.layout.js'
+import createOnRenderHelpers from './VirtualScroller.onRender.js'
+import createResizeHelpers from './VirtualScroller.resize.js'
+import createItemsHelpers from './VirtualScroller.items.js'
+
+/**
+ * @param  {function} getItemsContainerElement — Returns the container DOM `Element`.
+ * @param  {any[]} items — The list of items.
+ * @param  {Object} [options] — See README.md.
+ * @return {VirtualScroller}
+ */
+export default function VirtualScrollerConstructor(
+	getItemsContainerElement,
+	items,
+	options = {}
+) {
+	const {
+		render,
+		state,
+		onStateChange,
+		initialScrollPosition,
+		onScrollPositionChange,
+		// `scrollableContainer` option is deprecated.
+		// Use `getScrollableContainer()` option instead.
+		scrollableContainer,
+		measureItemsBatchSize = 50,
+		getColumnsCount,
+		getItemId,
+		tbody,
+		estimatedItemHeight,
+		onItemInitialRender,
+		// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
+		onItemFirstRender,
+		_useTimeoutInRenderLoop,
+		_waitForScrollingToStop,
+		engine
+	} = options
+
+	let {
+		bypass,
+		getScrollableContainer
+	} = options
+
+	log('~ Initialize ~')
+
+	// Could support non-DOM rendering engines.
+	// For example, React Native, `<canvas/>`, etc.
+	this.engine = engine || DOMEngine
+
+	// `scrollableContainer` option is deprecated.
+	// Use `getScrollableContainer()` option instead.
+	if (!getScrollableContainer && scrollableContainer) {
+		getScrollableContainer = () => scrollableContainer
+	}
+
+	// Sometimes, when `new VirtualScroller()` instance is created,
+	// `getItemsContainerElement()` might not be ready to return the "container" DOM Element yet
+	// (for example, because it's not rendered yet). That's the reason why it's a getter function.
+	// For example, in React `<VirtualScroller/>` component, a `VirtualScroller`
+	// instance is created in the React component's `constructor()`, and at that time
+	// the container Element is not yet available. The container Element is available
+	// in `componentDidMount()`, but `componentDidMount()` is not executed on server,
+	// which would mean that React `<VirtualScroller/>` wouldn't render at all
+	// on server side, while with the `getItemsContainerElement()` approach, on server side,
+	// it still "renders" a list with a predefined amount of items in it by default.
+	// (`initiallyRenderedItemsCount`, or `1`).
+	this.getItemsContainerElement = getItemsContainerElement
+
+	// if (prerenderMargin === undefined) {
+	// 	// Renders items which are outside of the screen by this "prerender margin".
+	// 	// Is the screen height by default: seems to be the optimal value
+	// 	// for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
+	// 	prerenderMargin = this.scrollableContainer ? this.scrollableContainer.getHeight() : 0
+	// }
+
+	if (options.getState || options.setState) {
+		throw new Error('[virtual-scroller] `getState`/`setState` options usage has changed in the new version. See the readme for more details.')
+	}
+
+	// Work around `<tbody/>` not being able to have `padding`.
+	// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
+	if (tbody) {
+		if (this.engine !== DOMEngine) {
+			throw new Error('[virtual-scroller] `tbody` option is only supported for DOM rendering engine')
+		}
+		log('~ <tbody/> detected ~')
+		this.tbody = true
+		if (!supportsTbody()) {
+			log('~ <tbody/> not supported ~')
+			reportError(BROWSER_NOT_SUPPORTED_ERROR)
+			bypass = true
+		}
+	}
+
+	if (bypass) {
+		log('~ "bypass" mode ~')
+	}
+
+	// In `bypass` mode, `VirtualScroller` doesn't wait
+	// for the user to scroll down to render all items:
+	// instead, it renders all items right away, as if
+	// the list is rendered without using `VirtualScroller`.
+	// It was added just to measure how much is the
+	// performance difference between using a `VirtualScroller`
+	// and not using a `VirtualScroller`.
+	// It turned out that unmounting large React component trees
+	// is a very long process, so `VirtualScroller` does seem to
+	// make sense when used in a React application.
+	this.bypass = bypass
+	// this.bypassBatchSize = bypassBatchSize || 10
+
+	// Using `setTimeout()` in render loop is a workaround
+	// for avoiding a React error message:
+	// "Maximum update depth exceeded.
+	//  This can happen when a component repeatedly calls
+	//  `.setState()` inside `componentWillUpdate()` or `componentDidUpdate()`.
+	//  React limits the number of nested updates to prevent infinite loops."
+	this._useTimeoutInRenderLoop = _useTimeoutInRenderLoop
+
+	if (getItemId) {
+		this.isItemEqual = (a, b) => getItemId(a) === getItemId(b)
+	} else {
+		this.isItemEqual = (a, b) => a === b
+	}
+
+	if (onItemInitialRender) {
+		this.onItemInitialRender = onItemInitialRender
+	}
+	// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
+	else if (onItemFirstRender) {
+		this.onItemInitialRender = (item) => {
+			warn('`onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.')
+			const { items } = this.getState()
+			const i = items.indexOf(item)
+			// The `item` could also be non-found due to the inconsistency bug:
+			// The reason is that `i` can be non-consistent with the `items`
+			// passed to `<VirtualScroller/>` in React due to `updateState()` not being
+			// instanteneous: when new `items` are passed to `<VirtualScroller/>`,
+			// `VirtualScroller.updateState({ items })` is called, and if `onItemFirstRender(i)`
+			// is called after the aforementioned `updateState()` is called but before it finishes,
+			// `i` would point to an index in "previous" `items` while the application
+			// would assume that `i` points to an index in the "new" `items`,
+			// resulting in an incorrect item being assumed by the application
+			// or even in an "array index out of bounds" error.
+			if (i >= 0) {
+				onItemFirstRender(i)
+			}
+		}
+	}
+
+	// If initial `state` is passed then use `items` from `state`
+	// instead of the `items` argument.
+	if (state) {
+		items = state.items
+	}
+
+	log('Items count', items.length)
+	if (estimatedItemHeight) {
+		log('Estimated item height', estimatedItemHeight)
+	}
+
+	createStateHelpers.call(this, { state, onStateChange, render, items })
+
+	createVerticalSpacingHelpers.call(this)
+	createColumnsHelpers.call(this, { getColumnsCount })
+
+	createLayoutHelpers.call(this)
+	createOnRenderHelpers.call(this)
+	createResizeHelpers.call(this)
+	createItemsHelpers.call(this)
+
+	createHelpers.call(this, {
+		getScrollableContainer,
+		estimatedItemHeight,
+		measureItemsBatchSize,
+		initialScrollPosition,
+		onScrollPositionChange,
+		waitForScrollingToStop: _waitForScrollingToStop
+	})
+
+	if (state) {
+		// Initialize `ItemHeights` from previously measured `state.itemHeights`.
+		this.itemHeights.readItemHeightsFromState(state)
+
+		// Initialize some `BeforeResize` internal flags from a previously saved state.
+		this.beforeResize.initializeFromState(state)
+	}
+}
+
+function createHelpers({
+	getScrollableContainer,
+	estimatedItemHeight,
+	measureItemsBatchSize,
+	initialScrollPosition,
+	onScrollPositionChange,
+	waitForScrollingToStop
+}) {
+	this.itemsContainer = this.engine.createItemsContainer(
+		this.getItemsContainerElement
+	)
+
+	// If the items "container" element is mounted at this stage,
+	// remove any accidental text nodes from it (like whitespace).
+	//
+	// Also, this guards against cases when someone accidentally tries
+	// using `VirtualScroller` on a non-empty element.
+	//
+	if (this.getItemsContainerElement()) {
+		this.itemsContainer.clear()
+	}
+
+	this.scrollableContainer = this.engine.createScrollableContainer(
+		getScrollableContainer,
+		this.getItemsContainerElement
+	)
+
+	// Create `ItemHeights` instance.
+	this.itemHeights = new ItemHeights({
+		container: this.itemsContainer,
+		getItemHeight: (i) => this.getState().itemHeights[i],
+		setItemHeight: (i, height) => this.getState().itemHeights[i] = height
+	})
+
+	this.layout = new Layout({
+		bypass: this.bypass,
+		estimatedItemHeight,
+		measureItemsBatchSize,
+		getPrerenderMargin: () => this.getPrerenderMargin(),
+		getVerticalSpacing: () => this.getVerticalSpacing(),
+		getVerticalSpacingBeforeResize: () => this.getVerticalSpacingBeforeResize(),
+		getColumnsCount: () => this.getColumnsCount(),
+		getColumnsCountBeforeResize: () => this.getState().beforeResize && this.getState().beforeResize.columnsCount,
+		getItemHeight: (i) => this.getState().itemHeights[i],
+		getItemHeightBeforeResize: (i) => this.getState().beforeResize && this.getState().beforeResize.itemHeights[i],
+		getBeforeResizeItemsCount: () => this.getState().beforeResize ? this.getState().beforeResize.itemHeights.length : 0,
+		getAverageItemHeight: () => this.itemHeights.getAverage(),
+		getMaxVisibleAreaHeight: () => this.scrollableContainer && this.scrollableContainer.getHeight(),
+		//
+		// The "previously calculated layout" feature is not currently used.
+		//
+		// The current layout snapshot could be stored as a "previously calculated layout" variable
+		// so that it could theoretically be used when calculating new layout incrementally
+		// rather than from scratch, which would be an optimization.
+		//
+		getPreviouslyCalculatedLayout: () => this.previouslyCalculatedLayout
+	})
+
+	this.resize = new Resize({
+		bypass: this.bypass,
+		getWidth: () => this.scrollableContainer.getWidth(),
+		getHeight: () => this.scrollableContainer.getHeight(),
+		listenForResize: (listener) => this.scrollableContainer.onResize(listener),
+		onResizeStart: () => {
+			log('~ Scrollable container resize started ~')
+			this._isResizing = true
+		},
+		onResizeStop: () => {
+			log('~ Scrollable container resize finished ~')
+			this._isResizing = undefined
+		},
+		onNoChange: () => {
+			// There might have been some missed `this.onUpdateShownItemIndexes()` calls
+			// due to setting `this._isResizing` flag to `true` during the resize.
+			// So, update shown item indexes just in case.
+			this.onUpdateShownItemIndexes({
+				reason: LAYOUT_REASON.VIEWPORT_SIZE_UNCHANGED
+			})
+		},
+		onHeightChange: () => this.onUpdateShownItemIndexes({
+			reason: LAYOUT_REASON.VIEWPORT_HEIGHT_CHANGED
+		}),
+		onWidthChange: (prevWidth, newWidth) => {
+			log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~')
+			this.onResize()
+		}
+	})
+
+	this.scroll = new Scroll({
+		bypass: this.bypass,
+		scrollableContainer: this.scrollableContainer,
+		itemsContainer: this.itemsContainer,
+		waitForScrollingToStop,
+		onScroll: ({ delayed } = {}) => {
+			this.onUpdateShownItemIndexes({
+				reason: delayed ? LAYOUT_REASON.STOPPED_SCROLLING : LAYOUT_REASON.SCROLL
+			})
+		},
+		initialScrollPosition,
+		onScrollPositionChange,
+		isImmediateLayoutScheduled: () => Boolean(this.layoutTimer),
+		hasNonRenderedItemsAtTheTop: () => this.getState().firstShownItemIndex > 0,
+		hasNonRenderedItemsAtTheBottom: () => this.getState().lastShownItemIndex < this.getItemsCount() - 1,
+		getLatestLayoutVisibleArea: () => this.latestLayoutVisibleArea,
+		getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
+		getPrerenderMargin: () => this.getPrerenderMargin()
+	})
+
+	this.listHeightMeasurement = new ListHeightMeasurement({
+		itemsContainer: this.itemsContainer,
+		getListTopOffset: this.getListTopOffsetInsideScrollableContainer
+	})
+
+	if (this.engine.watchListTopOffset) {
+		this.listTopOffsetWatcher = this.engine.watchListTopOffset({
+			getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
+			onListTopOffsetChange: ({ reason }) => this.onUpdateShownItemIndexes({
+				reason: LAYOUT_REASON.TOP_OFFSET_CHANGED
+			})
+		})
+	}
+
+	this.beforeResize = new BeforeResize({
+		getState: this.getState,
+		getVerticalSpacing: this.getVerticalSpacing,
+		getColumnsCount: this.getColumnsCount
+	})
+}