gl-for

gl-for is used to iterate over a list and render DOM elements. Here is a simple example:

// We initialize a simple list.
Controller.$store.set("todos", ["Do this", "Do that"]);

In the HTML, we are going to iterate over the todos list and print the index and the content.

<ul>
  <template gl-for="(todo,idx) in todos">
    <li>
      #<span gl-bind="idx"></span>
      <span gl-bind="todo"></span>
    </li>
  </template>
</ul>

Performance

gl-for is a key directive because it's widely used across all web applications. It needs to be fast and reliable.

GreenLight implements a variant of the Alpine.JS x-for that only re-renders new elements from the Array. Also, every element has an assigned key that tracks whether it should change or not.