dhilt · dhilt · Nov 28, 2025 · Nov 9, 2025 · Nov 9, 2025 · Nov 9, 2025
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
diff --git a/.github/workflows/general.yml b/.github/workflows/general.yml
@@ -0,0 +1,58 @@
+name: vscroll build and tests
+
+on:
+  pull_request:
+  workflow_dispatch:
+    inputs:
+      cause:
+        description: "Reason"
+        required: true
+        default: "Manual triggering"
+
+jobs:
+  build_and_tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dispatched?
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        run: |
+          echo "This is dispatched"
+          echo "Test reason: ${{ github.event.inputs.cause }}"
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Install root dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+
+      - name: Install test dependencies
+        run: cd tests && npm ci
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright Browsers
+        run: cd tests && npx playwright install --with-deps chromium
+
+      - name: Run e2e tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: tests/e2e/playwright-report/
+          retention-days: 30
+
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ node_modules
 .vscode
 *.tgz
 .DS_Store
+tests/e2e/playwright-report
+tests/e2e/test-results
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "printWidth": 100
+}
diff --git a/build.js b/build.js
@@ -10,7 +10,7 @@ const CONF_DIR = 'build';
 const configJsonString = readFileSync('./package.json', { encoding: 'utf8' });
 const config = JSON.parse(configJsonString);
 
