@cortexapps/plugin-core

此套件为Cortex插件和Cortex网络应用提供了方便使用的桥梁.

安装它

yarn add @cortexapps/plugin-core

或者说

npm install @cortexapps/plugin-core

克特克斯阿皮语Name

暴露的主要实体是: CortexApi,具有方法 proxyFetch(), (中文(简体) ), getContext() 财务报告和审定财务报表 pluginInit()。 。 。 .

pluginInit

打电话 pluginInit() 尽早触发 iframe 主机将主题样式注入您的插件.

参数

无

回返

void

proxyFetch

页:1: 截至1.3.0,全球 fetch 要调用的方法是猴子补丁 proxyFetch() 在引擎盖下。 这意味着你可以使用 fetch() 您通常会在 Cortex 插件中自动通过 Cortex 代理 .

proxyFetch 为插件提供了一个方法,通过 Cortex 代理来提出API 请求,以避免浏览器 CORS 限制并安全地添加认证. 它的签名与本地浏览器几乎相同 fetch() 方法,但一些属性被平整后可以跨出iframe桥传输.

参数

回返

Promise<ShimResponse> - 几乎与浏览器的反应完全相同。 见 源代码 更多细节.

示例

import { CortexApi } from '@cortexapps/plugin-core';

const commentOnPullRequest = async ({
  comment: string,
  owner: string,
  pullNumber: string | number,
  repo: string,
}) => {
  const response = await CortexApi.proxyFetch(
    `https://api.github.com/${owner}/${repo}/pulls/${pullNumber}/comments`,
    {
      body: comment,
      method: 'POST',
    }
  );

  return response.json();
};

使用 proxyFetch 与 缩写

页:1: 截至1.3.0,使用octokit插件(或调整其他库)并不必要,因为全球 fetch 方法默认是shimmed.

使用 octokitPlugin 在 Cortex 插件中方便使用 octokit.

import { CortexApi, octokitPlugin } from '@cortexapps/plugin-core';
import { Octokit, type RestEndpointMethodTypes } from "@octokit/rest";

const CortexOctokit = Octoki.plugin(octokitPlugin);

const getWorkflow = async (options: {
  id: number;
  owner: string;
  repo: string;
}): Promise<
  RestEndpointMethodTypes["actions"]["getWorkflow"]["response"]["data"]
> {
  const { owner, repo, id } = options;
  const octokit = new CortexOctokit({ CortexApi });

  const workflow = await octokit.actions.getWorkflow({
    owner,
    repo,
    workflow_id: id,
  });

  return workflow.data;
};

getContext

页:1: 自1.2.0起,上下文也可通过 useCortexContext 钩.

参数

无

回返

示例

import { CortexApi } from '@cortexapps/plugin-core';

const getCurrentUser = async () => {
  const response = await CortexApi.getContext();
  const resJson = await response.json();

  return resJson.user;
};

构成部分库

2.x的折旧和迁移

组件库被折旧为QQ3.0.0版本,只支持关键修正. 请使用 https://www.npmjs.com/package/@cortexapps/react-plugin-ui 用于React组件和文档.

为了帮助你的移民, plugin-core/components 已转换为使用 react-plugin-ui但是这需要一些 充分移徙的步骤:

1. 安装两者 @cortexapps/[email protected] 财务报告和审定财务报表 @cortexapps/[email protected] 作为依附关系
2. 包含 import "@cortexapps/react-plugin-ui/index.css"; 全球样式
3. 当你的应用靴,打电话 CortexApi.pluginInit(); 更改主题
4. 确定您的插件正在使用 <PluginProvider> 上下文包装。 这提供了黑暗/ 灯光模式类 <body>

这些步骤应该能使您的组件在暗/ 光模式之间切换, 在视觉上匹配我们的组件样式 .

新的样式将 CSS 重置器应用到基元素( 如 ul编号 :li) - 可能需要一些小的视觉调整 在您的插件中的某些区域,如果它们受到影响.

构成部分详情

以本地操作方式检查故事书中的组件库 yarn storybook。 。 。 .

从 @cortexapps/plugin-core/components 在应用程序中使用它们.

import React from 'react';
import { Button } from '@cortexapps/plugin-core/components';

interface SubmitButtonProps extends React.PropsWithChildren;

const SubmitButton: React.FC<SubmitButtonProps> = ({ children }) => {
  return (
    <Button type="submit">{children}</Button>
  );
};

export default SubmitButton;

可用组件

• 锁定
• 徽标
• 方框
• 面包屑
• 按钮
• 纸牌
• 复选框
• 可点击
  • 一个方便的包装 <a> 或一个 <button> (取决于道具) 没有典型的 <a> 或者说 <button> 样式
• 下坠
• 奇幻游戏
• 窗体标签
• 图标集(恭维 磷酸盐图标(中文(简体) )
• 投入
• 标签
• 线性百分比
• 列表
• 装入器
• 标记
  • 这是Cortex的标志!
• 模式
• 药丸
• 门户
  • 你可能不需要担心这个-- 这是我们内部用来制造模式和相似的
• 进度栏
• 堆栈
  • 适用于子女间平分间隔的超有用部分
• 标签
• 标记
• 文本
• 标题
• 切换
• 类型头

详见"打字和故事书".