Activity

1. luwes

   added

   bugSomething isn't workingSomething isn't working

   on Dec 21, 2022
2. rozek commented on Jan 30, 2023

   

   rozek

   on Jan 30, 2023

   More actions

   is there any plan when to fix map?
3. rozek commented on Feb 1, 2023

   

   rozek

   on Feb 1, 2023

   More actions

   well, since map even crashes my application and I don't want to analyze code which may be replaced soon, I'll try and implement the abovementioned approach myself (especially, since I need a fix now or I'll have to proceed to another library/framework with a working list renderer)

   Give me time til tomorrow...
4. rozek commented on Feb 2, 2023

   

   rozek

   on Feb 2, 2023

   Last edited by rozek

   More actions

   Good evening!

   As mentioned yesterday, I needed a replacement for the original map implementation as that crashed my application.

   For that reason, I tried to understand the internals of sinuous and its way of creating and destroying HTML nodes and took the ideas from #168 to implement it anew.

   I made two versions

   • a trivial one which simply asserts that already existing nodes (with any focus, selections, drop-down states etc.) are kept whenever possible, and
   • one based on the "snabbdom" algorithm (without node creation and removal - as that is done outside)

   Both versions have the following restrictions:

   • list items must be objects
   • the list item rendering function should always create exactly one DOM node per item

   You will find the sources below. Both versions have passed some "smoke" tests (and do not crash, at least) but have not yet been tested for efficiency
5. rozek commented on Feb 2, 2023

   

   rozek

   on Feb 2, 2023

   Last edited by rozek

   More actions

   Here is the "trivial" map implementation:

     import { api } from 'sinuous'
   
   /**
    * Map over a list of items that create DOM nodes.
    *
    * @param  {Function} items - Function or observable that creates a list.
    * @param  {Function} expr
    * @param  {boolean} [cleaning]
    * @return {DocumentFragment}
    */
     export function map (ListFn, ItemRenderer, cleaning) {
       const { subscribe, root, sample, cleanup } = api
   
       if (cleaning == null) {         // disable cleaning for templates by default
         cleaning = ! ItemRenderer.$t
       }
       const Disposers = new Map()
   
       let Parent = document.createDocumentFragment()
   
       const NodeAfterList = add(Parent, '')
   
       const unsubscribe = subscribe((oldItemList) => {
         const newItemList = ListFn()
         return sample(() => updateInPlace(
           oldItemList || [], newItemList || [], NodeAfterList, createFn,
           cleaning && dispose
         ))
       })
   
       cleanup(unsubscribe)
       cleanup(disposeAll)
   
     /**** createFn ****/
   
       function createFn (Parent, ListItem, ListIndex, List, FollowUpNode) {
         if (cleaning) {
           return root((Disposer) => {
             const Node = add(Parent, ItemRenderer(ListItem,ListIndex,List), FollowUpNode)
               Disposers.set(Node,Disposer)
             return Node
           })
         } else {
           return add(Parent, ItemRenderer(ListItem,ListIndex,List), FollowUpNode)
         }
       }
   
     /**** dispose ****/
   
       function dispose (Node) {
         let Disposer = Disposers.get(Node)
         if (Disposer != null) {
           Disposer()
         }
         Disposers.delete(Node)
       }
   
     /**** disposeAll ****/
   
       function disposeAll () {
         Disposers.forEach( (Disposer) => Disposer() )
         Disposers.clear()
       }
   
       return Parent
     }
   
   /**** updateInPlace - to keep focus, drop-downs etc. intact ****/
   
     function updateInPlace (
       oldItemList, newItemList, NodeAfterList, createFn, dispose
     ) {
       const Parent = NodeAfterList.parentNode
   
     /**** allow for quick lookup of new list items ****/
   
       let newItemSet = new Set()
       newItemList.forEach((Item) => newItemSet.add(Item) )
   
     /**** associate existing HTML nodes with their list items ****/
   
       let oldNodeMap = new Map(), oldNode = NodeAfterList
       for (let i = oldItemList.length-1; i >= 0; i--) {
         const Item = oldItemList[i]
         oldNodeMap.set(Item,oldNode = oldNode.previousSibling)
       }
   
     /**** remove no longer needed HTML nodes ****/
   
       oldItemList.forEach((Item) => {
         if (! newItemSet.has(Item)) {
           const oldNode = oldNodeMap.get(Item)
           Parent.removeChild(oldNode)
           if (dispose != null) { dispose(oldNode) }
         }
       })
   
     /**** now reorder existing HTML node or create new ones ****/
   
       let FollowUpNode = NodeAfterList
       for (let i = newItemList.length-1; i >= 0; i--) {
         const Item = newItemList[i]
   
         let Node = oldNodeMap.get(Item)
         if (Node == null) {
           Node = createFn(Parent, Item,i,newItemList, FollowUpNode)
         } else {
           Parent.insertBefore(Node,FollowUpNode)
         }
   
         FollowUpNode = Node
       }
   
     /**** that's it! ****/
   
       return newItemList.slice()
     }
   
   /**** add (has been taken from former map "utils") ****/
   
     const GROUPING = '__g';
   
     let groupCounter = 0;
   
     function add (parent, value, endMark) {
       let mark;
   
       if (typeof value === 'string') {
         value = document.createTextNode(value);
       } else if (!(value instanceof Node)) {
         // Passing an empty array creates a DocumentFragment.
         value = api.h([], value);
       }
   
       if (
         value.nodeType === 11 &&
         (mark = value.firstChild) &&
         mark !== value.lastChild
       ) {
         mark[GROUPING] = value.lastChild[GROUPING] = ++groupCounter;
       }
   
       // If endMark is `null`, value will be added to the end of the list.
       parent.insertBefore(value, endMark);
   
       // Explicit undefined to store if frag.firstChild is null.
       return mark || value;
     }
6. rozek commented on Feb 2, 2023

   

   rozek

   on Feb 2, 2023

   More actions

   and here is the one based on the "snabbdom" algorithm:

     import { api } from 'sinuous'
   
   /**
    * Map over a list of items that create DOM nodes.
    *
    * @param  {Function} items - Function or observable that creates a list.
    * @param  {Function} expr
    * @param  {boolean} [cleaning]
    * @return {DocumentFragment}
    */
     export function map (ListFn, ItemRenderer, cleaning) {
       const { subscribe, root, sample, cleanup } = api
   
       if (cleaning == null) {         // disable cleaning for templates by default
         cleaning = ! ItemRenderer.$t
       }
       const Disposers = new Map()
   
       let Parent = document.createDocumentFragment()
   
       const NodeAfterList = add(Parent, '')
   
       const unsubscribe = subscribe((oldItemList) => {
         const newItemList = ListFn()
         return sample(() => updateInPlace(
           oldItemList || [], newItemList || [], NodeAfterList, createFn,
           cleaning && dispose
         ))
       })
   
       cleanup(unsubscribe)
       cleanup(disposeAll)
   
     /**** createFn ****/
   
       function createFn (Parent, ListItem, ListIndex, List, FollowUpNode) {
         if (cleaning) {
           return root((Disposer) => {
             const Node = add(Parent, ItemRenderer(ListItem,ListIndex,List), FollowUpNode)
               Disposers.set(Node,Disposer)
             return Node
           })
         } else {
           return add(Parent, ItemRenderer(ListItem,ListIndex,List), FollowUpNode)
         }
       }
   
     /**** dispose ****/
   
       function dispose (Node) {
         let Disposer = Disposers.get(Node)
         if (Disposer != null) {
           Disposer()
         }
         Disposers.delete(Node)
       }
   
     /**** disposeAll ****/
   
       function disposeAll () {
         Disposers.forEach( (Disposer) => Disposer() )
         Disposers.clear()
       }
   
       return Parent
     }
   
   /**** updateInPlace - to keep focus, drop-downs etc. intact ****/
   
     function updateInPlace (
       oldItemList, newItemList, NodeAfterList, createFn, dispose
     ) {
       const Parent = NodeAfterList.parentNode
   
     /**** allow for quick lookup of new list items ****/
   
       let newItemSet = new Set()
       newItemList.forEach((Item) => newItemSet.add(Item) )
   
     /**** associate existing HTML nodes with their list items ****/
   
       let oldNodeMap = new Map(), oldNode = NodeAfterList
       for (let i = oldItemList.length-1; i >= 0; i--) {
         const Item = oldItemList[i]
         oldNodeMap.set(Item,oldNode = oldNode.previousSibling)
       }
   
     /**** remove no longer needed HTML nodes and collect all others ****/
   
       let oldNodeList = []             // the "snabbdom" algorithm needs this list
       oldItemList.forEach((Item) => {
         const oldNode = oldNodeMap.get(Item)
         if (newItemSet.has(Item)) {
           oldNodeList.push(oldNode)
         } else {
           Parent.removeChild(oldNode)
           if (dispose != null) { dispose(oldNode) }
         }
       })
   
     /**** create a list of (already existing) HTML nodes for the new item list ****/
   
       let newNodeList = []    // the "snabbdom" algorithm needs this list as well
       newItemList.forEach((Item,Index) => {
         let oldNode = oldNodeMap.get(Item)
         if (oldNode != null) {
           newNodeList.push(oldNode)
         }
       })
   
     /**** now bring the existing HTML nodes in their proper order ****/
   
       reorder(Parent, oldNodeList,newNodeList, NodeAfterList)
   
     /**** finally add nodes for any new items ****/
   
       let FollowUpNode = NodeAfterList
       for (let i = newItemList.length-1; i >= 0; i--) {
         const Item = newItemList[i]
   
         let Node = oldNodeMap.get(Item)
         if (Node == null) {
           Node = createFn(Parent, Item,i,newItemList, FollowUpNode)
         }
   
         FollowUpNode = Node
       }
   
     /**** that's it! ****/
   
       return newItemList.slice()
     }
   
   /**** reorder ****/
   // originally taken from taken from https://github.com/luwes/js-diff-benchmark/blob/master/libs/snabbdom.js
   // but without node removal (which has already been done before)
   
     function reorder (parent, a, b, afterNode) {
       const a_index = new Map();
       const b_index = new Map();
   
       let need_indices;
       let start_i = 0;
       let end_i = a.length - 1;
       let start_j = 0;
       let end_j = b.length - 1;
       let start_a = a[start_i];
       let end_a = a[end_i];
       let start_b = b[start_j];
       let end_b = b[end_j];
       let old_start_j;
       let new_start_i;
   
       while (start_i <= end_i && start_j <= end_j) {
         if (start_a == null) {
           start_a = a[++start_i];
         } else if (end_a == null) {
           end_a = a[--end_i];
         } else if (start_b == null) {
           start_b = b[++start_j];
         } else if (end_b == null) {
           end_b = b[--end_j];
         } else if (start_a === start_b) {
           start_a = a[++start_i];
           start_b = b[++start_j];
         } else if (end_a === end_b) {
           end_a = a[--end_i];
           end_b = b[--end_j];
         }
         else if (start_a === end_b) {
           parent.insertBefore(
             a[start_i],
             a[end_i].nextSibling || afterNode
           );
           start_a = a[++start_i];
           end_b = b[--end_j];
         } else if (end_a === start_b) {
           parent.insertBefore(
             a[end_i],
             a[start_i] || afterNode
           );
           end_a = a[--end_i];
           start_b = b[++start_j];
         }
         else {
           let i;
           // Lazily build maps here. They are relevant only if there has been
           // a move, or a mid-list insertion or deletion and not if there
           // has been an insertion at the end or deletion from the front.
           if (!need_indices) {
             need_indices = true;
   
             // Create a mapping from keys to their position in the old list
             for (i = 0; i < a.length; i++) {
               a_index.set(a[i], i);
             }
             // Create a mapping from keys to their position in the new list
             for (i = 0; i < b.length; i++) {
               b_index.set(b[i], i);
             }
           }
   
           old_start_j = a_index.get(start_b);
           new_start_i = b_index.get(start_a);
   
           // Insertion
           if (old_start_j === undefined) {
             parent.insertBefore(
               start_b,
               a[start_i] || afterNode
             );
             start_b = b[++start_j];
           }
           // Move
           else {
             parent.insertBefore(
               start_b,
               a[start_i] || afterNode
             );
             a[old_start_j] = null;
             start_b = b[++start_j];
           }
         }
       }
       if (start_i <= end_i || start_j <= end_j) {
         if (start_i > end_i) { // old list exhausted; process new list additions
           for (start_j; start_j <= end_j; start_b = b[++start_j]) {
             parent.insertBefore(start_b, a[start_i] || afterNode);
           }
         }
       }
       return b;
     }
   
   /**** add (has been taken from former map "utils") ****/
   
     const GROUPING = '__g';
   
     let groupCounter = 0;
   
     function add (parent, value, endMark) {
       let mark;
   
       if (typeof value === 'string') {
         value = document.createTextNode(value);
       } else if (!(value instanceof Node)) {
         // Passing an empty array creates a DocumentFragment.
         value = api.h([], value);
       }
   
       if (
         value.nodeType === 11 &&
         (mark = value.firstChild) &&
         mark !== value.lastChild
       ) {
         mark[GROUPING] = value.lastChild[GROUPING] = ++groupCounter;
       }
   
       // If endMark is `null`, value will be added to the end of the list.
       parent.insertBefore(value, endMark);
   
       // Explicit undefined to store if frag.firstChild is null.
       return mark || value;
     }
7. rozek commented on Feb 4, 2023

   

   rozek

   on Feb 4, 2023

   Last edited by rozek

   More actions

   Nota bene: the // Insertion and the process new list additions sections could probably also be removed from the reorder function in the snabbdom variant - but I did not test that yet