-// Package version 
+// Package version
 shell.echo('Setup package version');
 const versionContent = `export default {
   name: '${config.name}',

diff --git a/demo/window-test.html b/demo/window-test.html
@@ -0,0 +1,184 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vscroll window viewport test</title>
+  <meta charset="utf-8">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .item {
+      height: 20px;
+      line-height: 20px;
+      padding: 0 10px;
+    }
+
+    .item span {
+      font-size: small;
+      color: #666;
+    }
+
+    .info {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      background: rgba(255, 255, 255, 0.95);
+      border: 1px solid #ccc;
+      padding: 10px;
+      font-size: 12px;
+      font-family: monospace;
+      z-index: 1000;
+    }
+
+    .info div {
+      margin: 2px 0;
+    }
+  </style>
+  <script src="../dist/bundles/vscroll.umd.js"></script>
+</head>
+
+<body>
+  <div class="info">
+    <div><strong>Window Viewport Test</strong></div>
+    <div id="info-html-height">html.clientHeight: -</div>
+    <div id="info-html-scroll">html.scrollHeight: -</div>
+    <div id="info-window-height">window.innerHeight: -</div>
+    <div id="info-buffer-size">Buffer size: -</div>
+    <div id="info-fetch-count">Fetches: 0</div>
+  </div>
+  <div id="vscroll">
+    <div data-padding-backward></div>
+    <div data-padding-forward></div>
+  </div>
+  <script>
+    (() => {
+
+      const MAX = 2000;
+      const MIN = 1;
+      let fetchCount = 0;
+
+      function updateInfo() {
+        document.getElementById('info-html-height').textContent =
+          'html.clientHeight: ' + document.documentElement.clientHeight;
+        document.getElementById('info-html-scroll').textContent =
+          'html.scrollHeight: ' + document.documentElement.scrollHeight;
+        document.getElementById('info-window-height').textContent =
+          'window.innerHeight: ' + window.innerHeight;
+        document.getElementById('info-buffer-size').textContent =
+          'Buffer size: ' + (window.workflow ? window.workflow.scroller.buffer.size : 0);
+        document.getElementById('info-fetch-count').textContent =
+          'Fetches: ' + fetchCount;
+      }
+
+      // virtual scroll engine params
+      const workflowParams = {
+        consumer: {
+          name: 'VScroll Window Test',
+          version: '1.0.0'
+        },
+        element: document.getElementById('vscroll'),
+        datasource: {
+          get: (index, count, success) => {
+            fetchCount++;
+            console.log(`[Fetch #${fetchCount}] Requesting [${index}..${index + count - 1}]`);
+
+            const start = Math.max(index, MIN);
+            const end = Math.min(index + count - 1, MAX);
+            const data = [];
+
+            if (start <= end) {
+              for (let i = start; i <= end; i++) {
+                data.push({ id: i, text: 'item #' + i });
+              }
+            }
+
+            console.log(`[Fetch #${fetchCount}] Resolved ${data.length} items`);
+            setTimeout(() => {
+              success(data);
+              updateInfo();
+            }, 25);
+          },
+          settings: {
+            startIndex: 100,
+            padding: 0.25,
+            bufferSize: 1,
+            itemSize: 20,
+            windowViewport: true
+          },
+          devSettings: {
+            debug: true,
+            immediateLog: true,
+            logProcessRun: true,
+            logColor: false
+          }
+        },
+        run: (newItems) => {
+          if (!newItems.length && !oldItems.length) {
+            return;
+          }
+          processItems(newItems, oldItems);
+          oldItems = newItems;
+          updateInfo();
+        },
+      };
+
+      // old items storage
+      let oldItems = [];
+
+      // the renderer
+      const processItems = (newItems, oldItems) => {
+        // remove elements not present
+        oldItems
+          .filter(item => !newItems.includes(item))
+          .forEach(item => item.element.remove());
+        // create and insert new elements
+        const elements = [];
+        let beforeElement =
+          workflowParams.element.querySelector('[data-padding-forward]');
+        for (let i = newItems.length - 1; i >= 0; i--) {
+          if (oldItems.includes(newItems[i])) {
+            if (!elements.length) {
+              beforeElement = newItems[i].element;
+              continue;
+            } else {
+              break;
+            }
+          }
+          elements.unshift(createItemElement(newItems[i]));
+        }
+        elements.forEach(elt =>
+          beforeElement.insertAdjacentElement('beforebegin', elt)
+        );
+      };
+
+      // creates single item HTML element
+      const createItemElement = item => {
+        const element = document.createElement('div');
+        element.setAttribute('data-sid', item.nodeId);
+        if (item.invisible) {
+          element.style.position = 'fixed';
+          element.style.top = '-99px';
+        }
+        element.innerHTML =
+          `<div class="item">
+        <span>${item.$index}</span>)
+        ${item.data.text}
+      </div>`;
+        return element;
+      };
+
+      // run the VScroll Workflow
+      window.workflow = new VScroll.Workflow(workflowParams);
+
+      // Update info every second
+      setInterval(updateInfo, 1000);
+      setTimeout(updateInfo, 500);
+
+    })();
+  </script>
+</body>
+
+</html>
diff --git a/eslint.config.js b/eslint.config.js
@@ -6,12 +6,7 @@ import globals from 'globals';
 export default [
   // Global ignores (replaces .eslintignore)
   {
-    ignores: [
-      'node_modules/**',
-      'dist/**',
-      'build/**',
-      'demo/**'
-    ]
+    ignores: ['node_modules/**', 'dist/**', 'build/**', 'demo/**']
   },
 
   // Base configuration for TypeScript files
@@ -37,10 +32,18 @@ export default [
 
       // Custom rules from original config
       'max-len': ['error', { code: 120 }],
-      'quotes': ['error', 'single'],
-      'semi': ['error', 'always'],
+      quotes: ['error', 'single'],
+      semi: ['error', 'always'],
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_'
+        }
+      ],
 
       // Disable no-undef for TypeScript as TypeScript compiler handles this
       'no-undef': 'off'
@@ -76,4 +79,4 @@ export default [
       '@typescript-eslint/no-var-requires': 'off'
     }
   }
-]; 
+];
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,9 @@
+export default {
+  testMatch: ['**/tests/unit/**/*.spec.ts'],
+  transform: {
+    '^.+\\.ts$': 'babel-jest'
+  },
+  moduleFileExtensions: ['ts', 'js'],
+  collectCoverageFrom: ['src/**/*.ts'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/tests/']
+};
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -0,0 +1,4 @@
+export default {
+  '*.ts': () => 'npm run lint',
+  '*.{ts,js,json}': 'prettier --write'
+};