virtual-scroller 1.7.7 → 1.8.1

package/source/getVerticalSpacing.js

@@ -1,11 +1,11 @@
-export default function getVerticalSpacing({ container, screen }) {
-	if (screen.getChildElementsCount(container) > 1) {
-		const firstShownRowTopOffset = screen.getChildElementTopOffset(container, 0)
-		let firstShownRowHeight = screen.getChildElementHeight(container, 0)
+export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {
+	if (renderedItemsCount > 1) {
+		const firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)
+		let firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)
 		let i = 1
-		while (i < screen.getChildElementsCount(container)) {
-			const itemTopOffset = screen.getChildElementTopOffset(container, i)
-			const itemHeight = screen.getChildElementHeight(container, i)
+		while (i < renderedItemsCount) {
+			const itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)
+			const itemHeight = itemsContainer.getNthRenderedItemHeight(i)
 			// If next row is detected.
 			if (itemTopOffset !== firstShownRowTopOffset) {
 				// Measure inter-row spacing.

package/source/react/VirtualScroller.js

@@ -17,7 +17,7 @@ const elementType = PropTypes.elementType || PropTypes.oneOfType([
 export default class VirtualScroller extends React.Component {
 	static propTypes = {
 		as: elementType,
-		items: PropTypes.arrayOf(PropTypes.object).isRequired,
+		items: PropTypes.arrayOf(PropTypes.any).isRequired,
 		itemComponent: elementType.isRequired,
 		itemComponentProps: PropTypes.object,
 		estimatedItemHeight: PropTypes.number,
@@ -27,10 +27,6 @@ export default class VirtualScroller extends React.Component {
 		// `preserveScrollPosition` property name is deprecated,
 		// use `preserveScrollPositionOnPrependItems` instead.
 		preserveScrollPosition: PropTypes.bool,
-		preserveScrollPositionOfTheBottomOfTheListOnMount: PropTypes.bool,
-		// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-		// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-		preserveScrollPositionAtBottomOnMount: PropTypes.bool,
 		measureItemsBatchSize: PropTypes.number,
 		scrollableContainer: PropTypes.any,
 		// `getScrollableContainer` property is deprecated.
@@ -109,10 +105,6 @@ export default class VirtualScroller extends React.Component {
 			initialCustomState,
 			onStateChange,
 			estimatedItemHeight,
-			preserveScrollPositionOfTheBottomOfTheListOnMount,
-			// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-			// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-			preserveScrollPositionAtBottomOnMount,
 			initialScrollPosition,
 			onScrollPositionChange,
 			measureItemsBatchSize,
@@ -137,10 +129,6 @@ export default class VirtualScroller extends React.Component {
 				onItemInitialRender: this.onItemInitialRender,
 				// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 				onItemFirstRender: this.onItemFirstRender,
-				preserveScrollPositionOfTheBottomOfTheListOnMount,
-				// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-				// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-				preserveScrollPositionAtBottomOnMount,
 				initialScrollPosition,
 				onScrollPositionChange,
 				shouldUpdateLayoutOnScreenResize: this.shouldUpdateLayoutOnScreenResize,
@@ -451,10 +439,6 @@ export default class VirtualScroller extends React.Component {
 			// `preserveScrollPosition` property name is deprecated,
 			// use `preserveScrollPositionOnPrependItems` instead.
 			preserveScrollPosition,
-			preserveScrollPositionOfTheBottomOfTheListOnMount,
-			// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-			// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-			preserveScrollPositionAtBottomOnMount,
 			initialScrollPosition,
 			onScrollPositionChange,
 			measureItemsBatchSize,
@@ -558,7 +542,7 @@ export default class VirtualScroller extends React.Component {
 					if (prependedItemsCount > 0) {
 						if (preserveScrollPositionOnPrependItems || preserveScrollPosition) {
 							if (firstShownItemIndex === 0) {
-								this.virtualScroller.restoreScroll.captureScroll({
+								this.virtualScroller.listHeightChangeWatcher.snapshot({
 									previousItems,
 									newItems,
 									prependedItemsCount

package/source/utility/debounce.js

@@ -8,12 +8,29 @@ import { setTimeout, clearTimeout } from 'request-animation-frame-timeout'
  * Same as `lodash`'s `debounce()` for functions with no arguments.
  * @param  {function} func
  * @param  {number} interval
+ * @param  {function} [options.onStart]
+ * @param  {function} [options.onStop]
  * @return {function}
  */
-export default function debounce(func, interval) {
+export default function debounce(func, interval, { onStart, onStop } = {}) {
 	let timeout
 	return function(...args) {
-		clearTimeout(timeout)
-		timeout = setTimeout(() => func.apply(this, args), interval)
+		return new Promise((resolve) => {
+			if (timeout) {
+				clearTimeout(timeout)
+			} else {
+				if (onStart) {
+					onStart()
+				}
+			}
+			timeout = setTimeout(() => {
+				timeout = undefined
+				if (onStop) {
+					onStop()
+				}
+				func.apply(this, args)
+				resolve()
+			}, interval)
+		})
 	}
 }

package/source/utility/debug.js

@@ -5,7 +5,12 @@ export default function log(...args) {
 }
 
 export function warn(...args) {
-	console.warn(...['[virtual-scroller]'].concat(args))
+	if (isWarn()) {
+		if (warningsAreErrors()) {
+			return reportError.apply(this, args)
+		}
+		console.warn(...['[virtual-scroller]'].concat(args))
+	}
 }
 
 export function reportError(...args) {
@@ -30,8 +35,34 @@ export function reportError(...args) {
 }
 
 export function isDebug() {
+	const debug = getDebug()
+	if (debug !== undefined) {
+		return debug === true || debug === 'debug'
+	}
+}
+
+export function isWarn() {
+	// const debug = getDebug()
+	// return debug === undefined
+	// 	|| debug === true
+	// 	|| debug === 'debug'
+	// 	|| debug === 'warn'
+	//
+	return true
+}
+
+function getDebug() {
+	return getGlobalVariable('VirtualScrollerDebug')
+}
+
+function warningsAreErrors() {
+	return getGlobalVariable('VirtualScrollerWarningsAreErrors')
+}
+
+function getGlobalVariable(name) {
 	if (typeof window !== 'undefined') {
-		return window.VirtualScrollerDebug === true
-			|| window.VirtualScrollerDebug === 'debug'
+		return window[name]
+	} else if (typeof global !== 'undefined') {
+		return global[name]
 	}
 }

package/source/utility/getStateSnapshot.js

@@ -0,0 +1,36 @@
+// Creates a snapshot of a `state` or a partial update of a `state`.
+// Is only used for logging state snapshots for later debug.
+//
+// When `state` is output to the browser console via `console.log()`,
+// it is explorable in real time. That also means that if that `state`
+// is modified later, the user will see the modified state, not the
+// original one. In the current implementation, `state` is not strictly
+// "immutable": things like individual item heights (including "before resize" ones)
+// or states are updated in-place — `state.itemHeights[i] = newItemHeight` or
+// `state.itemStates[i] = newItemState`. That's because those `state` properties
+// are the ones that don’t affect the presentation, so there's no need to re-render
+// the list when those do change — updating those properties is just an effect of
+// some change rather than cause for one.
+//
+// So, when outputting `state` via `console.log()` for debug, it makes sense to
+// snapshot it so that the developer, while debugging later, sees the correct
+// item heights or item states.
+//
+export default function getStateSnapshot(state) {
+	let stateSnapshot = {
+		...state
+	}
+	if (state.itemHeights) {
+		stateSnapshot.itemHeights = state.itemHeights.slice()
+	}
+	if (state.itemStates) {
+		stateSnapshot.itemStates = state.itemStates.slice()
+	}
+	if (state.beforeResize) {
+		stateSnapshot.beforeResize = {
+			...state.beforeResize
+		}
+		stateSnapshot.beforeResize.itemHeights = state.beforeResize.itemHeights.slice()
+	}
+	return stateSnapshot
+}

package/source/utility/px.js

@@ -7,5 +7,5 @@
  */
 export default function px(number) {
 	// Fractional pixels are used on "retina" screens.
-  return number.toFixed(2) + 'px'
+  return (number % 1 === 0 ? number : number.toFixed(2)) + 'px'
 }

package/source/utility/px.test.js

@@ -0,0 +1,9 @@
+import px from './px'
+
+describe('utility/px', function() {
+	it('should truncate px values', function() {
+		px(0).should.equal('0px')
+		px(1).should.equal('1px')
+		px(1.2345).should.equal('1.23px')
+	})
+})

package/website/index-bypass.html

@@ -0,0 +1,195 @@
+<!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>React VirtualScroller Demo</title>
+
+		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
+		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+		<script src="./virtual-scroller-react.js"></script>
+		<script src="./on-scroll-to-react.js"></script>
+		<script src="./messages.js"></script>
+
+		<link rel="stylesheet" href="./style.css"/>
+
+		<!--
+		<style>
+			#messages {
+				border-top: 2px solid rgb(230, 236, 240);
+				display: grid;
+				grid-gap: 2em;
+			}
+		</style>
+		-->
+	</head>
+
+	<body>
+		<!-- http://tholman.com/github-corners/ -->
+		<a title="Go to GitHub repo" href="https://github.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>
+
+		<div id="root"></div>
+
+		<script>
+			// Enable debug output to console.
+			window.VirtualScrollerDebug = true
+			// Whether "dynamically loaded list" mode is enabled.
+			window.dynamic = new URL(window.location).searchParams.get('dynamic')
+		</script>
+
+		<script type="text/babel">
+			const BATCH_SIZE = 6
+
+			class FeedMessages extends React.Component {
+				constructor(props) {
+					super(props)
+					const { messages } = this.props
+					if (window.dynamic) {
+						const fromIndex = Math.floor(messages.length / 2 - BATCH_SIZE / 2)
+						const toIndex = fromIndex + BATCH_SIZE - 1
+						this.state = {
+							fromIndex,
+							toIndex,
+							messages: messages.slice(fromIndex, toIndex + 1)
+						}
+					} else {
+						this.state = {
+							fromIndex: 0,
+							toIndex: messages.length,
+							messages
+						}
+					}
+				}
+
+				onShowPrevious = () => {
+					const { messages } = this.props
+					let { fromIndex } = this.state
+					const { toIndex } = this.state
+					fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
+					this.setState({
+						fromIndex,
+						messages: messages.slice(fromIndex, toIndex + 1)
+					})
+				}
+
+				onShowNext = () => {
+					const { messages } = this.props
+					const { fromIndex } = this.state
+					let { toIndex } = this.state
+					toIndex = Math.min(toIndex + BATCH_SIZE, messages.length - 1)
+					this.setState({
+						toIndex,
+						messages: messages.slice(fromIndex, toIndex + 1)
+					})
+				}
+
+				render() {
+					const {
+						fromIndex,
+						toIndex,
+						messages
+					} = this.state
+					return (
+						<React.Fragment>
+							{window.dynamic && fromIndex > 0 &&
+								<button
+									type="button"
+									onClick={this.onShowPrevious}
+									className="load-items-button">
+									Show previous
+								</button>
+							}
+							<VirtualScroller
+								bypass
+								id="messages"
+								items={messages}
+								itemComponent={Message}
+								preserveScrollPositionOnPrependItems/>
+							{window.dynamic && toIndex < this.props.messages.length - 1 &&
+								<button
+									type="button"
+									onClick={this.onShowNext}
+									className="load-items-button">
+									Show next
+								</button>
+							}
+						</React.Fragment>
+					)
+				}
+			}
+
+			const message = PropTypes.shape({
+				username: PropTypes.string.isRequired,
+				date: PropTypes.instanceOf(Date).isRequired,
+				text: PropTypes.string.isRequired
+			})
+
+			FeedMessages.propTypes = {
+				messages: PropTypes.arrayOf(message).isRequired
+			}
+
+			function Message(props) {
+				const { children: message } = props
+				const {
+					username,
+					date,
+					text
+				} = message
+				return (
+					<article className="feed-message">
+						<a target="_blank" href={`https://twitter.com/${username}`}>
+							@{username}
+						</a>
+						<time dateTime={date.toISOString()}>
+							{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
+						</time>
+						<p>
+							{text}
+						</p>
+					</article>
+				)
+			}
+
+			Message.propTypes = {
+				children: message.isRequired
+			}
+
+			class Feed extends React.Component {
+				render() {
+					return (
+						<section className="container">
+							<h1>
+								<TwitterLogo/>
+								Latest Tweets on #politics
+							</h1>
+							<FeedMessages
+								messages={messages}/>
+							<footer>
+								© Twitter Inc., 2019
+							</footer>
+						</section>
+					)
+				}
+			}
+
+			function TwitterLogo() {
+				return (
+					<svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+						<path fill="#00AAEC" fillRule="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" clipRule="evenodd"/>
+					</svg>
+				)
+			}
+
+			ReactDOM.render(
+				<Feed/>,
+				document.getElementById('root')
+			)
+		</script>
+	</body>
+</html>

package/website/index-grid.html

@@ -61,7 +61,6 @@
 			const COLUMNS_COUNT = 3
 
 			function getColumnsCount(container) {
-				console.log('Container width', container.getWidth())
 				if (container.getWidth() > 1280) {
 					return COLUMNS_COUNT
 				}

package/website/index-scrollableContainer.html

@@ -0,0 +1,208 @@
+<!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>React VirtualScroller Demo (Scrollable Container)</title>
+
+		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
+		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+		<script src="./virtual-scroller-react.js"></script>
+		<script src="./on-scroll-to-react.js"></script>
+		<script src="./messages.js"></script>
+
+		<link rel="stylesheet" href="./style.css"/>
+	</head>
+
+	<body>
+		<!-- http://tholman.com/github-corners/ -->
+		<a title="Go to GitHub repo" href="https://github.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>
+
+		<div id="root"></div>
+
+		<script>
+			// Enable debug output to console.
+			window.VirtualScrollerDebug = true
+			// Whether "dynamically loaded list" mode is enabled.
+			window.dynamic = new URL(window.location).searchParams.get('dynamic')
+		</script>
+
+		<script type="text/babel">
+			const BATCH_SIZE = 6
+
+			const SCROLLABLE_CONTAINER_STYLE = {
+        marginTop: '20vh',
+        maxHeight: '60vh',
+        overflow: 'auto'
+			}
+
+			class FeedMessages extends React.Component {
+				constructor(props) {
+					super(props)
+					const { messages } = this.props
+					if (window.dynamic) {
+						const fromIndex = Math.floor(messages.length / 2 - BATCH_SIZE / 2)
+						const toIndex = fromIndex + BATCH_SIZE - 1
+						this.state = {
+							fromIndex,
+							toIndex,
+							messages: messages.slice(fromIndex, toIndex + 1)
+						}
+					} else {
+						this.state = {
+							fromIndex: 0,
+							toIndex: messages.length,
+							messages
+						}
+					}
+				}
+
+				onShowPrevious = () => {
+					const { messages } = this.props
+					let { fromIndex } = this.state
+					const { toIndex } = this.state
+					fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
+					this.setState({
+						fromIndex,
+						messages: messages.slice(fromIndex, toIndex + 1)
+					})
+				}
+
+				onShowNext = () => {
+					const { messages } = this.props
+					const { fromIndex } = this.state
+					let { toIndex } = this.state
+					toIndex = Math.min(toIndex + BATCH_SIZE, messages.length - 1)
+					this.setState({
+						toIndex,
+						messages: messages.slice(fromIndex, toIndex + 1)
+					})
+				}
+
+				getScrollableContainer = () => {
+					return this.scrollableContainer
+				}
+
+				setScrollableContainer = (node) => {
+					this.scrollableContainer = node
+				}
+
+				componentDidMount() {
+					this.setState({ isMounted: true })
+				}
+
+				render() {
+					const {
+						fromIndex,
+						toIndex,
+						messages,
+						isMounted
+					} = this.state
+					return (
+						<div
+							ref={this.setScrollableContainer}
+							style={SCROLLABLE_CONTAINER_STYLE}>
+							{window.dynamic && fromIndex > 0 &&
+								<button
+									type="button"
+									onClick={this.onShowPrevious}
+									className="load-items-button">
+									Show previous
+								</button>
+							}
+							{isMounted &&
+								<VirtualScroller
+									id="messages"
+									items={messages}
+									itemComponent={Message}
+									preserveScrollPosition
+									scrollableContainer={this.scrollableContainer}/>
+							}
+							{window.dynamic && toIndex < this.props.messages.length - 1 &&
+								<button
+									type="button"
+									onClick={this.onShowNext}
+									className="load-items-button">
+									Show next
+								</button>
+							}
+						</div>
+					)
+				}
+			}
+
+			const message = PropTypes.shape({
+				username: PropTypes.string.isRequired,
+				date: PropTypes.instanceOf(Date).isRequired,
+				text: PropTypes.string.isRequired
+			})
+
+			FeedMessages.propTypes = {
+				messages: PropTypes.arrayOf(message).isRequired
+			}
+
+			function Message(props) {
+				const { children: message } = props
+				const {
+					username,
+					date,
+					text
+				} = message
+				return (
+					<article className="feed-message">
+						<a target="_blank" href={`https://twitter.com/${username}`}>
+							@{username}
+						</a>
+						<time dateTime={date.toISOString()}>
+							{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
+						</time>
+						<p>
+							{text}
+						</p>
+					</article>
+				)
+			}
+
+			Message.propTypes = {
+				children: message.isRequired
+			}
+
+			class Feed extends React.Component {
+				render() {
+					return (
+						<section className="container">
+							<h1>
+								<TwitterLogo/>
+								Latest Tweets on #politics
+							</h1>
+							<FeedMessages
+								messages={messages}/>
+							<footer>
+								© Twitter Inc., 2019
+							</footer>
+						</section>
+					)
+				}
+			}
+
+			function TwitterLogo() {
+				return (
+					<svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+						<path fill="#00AAEC" fillRule="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" clipRule="evenodd"/>
+					</svg>
+				)
+			}
+
+			ReactDOM.render(
+				<Feed/>,
+				document.getElementById('root')
+			)
+		</script>
+	</body>
+</html>