실용적인 예제와 라이브 데모.
예제를 선택하면 라이브 미리보기와 소스 코드를 나란히 표시하는 전체 화면이 열립니다.
컴포넌트
4정적·동적 매개변수, 자식, 객체 동일성으로 연결되는 목록, 중첩 데이터를 사용하는 일반 함수입니다. 각 미리보기에서 마운트 횟수를 확인할 수 있습니다.
정적 및 동적 매개변수
값 매개변수는 컴포넌트를 만들 때 한 번 읽습니다. 함수 매개변수는 update()마다 읽습니다. 두 경우 모두 컴포넌트 자체는 한 번만 실행됩니다. 마운트 횟수로 확인할 수 있습니다.
자식 노드와 수정자
컴포넌트는 전개 구문으로 빌더, 텍스트, 속성 객체, 수정자를 자식으로 전달합니다. 조건부 내용은 when()에 넣으므로 이를 감싸는 컴포넌트를 다시 만들지 않습니다.
목록의 객체 동일성
list()는 항목이 배열에 있는 동안 해당 행을 유지합니다. 입력이나 포커스를 잃지 않고 정렬, 삽입, 이름 변경이 가능합니다. 스위치를 켜면 매 업데이트마다 객체를 복제해 동일성을 깨뜨리는 비용을 보여줍니다.
중첩 데이터
작업을 가진 구성원들로 이루어진 팀입니다. 계층마다 컴포넌트 하나와 중첩된 list()를 사용하고, 같은 객체를 읽는 함수로 개수를 계산합니다. 깊은 곳의 변경은 해당 노드만 패치합니다.
API
13각 구성 요소를 보여주는 작은 데모입니다. 문서에 포함된 것과 같습니다.
태그 빌더
빌더는 속성, 정적 자식, 동적 텍스트를 받습니다. Rename은 상태를 변경한 다음 update()를 호출합니다.
컴포넌트
컴포넌트는 일반 함수입니다. Counter()를 호출할 때마다 자체 카운트를 유지합니다.
속성
속성 값은 함수일 수 있습니다. 두 번째 버튼은 busy를 전환하고 update()를 호출합니다. Save 버튼의 disabled와 aria-busy가 이에 따라 바뀝니다.
이벤트
onInput과 onKeyDown은 일반 속성입니다. 입력한 다음 Escape를 눌러 지웁니다.
생명주기
onMount가 인터벌을 시작하고 정리 함수를 반환합니다. 마운트 해제 시 정리 함수가 실행되므로 다시 마운트할 때까지 카운트가 멈춥니다.
명시적 업데이트
count++는 변수만 변경합니다. 이 버튼이나 페이지의 다른 동작이 다음 update()를 호출하면 텍스트가 반영됩니다.
동적 값
이름을 수정해 보세요. 정적 텍스트는 요소를 만들 때 고정되며, 동적 텍스트는 update()마다 다시 계산됩니다. forceUpdate()는 트리를 다시 구성하므로 정적 텍스트도 반영됩니다.
update()
update()는 데이터가 바뀌지 않았더라도 모든 동적 값을 실행합니다. 이 페이지의 다른 데모를 사용해도 카운트가 증가합니다.
scope()
두 버튼 모두 항목을 추가하고 사용자 이름을 바꿉니다. update('cart')는 해당 스코프의 패널만 업데이트합니다.
when()
가장 먼저 참이 되는 조건을 사용합니다. 참인 조건이 없으면 .else()를 렌더링합니다. 새 분기는 처음부터 만듭니다.
list()
행은 객체 동일성으로 연결됩니다. 행의 체크박스를 선택한 다음 Reverse를 눌러 보세요. 체크박스를 포함한 같은 <li>가 이동합니다.
region() 및 into()
메인 리전과 사이드 리전이 있는 레이아웃을 외부에서 채웁니다. Home에 입력한 다음 대화 상자를 열었다 닫아도 텍스트가 유지됩니다. Article은 into() 한 번으로 두 리전을 채웁니다.
forceUpdate()
update()는 동적인 lang 행만 업데이트합니다. forceUpdate()는 App을 다시 호출해 같은 <h1>을 패치합니다. 명시적인 형식은 페이지 전체가 아닌 이 트리만 다시 구성합니다.
스타일링
3클래스 생성, 클래스 합성, 작은 테마 사용을 살펴봅니다.
폼
3일반 상태에 대한 함수로 검증을 처리합니다. 조작한 필드, 단계, 동적 행을 다룹니다.
SVG
27일반 데이터, 포인터 이벤트, update()로 구동하는 SVG 태그 빌더 기반 차트, 애니메이션, 도구, 게임입니다.
막대 차트
배열에서 직사각형입니다. y와 높이는 데이터의 함수이므로 update()는 막대를 이동합니다.
꺾은선형 차트
d가 점에서 생성되고 그라데이션 영역과 점당 하나의 원이 있는 경로입니다.
도넛 차트
슬라이스당 하나의 원입니다. 스트로크-대시해레이는 각각 링의 몫을 제공하고 스트로크-대시오프셋은 시작을 제공합니다.
SVG 애니메이션
건축가로서의 SMIL: animateSvg는 태양에 펄스를 주고, animateTransformSvg는 행성을 공전합니다. 동적 dur은 속도를 설정합니다.
게이지
스트로크-대시 오프셋으로 채워지는 호와 CSS 변환으로 회전하는 바늘입니다. 둘 다 하나의 숫자에 대한 함수입니다.
레이더 차트
5개 축에 5개 값이 있습니다. 모양은 데이터에서 d가 계산되는 하나의 경로이므로 update()는 이를 변형합니다.
히트맵
채우기 불투명도가 레벨을 따르는 직사각형 그리드입니다. 범프하려면 셀을 클릭하세요. titleSvg 하위는 툴팁입니다.
호버 툴팁
SVG 요소에 대한 포인터 이벤트입니다. onPointerEnter는 활성 포인트를 선택하고 툴팁 그룹이 해당 포인트로 이동합니다.
곡선 편집기
큐빅 베지어의 핸들을 드래그합니다. onPointerDown는 점을 선택하고 svg의 onPointerMove는 점을 이동하며 경로는 다음과 같습니다.
시계
손은 시간의 함수로 변환되는 선입니다. onMount는 틱을 시작하고 정리를 반환합니다.
아이콘 토글
CSS 전환을 통해 십자가 모양으로 변형되는 메뉴 아이콘과 클릭 시 시작되는 SMIL 애니메이션으로 팝업되는 하트입니다.
라이브 스트림
타이머에서 두 시리즈가 왼쪽으로 스크롤됩니다. 틱 하나가 슬라이드를 부드럽게 만들고 마우스를 올리면 모든 샘플을 읽을 수 있는 한 CSS 전환이 가능합니다.
캔들스틱 차트
40개의 슬롯이 자신의 촛불을 읽습니다. 기간을 변경하고, 평균을 전환하고, 숫자에 마우스를 올리거나, 라이브 캔들이 똑딱거리도록 놔두세요.
막대 차트 레이스
10개의 막대는 DOM를 떠나지 않습니다. 해당 순위는 translateY를 설정하므로 값이 변경됨에 따라 전환이 각 행으로 이동합니다.
누적 영역 차트
4개 밴드는 스택, 스트림 및 퍼센트 레이아웃 사이에서 변형됩니다. 계열을 숨기면 밴드의 두께가 0이 되므로 모든 경로가 모양을 유지합니다.
트리맵
드릴로 분석한 정사각형 레이아웃입니다. 측정항목을 전환하면 모든 셀이 새 상자로 이동하고 그룹을 클릭하면 해당 하위 항목이 교체됩니다.
라이브 히스토그램
샘플은 4개 배포판에서 쏟아집니다. 저장소는 모든 변경 사항을 다시 계산하고, 장착된 벨은 평균을 따르며, 슬라이더는 저장소 수를 설정합니다.
드로잉 패드
포인터 이벤트는 폴리라인을 그립니다. list()는 스트로크당 하나씩 렌더링하고 진행 중인 스트로크는 update()마다 증가합니다.
회전식 손잡이
사용자 정의 슬라이더: 포인터의 각도에 따라 값이 설정되고, 화살표 키가 단계적으로 이동하며, pathLength="100"은 값을 대시로 바꿉니다.
컬러 휠
각도에 따라 색상을 선택하고 거리에 따라 채도를 선택하세요. 90개의 웨지, 방사형 그라데이션 및 어두운 디스크가 휠을 만듭니다.
스피로그래프
바퀴가 링 내부에서 굴러가고 펜이 이를 따라갑니다. 각 프레임은 하나의 대시를 늘리고 해당 scope()만 업데이트합니다.
튀는 공
requestAnimationFrame 루프의 중력, 벽 및 충돌. 뒤로 당겼다가 놓아 공을 발사하세요.
끈끈한 방울
블러와 컬러 매트릭스 필터가 함께 녹습니다. 원의 흔적이 포인터를 따라갑니다.
힘 그래프
노드는 밀어내고, 링크는 당기고, 레이아웃은 정지될 때까지 냉각됩니다. 노드를 드래그하거나 노드를 클릭하여 자식을 성장시킵니다.
브러시 및 줌
개요에서 범위를 브러싱하여 위 차트를 확대/축소합니다. 브러시를 따라가는 clipPath는 선택 항목에 색상을 지정합니다.
틱택토
컴퓨터를 재생합니다. when()는 각 마크를 추가하고 대시의 CSS 애니메이션이 마크를 그립니다.
원형 텍스트
배지를 입력하세요. textPath는 원 주위로 텍스트를 구부리고 textLength는 이를 정확히 한 바퀴에 맞춥니다.
라우팅
6라우트 테이블, 매칭, 활성 라우트, 레이어, 로더를 다룹니다. nuclo-router는 별도 패키지입니다: npm install nuclo nuclo-router.
라우팅된 앱
프레임에서 실행되는 자체 라우터가 있는 실제 앱: 경로 테이블, 하나의 outlet(), 일반 링크, 보류 상태 및 404. 주변을 클릭한 다음 뒤로를 사용합니다.
중첩 경로
Docs는 하위 경로가 있는 레이아웃입니다. 주제는 outlet()에서 렌더링되며 ./topic 링크는 레이아웃의 경로에 대해 확인됩니다. 메모를 입력한 다음 주제를 전환하세요. 레이아웃은 다시 작성되지 않습니다.
루트 로더
게시물 페이지는 페이지가 빌드되기 전에 실행되는 load()를 내보냅니다. 기다리는 동안 router.pending를 살펴보고 깨진 게시물에 오류가 발생할 때 재시도를 통해 오류 상태를 확인하세요.
레이어
주문 양식은 고객 페이지를 레이어로 푸시하고 결과를 기다립니다. 양식은 다시 렌더링되지 않으므로 해당 메모는 그대로 유지됩니다. 저장은 푸시를 해결하고, 취소 또는 뒤로는 푸시를 해제합니다.
다중 라우터 및 로딩
라우터 2개, 스피너 2개. 상점 레이아웃과 해당 섹션에는 모두 load()가 있습니다. 하나의 router.pending 아래에서 병렬로 실행됩니다. 사이드바에는 onNavigate에서 새로 고쳐진 자체 로딩 플래그를 사용하여 생성되었지만 시작되지 않은 자체 라우터가 있습니다.
패턴 매칭
정적, :param 및 *rest 패턴과 두 상위 항목 아래에 마운트된 섹션 테이블. 경로를 입력하고 아무것도 로드하지 않고 해결되는 match()를 살펴보세요.
앱
15전체 화면으로 실행되는 큰 프로그램과 탭에서 볼 수 있는 실제 소스 코드입니다. 창이 있는 데스크톱, 데이터 그리드, 채팅, 게임, 편집기, 자체 상태를 관리하는 라이브러리를 살펴봅니다.
페이지 빌더
페이지에 직접 쓰고, 그립을 드래그하여 블록 순서를 바꾸거나 레이아웃으로 이동하고, /를 눌러 삽입하고, 마우스 오른쪽 버튼을 클릭하여 작업을 수행하세요. 그리드 및 플렉스 레이아웃 스타일을 지정하고, 편집을 실행 취소하고, 휴대폰 크기로 미리 보고, HTML를 내보냅니다.
알고리즘 스테퍼
엔진은 일반 JavaScript입니다. 즉, 모든 단계 후에 배열을 변경하고 산출하는 생성기입니다. 플레이어는 next() 및 update()를 호출합니다. 막대는 동일한 개체에 대한 list()이므로 스왑은 두 요소를 이동합니다.
칸반 보드
팀 보드: 작업 추가, 사람에게 할당, 대화 상자에서 편집, 사람별 필터링, 검색, 열 사이 드래그 및 삭제 실행 취소. 열과 카드는 동일한 객체의 일반 배열입니다. 모든 움직임은 splice()입니다. 행은 ID와 일치하므로 카드를 드래그, 정렬, 할당 또는 편집하면 해당 요소가 재사용됩니다. 화면의 마운트 수가 이를 증명합니다.
three.js 검사기
자체 상태를 소유하는 라이브러리입니다. 패널은 three.js 개체에서 바로 위치, 색상 및 플래그를 읽고 편집 내용을 다시 작성합니다. 렌더 루프는 프레임당 한 번씩 update()를 호출합니다. 아무것도 미러링되지 않습니다.
무한 스크롤
끝이 없는 피드: 빠른 가짜 fetch()는 모든 페이지를 즉석에서 하나의 일반 배열로 생성합니다. 뷰포트 근처의 행만 DOM에 있습니다. list()는 두 개의 스페이서 사이에 posts.slice(start, end)를 렌더링하므로 페이지는 십만 개의 게시물에서도 밝게 유지됩니다. 실제 끝에 있는 파수꾼은 페이지가 보이기 전에 다음 페이지를 요청합니다.
데스크탑
파일, 메모, 터미널, 계산기, 타이머, Kanban 보드, 재무 및 달력을 갖춘 작업용 데스크탑입니다. 브라우저에 저장된 하나의 공유 시뮬레이션 디스크에서 폴더를 생성 및 구성하고, 메모를 편집하고, 셸 명령을 사용하세요. 키보드에서 직접 계산기에 입력하고, 터미널의 아무 곳이나 클릭하여 입력 라인에 초점을 맞추고, 보드의 열 사이에 카드를 드래그하거나, 재무 스프레드시트에 원장을 유지하고 차트가 움직이는 것을 지켜보세요. 원장은 IndexedDB에 있습니다. Windows는 이동, 크기 조정, 앱 간 전환 시 상태를 유지합니다. 실행 중인 타이머는 작업 표시줄 트레이를 into()로 채웁니다.
노드 그래프
수학, 비교 및 If 노드를 통해 숫자, 텍스트 및 스위치를 연결하고 입력할 때 모든 값이 업데이트됩니다. 함수도 그래프입니다. 해당 입력 및 출력 노드는 모든 호출의 포트이며 호출은 자체 함수의 이름을 지정할 수 있으므로 탈출구로 If를 사용하여 계승 및 합계가 재귀됩니다. 엔진은 일반 JavaScript입니다. 각 노드는 입력을 요청하는 생성기이며 하나의 루프가 자체 스택에서 이를 구동하므로 sum(50000)는 JavaScript 호출 스택을 건드리지 않고 약 10분의 1초 안에 5만 호출을 중첩합니다. 단계 예산만이 탈출구가 없는 재귀를 중지합니다. 드래그하면 x와 y를 쓰고 캔버스 범위만 업데이트합니다. 실행 횟수는 그래프가 이동을 위해 실행되지 않음을 보여줍니다.
데이터 그리드
10,000개 이상의 일반 행 개체가 넘는 작업 테이블입니다. 검색, 필터, 정렬 및 페이징은 배열에 대한 일반 함수이며 테이블 본문은 현재 페이지에 대한 list()입니다. 행은 ID와 일치하므로 정렬하면 페이지에 남아 있는 행이 이동되고 편집된 행은 어디에서나 동일한 개체입니다. 행 빌드 수가 이를 증명합니다.
채팅
기록, 커서, 입력, 초안 및 스크롤 위치 등 각각 하나의 일반 개체인 3개 채널이 있는 채팅이므로 전환하면 모든 채널이 그대로 유지되고 update("chat-sidebar")는 읽지 않은 배지만 새로 고칩니다. 추가된 높이만큼 성장하는 unshift() 및 scrollTop를 통해 기록이 영원히 위로 로드됩니다. 서버에 메시지가 표시되기 전에 메시지가 표시되고 send()는 동일한 개체를 패치하며 재시도, 편집, 삭제 및 반응은 해당 행을 다시 작성하지 않습니다. 메시지는 코드, 굵게, 링크 및 @멘션을 렌더링합니다.
라이브 대시보드
카드는 초당 20회에서 초당 1회까지 다양한 속도로 새로 고침됩니다. 각 카드는 scope()이고 타이머는 해당 카드의 ID로 update()를 호출하므로 틱은 해당 카드만 평가합니다. 모든 동적 값은 화면에서 계산됩니다. 일반 update()로 전환하면 시계가 초당 약 100번 평가되어 한 번 변경됩니다.
픽셀 편집기
그림은 1024개의 색상 문자열로 구성된 하나의 일반 배열이며 각 셀은 여기에서 해당 색상을 읽습니다. 스트로크는 배열에 쓰고 update()를 호출합니다. 종료되면 편집자는 slice()를 사용하여 복사본을 유지합니다. 실행 취소, 다시 실행 및 기록의 모든 단계 list()는 이전 어레이를 다시 되돌립니다. 저장도 없고 변경 불가능한 데이터도 없습니다.
스네이크
게임 루프는 일반 개체에 대해 step()를 호출한 다음 틱당 한 번씩 update()를 호출하는 타이머입니다. 뱀은 셀 개체의 list()이며 꼬리 개체의 각 틱이 새 머리가 되므로 하나의 요소가 움직이고 아무것도 생성되지 않습니다. 세그먼트로 만들어진 개수는 뱀이 먹을 때만 올라갑니다. keyframes() 애니메이션과 함께 음식이 등장합니다.
스텝 시퀀서
자체 시계를 소유한 라이브러리입니다. Web Audio는 자체 타임라인에 앞서 모든 메모를 예약하고 패턴은 그리드가 뒤집히고 스케줄러가 읽는 부울의 일반 2D 배열이므로 다음 패스에서 클릭 소리가 들립니다. 플레이헤드는 가청 단계가 변경될 때 scope()만 업데이트합니다. 오디오는 첫 번째 재생에서 시작되고 마운트 정리에서 닫히므로 예제를 종료하면 사운드가 중지됩니다.
로케일 전환기
모든 라벨은 단일 언어 앱처럼 작성된 정적 값이므로 update()는 다시 읽지 않습니다. 장바구니를 클릭하면 수량과 합계만 새로 고침됩니다. 언어를 전환하면 이 트리에서 forceUpdate()가 호출되며, 이는 컴포넌트를 다시 실행하고 포함된 동일한 요소인 lang 및 dir을 패치합니다. 돈, 복수형, 날짜 및 목록은 Intl에서 나오며 카트와 입력한 쿠폰은 스위치 후에도 유지됩니다.
테마 편집기
작은 컴포넌트 라이브러리: createCss()는 토큰의 이름을 지정하고 variants()는 토큰에서 버튼, 배지, 카드, 입력, 경고 및 스위치를 만듭니다. 토큰은 CSS 변수이므로 모든 클래스가 한 번 컴파일됩니다. 각 컨트롤은 일반 테마 개체를 작성하고 하나의 스타일 요소의 텍스트를 다시 작성하는 update()를 호출합니다.