原子
一个用于构建现代UIs与Coveo平台的网络组件库. 原子网络组件是用 斯坦西尔它们是自我封装、可堆肥和轻量级的.
使用图书馆: 科沃原子图书馆正式文件。 。 。 .
捐款: 见 捐款额 关于开发原子部件、进行试验和使用开发工具的准则.
入境点
这个 @coveo/atomic 软件包显示下列切入点:
@coveo/atomic:出口Coveo Atomic所使用的各种类型和公用事业.@coveo/atomic/loader:出口科沃原子部件类型以及defineCustomElements财务报告和审定财务报表setNonce公用事业.@coveo/atomic/themes:导出 Coveo 原子主题样本.@coveo/atomic/assets:导出Coveo Atomic使用的SVG图标.@coveo/atomic/lang:导出Coveo Atomic所使用的本地化文件.
开始
复制后,请遵守顶级指令 读取 以安装依赖和链接软件包.
运行软件包脚本
虽然此软件包有软件包特定脚本,但它最好依靠运行命令 turbo 从一相相根起.
例如,在开发中运行软件包
# ✅ Preferred method
pnpm turbo run dev --filter=@coveo/atomic
从单列波根,相对于
# ❌ Deprecated method
cd package/atomic
pnpm run dev
在从软件包文件夹运行脚本时, 使用 turbo 脚本一般是一种更平滑的经验.
随后的所有例子都假设您是从单列波根操作的.
可用的脚本
原子使用故事书进行组件开发,文档和测试. 要在开发模式中启动故事本 :
pnpm turbo run dev --filter=@coveo/atomic
故事书将在 http://localhost:4400。 。 。 .
[注] 这很重要,你建造
@coveo/atomic在运行"故事本"服务器之前至少要运行一次. 这将确保所有组件都能通过Storybook正确渲染, 否则您不会看到组件被渲染 .
为了建设用于制作的图书馆,运行:
pnpm turbo run build --filter=@coveo/atomic
要对组件进行单元测试,请运行:
pnpm turbo run test --filter=@coveo/atomic
故事本 MCP( 模式背景协议)
这个"故事本"实例被配置为MCP addon,这使得AI代理能够与组件故事进行程序互动. 当故事本运行时, MCP 服务器可以在 http://localhost:4400/mcp。 。 。 .
公用事业
立体装饰器
在建造原子组件时,会使用一系列的装饰来使开发更快.
初始化 Bindings & BindState to Controller 装饰器
InitializeBindings 是一个自动获取 bindings 从父母那里 atomic-search-interface 或者说 atomic-external 组件。 此装饰必须应用到命名为 bindings。 。 。 .
重要 为使使用此装饰器的组件能正确渲染,它应当有一个内部状态,约束在其中的一个属性上: bindings。这可以通过使用 BindStateToController 装饰器与一个 State 装饰师.
下面是一个完整的例子:
import {
InitializeBindings,
InitializableComponent,
BindStateToController,
Bindings,
} from '@coveo/atomic';
import {ControllerState, Controller, buildController} from '@coveo/headless';
import {Component, State} from '@stencil/core';
@Component({
tag: 'atomic-component',
})
export class AtomicComponent implements InitializableComponent {
@InitializeBindings() public bindings!: Bindings;
private controller!: Controller;
// Automatically subscribes the `controllerState` to the state of the `controller`
@BindStateToController('controller')
@State()
private controllerState!: ControllerState;
// Method called after bindings are defined, where controllers should be initialized
public initialize() {
this.controller = buildController(this.bindings.engine);
}
render() {
return [this.strings.value(), this.controllerState.value];
}
}
结果 Context 装饰器
ResultContext 是一个自动获取 result 由母组件提供 atomic-result。此工具用于自定义结果模板组件内部.
import {ResultContext} from '@coveo/atomic';
import {Component, State} from '@stencil/core';
@Component({
tag: 'atomic-result-component',
})
export class AtomicResultComponent {
@ResultContext() private result!: Result;
@State() public error!: Error;
public render() {
return this.result.title;
}
}
生成组件命令
要生成新的组件,请使用以下命令:
pnpm turbo generate-component --filter=@coveo/atomic -- --name=<component-name> --output=<path-to-output-directory>
这个 output 参数是可选的。 如果不提供,则默认为 src/components/commerce。 。 。 .
例如,生成一个命名的组件 atomic-ball,运行 :
pnpm turbo generate-component --filter=@coveo/atomic -- --name=ball
这将在默认路径下创建必要的组件文件 src/components/commerce/atomic-ball。 。 。 .
如果你想指定不同的路径,你可以使用 --output 旗帜。 例如,生成以下构成部分: src/components/search,运行 :
pnpm turbo generate-component --filter=@coveo/atomic -- --name=ball --output=src/components/search
您还可以使用 --name=atomic-ball 如果你愿意,但如果有必要,剧本会自动添加"原子"前缀.
这将在指定的目录中创建组件( N)src/components/search/atomic-ball )或使用默认值 src/components/commerce/atomic-ball 若无 output 提供.