Skip to content

Create by ID. Improve typings. Childless `when` selectors
Compare
Choose a tag to compare
@MatAtBread MatAtBread released this 22 Sep 01:53
Release-v0.15.5
2571765

Changes

Typing of iterable arrays has been improved

Please see the notes at https://github.com/MatAtBread/AI-UI/blob/v0.15.5/module/src/iterators.ts#L65-L72 about assigning an entire array in one statement.

Create children by id & related tag function

Within the scope of an extended tag, this.ids resolves not only as an object with live connections to contained elements by id (as previously), but also a function that can be used to create children by id, for example:

const MyDiv = div.extended({
  ids:{
   summary: span,
   details: table
  },
  constructed() {
    return [
      h1('Sales report'),
      // Create by ID, in this case a span
      this.ids({ id: 'summary' }, geSummary()),
      // Create by ID, in this case a table
      this.ids({ id: 'details' }, ...),
      div('Created on ', new Date().toString())
    ]
  }
});

This style removes the chance of the ids incorrectly referring to a different tag type.

"Childless" when selectors

When selectors, which fire when an identified child or any of its children generates the specified event, can have a ">" suffix with no grandchild specified to suppress grand-child elements fire. For example:

this.when('#form').consume(...); // Fires when the child id 'form' fires a change, or any of it's children do

this.when('#form>').consume(...); // Fires when the child id 'form' fires a change, bit ignores any fired by children of '#form'

Improvements

  • ValidWhenSelector and CSSIdentifier type improved
  • EventObservation now uses a WeakRef to improve GC performance if an Element is removed and no event fires that would cause it to be removed
  • Improvements in the typing of tags and tag functions
  • Some internal type names have been improved

Full Changelog: Release-v0.15.2...Release-v0.15.5

Assets 2
Loading