From fc382f0b58e615fac71eda30b70b8b70338ff61e Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 11 Mar 2021 08:29:48 +0100
Subject: [PATCH] Add another provider example
---
packages/provider/README.md | 52 +++++++++++++++++++++++++++++++++++--
1 file changed, 50 insertions(+), 2 deletions(-)
diff --git a/packages/provider/README.md b/packages/provider/README.md
index dfe7eb0e..5b8f8834 100644
--- a/packages/provider/README.md
+++ b/packages/provider/README.md
@@ -47,16 +47,17 @@ or entry point urls on the same page) or to deliver attribute changes across dif
### Flow
-#### Example 1
+#### Example 1 - Simple communication
```html
<dbp-provider lang>
<dbp-language-select></dbp-language-select>
+ <!-- 'subscribe="lang"' is short for 'subscribe="lang:lang"' -->
<dbp-person-select subscribe="lang"></dbp-person-select>
</dbp-provider>
```
-There is a provider, a language selector and a person selector.
+There is a provider around a language selector and a person selector.
The flow looks like this:
```mermaid
@@ -72,6 +73,53 @@ sequenceDiagram
P->>PS: "lang" was updated to "en"
```
+1) The language selector propagates a change of `lang` (because the user clicked on it)
+2) The provider receives that event, because it has the attribute `lang` set
+3) The provider executes a callback with the updated value for `lang` in all components that subscribed `lang`
+
+#### Example 2 - Two providers
+
+```html
+<!-- Provider1 -->
+<dbp-provider auth>
+ <!-- Provider2 -->
+ <dbp-provider lang>
+ <dbp-auth-keycloak></dbp-auth-keycloak>
+ <dbp-language-select></dbp-language-select>
+ <dbp-person-select subscribe="auth,lang"></dbp-person-select>
+ </dbp-provider>
+</dbp-provider>
+```
+
+There is two cascaded providers around an auth component, a language selector and a person selector.
+The flow looks like this:
+
+```mermaid
+sequenceDiagram
+ participant P1 as Provider1
+ participant P2 as Provider2
+ participant AK as AuthKeycloak
+ participant LS as LanguageSelect
+ participant PS as PersonSelect
+ Note over P1,PS: Initialization
+ P1-->P1: Has attribute "auth"
+ P2-->P2: Has attribute "lang"
+ PS->>P1: Subscribe to "auth"
+ PS->>P2: Subscribe to "lang"
+ Note over P1,PS: Communication
+ LS->>P2: "lang" should be "en"
+ P2->>PS: "lang" was updated to "en"
+ AK->>P1: "auth" should be "{...json...}"
+ P1->>PS: "auth" was updated to "{...json...}"
+```
+
+1) The language selector propagates a change of `lang` (because the user clicked on it)
+2) The provider 2 receives that event, because it has the attribute `lang` set
+3) The provider 2 executes a callback with the updated value for `lang` in all components that subscribed `lang`
+4) The auth component propagates a change of `auth` (because a new token was issued by Keycloak)
+5) The provider 1 receives that event, because it has the attribute `auth` set
+6) The provider 1 executes a callback with the updated value for `auth` in all components that subscribed `auth`
+
### Attributes
- `init` (optional): set your vars to values
--
GitLab