Interfaces

❗️info

Here are all possible interfaces are listed, which were mentioned in the documentation.

CreateLoggerConfig#

This is the CreateLoggerConfig Interface, and it is used in the creation and configuration of the Agile Logger. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface CreateLoggerConfigInterface {
prefix?: string;
allowedTags?: string[];
canUseCustomStyles?: boolean;
active?: boolean;
level?: number;
timestamp?: boolean;
}

prefix#

Prefix which is added before each log message. In case of AgileTs it is of course "Agile".

const logger = new Logger({
prefix: "MyLog"
});
logger.debug("Jeff"); // Logs 'MyLog Debug: Jeff'
TypeDefaultRequired
string"Agile"No

level#

At which level the logger should log. Levels are used to filter the logs, because often you don't need debug logs for example.

const logger = new Logger({
level: Logger.level.WARN
});
logger.log("Jeff"); // Doesn't get logged
logger.warn("A important Warning"); // Gets logged

Here are all Logger level.

{
TRACE: 1,
DEBUG: 2,
LOG: 5,
TABLE: 5,
INFO: 10,
SUCCESS: 15,
WARN: 20,
ERROR: 50,
}
Logger.level.LOG; // 5

If for instance level INFO is active, each log with a higher or same level will be logged, in this case SUCCESS, WARN, ERROR and of course INFO.

TypeDefaultRequired
number20No

active#

Whether the logger is active and logs stuff in the console.

const logger = new Logger({
active: false
});
logger.log("Jeff"); // Doesn't get logged
logger.isActive = true;
logger.log("Jeff"); // Gets logged
TypeDefaultRequired
booleantrueNo

timestamp#

If a timestamp is set before each log. Is sometimes useful to trace, when something was logged.

const logger = new Logger({
timestamp: true
});
logger.debug("Jeff"); // Logs '[1613108673781] Debug: Jeff'
TypeDefaultRequired
booleanfalseNo

allowedTags#

Sometimes logging can be very confusing, so there are tags which filter logs specifically. Every log that has the active tags will be logged. Logs that have no condition are always logged.

const logger = new Logger({
allowedTags: ["jeff"]
});
logger.debug("Jeff"); // Gets logged
logger.if.tag(["jeff"]); // Gets logged
logger.if.tag(["hans", "jeff"]); // Doesn't get logged
logger.if.tag(["hans"]); // Doesn't get logged
TypeDefaultRequired
string[]['runtime', 'storage', 'subscription', 'multieditor']No

canUseCustomStyles#

If the Logger is allowed to apply css styles to the Logs. For instance Agile Logs are by default purple.

Log Custom Styles Example

TypeDefaultRequired
booleantrueNo



StorageMethods#

This is the StorageMethods Interface, and it is used in the creation of a Storage. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface StorageMethodsInterface {
get: (key: string) => any;
set: (key: string, value: any) => void;
remove: (key: string) => void;
}

get#

The get method of the storage. That means it gets items from the external storage.

myStorage.get("item1"); // Calls the here defined get method
TypeDefaultRequired
(key: string) => anyundefinedYes

set#

The set method of the storage. This means that it writes items into the external storage.

myStorage.set("item1", {my: "value"}); // Calls the here defined set method
TypeDefaultRequired
(key: string, value: any) => voidundefinedYes

remove#

The remove method from the storage. This means that it removes items from the external storage.

myStorage.remove("item1"); // Calls the here defined remove method
TypeDefaultRequired
(key: string) => voidundefinedYes



StateIngestConfig#

This is the StateIngestConfig Interface, and it is used as config object in function like set, undo, .. of a State. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface StateIngestConfigInterface
extends StateRuntimeJobConfigInterface,
IngestConfigInterface {
key?: RuntimeJobKey;
}

However, I guess that doesn't help us much, so here is an 'extended' version.

export interface StateIngestConfigInterface {
key?: RuntimeJobKey;
force?: boolean;
background?: boolean;
overwrite?: boolean;
storage?: boolean;
sideEffects?: boolean;
perform?: boolean;
}

