doc: updating the README file, especially adding info about computed

README.md

@@ -1,27 +1,88 @@
+# tansu
+
 [![npm](https://img.shields.io/npm/v/@amadeus-it-group/tansu)](https://www.npmjs.com/package/@amadeus-it-group/tansu)
 ![build](https://github.com/AmadeusITGroup/tansu/workflows/ci/badge.svg)
 [![codecov](https://codecov.io/gh/AmadeusITGroup/tansu/branch/master/graph/badge.svg)](https://codecov.io/gh/AmadeusITGroup/tansu)
 
-# tansu
-
 tansu is a lightweight, push-based state management library.
 It borrows the ideas and APIs originally designed and implemented by [Svelte stores](https://github.com/sveltejs/rfcs/blob/master/text/0002-reactive-stores.md).
 
 Main characteristics:
+
 * small conceptual surface with expressive and very flexible API (functional and class-based);
 * can be used to create "local" (module-level or component-level), collaborating stores;
 * can handle both immutable and mutable data;
 * results in compact code with the absolute minimum of boilerplate.
 
-Implementation wise, it is a tiny (500 LOC) library without any external dependencies.
+Implementation wise, it is a tiny (1300 LOC) library without any external dependencies.
 
 ## Comparison with the Svelte stores
 
 Tansu is designed to be and to remain fully compatible with Svelte. Nevertheless, it brings several improvements:
 
-### tansu works well with the Angular ecosystem:
-* works with the standard `async` pipe out of the box;
-* stores can be registered in the DI container at any level (module or component injector).
+### tansu works well with the Angular ecosystem
+
+* works with the standard `async` pipe out of the box
+* stores can be registered in the dependency injection (DI) container at any level (module or component injector)
+* stores can be used easily with rxjs because they implement the `InteropObservable` interface
+* conversely, rxjs observables (or any object implementing the `InteropObservable` interface) can easily be used with tansu (e.g. in tansu `computed` or `derived`).
+
+### a computed function is available
+
+With Svelte `derived` function, it is mandatory to provide explicitly a static list of dependencies when the store is created, for example:
+
+```typescript
+import {writable, derived} from 'svelte/store';
+
+const quantity = writable(2);
+const unitPrice = writable(10);
+const totalPrice = derived([quantity, unitPrice], ([quantity, unitPrice]) => {
+  console.log("computing the total price");
+  return quantity > 0 ? quantity * unitPrice : 0
+});
+totalPrice.subscribe((totalPrice) => console.log(totalPrice)); // logs any change to totalPrice
+quantity.set(0);
+unitPrice.set(20);
+```
+
+The output of this example will be:
+
+```text
+computing the total price
+20
+computing the total price
+0
+computing the total price
+```
+
+Note that even when the quantity is 0, the total is recomputed when the unit price changes.
+
+In Tansu, while the same [derived](https://amadeusitgroup.github.io/tansu/tansu.derived.html) function is still available, the [computed function](https://amadeusitgroup.github.io/tansu/tansu.computed.html) is also available, with which it is only necessary to provide a function, and the list of dependencies is computed automatically and dynamically:
+
+```typescript
+import {writable, computed} from '@amadeus-it-group/tansu';
+
+const quantity = writable(2);
+const unitPrice = writable(10);
+const totalPrice = computed(() => {
+  console.log("computing the total price");
+  return quantity() > 0 ? quantity() * unitPrice() : 0
+});
+totalPrice.subscribe((totalPrice) => console.log(totalPrice)); // logs any change to totalPrice
+quantity.set(0);
+unitPrice.set(20);
+```
+
+The output of this example will be:
+
+```text
+computing the total price
+20
+computing the total price
+0
+```
+
+Note that when the quantity is 0, changes to the unit price no longer trigger an update of the total price.
 
 ### a batch function is available
 
@@ -41,7 +102,7 @@ console.log('Process end');
 
 The output of this example will be:
 
-```
+```text
 Arsène Lupin
 Sherlock Lupin
 Sherlock Holmes
@@ -67,9 +128,10 @@ batch(() => {
 });
 console.log('Process end');
 ```
+
 With the following output:
 
-```
+```text
 Arsène Lupin
 Sherlock Holmes
 Process end
@@ -78,6 +140,7 @@ Process end
 ## Installation
 
 You can add tansu to your project by installing the `@amadeus-it-group/tansu` package using your favorite package manager, ex.:
+
 * `yarn add @amadeus-it-group/tansu`
 * `npm install @amadeus-it-group/tansu`
 
@@ -138,4 +201,3 @@ Please check the [DEVELOPER.md](DEVELOPER.md) for documentation on building and
 
 * [Svelte](https://github.com/sveltejs/rfcs/blob/master/text/0002-reactive-stores.md) gets all the credit for the initial idea and the API design.
 * [NgRx component stores](https://hackmd.io/zLKrFIadTMS2T6zCYGyHew?view) solve a similar problem with a different approach.
-