jetz

Jetz는 Jetpack Compose에서 영감을 받아 선언적 JavaScript로 반응형 웹 인터페이스를 구축하기 위한 조합 가능한 JavaScript 프레임워크입니다. 개발자는 JSX, 빌드 시 컴파일, 템플릿 언어에 의존하지 않고 간단한 함수 호출(예: div, button, p)로 DOM 트리를 구성할 수 있습니다. 주요 기능은 다음과 같습니다: - 선언적 UI 구성: HTML 요소가 조합 가능한 JavaScript 함수로 내보내집니다. 요소는 문자열, 숫자, 자식 요소, 객체(속성/프로퍼티용), CSS 헬퍼, 반응형 상태를 인수로 받습니다. - 반응형 상태 관리: 세밀한 단일 값 상태를 위한 stateOf, localStorage와 동기화되는 상태를 위한 rememberOf, 자동 추적 파생 값을 위한 computed. - 컴포넌트 시스템: 컴포넌트를 함수로 정의하거나 Component를 확장하는 클래스로 정의할 수 있으며, 라이프사이클 훅(onCreate, onMount, onUpdate, onDestroy)을 지원합니다. - 반응형 컬렉션: 관찰 가능한 배열을 위한 listOf와 sequenceOf, 키 기반 목록 재조정과 O(1) DOM 요소 재활용을 위한 loop. - 조건부 렌더링: 선언적 분기 전환을 위한 _if, _elseif, _else, ifElse. - 양방향 데이터 바인딩: 입력 요소를 상태와 동기화하는 bind 프로퍼티. - 라우팅 및 내비게이션: Router, route, link, 라우트 미들웨어/가드를 사용한 클라이언트 측 SPA 라우팅. - 세션 상태: sessionStorage를 기반으로 하는 반응형 키-값 저장소를 위한 JetzSession과 sessionOf. - DOM 유틸리티: 요소에 find, findAll, attr, addClass와 같은 유연한 헬퍼 메서드. - 부수 효과: 정리를 포함한 자동 추적 효과를 위한 effect. 이 프레임워크는 Rspack으로 번들링되며 npm 패키지(@daevoft/jetz)로 배포됩니다.