key#

Defines key/name of Job that gets created and ingested into the runtime. Might be useful to define, if we want to debug something in the runtime, but I guess for the most of us this property isn't important.

TypeDefaultRequired
string \| numberundefinedNo

force#

If our job with the new value gets forced trough the runtime, not matter what happens. We have to set this property for instance if we try to apply the same value to the state again, but still want to rerender components which has bound the State to itself

const MY_STATE = App.createState("myNewValue")
// Doesn't get ingested into the Runtime, because the State Value hasn't changed
MY_STATE.set("myNewValue");
// Gets ingested into the Runtime
MY_STATE.set("myNewValue", { force: true });
TypeDefaultRequired
booleanfalseNo

background#

Sometimes we want to apply new values to our State in background, so that no component rerender that has bound the State to itself. Then this property might get handy.

// Causes rerender on Components
MY_STATE.set("myNewValue2");
// Doesn't cause rerender on Comonents
MY_STATE.set("myNewValue3", {background: true});
TypeDefaultRequired
booleanfalseNo

overwrite#

With overwrite we define, if we want to overwrite our whole State with the newly assigned value.

MY_STATE.set("finalValue", {overwrite: true});
MY_STATE.value; // Returns 'finalValue'
MY_STATE.previousStateValue; // Returns 'finalValue'
MY_STATE.initialStateValue; // Returns 'finalValue'
TypeDefaultRequired
booleanfalseNo

storage#

If State changes get applied to an external Storage. Of course only if the State got with help of the persist function persisted.

TypeDefaultRequired
booleantrueNo

sideEffects#

If sideEffects of the Job get executed

TypeDefaultRequired
booleantrueNo

perform#

If the newly created job will be performed immediately. Otherwise, it will be added to a que and performed whenever it is his turn.

TypeDefaultRequired
booleantrueNo



PatchConfig#

This is the PatchConfig Interface, and it is used as config object in the patch function of a State. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface PatchConfigInterface extends StateIngestConfigInterface {
addNewProperties?: boolean;
}

addNewProperties#

If new properties that hasn't exist before, get added to the State Value.

const MY_STATE = App.createState({id: 1, name: "frank"});
MY_STATE.patch({location: "Germany"}, {addNewProperties: false});
MY_STATE.value; // Returns {id: 1, name: "frank"}
MY_STATE.patch({location: "Germany"}, {addNewProperties: true});
MY_STATE.value; // Returns {id: 1, name: "frank", location: "Germany"}
TypeDefaultRequired
booleantrueNo



StatePersistentConfig#

This is the StatePersistentConfig Interface, and it is used as config object in the persist function of a State. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface StatePersistentConfigInterface {
instantiate?: boolean;
storageKeys?: StorageKey[];
}

instantiate#

If the persistent gets instantiated immediately. If we don't let AgileTs instantiate our persistent, we have to do it on our own.

myState.persist({
instantiate: false,
});
if (myState.persistent?.ready) {
await myState.persistent?.initialLoading();
myState.isPersisted = true;
}

This might be only useful if we want to await the persisting into the Storage. If we just want to await until the persisted value got loaded from the Storage, we recommend using the onLoad function.

TypeDefaultRequired
booleantrueNo

storageKeys#

Key/Name of external Storages in which the persisted State Value will be stored. If not passing any specific Storage Key, the default Storage will be used.

MY_STATE.persist(); // Stores value in default Storage
MY_STATE.persist({storageKeys: ['myCustomStorrage']}); // Stores value in 'myCustomStorrage'
TypeDefaultRequired
Array<string \| number>'defaultStorage'No



GroupConfig#

This is the GroupConfig Interface, and it is used as config object in the creation of Groups. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface GroupConfigInterface {
key?: GroupKey;
isPlaceholder?: boolean;
}

key#

Key/Name of Group.

TypeDefaultRequired
string \| nameundefinedNo

isPlaceholder#

If Group is initially a Placeholder.

