ran
简体中文
开源 · MIT 协议

Web Components 组件库与 TypeScript 工具集

ranui 提供 40 个框架无关的 r- 元素，ranuts 收录 90+ 个可 Tree-shaking 的类型化工具函数，在 Vue、React 或纯 HTML 中直接使用，无需构建步骤。

npm i ranui ranuts
浏览组件前往 GitHub
实时html
<r-button type="primary">主要</r-button>
<r-button>默认</r-button>
<r-button type="warning">警告</r-button>

<r-progress percent="66"></r-progress>

<r-loading name="circle-line"></r-loading>
<r-checkbox checked>订阅</r-checkbox>
主要默认警告
订阅
真实的 ranui 组件，就运行在这个页面上。
40组件
90+工具函数
8语言
MIT协议

ranui

框架无关的 Web Components 组件库。40 个开箱即用的 r- 元素，可放进 Vue、React 或纯 HTML 的任意技术栈。

查看组件

ranuts

90+ 个带类型的工具函数，覆盖字符串、对象、颜色、时间、文件与 DOM。支持 Tree-shaking，零依赖。

阅读文档

文章

关于渲染引擎、函数式编程、排序算法与 Web 平台的长文。

开始阅读
特色能力

多数库没有的能力

ranuts 五项，ranui 五项。

ranuts工具函数
  • Bridge 通信桥 PostMessageBridge基于 postMessage 的 Promise 化 RPC，跨 iframe、Worker 与标签页通信，结构化克隆传输、通道隔离。
  • Visual 渲染引擎 ApplicationPixiJS 风格的场景图，可插拔 WebGPU / WebGL / Canvas 渲染后端。
  • 虚拟 DOM h() · init()snabbdom 风格的 vDOM：hyperscript、patch、可插拔模块与生命周期钩子。
  • TOTP 验证码 TOTPRFC-6238 一次性口令，支持 SHA-1 到 SHA3-512，零加密依赖。
  • MIME 注册表 getMime()约 1000 条的 MIME ⇄ 文件扩展名双向查询。
ranui组件
  • 播放器 <r-player>HLS 自适应码率视频播放器，模块化的控制器内核。
  • 取色器 <r-colorpicker>完整 HSV 取色，带色相 + 透明度滑块，实时输出 HEX / RGBA。
  • 雷达图 <r-radar>Canvas 绘制的雷达图，支持逐轴标签与逐轴标签样式。
  • 数学公式 <r-math>通过懒加载的 Temml，用一个属性把 LaTeX 公式渲染成原生 MathML。
  • 刮刮卡 <r-scratch>可交互的 Canvas 刮开揭晓，带完成度阈值。
快速开始

安装与使用

安装两个包，注册一次元素，即可在任意地方使用，无需构建步骤，也不依赖任何框架。

安装并注册
$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'
随处使用
<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>

随处可用

基于标准的自定义元素，在任意框架或无框架下都能运行。

完整类型

全程 TypeScript 编写，附带类型声明。

可安装 · 离线

文档本身就是一个 PWA，带自己的 Service Worker。

八种语言

ranui 与 ranuts 的文档以八种语言维护。