neo

The basic menu implementation is ready, including a tree based key navigation using the arrow keys.

A smart focus-leave management to hide menus is not in place yet.

see: https://github.com/neomjs/neo/issues/2566

Added a new optional (experimental) main thread addon, to provide the ability to create dom nodes as templates and add clones of them into specific target nodes.

Code:
https://github.com/neomjs/neo/blob/dev/src/main/addon/CloneNode.mjs

Example code:
https://github.com/neomjs/neo/blob/dev/apps/krausest/view/TableComponent.mjs

Online demo:
https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/apps/krausest/index.html

3 buttons are functional at this point:

• Append 1k rows
• Clear
• Create 10k rows

While working on the krausest performance demo, I got a couple of ideas on how to enhance the engine. It got significantly faster speficic use cases.

Before:

Adding 1k rows into an empty table resulted in 1k deltas, removing 1k rows as well.

Step 1:

A new setTextContent delta action reduces the deltas for removing all child nodes inside a container to one.

Step 2:

Adding multiple nodes into an empty container will now merge the insert actions into a bulk insert.

=> For this use case, the amount of deltas went down from 2k to 2.

I am not sure yet if there is a smart way for bulk insertions into non empty nodes. After all, the vdom engine has to check all nodes for potential movements.

Multiple clicks on the same edit icon as well as clicking directly on another edit icon => no need to unmount the form in these cases.

Learned something new:

new Date ('2021-07-20 00:00:00');

Chrome: ok
FF: ok
Safari: blank page

new Date ('2021-07-20T00:00:00');

The "T" fixes it.

The reason for adding zeroes in the first place:

It is now possible to enter the calendar color picker using the tab key.

The calendar week view infinite scrolling got improved.

selection.Model now checks for a selected item in case the event path contains no match.

Added a color-picker widget, which is extending list.Base.

https://youtu.be/PKF2rPGaUcI

This affects list.Base, but also list.Chip and calendar.view.calendars.List.

Changing one or multiple record fields will automatically trigger vdom updates in a smart way.

Lists can now render with an initial item selection, record changes will keep the selection as well.

https://youtu.be/MKxiL1dMo-w

Since webpack (the acorn parser) does support optional chaining now, I added the new syntax in a lot(!) of places.

This reduces the file size of the framework a bit and improves the readability of the code base.

You can find more infos on this topic here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

A new base class for lists which contain component based list items.

calendar.view.calendars.List:
https://github.com/neomjs/neo/blob/dev/src/calendar/view/calendars/List.mjs

list.Chip:
https://github.com/neomjs/neo/blob/dev/src/list/Chip.mjs

are now extending it.

https://tobiasuhlig.medium.com/how-to-create-a-list-containing-checkbox-fields-and-keynav-in-125-lines-of-code-88b440de2951?source=friends_link&sk=b2d39365dd33f0dd4d3d2715828416cb

A list containing checkbox fields as list items and key nav:
https://www.youtube.com/watch?v=tNhTU0oEAo0

It increases the readability a lot.

Before:

Now:

This enables us to use it inside config setters => we can now compare e.g. objects and arrays for equality and only trigger the afterSet() methods in case there is a real change.

More work on the calendar widget as well (moving configs into the view model).

We can now hide the weekend columns dynamically. This does honor the infinite horizontal scrolling.

since the settings container does get lazy loaded now, the demo header can not rely on using these css variables.

created custom styling files for the demo.

https://youtu.be/-LpL78Xiu4E

plus a dependencies update.