open-index/open-npm huggingface dataset:
npm package: @one-for-all/artery-renderer
Description: Artery Renderer, aka 渲染引擎, 可以将 [Artery](https://github.com/quanxiang-cloud/one-for-all/tree/main/packages/artery) 渲染成真正的 Web 页面。
Latest version: 0.21.3

# Artery Renderer

Artery Renderer, aka 渲染引擎, 可以将 [Artery](https://github.com/quanxiang-cloud/one-for-all/tree/main/packages/artery) 渲染成真正的 Web 页面。

和其他渲染引擎相比，Artery Renderer 最大的特点就是**开放**和**可扩展**。Artery Renderer 不要求在某个公司的特定生态里才能使用；Artery Renderer 没有内置任何组件，但是可以接对几乎任何组件库；Artery Renderer 不限定任何的 API 风格，开发者可以根据自己的实际业务实现相应的 adapter；开发者不但可以使用 Artery Renderer 来完成整个前端的所有页面的渲染，也可以将其当作一个普通的组件，使用到页面的某个部分中。

[查看 Artery Renderer 的实现原理](https://github.com/quanxiang-cloud/one-for-all/tree/main/packages/artery-renderer/docs/zh/how-artery-renderer-works.md)。

## 对 Artery 的全面支持

Artery Renderer 提供了对 Artery 的全面支持，包括但不限于:

- 支持路由
- 支持 sharedState 和 apiState
- 支持按需下载组件
- 支持原生的 HTML Node
- 支持各种类型的 property

## 灵活的扩展能力

Artery Renderer 提供了必要的扩展接口，开发者可以根据自己的实际情况按需实现。

### ComponentLoader & Repository

Artery Renderer 没有内置任何组件，渲染时用到的组件需要开发者通过实现 `ComponentLoader` or/and `Repository` 这两个接口来提供，这意味着开发者可以使用任意的自己喜欢的组件，可以很容易实现组件升级和替换，可以很方便的实现 A/B test 等。

### APISpecAdapter

Artery Renderer 没有限定 API 风格或者 request/response 格式，开发者可以通过实现 `APISpecAdapter` 来对接已有的 API，而不需要为了使用 Artery Renderer 而修改 API。如何对接的 API 为 RESTful 风格，那可以直接使用我们提供的 [adapter](https://www.npmjs.com/package/@one-for-all/api-spec-adapter)。

除了可以灵活的对接已有 API 以外，`APISpecAdapter` 的另一个重要作用就是大大简化了在 Artery 中声明调用 API 逻辑的成本。例如在 Artery 中，我们只需要写 `this.apiState.someData.fetch({ foo: 'bar' })` 就可以调用某个 API，而不用关心 API 的具体 request 格式。

### RefLoader

对于体积较大的 Artery，我们可以将其拆分成各个部分，然后使用 `ref-node` 类型在渲染阶段将其组合。Artery Renderer 的 `RefLoader` 接口用于下载这种引用类型的 Artery。

AKA render engine, render [Artery](https://github.com/quanxiang-cloud/one-for-all/tree/main/packages/artery) into read UI.

TL;DR;

- Artery Renderer is a implementation of MVC
- Artery Renderer uses React and RxJS to implement View and Model
- Artery Renderer is extremely extensible, you can implement plug-ins as needed

- Usage
- How Artery Renderer works
- FAQ

## Quick Start

Install by npm or yarn:

```bash
npm install @one-for-all/artery-renderer
```

```jsx
import React from 'react';
import { RefLoader, Repository, ArteryRenderer } from '@one-for-all/artery-renderer';

const plugins: Plugins = {
  apiSpecAdapter?: APISpecAdapter,
  repository?: Repository,
  refLoader?: RefLoader,
  componentLoader?: ComponentLoader,
};

function Demo() {
  const Artery = getArteryBySomeway();

  return (<ArteryRenderer Artery={Artery} plugins={plugins} />);
}

```

## Example

please checkout our [example repo](https://github.com/quanxiang-cloud/one-for-all/tree/main/packages/example) for more.
npm package: @one-for-all/artery-simulator
Description: 技术要点
Latest version: 1.5.0

# Artery Simulator

技术要点

- 渲染组件时，将其放入一个不影响布局的的 container 中，`display: contents`
  - 借助此 container 可以找到组件渲染的实际 DOM
  - 组件加载后，将其实际 DOM 缓存起来，卸载前将其删除
- 创建 `IntersectionObserver` 并对上述的 DOM 集合进行监听 (A)
  - 在 callback 中就可以获得 DOM 的 boundingClientRect
  - 可以使用 boundingClientRect 在组件上层渲染一个表示其位置和大小的 contour 元素
  - 在 contour 元素上实现点击选中、拖拽等功能
- 监听 mutation 和 resize 事件
  - 当上述事件发生后，需要重新执行步骤 A
npm package: @one-for-all/elements-radar
Description: track element DOMRect.
Latest version: 0.3.0

# Track Sentry

track element DOMRect.

- new element added
- element removed
- one of element resized
- root on scroll
- root on resize
- re-calc single

## attention

DO NOT setting padding on root!

https://www.w3.org/TR/intersection-observer
npm package: @one-for-all/headless-ui
Description: Migration of qxp-web base components
Latest version: 0.8.3

# `@one-for-all/ui`

项目结构说明：

```
import {Button, Icon, Modal} from '@one-for-all/ui'
```


todo:

- 根据上次讨论的内容 components.md，补全缺失的组件
- 因为 icon 组件体积较大，所以单独发包
- 为已经实现的组件做减法
  - 删除样式, 移除 tailwind
  - 统一组件的 Props 定义, Props 统一定义在 types.d.ts 中
- 定义组件样式自定义的 interface，谭杰
- 为所有的组件补充测试用例
- export member 一致性检查

deadline: 20220114
npm package: @one-for-all/node-carve
Description: 在页面引擎中，通常需要通过右侧的配置表单对选中的元素进行不同属性的配置，而node-crave设计的目的就是希望用户在只提供一份简单的属性描述文件（PropsSpec）即可自动生成对应的配置表单。
Latest version: 0.2.0

# Overview

在页面引擎中，通常需要通过右侧的配置表单对选中的元素进行不同属性的配置，而node-crave设计的目的就是希望用户在只提供一份简单的属性描述文件（PropsSpec）即可自动生成对应的配置表单。

## PropsSpec 是什么？

PropsSpec 即 props's specification 的简写，用户在提供组件库的同时还需要对应提供一份组件库的属性描述文件（PropsSpec），里面包含了对组件自身以及组件属性的具体描述以及在表单中期望的展现形式，最终node-carve通过这份配置文件去生成配置表单。

## PropsSpec 结构简介

PropsSpec 的结构十分简单，但是任然有许多需要注意的细节，在这里简单给出 Artery 整体结构介绍，更新细节设计请参考对应的 reference。

PropsSpec 由三部分组成:

- `props` 描述组件具体的属性的配置项
- `isContainer` 描述组件是否能够接受 children
- `isOverLayer` 描述组件是否是存在于额外的浮层中

### props

在props中接收一个描述数组，每一个描述项针对单独的一个属性。同时用 `type` 描述属性的基本类型，如果在没有传递 `will` 的情况下，会根据 `type` 渲染默认的配置组件。

#### BasePropSpec

`BasePropSpec` 上定义了属性的通用配置。

| 名称             | Required | Type                       | 描述                                                                         |
| :--------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- |
| `label`             | 是       | `string`                   | 配置表单中配置此属性的标题                                            |
| `type`              | 是       | `string`                   | 表示属性的类型，例如 `string` `number`  `boolean` 等                 |
| `name`              | 是       | `string`                   | 此属性在对应组件的 `key`                                            |
| `desc`              | 否       | `string`                   | 此属性的一些额外描述                                                 |
| `will`              | 否       | `WillTypes`                | 配置表单中渲染的具体配置组件，不传递的话则会根据 `type` 渲染默认的配置组件    |
| `willProps`         | 否       | `Record<string, unknown>`  | 配置组件的属性                                                      |