Config

As you've probably noticed, Neo.mjs classes have a static config property.

The config describes properties you can specify as you create an instance of the class. Any config in the class, or its ancestors, can be specified.

Simple properties and lifecycle properties

In addition, Neo.mjs uses that information to set up property lifecycle methods.

Here's an example of a new component class Simple with three config properties:

1. className — used by Neo.mjs to keep track of every class
2. foo — an instance property
3. bar_ — another instance property

The Simple class introduces syntax. It doesn't have any content, so if you run the code you won't see anything. We'll change that in the next example.

Detecting when a value changes

Note that the bar property is defined with an underscore at the end. That tags the property as a lifecyle property. A lifecycle property provides methods that are run as the property is updated or accessed. You're free to implment these methods to provide business rules, normalize values, or have side-effects, such as updating a view or firing an event.

This time if you run the code you'll see "hi there" in the view. That's because the Simple instance is configured with bar: 'hi there', and since that's a lifecycle property the afterSetBar() method is run. That method updates the view with the passed value.

Firing an event when a value changes

Typically, the afterSet method is used to update a view or to fire an event.

Look at this code: afterSetBar() fires an event, and the config in the items[] is listening to it.