Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Optimized docs #92

Merged
merged 18 commits into from
Sep 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/Interfaces.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ During the overwrite process, the following properties are overwritten:

Whether to apply the State value changes to the corresponding external [Storage/s](packages/core/api/storage/Introduction.md).
```ts {1}
const MY_STATE = App.creacteState('jeff').persist('storageKey');
const MY_STATE = createState('jeff').persist('storageKey');
// Storage at 'storageKey': 'jeff'
MY_STATE.set("hans", {storage: true});
// Storage at 'storageKey': 'hans'
Expand Down Expand Up @@ -188,7 +188,7 @@ or _updating the persisted State value in the corresponding external Storage_.

When set to `true`, the Job is forced through the `runtime` no matter what happens.
```ts {7}
const MY_STATE = App.createState('myValue');
const MY_STATE = createState('myValue');

// Won't be executed by the runtime because the State value hasn't changed
MY_STATE.set('myValue');
Expand Down Expand Up @@ -275,7 +275,7 @@ export interface PatchConfigInterface extends StateIngestConfigInterface {

If `true`, new properties are added to the State value, although they might not yet be present there.
```ts {2,4}
const MY_STATE = App.createState({id: 1, name: "frank"});
const MY_STATE = 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});
Expand Down Expand Up @@ -395,7 +395,7 @@ We recommend giving each Group a unique `key` since it has only advantages:

Defines whether the Group is a `placeholder`.
```ts
const MY_GROUP = App.createGroup([1, 2, 3], {
const MY_GROUP = createGroup([1, 2, 3], {
isPlaceholder: true
});

Expand Down Expand Up @@ -463,7 +463,7 @@ We recommend giving each Selector a unique `key` since it has only advantages:

Defines whether the Selector is a `placeholder`.
```ts
const MY_SELECTOR = App.creaateSelector(1, {
const MY_SELECTOR = MY_COLLECTION.createSelector(1, {
isPlaceholder: true
});

Expand Down Expand Up @@ -522,7 +522,7 @@ if we collect a data object with an already existing `primaryKey` in order to up

If `true`, the passed data object is merged into the found Item data instead of overwriting it entirely.
```ts {6,9}
const MY_COLLECTION = App.createCollection({
const MY_COLLECTION = createCollection({
initialData: [{id: 1, name: 'frank', age: 10}]
});

Expand Down
1 change: 1 addition & 0 deletions docs/examples/react/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ slug: /examples/react

## 👾 Performance
- [Large State](./react/large-state)
- [Large Collection](./react/large-collection)
- [Frequent Updates](./react/frequent-updates)

You can get an overview of all performance examples in [this](https://github.com/agile-ts/performance-compare) repository
Expand Down
12 changes: 12 additions & 0 deletions docs/examples/react/examples/LargeCollection.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
id: large-collection
title: Large Collection
sidebar_label: Large Collection
slug: /examples/react/large-collection
---

import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";

<CodeSandBoxEmbed uri={'agilets-large-collection-1kr4z'} />

[Back](../react)
2 changes: 1 addition & 1 deletion docs/examples/react/examples/LargeState.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ slug: /examples/react/large-state

import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";

<CodeSandBoxEmbed uri={'agilets-large-state-1kr4z'} />
<CodeSandBoxEmbed uri={'agilets-large-state-pyo63'} />

[Back](../react)
3 changes: 1 addition & 2 deletions docs/main/Installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,10 @@ Below you find quick start guides for already supported UI-Frameworks.

- [React / React-Native](../quick_start/React.md)
- [Vue](../quick_start/Vue.md)
- Angular (coming soon)

### 📁 Packages

Separate installation guides for single AgileTs packages.
Separate installation guides for particular AgileTs packages.

- [@agile-ts/core](../packages/core/Installation.md)
- [@agile-ts/react](../packages/react/Installation.md)
Expand Down
20 changes: 13 additions & 7 deletions docs/main/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,20 @@ slug: /introduction/
<br />
<br />

:::info

Want to get a quick overview of AgileTs?
Checkout the [AgileTs Introduction Blogpost](https://dev.to/bennodev19/createstate-introducing-agilets-a-flexible-state-manager-91f).

:::

## 👋 Introduction {#introduction}

AgileTs is a global State and Logic Library implemented in Typescript.
It offers a reimagined API that focuses on **developer experience**
and allows you to **easily** and **flexible** manage your application States.
Besides [States](../packages/core/api/state/Introduction.md),
AgileTs offers some other powerful APIs that make your life easier,
AgileTs offers some other powerful and tree shakable APIs that make your life easier,
such as [Collections](../packages/core/api/collection/Introduction.md)
and [Computed States](../packages/core/api/computed/Introduction.md).
The philosophy behind AgileTs is simple:
Expand All @@ -36,19 +43,19 @@ The philosophy behind AgileTs is simple:

Write minimalistic, boilerplate-free code that captures your intent.
```ts
// Create State with inital value 'frank'
// Create State with the inital value 'frank'
const MY_STATE = createState('frank');

// Update State value from 'frank' to 'jeff'
// Update the State value from 'frank' to 'jeff'
MY_STATE.set('jeff');

// Undo latest State value change
// Undo the latest State value change
MY_STATE.undo();

// Reset State value to its initial value
// Reset the State value to its initial value
MY_STATE.reset();

// Permanently store State value in an external Storage
// Permanently store the State value in an external Storage
MY_STATE.persist("storage-key");
```

Expand Down Expand Up @@ -111,7 +118,6 @@ It's only one click away. Just select your preferred UI-Framework below.
- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
- [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
- Angular (coming soon)

More examples can be found in the [Example section](../examples/Introduction.md).

Expand Down
57 changes: 12 additions & 45 deletions docs/main/StyleGuides.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ Feel free to choose one of them and adapt it to your needs.
## 🚀 Inspiration 1

The `Style Guide 1` is intended for **smaller and medium size applications**
with about `1-3` entities. In AgileTs, `entities` are things with distinct
and independent existence like users, posts, or todos.
with about `1-3` entities. (In AgileTs, `entities` are things with distinct
and independent existence like users, posts, or todos.)
We put everything related to these entities
into a single file of truth called `store.js` or `core.js`.
In the end, the `core` file contains all the business logic of your application,
Expand Down Expand Up @@ -72,25 +72,20 @@ how it can be constructed.

### 📝 store.ts

In the `store.ts` file, we instantiate the Agile Instance (`Agile`)
and define all [Agile Sub Instances](../main/Introduction.md#agile-sub-instance) (`MY_TODOS`).
In addition, all actions (`updateTodo()`, `toogleTodo()`, ..)
and if you are using Typescript interfaces (`TodoInterface`) are located here.
In the `store.ts` file, we instantiate all [Agile Sub Instances](../main/Introduction.md#agile-sub-instance) (`MY_TODOS`),
define all actions (`updateTodo()`, `toogleTodo()`, ..)
and if you are using Typescript interfaces (`TodoInterface`) are located here too.
```ts title="store.ts"
import { Agile, assignSharedAgileInstance } from "@agile-ts/core";
import reactIntegration from "@agile-ts/react";
import { createCollection } from "@agile-ts/core";

export interface TodoInterface {
export interface TodoItemInterface {
id: number;
text: string;
done: boolean;
}

// Create Agile Instance
const App = new Agile().integrate(reactIntegration);

// Create Collection (a dynamic set of States)
export const MY_TODOS = App.createCollection<TodoInterface>({
export const MY_TODOS = createCollection<TodoItemInterface>({
key: "todos"
}).persist(); // perist does store the Collection in the Local Storage

Expand Down Expand Up @@ -138,7 +133,7 @@ We can easily differentiate between global and local States in our UI-Components

The `Style Guide 2` is intended for **medium size and large applications**
with more than `3` entities.
In AgileTs, `entities` are things with distinct and independent existence like users, posts, or todos.
(In AgileTs, `entities` are things with distinct and independent existence like users, posts, or todos.)
At first glance, this way of organizing your application looks very boiler-late-ey.
Each entity has its own directory with a bunch of files.
However, there is a system behind it,
Expand Down Expand Up @@ -194,7 +189,6 @@ core
| └── user.controller.ts
| └── user.interfaces.ts
| └── user.routes.ts
|── app.ts
|── index.ts
.
```
Expand Down Expand Up @@ -309,15 +303,15 @@ and contains the [Agile Sub Instances](../main/Introduction.md#agile-sub-instanc
These Agile Sub Instances can and should then only be modified by the actions ([actions.ts](#1-actionsts))
or bound to UI-Components in the UI-Layer for reactivity.
```ts title="todo.controller.ts in 📁todo"
import {App} from '../../app';
import {createCollection, createComputed} from "@agile-ts/core";
import {TodoInterface} from './todo.interfaces';
import {CURRENT_USER} from '../user'

// Contains all existing TODO's
export const TODOS = App.createCollection<TodoInterface>()();
export const TODOS = createCollection<TodoInterface>()();

// Contains all TODO's that belong to the current logged in USER
export const USER_TODOS = App.createComputed(() => {
export const USER_TODOS = createComputed(() => {
return TodosCollection.getGroup(CURRENT_USER.value.id).output;
});
```
Expand Down Expand Up @@ -377,33 +371,6 @@ export const ADD_TODO = async (payload: AddTodoPayloadInterface): Promise<TodoIn
// ..
```

## 📝 app.ts

:::note

If you decided to use the
[shared Agile Instance](../packages/core/api/agile-instance/Introduction.md#-shared-agile-instance)
you can skip this part.

:::

In the `app.ts` file, we create our main `Agile Instance` and configure it to meet our needs.
For example, we determine here with which UI-Framework AgileTs should work together.

```ts title="app.ts"
import {Agile, Logger, assignSharedAgileInstance} from "@agile-ts/core";
import reactIntegration from "@agile-ts/react";

export const App = new Agile({
logConfig: {
level: Logger.level.WARN
}
}).integrate(reactIntegration);

// Assign created Agile Instance as shared Agile Instance
assignSharedAgileInstance(App);
```

## 📝 index.ts

Here we export our `core` entities, so that each entity
Expand Down
4 changes: 2 additions & 2 deletions docs/packages/core/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ which includes, for example, handy classes like:
that we need to remember globally at a later point in time.
While offering a toolkit to use and mutate this _set_ of Information.
```ts
const MY_COLLECTION = App.createCollection();
const MY_COLLECTION = createCollection();

// Add Data to Collection
MY_COLLECTION.collect({id: 1, name: "frank"});
Expand All @@ -57,7 +57,7 @@ which includes, for example, handy classes like:
A `Computed` is an extension of the `State Class` that computes
its value from a specified function.
```ts
const MY_COMPUTED = App.createComputed(() => {
const MY_COMPUTED = createComputed(() => {
return MY_STATE_1.value + MY_STATE_2.value;
});
```
Expand Down
Loading