@ checkly/ 要点
以框架不可知自定义元素——状态, 上调时间、统计数据和事件,无论何时 围绕它的框架.
仅浏览器和仅使用ES: 由 a 装入 <script type="module"> 在你的页面上,
没有共同JS的构建. lit 财务报告和审定财务报表 @lit/context 只有运行时间
依赖性,一个测试可以阻止列表的增长.
安装
预释放在npm下 pre 标签; 尚未稳定释放.
pnpm add @checkly/elements@pre
每一次释放都是从承诺开始命名的 所以把准确的
在一个必须复制其建筑的项目中。 在双方工作
一次,构建此取出( t)pnpm install 还建造 dist/和
pnpm link /absolute/path/to/checkly-elements 从消费者.
从另一个寄存器中收存 涵盖其他 线路进入.
每个元件都是从自己的入境点进口的,而进口是 注册标签 :
<script type="module">
import '@checkly/elements/status-dot'
</script>
<checkly-status-dot status="failing" label="Checkout API"></checkly-status-dot>
<checkly-status-dot status="success" size="small"></checkly-status-dot>
这是什么
该目录包含15个显示元素,加上可选的API适配器,一个HTTP 客户和两个公共资源来源。 从平原显示元素渲染 视图模型属性,所以一个主机可以从自己的商店来作一个板.
| 路径 | 目的 |
|---|---|
src/core | 基类 每一个元素都建立在:符号表,四个数据状态,阴影/光-DOM机械,源道. |
src/client | HTTP运输、传呼和能见度 -- -- 源元素和服务器侧消费者使用的民调. |
src/adapters | 从仪表板和状态页的电线回放中 纯绘图到视图模型中. |
src/sources | 可选的自定义元素可以获取公共仪表板或状态页并输入其下方的渲染目录. |
src/elements | 目录. 这里的文件自动是一个切入点,大小预算,以及每个相容套件的主题. |
themes/ | checkly.css,生成:用一个 .dark 和Checkly的应用程序一样 产品本身是元素的默认值. |
demo/ | 反应灵敏的国家、主题和现场公共资源采集的审查中心. |
scripts/ | 该建筑的辅助铸造:生成样式docs,大小预算,自文档检查. |
正在获取检查数据
渲染目录和取取客户端是独立的出入口. 页面 因此没有下载HTTP或投票码:
import { ChecklyClient } from '@checkly/elements/client'
const client = ChecklyClient.forDashboard({ dashboardId: 'my-dashboard' })
const statuses = await client.listCheckStatuses()
forDashboard 财务报告和审定财务报表 forStatusPage 使用相应的出版资源
APIs (英语). forApi 用于服务器侧码,需要账户 API 键加其
账户编号.
已经执行自己要求的消费者可以导入相同的映射 函数而不使用客户端或任何元素:
import { adaptChecks } from '@checkly/elements/adapters'
对于无框架的公共仪表板,请导入其来源并包入元素 应接收其数据:
<script type="module">
import '@checkly/elements/dashboard-source'
import '@checkly/elements/check-list'
</script>
<checkly-dashboard-source dashboard-id="my-dashboard">
<checkly-check-list></checkly-check-list>
</checkly-dashboard-source>
使用状况文件 @checkly/elements/status-page-source 和要求
version="v2" 或者说 version="v3"。这些源元素有意支持
仅限公共资源;保护资源需要单独设计
认证桥.
状态页源输入了嵌入式服务上行时间、事件横幅/列表以及
维护清单。 选择升起时间 service-id,并使用 history 一个
事件列表显示其存档. 您的页面拥有版式, 服务标题
和品牌;来源拥有请求和API特定映射.
范围账户数据试点
作者组成的页面也可以使用实验 /v1/embed-tokens 财务报告和审定财务报表
/v1/elements-data 终点,后面 ELEMENTS_EMBED 账户旗。 A 类
服务器持有的 API 证书薄荷,用于明确检查ID
浏览器获取一次并传递快照 adaptElementsSnapshot
纯净的元素。 不需要投票、仪表板或对状况页面的依赖.
这个 显示仓库 以工作为例: 保存密钥、握手的本地服务器, 和能证明它失效的探测器.
API 密钥仅为服务器侧
一个账户API密钥可以读取该账户,不属于浏览器代码.
ChecklyClient.forApi() 拒绝 cu_ 财务报告和审定财务报表 sv_ 浏览器中的密钥,除非
呼叫器明确设置 unsafeAllowBrowserApiKey逃生舱仍然
记录风险。 偏好公布的仪表板或状态页,或代理
通过保留密钥的后端进行特定账户数据.
开发
pnpm install # also builds, via prepare
pnpm demo # the demo pages on :5173
pnpm test # build, unit specs, hygiene
pnpm test:browser # real Chromium, via Playwright
浏览器运行器第一次需要二进制 :
pnpm exec playwright install chromium
每一个命令,每个命令的目的,都在 文件/开发。 。 。 .
文档
| 使用元素 | 元素本身:它们拿什么,四个州每个州都有,一个源头如何供养它们. |
| 休养 | 使这些看起来像你的产品: 代币,零件,插槽,以及抛出阴影边界。 包括每个令牌的生成表, 部分和时间档目录声明 . |
| 从另一个寄存器中收存 | 三种方式——发表在npm上,被束缚在一种承诺上,或与当地联系起来——以及达到的目的. |
| 发展 | 命令,两个试跑者,截图套件,演示页,出入口,大小预算. |
| 出版 | 预放和放出是如何运行的,注册标记的意思是什么,在第一个稳定版本之前必须真实的是什么. |
| 一般事务人员(其他职等) | 针对在此寄存器中工作的编码代理的指令 . |
许可证
麻省理工学院.