Mador - Make any DOM reactive with a tiny 80-line Proxy state tuple
Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
Mador는 기존 DOM에 반응성을 더하는 초경량 라이브러리입니다. 프레임워크 없이도 상태를 관리하고 DOM에 바인딩할 수 있어, 간단한 페이지에 적합합니다. 런타임은 약 855바이트에 불과하며, ES 모듈로 제공되어 CDN에서 바로 사용할 수 있습니다. 상태 변경은 배치 처리되며, DOM 요소가 사라지면 관련 바인딩도 자동으로 정리됩니다. 복잡한 컴포넌트 라이프사이클 없이도 필요한 반응성을 쉽게 구현할 수 있습니다.
때로는 페이지에 프레임워크가 필요 없습니다. 이미 HTML과 JavaScript가 있지만, 약간의 반응성만 필요한 경우가 있죠. Mador는 바로 그런 상황을 위해 만들어졌습니다.
HN 토론
33- moostee
가독성을 위해 최적화된 제안 변형...
```js
import mador from "mador";
const [read, write] = mador({ count: 1 });
read(".counter", ctx => ctx.el.textContent = ctx.count);
write(".increment", "click", ctx => ctx.count++);
write(ctx => ctx.count = 0);
```
## 읽기
초기화 중 읽기 함수가 실행될 때 의존성이 자동으로 감지됩니다.
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## 쓰기
즉시:
```js
write(ctx => ctx.count++);
```
이벤트 트리거:
```js
write(".increment", "click", ctx => ctx.count++);
```
이벤트 쓰기는 `ctx.el`과 `ctx.event`를 노출합니다.
- codedokode
문법이 저에게는 조금 장황해 보입니다. 그리고 'read'나 'write' 같은 함수 이름도 혼란스럽습니다. 'read' 함수는 값을 읽기 위한 것이 아니잖아요. 바인딩을 위해 단일 함수를 사용할 수 없을까요? 예를 들어 이렇게 (그리고 이름을 'bind'로):
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // DOM 업데이트 대기열에 추가
또한,
> Mador는 ES 모듈로 배포됩니다.
이것은 디스크에서 연 페이지에서는 사용할 수 없고, 사용자가 HTTP 서버를 설정해야 한다는 뜻인데, 이는 시간이 많이 걸리고 주의를 분산시킵니다. 또한 앱을 HTML 파일 하나로 배포할 수도 없습니다.
- bedroom_jabroni
JS에서 신호 프리미티브의 독립형 플러그 앤 플레이 구현은 많습니다. 몇 가지 예를 들면 preact/signals, vue reactivity 등이 있고, 심지어 언어 기능에 대한 TC39 제안도 있습니다. 이것은 다른 방식으로 차별화하거나 재창조하려는 것입니까?
- afavour
성능이 어떤지 궁금합니다. 제 기억 속 어딘가에 프록시가 성능에 좋지 않다는 믿음이 있는데, 그게 근거가 있는지 잘 모르겠습니다 (아니면 한때 그랬지만 지금은 아닐 수도 있습니다).
하지만 매우 영리한 아이디어입니다. 마음에 듭니다.
- abosalehworld
저는 이 미니멀리스트 접근 방식이 마음에 듭니다. 대규모 프레임워크의 무거운 오버헤드 없이 상태 관리를 위해 Proxy를 사용하는 것은 정말 우아합니다. 80줄 미만으로 유지한 것이 인상적입니다. 훌륭한 작업입니다!