Cell - Widget 组件
@celljs/react 基于的前端基础设施。应用很少直接依赖它;安装 @celljs/react 会把它带进来。
- 前端目标。它的
package.json声明cell.targets: ["frontend"],这让工具链在安装 UI 包时构建前端。 - 小部件。
@Widget(area)或@Widget({ area, priority, component, id, rebind })为命名区域注册一个组件;WidgetManager.get(area)/render(area)按优先级返回它们(@celljs/react的<Slot area>渲染它们)。小部件也可以在widget.widgets配置中声明,以小部件 id 为键(area、priority、visible、props;props中的${...}在每次渲染时计算)。id 默认为装饰的类的名字(下面的LogoWidget)。WidgetFactory渲染type等于自身type的模型。 - 主题。
Theme组件和ThemeManager,由widget.themes配置。当前主题的 id 保存在localStorage里;加载时选择那个主题,否则default,否则第一个。 - 语言环境。
Locale组件和LocaleManager,由widget.locales配置。当前语言环境的语言保存在localStorage里;加载时选择那个语言,否则浏览器的,否则第一个。
两个管理器都有 current、setCurrent(value)(也保存)和 onCurrentChanged(listener),一个 @celljs/core 的 Event,返回一个 Disposable。@celljs/react 的 useLocale() 在组件中读取和改变语言环境。
ts
import { Widget } from '@celljs/widget';
@Widget({ area: 'header', priority: 100, component: Logo })
export class LogoWidget {}所有导出都仅限前端(@celljs/widget 解析为 lib/browser)。