registry for microfront-end elements - supportive package for customizing milung/ufe-controller containers
npm install ufe-registryUfeRegistry instance can be used to retrieve which
UfeRegistry may be used to replace the default application shell or to create custom web-components that will display other context specific elements.
sh
npm i --save ufe-registry
`
Example
* Creating custom list of navigable elements and placeholder for displaying the current app, using Stencil JS framework
`tsx
import { Component, Host, h, State, Prop } from '@stencil/core';
import { Router } from 'stencil-router-v2';
import { getUfeRegistryAsync, UfeRegistry} from "ufe-registry"
@Component({
tag: 'my-shell',
styleUrl: 'my-shell.css',
shadow: true,
})
export class MyShell {
@Prop() router: Router; // use subrouter if your app is hosted in another web-component
ufeRegistry: UfeRegistry;
async componentWillLoad() {
this.ufeRegistry = await getUfeRegistryAsync() // wait for UfeRegistry being available
}
render() {
const apps = this.ufeRegistry.navigableApps() // get list of applications registered in cluster
{apps.map( app => {
const active = false
( label={app.title}
{...this.ufeRegistry.href(app.path, this.router || this.ufeRegistry.router)}
active={app.isActive} >
)})}
// shows the webcomponent of the currently active app
}
`
* Rendering the context elements of the named context my-context:
`tsx
render() {
const functions = this.ufeRegistry.contextElements("my-context", this.selector)
return (
{functions.map(e => this.ufeRegistry.loadAndRenderElement(e, {"slot": "menu"}))}
// other content
)
}
``