svelte-log-view 6.4.1 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-log-view",
-  "version": "6.4.1",
+  "version": "7.0.1",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -51,7 +51,7 @@
     "playwright": "^1.57.0",
     "reader-line-iterator": "^1.2.3",
     "semantic-release": "^25.0.2",
-    "svelte": "^5.46.0",
+    "svelte": "^5.46.1",
     "vite": "^7.3.0",
     "vite-plugin-compression2": "^2.4.0"
   },

package/src/LogView.svelte

@@ -2,29 +2,40 @@
   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 |  | -> numberOfVisibleEntries. | -> 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 */,
+    entries = $bindable([]),
+    offsetEntries = $bindable(
+      0
+    ) /** number of entries 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 */
-    row
+    numberOfEntriesToFetch = 10 /** number of entries to fetch if we reach outside of the buffered area */,
+    maxBufferedEntries = 1024,
+    entryElement
   } = $props();
 
-  const entries = [];
-  let visible = $state(entries);
-  let content;
+  let contentHeight = $state();
+  let numberOfVisibleEntries = $derived.by(() => {
+    console.log("contentHeight",contentHeight);
+    const n = Math.ceil(contentHeight / entryHeight);
+    return n;
+  });
+
+  let visibleEntries = $derived.by(() => {
+    return entries.slice(offsetEntries, offsetEntries + numberOfVisibleEntries);
+  });
+  let entryHeight = 19.13;
 
   onDestroy(() => source.abort());
 
@@ -43,14 +54,9 @@
       for await (const entry of source.fetch(current)) {
         entries.push(entry);
 
-        if (entries.length <= visibleRows) {
-          visible = entries;
-        } else {
-          if (!follow) {
-            visible = entries.slice(offsetRows, visibleRows);
-          }
+        if (entries.lenght >= maxBufferedEntries) {
+          entries.shift();
         }
-
         if (follow) {
           setSelected(entries.length - 1);
           current = entries[entries.length - 1];
@@ -64,31 +70,42 @@
 
     if (selected > entries.length - 1) {
       selected = entries.length - 1;
-      offsetRows = entries.length - visibleRows;
+      offsetEntries = entries.length - numberOfVisibleEntries;
     }
 
     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 + numberOfVisibleEntries) {
+      offsetEntries = selected - numberOfVisibleEntries + 1;
     }
 
-    visible = entries.slice(offsetRows, offsetRows + visibleRows);
+    visibleEntries = entries.slice(
+      offsetEntries,
+      offsetEntries + numberOfVisibleEntries
+    );
   }
 
   function setFollow(flag) {
@@ -114,21 +131,21 @@
         break;
       case "PageUp":
         setFollow(false);
-        setSelected(selected - visibleRows);
+        setSelected(selected - numberOfVisibleEntries);
         break;
       case "PageDown":
         setFollow(false);
-        setSelected(selected + visibleRows);
-        break;
-      case "End":
-      case "G":
-        setFollow(false);
-        setSelected(entries.length - 1);
+        setSelected(selected + numberOfVisibleEntries);
         break;
       case "Home":
       case "g":
         setFollow(false);
-        setSelected(0);
+        setSelected(Number.MIN_SAFE_INTEGER + 1);
+        break;
+      case "End":
+      case "G":
+        setFollow(false);
+        setSelected(Number.MAX_SAFE_INTEGER - 1);
         break;
       case "f":
         setFollow(!follow);
@@ -138,15 +155,18 @@
 
   function onclick(event) {
     setFollow(false);
-    const totalHeight = content.getBoundingClientRect().height;
-    const rowHeight = totalHeight / visibleRows;
-    setSelected(offsetRows + Math.floor(event.clientY / rowHeight));
+    setSelected(offsetEntries + Math.floor(event.clientY / entryHeight));
   }
 </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)}
+<log-content
+  {onclick}
+  {onkeydown}
+  bind:clientHeight={contentHeight}
+  role="presentation"
+>
+  {#each visibleEntries as entry, i (i)}
+    {@render entryElement(entry, selected, offsetEntries + i, follow)}
   {/each}
 </log-content>

package/src/log.css

@@ -1,5 +1,6 @@
 log-content {
   position: relative;
-  overflow-y: auto;
+  overflow-y: hidden;
   display: block;
+  min-height: 72px;
 }