TypeDefaultRequired
booleanfalseNo



SelectorConfig#

This is the SelectorConfig Interface, and it is used as config object in the creation of Selectors. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface SelectorConfigInterface {
key?: SelectorKey;
isPlaceholder?: boolean;
}

key#

Key/Name of Selector.

TypeDefaultRequired
string \| nameundefinedNo

isPlaceholder#

If Selector is initially a Placeholder.

TypeDefaultRequired
booleanfalseNo



CollectConfig#

This is the CollectConfig Interface, and it is used as config object in the collect method. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface CollectConfigInterface<DataType = any> {
patch?: boolean;
method?: 'push' | 'unshift';
forEachItem?: (data: DataType, key: ItemKey, index: number) => void;
background?: boolean;
select?: boolean;
}

patch#

Under the hood it calls the patch method instead of the set method. Of course, it is only useful if we patch something into something existing, what shouldn't be the case in the collect method.

TypeDefaultRequired
booleanfalseNo

method#

In which way the collected data primary Key gets added to the Groups. By using push it will be added at the end of the primaryKey array

MY_COLLECTION.collect({id: 1, name: "jeff"}, {method: 'push'});
MY_COLLECTION.getGroup(MY_COLLECTION.config.defaultGroupKey).value; // Returns [5, 6, 0, 1]

and by unshift it can be found at the beginning of the primaryKey array.

MY_COLLECTION.collect({id: 8, name: "jeff"}, {method: 'unshift'});
MY_COLLECTION.getGroup(MY_COLLECTION.config.defaultGroupKey).value; // Returns [8, 5, 6, 0, 1]
TypeDefaultRequired
push' \| 'unshift''push'No

forEachItem#

Gets called for each collected Data.

MY_COLLECTION.collect([
{id: 1, name: "jeff"},
{id: 8, name: "frank"}],
{forEachItem: (data, key, index) => {
// Gets Called with data: {id: 1, name: "jeff"}, key: 1, index: 0
// and
// Gets Called with data: {id: 2, name: "frank"}, key: 8, index: 1
}
})
TypeDefaultRequired
(data: DataType, key: ItemKey, index: number) => voidundefinedNo

background#

Sometimes we want to add new data to our Collection in background, so that no component rerender that has bound the Collection to itself. Then this property might get handy.

// Causes rerender on Components
MY_COLLECTION.collect({id: 1, name: "jeff"});
// Doesn't cause rerender on Comonents
MY_COLLECTION.collect({id: 1, name: "jeff"}, {background: true});
TypeDefaultRequired
booleanfalseNo

select#

If foreach collected Data a Selector gets created, which is a separate State that represents the Data Value.

MY_COLLECTION.collect({id: 1, name: "jeff"}, {select: true});
MY_COLLECTION.getSelector(1); // Returns Selector that got just created
TypeDefaultRequired
booleanfalseNo



UpdateConfig#

This is the UpdateConfig Interface, and it is used as config object in the update method. Here is a Typescript Interface of the Object for quick reference, however each property will be explained in more detail below.

export interface UpdateConfigInterface {
addNewProperties?: boolean;
background?: boolean;
}

addNewProperties#

If new properties that hasn't exist before, get added to the Item Value.

MY_COLLECTION.collect({id: 1, name: "jeff"});
MY_COLLECTION.update(1, {name: "hans", age: 12}, {addNewProperties: false}); // Item at '1' has value '{name: "hans"}'
MY_COLLECTION.update(1, {name: "frank", age: 10}); // Item at '1' has value '{name: "frank", age: 10}'
TypeDefaultRequired
booleantrueNo

background#

Sometimes we want to update an Item in our Collection in background, so that no component rerender that has bound the Collection to itself. Then this property might get handy.

// Causes rerender on Components
MY_COLLECTION.update(1, {name: "jeff"});
// Doesn't cause rerender on Comonents
MY_COLLECTION.update(1, {name: "frank"}, {background: true});
TypeDefaultRequired
booleanfalseNo
Last updated on