ranui / ranuts오픈소스 · MIT 라이선스

네이티브 웹 컴포넌트. TypeScript 유틸리티.

ranui는 프레임워크에 얽매이지 않는 r- 엘리먼트 40개를, ranuts는 트리 셰이킹이 되는 타입 유틸리티 90여 개를 제공합니다. Vue에서도 React에서도 순수 HTML에서도 빌드 단계 없이 그대로 씁니다.

컴포넌트 둘러보기 문서 읽기

패키지 설치

npm i ranui ranuts

컴포넌트 체험

실시간

컴포넌트를 조작하고 HTML 을 복사하세요.

버튼

주요

기본

경고

비활성화

진행률

진행률66%

선택

선택됨

코드 보기HTML

<r-button type="primary">주요</r-button>
<r-button>기본</r-button>
<r-button type="warning">경고</r-button>

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

<r-checkbox checked>구독</r-checkbox>

40컴포넌트

90+유틸리티

8언어

MIT라이선스

ranui

프레임워크 비종속 Web Components 라이브러리. 스타일이 갖춰진 r- 엘리먼트 40개를 Vue, React, 순수 HTML 어디에나 넣을 수 있습니다.

컴포넌트 보기

ranuts

문자열, 객체, 색상, 시간, 파일, DOM을 다루는 타입 유틸리티 90여 개. 트리 셰이킹을 지원하고 의존성이 없습니다.

문서 읽기

아티클

렌더링 엔진, 함수형 프로그래밍, 정렬 알고리즘, 웹 플랫폼을 다루는 긴 글.

읽기 시작하기

설치하고 사용하기

두 패키지를 설치하고 엘리먼트를 한 번만 등록하면 어디서든 씁니다. 빌드 단계도 프레임워크도 필요 없습니다.

설치와 등록

import 'ranui/style'

// 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>

라이브러리 둘러보기

ranuts에서 다섯 가지, ranui에서 다섯 가지.

ranuts유틸리티

Bridge PostMessageBridgepostMessage 위에서 동작하는 프로미스 기반 RPC. iframe, 워커, 탭을 넘나들며 구조화 복제 전송과 채널 격리를 지원합니다.
Visual ApplicationPixiJS 스타일의 씬 그래프. WebGPU / WebGL / Canvas 렌더러를 갈아 끼울 수 있습니다.
가상 DOM h() · init()snabbdom 스타일의 가상 DOM: 하이퍼스크립트, 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 인터랙션.

어디서나 동작

표준 기반 커스텀 엘리먼트라 어떤 프레임워크에서도, 프레임워크 없이도 동작합니다.

완전한 타입

TypeScript로 작성했고 타입 선언까지 함께 배포합니다.

설치 가능 · 오프라인

문서 자체가 PWA이며 자체 서비스 워커를 갖습니다.

여덟 개 언어

ranui와 ranuts 레퍼런스는 여덟 개 언어로 관리됩니다.