-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(platform/client): enable microfrontend to display a splash until…
… loaded
Loading and bootstrapping a microfrontend can take some time, at worst, only displaying content once initialized.
To indicate the loading of a microfrontend, the navigator can instruct the router outlet to display a splash until the microfrontend signals readiness.
```
Beans.get(OutletRouter).navigate('path/to/microfrontend', {showSplash: true});
```
The splash is the markup between the opening and closing tags of the router outlet element.
```
<sci-router-outlet>
Loading...
</sci-router-outlet>
```
The splash is displayed until the embedded microfrontend signals readiness.
```
MicrofrontendPlatformClient.signalReady();
```
To lay out the content of the splash use the pseudo-element selector `::part(splash)`.
Example of centering splash content in a CSS grid container:
```
sci-router-outlet::part(splash) {
display: grid;
place-content: center;
}
```- Loading branch information
1 parent
8a8e4ac
commit f44087f
Showing
24 changed files
with
798 additions
and
79 deletions.
There are no files selected for viewing
85 changes: 85 additions & 0 deletions
85
apps/microfrontend-platform-testing-app/src/app/common/typed-value-parser.util.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* | ||
| * Copyright (c) 2018-2023 Swiss Federal Railways | ||
| * | ||
| * This program and the accompanying materials are made | ||
| * available under the terms of the Eclipse Public License 2.0 | ||
| * which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| */ | ||
|
|
||
| import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion'; | ||
|
|
||
| /** | ||
| * Parses the typed string values of given object to its actual type. | ||
| * | ||
| * Supported typed values: | ||
| * - '<undefined>' => undefined | ||
| * - '<null>' => null | ||
| * - '<number>123</number>' => 123 | ||
| * - '<boolean>true</boolean>' => true | ||
| * - '<string>value</string>' => 'value' | ||
| * - '<json>{"key": "value"}</json>' => {"key": "value"} | ||
| * - 'value' => 'value' | ||
| */ | ||
| export function parseTypedValues(object: Record<string, unknown> | null | undefined): Record<string, unknown> | null | undefined; | ||
| export function parseTypedValues(object: Map<string, unknown> | null | undefined): Map<string, unknown> | null | undefined; | ||
| export function parseTypedValues(object: Record<string, unknown> | Map<string, unknown> | null | undefined): Record<string, unknown> | Map<string, unknown> | null | undefined { | ||
| if (object === null || object === undefined) { | ||
| return object; | ||
| } | ||
| else if (object instanceof Map) { | ||
| return Array | ||
| .from(object.entries()) | ||
| .reduce((acc, [key, value]) => acc.set(key, parseTypedValue(value)), new Map<string, unknown>()); | ||
| } | ||
| else { | ||
| return Object.entries(object).reduce((acc, [key, value]) => { | ||
| acc[key] = parseTypedValue(value); | ||
| return acc; | ||
| }, {} as Record<string, unknown>); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Parses the typed string value to its actual type. | ||
| * | ||
| * Supported typed values: | ||
| * - '<undefined>' => undefined | ||
| * - '<null>' => null | ||
| * - '<number>123</number>' => 123 | ||
| * - '<boolean>true</boolean>' => true | ||
| * - '<string>value</string>' => 'value' | ||
| * - '<json>{"key": "value"}</json>' => {"key": "value"} | ||
| * - 'value' => 'value' | ||
| */ | ||
| export function parseTypedValue(value: unknown): unknown { | ||
| if (typeof value !== 'string') { | ||
| return value; | ||
| } | ||
| if (value === '<null>') { | ||
| return null; | ||
| } | ||
| if (value === '<undefined>') { | ||
| return undefined; | ||
| } | ||
|
|
||
| const paramMatch = value.match(/<(?<type>.+)>(?<value>.+)<\/\k<type>>/); | ||
| switch (paramMatch?.groups!['type']) { | ||
| case 'number': { | ||
| return coerceNumberProperty(paramMatch.groups['value']); | ||
| } | ||
| case 'boolean': { | ||
| return coerceBooleanProperty(paramMatch.groups['value']); | ||
| } | ||
| case 'string': { | ||
| return paramMatch.groups['value']; | ||
| } | ||
| case 'json': { | ||
| return JSON.parse(paramMatch.groups['value']); | ||
| } | ||
| default: { | ||
| return value; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
...testing-app/src/app/test-pages/signal-ready-test-page/signal-ready-test-page.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* | ||
| * Copyright (c) 2018-2023 Swiss Federal Railways | ||
| * | ||
| * This program and the accompanying materials are made | ||
| * available under the terms of the Eclipse Public License 2.0 | ||
| * which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| */ | ||
| import {Component} from '@angular/core'; | ||
| import {Beans} from '@scion/toolkit/bean-manager'; | ||
| import {ContextService, MessageClient, MicrofrontendPlatformClient, OUTLET_CONTEXT, OutletContext} from '@scion/microfrontend-platform'; | ||
| import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; | ||
| import {from, switchMap} from 'rxjs'; | ||
|
|
||
| /** | ||
| * Signals readiness when a message is published to the topic `signal-ready/outletName`. | ||
| */ | ||
| @Component({ | ||
| selector: 'app-signal-ready-test-page', | ||
| template: '', | ||
| standalone: true, | ||
| }) | ||
| export default class SignalReadyTestPageComponent { | ||
|
|
||
| constructor() { | ||
| from(Beans.get(ContextService).lookup<OutletContext>(OUTLET_CONTEXT)) | ||
| .pipe( | ||
| switchMap(outletContext => Beans.get(MessageClient).observe$(`signal-ready/${outletContext!.name}`)), | ||
| takeUntilDestroyed(), | ||
| ) | ||
| .subscribe(() => MicrofrontendPlatformClient.signalReady()); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.