implement virtualized scrolling

Author: EmNudge

index.mjs

@@ -189,7 +189,8 @@ if (!server.address() && port) {
   process.exit(1);
 }
 
-const address = `http://localhost:${server.address().port}`;
+const serverAddress = server.address();
+const address = `http://localhost:${typeof serverAddress === 'string' ? serverAddress : serverAddress.port}`;
 let log = `Logs are displayed on \x1b[32;1;4m${address}\x1b[0m`
 if (title !== DEFAULT_TITLE) {
   log += ` with title \x1b[34;3m"${title}"\x1b[0m`;

package.json

@@ -18,6 +18,7 @@
   "author": "EmNudge",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "vitepress": "^1.1.0"
   }
 }

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { $, downloadResource, toggleParsingAnsi } from "../lib.js";
+import { $, downloadResource, toggleParsingAnsi } from "../utils/lib.js";
 import { reAddAllLogs } from "../log-adder.js";
 
 const commandPaletteEl =

public/command-palette/index.js

@@ -1,5 +1,5 @@
-import { setFilter } from "../filter.js";
-import { $ } from "../lib.js";
+import { setFilter } from "../utils/filter.js";
+import { $ } from "../utils/lib.js";
 
 const logContainer = $(".container");
 const contextMenu = $(".contextmenu");
@@ -64,7 +64,7 @@ contextMenu.addEventListener(
     } else if (action === "copy-id") {
       copyText(selectedLog.dataset.id, "log ID");
     } else {
-      setFilter('', true);
+      setFilter('', { updateInput: true, dispatchEvent: true });
       selectedLog.scrollIntoView();
     }
 

public/context-menu/index.js

@@ -1,7 +1,8 @@
 // import { highlightText } from "./worker/highlight.js";
 import { startEmitter } from "./emitter.js";
-import { $, loadHtmlComponent } from "./lib.js";
-import { addLogs } from "./log-adder.js";
+import { $, loadHtmlComponent } from "./utils/lib.js";
+import { addLogs, scroller } from "./log-adder.js";
+import { scrollToBottom } from "./utils/virtual-scroller.js";
 
 loadHtmlComponent("command-palette");
 loadHtmlComponent("context-menu");
@@ -10,8 +11,8 @@ const logContainer = $(".container");
 
 // scroll to bottom of container
 const downButton = $(".down-button");
-downButton.addEventListener("click", () => {
-  logContainer.children[logContainer.children.length - 1].scrollIntoView();
+downButton.addEventListener("click", async () => {
+  await scrollToBottom(scroller);
 });
 let showButton = downButton.classList.contains("show");
 const GOAL_DIST = 150;

public/filter.js

@@ -1,65 +1,28 @@
-import { applyFilter } from "./filter.js";
-import { $, cloneTemplate, highlightText } from "./lib.js";
-import { maybeAddTag } from "./tags.js";
+import { $ } from "./utils/lib.js";
+import { createLogStore } from "./utils/log-store.js";
+import { createVirtualScroller, addLogs as addLogsToScroller, rerender } from "./utils/virtual-scroller.js";
 
 /** @typedef {import('../types.d.ts').CliInput} CliInput */
 
-/** @type {CliInput[]} */
-const logs = [];
-
 const logContainer = $(".container");
 
-/** @param {CliInput} cliInput */
-async function getLogEl({ input, date, id }) {
-  const logEl = cloneTemplate(".log");
-  const elements = await highlightText(input);
-  logEl.append(...elements);
-  maybeAddTag(logEl);
-
-  logEl.setAttribute("data-id", id);
-  logEl.setAttribute(
-    "data-date",
-    new Date(date).toLocaleDateString("en-US", {
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric",
-    })
-  );
-
-  applyFilter(logEl);
-
-  return logEl;
-}
-
-/** @param {Element[]} logEls */
-async function appendLog(...logEls) {
-  const lastElement = logContainer.lastElementChild;
-
-  const shouldScrollDown = (() => {
-    if (!lastElement) return false;
-    const logBottom = lastElement?.getBoundingClientRect().bottom;
-    const parentBottom = logContainer.getBoundingClientRect().bottom;
-
-    return Math.abs(parentBottom - logBottom) < 10;
-  })();
-
-  logContainer.append(...logEls);
-  if (shouldScrollDown) {
-    lastElement.scrollIntoView();
-  }
-}
+// Create data store and virtual scroller
+const store = createLogStore();
+const scroller = createVirtualScroller(logContainer, store, {
+  estimatedHeight: 30,
+  buffer: 5,
+  debounceMs: 16,
+});
 
 /** @param {CliInput[]} newLogs */
 export async function addLogs(newLogs) {
-  logs.push(...newLogs);
-  $(".log-count .total").textContent = `(${logs.length})`;
-
-  const logEls = await Promise.all(newLogs.map((log) => getLogEl(log)));
-  await appendLog(...logEls);
+  await addLogsToScroller(scroller, newLogs);
+  $(".log-count .total").textContent = `(${store.logs.length})`;
 }
 
 export async function reAddAllLogs() {
-  logContainer.innerHTML = '';
-  const logEls = await Promise.all(logs.map((log) => getLogEl(log)));
-  await appendLog(...logEls);
-}
+  await rerender(scroller);
+}
+
+// Export store and scroller for use in other modules
+export { store, scroller };

public/index.js

@@ -1,5 +1,5 @@
-import { setFilter } from "./filter.js";
-import { $, $$, cloneTemplate } from "./lib.js";
+import { setFilter } from "./utils/filter.js";
+import { $, $$, cloneTemplate } from "./utils/lib.js";
 
 const tagsContainer = $(".tags");
 const tagsOverflowContainer = $(".tags-overflow");
@@ -21,7 +21,7 @@ const setFilterForTags = () => {
     .map((el) => `tag="${el.textContent}"`);
 
   const tagGroup = tagStrings.length ? `@@${tagStrings.join(",")}` : "";
-  setFilter(tagGroup, true, false);
+  setFilter(tagGroup, { updateInput: true });
 };
 
 tagsContainer.addEventListener("click", (e) => {