diff --git a/packages/provider/README.md b/packages/provider/README.md index dfe7eb0e55c22ca988a6288fb5728eedc9505401..5b8f88341141a1c76ef6f057efb17f0158278521 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