list does not work properly with functional components defined with fat-arrow notation

[redom]

list does not work properly with functional components defined with fat-arrow notation

[pakastin]

• 1 and 2: initData is just some data that is shared to all created list items. I use it for example to provide references to i18n or api:

class Item {
  constructor (initData, data, i, data) {
    console.log(initData); // 'Hello'
    console.log(data); // 1, 2, 3, 4, 5
    console.log(i); // 0, 1, 2, 3, 4
    console.log(data); // [1, 2, 3, 4, 5]
  }
  update (item, i, data, context) {
    console.log(item); // 1, 2, 3, 4, 5
    console.log(i); // 0, 1, 2, 3, 4
    console.log(data); // [1, 2, 3, 4, 5]
    console.log(context); // 'yo!' –> similar to initData
  }
}
const items = list(Item, null, 'Hello');

items.update([1, 2, 3, 4, 5], 'yo!');

• 3: listPool really rarely needed, I decided to remove it from the docs for now
  –> you could create a custom list component with it, like animated list for example
• 4: I agree
• 5: setChildren will call mount and unmount as needed, yeah
• 6: I agree

Thank you so much, these are really helpful comments! 👍

[pakastin]

Yeah, it's a bit confusing right now, since fat arrow functions converted to regular functions by bundlers like Rollup+Buble or Babel will work..

[spapas]

Well I think it should be added somewhere in the docs to help people trying the lib.

Actually there are various places where the documentation is lacking making the library a little difficult to use.

[pakastin]

I'd love to hear your thoughts about the documentation or specific pull requests / issues even better 😊

[spapas]

Some quick ones (I can't do a PR since I can't answer most of the following myself):

1. I couldn't find any documentation for the initData parameter of list(). I understand that this is passed to the constructor of the list view component but how it can be used? An example would be useful here.
2. Continuing from the above, I can understand that there are a bunch of parameters that list passes to the component when creating it (including the initData). However I couldn't find them listed in the docs.
3. I think that you need to add a rationale for list and more importantly for listPool and place. I really can't understand what's the purpose of listPool; what does it offer, why should I use it? This can just be one or two lines but it is very important for people not familiar with the library.
4. The router function needs a better and more complete example.
5. What is the difference between mount, unmount and setChildren? I've observed that if I call mount multiple times (each time mounting a new el) it will append the list of elements to the parent. On the other hand if I call setChildren it will replace the parent's dom with the new element. Is this their only difference? Whill setChildren call unmount?
6. Also it would be great if you add a little more complex example, i.e the classing Todo list.

I can understand that most of these question could be answered by trial and error or by reading the source code. However it is not easy for everybody to do these things especially with the abundance of JS framework existing right now.