feat: reverse order of event log entries

src/components/DomEvents.js

@@ -6,12 +6,12 @@ import usePlayground from '../hooks/usePlayground';
 import state from '../lib/state';
 import { eventMap } from '@testing-library/dom/dist/event-map';
 import { VirtualScrollable } from './Scrollable';
-import { FixedSizeList as List } from 'react-window';
 import throttle from 'lodash.throttle';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import IconButton from './IconButton';
 import TrashcanIcon from './TrashcanIcon';
 import EmptyStreetImg from '../images/EmptyStreetImg';
+import StickyList from './StickyList';
 
 function onStateChange({ markup, query, result }) {
   state.save({ markup, query });
@@ -137,9 +137,8 @@ function DomEvents() {
     if (node) {
       previewRef.current = node;
       const eventListeners = addLoggingEvents(node, (event) => {
-        // insert at index 0
         event.id = buffer.current.length;
-        buffer.current.splice(0, 0, event);
+        buffer.current.push(event);
         setTimeout(flush, 0);
       });
       setEventListeners(eventListeners);
@@ -196,7 +195,9 @@ function DomEvents() {
             ) : (
               <AutoSizer>
                 {({ width, height }) => (
-                  <List
+                  <StickyList
+                    follow={true}
+                    mode="bottom"
                     ref={listRef}
                     height={height}
                     itemCount={eventCount}
@@ -206,7 +207,7 @@ function DomEvents() {
                     outerElementType={VirtualScrollable}
                   >
                     {EventRecord}
-                  </List>
+                  </StickyList>
                 )}
               </AutoSizer>
             )}

src/components/StickyList.js

@@ -0,0 +1,48 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { FixedSizeList as List } from 'react-window';
+
+function StickyList(
+  {
+    follow = false,
+    mode = 'bottom',
+    height,
+    itemCount,
+    itemData,
+    itemSize,
+    width,
+    outerElementType,
+    children,
+  },
+  ref,
+) {
+  const innerRef = useRef();
+  useEffect(() => {
+    if (ref.current && follow && innerRef.current) {
+      if (
+        mode === 'bottom' &&
+        innerRef.current.offsetHeight > ref.current.props.height
+      ) {
+        ref.current.scrollTo(innerRef.current.offsetHeight);
+      } else if (mode === 'top') {
+        ref.current.scrollTo(0);
+      }
+    }
+  }, [itemCount, follow]);
+
+  return (
+    <List
+      ref={ref}
+      height={height}
+      itemCount={itemCount}
+      itemData={itemData}
+      itemSize={itemSize}
+      width={width}
+      innerRef={innerRef}
+      outerElementType={outerElementType}
+    >
+      {children}
+    </List>
+  );
+}
+
+export default forwardRef(StickyList);