Introduction

Brain of AgileTs


GitHub Licensenpm versionnpm minified sizenpm total downloads

โ“ core#

The core package is the brain of AgileTs. Nearly everything related to AgileTs depends on this package. It includes the main Instance of AgileTs, the Agile Class often called App.

const App = new Agile();

In summary, the main tasks of the Agile Class are to

  • manage Agile Sub Instances, like States, ..
  • ingest changes into the Runtime
  • trigger rerender in Integrations like React
  • store values in any Storage

As you can guess, each application using AgileTs has to install the core package and instantiate such an Agile Class. To get some inspiration where to instantiate suchAgile Class, check out the Style Guide. Besides the Agile Class the core holds some other useful classes listed below. But each of these classes depends in some kind on the Agile Class.

โšก๏ธ State#

A State holds an Information that we need to remember at a later point in time.

const MY_STATE = App.createState("Hello there");
MY_STATE.set("hi"); // Mutate State Value
MY_STATE.undo(); // Undo latest change

๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Collection#

A Collection holds a set of Information that we need to remember at a later point in time. It is designed for arrays of data objects following the same pattern.

const MY_COLLECTION = App.createCollection();
MY_COLLECTION.collect({id: 1, name: "frank"}); // Add Data to Collection
MY_COLLECTION.remove(1).everywhere(); // Remove Data at primary Key '1' from Collection

๐Ÿค– Computed#

A Computed is an extension of the State Class, it does automatically compute its value depending on other Agile Instances like States, Collections, ..

const MY_COMPUTED = App.createComputed(() => (MY_STATE_1.value + MY_STATE_2.value));

๐ŸšŒ Event#

Events are handy for emitting UI updates and passing data with them.

const MY_EVENT = App.createEvent();
MY_EVENT.on((data) => {console.log("hello there " + data.name)}); // Print 'hello there jeff' if Event gets triggered
MY_EVENT.trigger({name: "jeff"}); // Trigger Event

๐Ÿš€ Quick Links#

Last updated on