svelte-log-view 6.4.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-log-view",
-  "version": "6.4.0",
+  "version": "7.0.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -46,7 +46,7 @@
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "documentation": "^14.0.3",
-    "mf-styling": "^3.2.24",
+    "mf-styling": "^3.3.0",
     "npm-pkgbuild": "^19.1.2",
     "playwright": "^1.57.0",
     "reader-line-iterator": "^1.2.3",

package/src/LogView.svelte

@@ -2,23 +2,26 @@
   import { onDestroy } from "svelte";
 
   /**
-   *   line 1    |                
-   *   line 2    | -> offsetRows
-   * ----------
-   * | line 4 |  |
-   * | line 5 |  | -> visibleRows
-   * | line 5 |  |
-   * ----------
-   *   line 6
+   *   line 1    |                   \
+   *   line 2    | -> offsetEntries.  |
+   * ----------                       |
+   * | line 4 |  |                    |
+   * | line 5 |  | -> visibleEntries. | -> maxBufferedEntries
+   * | line 5 |  |                    |
+   * ----------                       |
+   *   line 6                        /
    */
 
   let {
-    source,                      /** data source */
-    visibleRows = $bindable(24),   /** number of rows in the dom */
-    offsetRows = $bindable(0),   /** number of rows from the top to the 1st. visible */
+    source /** data source */,
+    visibleEntries = $bindable(24) /** number of rows in the dom */,
+    offsetEntries = $bindable(
+      0
+    ) /** number of rows from the top to the 1st. visible */,
     follow = $bindable(true),
     selected = $bindable(0),
-    fetchAboveRows = 2,    /** number of rows to fetch if scrolling upwards into the void */
+    numberOfEntriesToFetch = 10 /** number of rows to fetch if we reach outside of the buffered area */,
+    maxBufferedEntries = 1024,
     row
   } = $props();
 
@@ -43,11 +46,15 @@
       for await (const entry of source.fetch(current)) {
         entries.push(entry);
 
-        if (entries.length <= visibleRows) {
+        if (entries.lenght >= maxBufferedEntries) {
+          entries.shift();
+        }
+
+        if (entries.length <= visibleEntries) {
           visible = entries;
         } else {
           if (!follow) {
-            visible = entries.slice(offsetRows, visibleRows);
+            visible = entries.slice(offsetEntries, visibleEntries);
           }
         }
 
@@ -64,31 +71,39 @@
 
     if (selected > entries.length - 1) {
       selected = entries.length - 1;
-      offsetRows = entries.length - visibleRows;
+      offsetEntries = entries.length - visibleEntries;
     }
 
     if (selected < 0) {
       const additionalEntries = [];
 
-      for await (const entry of source.fetch(entries[0], -fetchAboveRows, fetchAboveRows)) {
+      for await (const entry of source.fetch(
+        entries[0],
+        -numberOfEntriesToFetch,
+        numberOfEntriesToFetch
+      )) {
         additionalEntries.push(entry);
       }
 
       entries.unshift(...additionalEntries);
 
+      if (entries.lenght >= maxBufferedEntries) {
+        entries.length = maxBufferedEntries;
+      }
+
       selected += additionalEntries.length;
-      offsetRows += additionalEntries.length;
+      offsetEntries += additionalEntries.length;
     }
 
-    if (selected < offsetRows) {
-      offsetRows = selected;
+    if (selected < offsetEntries) {
+      offsetEntries = selected;
     }
 
-    if (selected >= offsetRows + visibleRows) {
-      offsetRows = selected - visibleRows + 1;
+    if (selected >= offsetEntries + visibleEntries) {
+      offsetEntries = selected - visibleEntries + 1;
     }
 
-    visible = entries.slice(offsetRows, offsetRows + visibleRows);
+    visible = entries.slice(offsetEntries, offsetEntries + visibleEntries);
   }
 
   function setFollow(flag) {
@@ -114,11 +129,11 @@
         break;
       case "PageUp":
         setFollow(false);
-        setSelected(selected - visibleRows);
+        setSelected(selected - visibleEntries);
         break;
       case "PageDown":
         setFollow(false);
-        setSelected(selected + visibleRows);
+        setSelected(selected + visibleEntries);
         break;
       case "End":
       case "G":
@@ -139,14 +154,14 @@
   function onclick(event) {
     setFollow(false);
     const totalHeight = content.getBoundingClientRect().height;
-    const rowHeight = totalHeight / visibleRows;
-    setSelected(offsetRows + Math.floor(event.clientY / rowHeight));
+    const rowHeight = totalHeight / visibleEntries;
+    setSelected(offsetEntries + Math.floor(event.clientY / rowHeight));
   }
 </script>
 
 <svelte:window {onkeydown} />
 <log-content {onclick} {onkeydown} bind:this={content} role="none">
   {#each visible as entry, i (i)}
-    {@render row(entry, selected, offsetRows + i, follow)}
+    {@render row(entry, selected, offsetEntries + i, follow)}
   {/each}
 </log-content>