@ box- kite/ 核心

这个 框键 造型引擎,完全没有框架. 生成原子 CSS 在运行时并按其内容缓存每个规则,所以在页面中任意位置的相同值都会重复使用一个类.

这是Plain-DOM应用软件包,Web组件或另一个框架的适配器安装. 使用反应? 安装 @box-kite/react 换成 —— 说 它取决于这个,再出口它, 所以你得到一个复制的引擎和 Box 包含部分.

npm install @box-kite/core

import { createStyleEngine } from '@box-kite/core';

const engine = createStyleEngine();

document.querySelector('#card').className = engine.classNames({
  p: 4,
  bgColor: 'blue-500',
  borderRadius: 2,
  hover: { bgColor: 'blue-600' },
});

这就是整个运行时间:没有建设步骤,没有提供者,没有效果. 规则是自行送达文件的 微任务 - flushSync() 用于在同一勾选符中读取计算过的样式,以及 getStyles() 静态 输出时完全没有DOM.

你自己的道具和组件

BoxExtends.extend() 登记道具或值;类型来自 /types 条目 :

// types.d.ts
import { ExtractBoxStyles } from '@box-kite/core/types';
import { extendedProps } from './myProps';

declare module '@box-kite/core/types' {
  namespace Augmented {
    interface BoxProps extends ExtractBoxStyles<typeof extendedProps> {}
  }
}

@box-kite/core/types 也是反应项目的增强目标——登记册正在扩展 住在这里,而不是装订.

链接

• 文档 : https://box-kite.dev (英语)
• 资料来源: https://github.com/box-kite/box-kite 页面存档备份,存于互联网档案馆

麻省理工学院