README.md

Reactivity

Reactivity is the crux of Strawberry, for a quick brief on what reactivity is consider the following example:

<p sb-mark="message">...</p>
<script>
  data.message = 'Hello, World';
</script>

In the above example, when data.message is updated the inner text of the <p> element is also updated. This is due to Strawberry's reactivity, i.e. when the data updates, update the UI.

Reactive depends on two things, what data is set/updated, and how the UI is to be updated. The reactivity section of the documentation has been divided as such:

• What data is set/updated
  1. Reactive Values
  2. Computed
• How the UI is to be updated
  1. Mark (sb-if)
  2. Conditionals (sb-if, sb-ifnot)
  3. Directives

Setting and updating the data

For a piece of data to be considered reactive, it should be set on Strawberry's reactive object:

const data = sb.init();

The object data that is returned on initialization is a reactive object. This means that any value that is set on data will update the appropriate UI.

Data works with the following types of values:

1. Regular objects. documentation
2. Regular arrays for loops. documentation
3. Functions used for computed values. documentation

Updating the UI

There are a couple of ways Strawberry updates the UI on data change:

• sb-mark: used for setting content of an element. documentation
• sb-if: used for adding or removing an element if the value is truthy. documentation
• sb-ifnot: used for adding or removing an element if the value is falsy. documentation

All three of the above are called directives, you can add custom directives to Strawberry, check the documentation.