2024, node 18, demo version

Author: dhilt

.github/workflows/build.yml

@@ -5,20 +5,20 @@ on:
     branches:
       - "**"
   pull_request:
-    branches: [ main ]
+    branches: [main]
   workflow_dispatch:
     inputs:
       cause:
-        description: 'Reason'
+        description: "Reason"
         required: true
-        default: 'Manual triggering'
+        default: "Manual triggering"
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - name: Dispatched?
         if: ${{ github.event_name == 'workflow_dispatch' }}
@@ -27,10 +27,10 @@ jobs:
           echo "Build reason: ${{ github.event.inputs.cause }}"
 
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Denis Hilt (https://github.com/dhilt)
+Copyright (c) 2024 Denis Hilt (https://github.com/dhilt)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -73,7 +73,7 @@ interface WorkflowParams<ItemData> {
 }
 ```
 
-This is a TypeScript definition, but speaking of JavaScript, an argument object must contain 4 fields described below.
+This is a TypeScript definition, but speaking of JavaScript, an argument object must contain 4 mandatory and 1 optional fields described below.
 
 ### 1. Consumer
 
@@ -176,13 +176,14 @@ Each item (in both `newItems` and `oldItems` lists) is an instance of the [Item
 
 `Run` callback is the most complex and environment-specific part of the `vscroll` API, which is fully depends on the environment for which the consumer is being created. Framework specific consumer should rely on internal mechanism of the framework to provide runtime DOM modifications.
 
-There are some requirements on how the items should be processed by `run` call:
- - after the `run` callback is completed, there must be `newItems.length` elements in the DOM between backward and forward padding elements;
-- old items that are not in the new item list should be removed from DOM; use `oldItems[].element` references for this purpose;
- - old items that are in the list should not be removed and recreated, as it may lead to an unwanted shift of the scroll position; just don't touch them;
- - new items elements should be rendered in accordance with `newItems[].$index` comparable to `$index` of elements that remain: `$index` must increase continuously and the directions of increase must persist across the `run` calls; Scroller maintains `$index` internally, so you only need to properly inject a set of `newItems[].element` into the DOM;
- - new elements should be rendered but not visible, and this should be achieved by "fixed" positioning and "left"/"top" coordinates placing the item element out of view; the Workflow will take care of visibility after calculations; an additional attribute `newItems[].invisible` can be used to determine if a given element should be hidden; this requirement can be changed by the `Routines` class setting, see below;
- - new items elements should have "data-sid" attribute, which value should reflect `newItems[].$index`.
+There are some requirements on how the items should be processed by `run` call.
+
+- After the `run` callback is completed, there must be `newItems.length` elements in the DOM between backward and forward padding elements.
+- Old items that are not in the new items list should be removed from DOM. Use `oldItems[].element` references for this purpose.
+- Old items that are in the new items list should not be removed and recreated, as this may result in unwanted scroll position shifts. Just don't touch them.
+- New items elements should be rendered in the correct order. Specifically, in accordance with `newItems[].$index` comparable to `$index` of elements that remain: `$index` must increase continuously and the directions of increase must persist across the `run` calls. The scroller maintains `$index` internally, so you only need to properly inject a set of `newItems[].element` into the DOM.
+- New elements should be rendered without being visible, and this should be achieved by "fixed" positioning and "left"/"top" coordinates that take the item element out of view. The Workflow will take care of visibility after calculations. An additional `newItems[].invisible` attribute can be used to determine whether a given element should be hidden. This requirement can be changed by the `Routines` class setting (see below).
+- New items elements should have a "data-sid" attribute whose value should reflect `newItems[].$index`.
 
 ### 5. Routines
 
@@ -194,7 +195,7 @@ import { Routines, Workflow } from 'vscroll';
 class CustomRoutines extends Routines { ... }
 
 new Workflow({
-  // consumer, element, datasource, run,
+  consumer, element, datasource, run, // required params
   Routines: CustomRoutines
 })
 ```
@@ -213,9 +214,9 @@ If we have a table layout case where we need to specify the offset of the table
 
 ```js
 new Workflow({
-  // consumer, element, datasource, run,
+  consumer, element, datasource, run, // required params
   Routines: class extends Routines {
-    getOffset(element) {
+    getOffset() {
       return document.querySelector('#viewport thead')?.offsetHeight || 0;
     }
   }
@@ -292,4 +293,4 @@ VScroll will receive its own Adapter API documentation later, but for now please
 
  __________
 
-2023 &copy; [Denis Hilt](https://github.com/dhilt)
+2024 &copy; [Denis Hilt](https://github.com/dhilt)

demo/index.html

@@ -30,6 +30,7 @@ <h2 id="project_tagline">
           </div>
         </div>
         <div class="column">
+          <p id="vscroll-core-version"> </p>
           <p>
             This is a minimal working demo of a virtual scroll list
             rendering an unlimited data in runtime.
@@ -46,7 +47,7 @@ <h2 id="project_tagline">
   </div>
   <div id="footer_wrap" class="outer">
     <footer class="inner">
-      <p class="copyright">2023 © <a href="https://github.com/dhilt">Denis Hilt</a></p>
+      <p class="copyright">2024 © <a href="https://github.com/dhilt">Denis Hilt</a></p>
     </footer>
   </div>
   <script src="./index.js"></script>

demo/index.js

@@ -71,3 +71,6 @@ const createItemElement = item => {
 
 // run the VScroll Workflow
 new VScroll.Workflow(workflowParams);
+
+const versionElt = document.getElementById(`vscroll-core-version`);
+versionElt.innerHTML = `Package version: ${VScroll.packageInfo.name} v${VScroll.packageInfo.version}.`;