ran
日本語
オープンソース · MIT ライセンス

Web Components の UI ライブラリと型付きユーティリティ

ranui はフレームワークに依存しない r- 要素を 40 個、ranuts は tree-shaking 可能な型付きユーティリティを 90 以上そろえています。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 ライブラリ。スタイル済みの r- 要素 40 個を Vue・React・素の HTML のどこにでも置けます。

コンポーネント一覧

ranuts

文字列・オブジェクト・色・時間・ファイル・DOM を扱う型付きユーティリティが 90 以上。tree-shaking 対応、依存ゼロ。

ドキュメントを読む

記事

レンダリングエンジン、関数型プログラミング、ソートアルゴリズム、Web プラットフォームについての長文。

読みはじめる
特色ある機能

多くのライブラリが用意していないもの

ranuts から 5 つ、ranui から 5 つ。

ranutsユーティリティ
  • Bridge PostMessageBridgepostMessage 上の 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 インタラクション。
クイックスタート

インストールして使う

2 つのパッケージを入れ、要素を一度登録すれば、どこでも使えます。ビルド工程もフレームワークも必要ありません。

インストールと登録
$ 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 を持ちます。

8 言語

ranui と ranuts のリファレンスは 8 言語で維持されています。