Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: some readme updates #4

Merged
merged 2 commits into from
Nov 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/libro-output/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# libro-output

该包基于 [libro-core](../libro-core) 模块提供的输出扩展实现了 Jupyter 场景下的三个 Output 模块:
`StreamOutputModule`,`ErrorOutputModule`,`DisplayDataOutputModule`。同时,Output 中不同输出数据格式的渲染实现在 [libro-rendermime](../libro-rendermime/)。

## 标准输出

`StreamOutputModule` 模块主要功能是处理与显示代码执行的标准文本输出。

![Alt text](https://mdn.alipayobjects.com/huamei_xt20ge/afts/img/A*ZvvvQ6tysJYAAAAAAAAAAAAADiuUAQ/original)

## 错误输出

`ErrorOutputModule` 模块主要功能是处理与显示执行错误类型的输出。对错误类型在 UI 交互上进行了更突出的设计,增加隐藏与显示详细错误信息的交互,避免大段的错误信息导致文件篇幅过长。

![Alt text](https://mdn.alipayobjects.com/huamei_xt20ge/afts/img/A*5rFASq5f0N4AAAAAAAAAAAAADiuUAQ/original)

## 富文本输出

`DisplayDataOutputModule` 模块支持富文本格式输出的处理与显示。

![Alt text](https://mdn.alipayobjects.com/huamei_xt20ge/afts/img/A*GfONTZ-o_04AAAAAAAAAAAAADiuUAQ/original)
43 changes: 43 additions & 0 deletions packages/libro-rendermime/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# libro-rendermime

该包提供了 `LibroRenderMimeModule` 模块用于识别不同数据格式的内容并且正确解析渲染。通过定义多个 MIME 类型和优先级,可以在不同的环境中提供灵活的输出展示选项,以适应各种类型的数据和前端环境的要求。内置了文本、图片、Markdown、HTML、SVG 等 MIME 渲染器,同时提供 MIME 渲染器扩展,支持扩展更多自定义的 MIME 类型渲染。

## Token/API

### RenderMimeRegistry

RenderMimeRegistry 管理 MIME,提供获取当前输出最合适的 MIME 类型,基于输出和类型创建对应的渲染器,MIME 渲染监听等能力。

```typescript
// 组件内引入
const renderMimeRegistry = useInject(RenderMimeRegistry);

// 属性引入
@inject(RenderMimeRegistry) renderMimeRegistry:RenderMimeRegistry;

// 事件监听
renderMimeRegistry.onMimeRender();

//获取当前输出最合适的 MIME 类型
const preferredMimeType = renderMimeRegistry.preferredMimeType(model)

//基于输出和类型创建对应的渲染器
const OutputRender = defaultRenderMime.createRenderer(
preferredMimeType,
model,
);
```

## 扩展点

### MIME 渲染器扩展

```typescript
export interface RenderMimeContribution {
canHandle: (model: BaseOutputView) => number;
safe: boolean;
renderType: string;
mimeTypes: string[];
render: React.FC<{ model: BaseOutputView; options?: Record<string, any> }>;
}
```