回声中心
Echo的应用程序需要和核心通讯.
这个可出版的图书馆是用 无。 。 。 .
扶养规则
真相来源: /eslint.config.js - 那个 @nx/enforce-module-boundaries 规则定义所有允许的依赖.
回声分数只能从 :
echo-base✅
回声核心 CANNO 导入自 :
echo-framework❌echo-search❌echo-components❌echopedia-web(应用)
见 libs/README.md 用于完整依赖性流程图.
如何开发并发布 EchoCore
检查 读取我 在 NX 库文件夹中.
可用的国家预防机制脚本
lint-corebuild-coretest-core
回声模块
包含设置的注册应用程序组件
Echo是围绕模块来构建的,一个模块可以由几个应用程序组成,建议模块尽量小,防止应用程序/客户端(Echo)启动时长时间的加载. 所有模块都使用模块切入点输出的设置函数进行注册. 此函数在 Echo 启动时称为 。 该函数与 EchoModuleApi。 。 。 .
注册 App
Api 允许使用 registerApp 如下所示。 应用注册用于模块中主要应用程序的注册,基于从模块显示的元数据,可选参数可以帮助配置应用程序.
用密钥注册
如果一个模块包含几个应用软件,第二个应用软件可以注册到 registerAppWithKey 函数.
允许您手动注册一个应用程序, 所以请记住这里需要一些配置 .
小组讨论会
registerPanels 用于用提供的钥匙登记小组。 此密钥必须对应已注册的路径 。 路径用于自动触发装入面板。 如果不是需要由 setActiveModulePanels 行动 在使用时也可以添加应用程序面板 registerApp,这可以通过 App 选项实现.
扩展
扩展旨在扩展或扩充EchopediaWeb核心应用程序或EchoFramework中不同而现有的组件——这使系统具有灵活性. 如何处理给定的扩展总是以可扩展组件为限. EchoCore只是为此提供架构.
示例
EchopediaWeb的 Tag 搜索结果中有一份应用程序链接列表(包括内部链接和外部链接) a TagItem'header - 有了这个, 我们可以打开一个不同的应用程序的标签 .
此组件被构建为可扩展:它将连接 EchoCore 状态,并根据 EchoCore 中此组件已注册的扩展名提供额外的链接.
以下是一个EchoMudule如何注册它自己的链接 在这个特定的组件中,在一个专用的帮助下 registerContextualAppLink() 函数 :
// Register a simple, icon button component.
// It will handle simple linking to your app with the given tag.
export function setup(api: EchoModuleApi): void {
api.registerPage('/myEchoModule', MyEchoModule);
api.registerContextualAppLink({
label: 'Open in Awesome Echo App',
iconName: 'rotate_3d' // accepts EDS icon names
});
}
// For more complex scenarios: Register a custom button component, which uses it's own logic to navigate to your app.
import { MyCustomLinkButton } from './MyCustomLinkButton';
export function setup(api: EchoModuleApi): void {
api.registerPage('/myEchoModule', MyEchoModule);
api.registerContextualAppLink({
component: MyCustomLinkButton
});
}
以上延伸部分用于: ContextualAppLinks 组件,可在 回声框架检查出来 了解更多它!
通过使用 registerApp 结束 AppOptions 或使用 setup 函数, EchoModuleApi数字 :
export function setup(api: EchoModuleApi): void {
api.registerPage('/myEchoModule', MyEchoModule);
api.registerExtension({
key: 'unique-key',
extends: 'PredifenedComponentName',
component: MyCustomExtensionComponent,
options: { // custom options used by the extendable component
listOfUsers: [ 'Mary Sue', 'John Doe' ]
isApproved: false,
...
}
})
}
每个可扩展组件都以独特的方式使用它: 如果您想要使用 registerExtension() 函数,确保您熟悉所需的 options 用于特定可扩展组件.
一个组件可以拥有任意数量的扩展.
这个 useExtensions() 钩子可以帮助您获取特定组件的所有注册扩展名 .
扩展存储于 GlobalState.registry.extensions· ;
注册页/ 路由
在车盖下 registerRoute 这是什么 registerApp, (中文(简体) ), registerAppWithKey,以及 registerPage,用于. app只是一条附加组件的路由. registerPag 可用于注册不需要直接连接的页面.
import { EchoModuleApi, PanelType } from "@equinor/echo-core"
import { Icon, themeConst } from '@equinor/echo-components';
import TestModule from "./testModule";
import Panel from "./panel";
export function setup(api: EchoModuleApi): void {
const icon = (): JSX.Element => <Icon color={themeConst.equiGreen1} name='tag' />;
api.registerApp(TestModule, {
homeScreen: true,
panels: { component: Panel, key: 'test', icon, label: 'test', panelType: PanelType.left }
});
}
声明
上面的代码样本显示, TestModule 模块注册为应用程序。 该应用程序将注册一条路由,并使用模块 appManifest 链接此程序. 这里就是这种明显的例子.
{
name: 'Test',
requireRef: '',
key: 'test',
shortName: 'test',
path: '/test',
fileUri: 'echo-test-module.js',
version: '0.0.1',
}
全球状态
全球状态用于应用相关数据. Large data sets will slow down the performance of the application / client so keeping this to the minimum is key. 让我们看看当前的全球状况.
interface GlobalState {
app: EchoAppState;
modules: Array<AppModule>;
coreComponents: EchoCoreComponents;
registry: RegistryState;
ui: Dict<UI>;
userProfile?: User;
userPhotoUrl?: string;
legendOptions: LegendOptions;
settings: Settings;
plantsData: PlantsData;
procosysProjectsData: ProcosysProjectsData;
moduleState: EchoCustomState<unknown>;
moduleContext: ModuleContext<unknown>;
}
有三节特别有趣 登记处, moduleState 财务报告和审定财务报表 moduleContext首先让我们看看模块状态和上下文.
模块状态/上下文
Echo核心提供了两种使用模块状态的方法. 第一种只使用模块状态的方法. 状态可以初始化并用 useAppModuleState。 。 。 .
interface State {
data: string
name: string;
lastName: string
}
const state = {
data: "This is a module state",
name: "Tom",
lastName: "Jones"
}
// This will register the module state
useAppModuleState(state);
// To retrieve the module state with types one can write.
const { name, lastName } = useAppModuleState<State>();
有几种方法可以更新模块状态.
const newState = {
data: "using the updateModuleState will replace the current state";
name: "Tom",
lastName: "Jones",
}
updateModuleState(newState);
// This will update just the name property of the module State.
updateSpecificModuleState("name", "John");
模块背景和状态
状态可以与上下文结合使用,上下文将整个应用程序包裹在一起 EchoContent.tsx 文件输入 EchoFramework编辑 ModuleContextProvider 提供 EchoCore 表格,将始终提供当前 moduleState。这将允许您使用正则反应上下文.
Use to communicate with panels and header!
import { ModuleContextProvider } from '@equinor/echo-core';
import React from 'react';
import { LayoutProps } from '../components';
import CorePanelLeft from '../components/panel/corePanelLeft';
import CorePanelRight from '../components/panel/corePanelRight';
interface CorePanelsProps {
children: React.ReactNode;
Legend?: React.FC;
}
export const EchoContent: React.FC<CorePanelsProps> = ({ children, Legend }: CorePanelsProps): JSX.Element => {
return (
<ModuleContextProvider>
<CorePanelLeft />
<CorePanelRight />
{children}
{Legend && <Legend />}
</ModuleContextProvider>
);
};
可以通过使用 registerModuleContext echoCore 提供的函数.
注册国
这是用于注册应用组件的 Echo 全球应用子状态容器 。 这个状态是整个应用中最重要的状态,包含所有路线,面板和appLinks.
由于EchoCore的责任主要是为开发者提供登记和取回构成全球状态的信息的工具,即使用 RegistryState 可在 EchoFramework 文档中找到 这里
分析
登录到应用程序 Insights .
运行本中的一般信息分析 这里
创建日志模块 :
const analyticsLog = analytics.createAnalyticsModule("ep");
可选的静态事件或出错属性也可以被附加在所有事件或出错上,使用:
const analyticsLog = analytics.createAnalyticsModule("ep", { staticEventProperties: {ver: 1.01}, staticErrorProperties: {ver: 1.01} });
日志事件 :
analyticsLog.trackEvent(event: AnalyticsEvent)
analyticsLog.trackEventBy(objectName: string, actionName: string, properties: AnalyticsPropertyTypes)
analyticsLog.trackEventBy("Document", "Opened", {docNo: "abc123", fileId: 12345 })
应用程序 Insights 中的格式为:
- 开口 目标 行动
- appId subMudule. (原始内容存档于2017-09-29). 对象. 行动
- (原始内容存档于2017-03-27). Ep.Pdf. 已打开
- eP. 文件。 已打开
- 页:1 查看器。 点击 Tag
错误记录通常不应直接调用 。 而不是使用 handleError(TODO - 当我们有 handleError in core) 来更新此文档, 它会报告错误以应用 Insight .
analyticsLog.logError(error)
Echo-in Field 还应做一些配置,如设置用户、内置码和公司,每个事件都将提供这些配置.
analyticsConfiguration
处理错误
报告到应用程序的深入性 .
注册帮助函数 errorHandler 像这样:
export const errorHandler = (exception: Error | BaseError): void => {
EchoCore.handleErrors(exception, myModuleAnalyticsModule);
};
BaseError 扩展 Error,并建议使用 Error
- 它能确保错误只记录一次以应用 Insights
- 所有属性
BaseError被登录到 AppInsights , 即使它们是私人的 - 它支持
innerError类型Error或者说Record<string, unknown>
使用 toError 将未知被捕获对象转换成正则错误对象的帮助器函数 .
建议延期 BaseError,并用额外的属性来装饰,如下例所见.
自定义错误和典型错误流的例子.
export class PdfError extends BaseError {
docNo: string;
constructor(args: { message: string; docNo: string; innerError?: Error }) {
super({ name: 'PdfError', message: args.message, innerError: args.innerError });
this.docNo = args.docNo;
}
}
...
try {
loadPdf();
} catch(error) {
throw new PdfError({ message:"load pdf failed", docNo: "a-73", innerError: toError(error) });
}
}
旧的回声库
以历史原因保存. https://github.com/equinor/ EchoCore (英语) 在此之前, https://github.com/equinor/ EchoFramework 互联网档案馆的存檔,存档日期2013-12-02