Cell - Widget Component

Frontend infrastructure that @celljs/react builds on. Applications rarely depend on it directly; installing @celljs/react brings it in.

• Frontend target. Its package.json declares cell.targets: ["frontend"], which is what makes the toolchain build a frontend when a UI package is installed.
• Widgets. @Widget(area) or @Widget({ area, priority, component, id, rebind }) registers a component for a named area; WidgetManager.get(area) / render(area) return them ordered by priority (<Slot area> of @celljs/react renders them). Widgets can also be declared in configuration under widget.widgets, keyed by widget id (area, priority, visible, props; ${...} in props is evaluated at each render). The id defaults to the name of the decorated class (LogoWidget below). A WidgetFactory renders the models whose type equals its own type.
• Themes. Theme components and the ThemeManager, configured by widget.themes. The id of the current theme is kept in localStorage; on load it selects that theme, else default, else the first one.
• Locales. Locale components and the LocaleManager, configured by widget.locales. The language of the current locale is kept in localStorage; on load it selects that one, else the browser's, else the first one.

Both managers have current, setCurrent(value) (which also saves it) and onCurrentChanged(listener), an Event of @celljs/core that returns a Disposable. useLocale() of @celljs/react reads and changes the locale in a component.

import { Widget } from '@celljs/widget';

@Widget({ area: 'header', priority: 100, component: Logo })
export class LogoWidget {}

All exports are frontend-only (@celljs/widget resolves to lib/browser).