v0.3.0 — Phase 3: 검증한다 · 되돌린다 · 시연한다
루프를 신뢰할 수 있게 만드는 네 가지가 들어갔습니다.
props 스키마 자동 추출
npx ie element schema --check # 드리프트 시 종료코드 1이 스키마는 문서용이 아닙니다 — 페이지 조립이 이걸 읽어 실 컴포넌트에 값을 넘깁니다. 코드와 어긋나면 페이지가 없는 prop 을 넘기거나 있는 prop 을 못 채웁니다.
TypeScript 컴파일러 API 대신 구문 파싱을 씁니다. 컴파일러를 쓰면 CLI 가 소비 프로젝트의 tsconfig·경로 별칭·타입 의존을 전부 해석할 수 있어야 하고 7MB 런타임 의존이 붙습니다. 필요한 건 한 파일 안 Props 인터페이스의 표면뿐입니다.
검증 게이트
npx ie element validate --animation-strict색 리터럴 · Tailwind 팔레트 클래스 · 스케일 밖 임의값 · 알 수 없는 st-* 토큰(오타는 색이 안 나오는 것으로 끝나 발견이 늦습니다) · 엔트리↔코드 쌍 · 데모 존재.
애니메이션 계약 — "이 컴포넌트에 애니메이션 붙여줘"에 답하려면 어떤 효과를 어디에 얹을 수 있는지 알아야 합니다. DOM 셀렉터로 추측하면 포털이나 마크업 변경에 조용히 깨지므로, 레지스트리에 선언된 것만 인정합니다. part/list/text 는 증거를 요구하고, behavior 는 reducedMotion 을 반드시 정해야 하며, 자유 수치 파라미터는 막습니다.
git SHA 복원
npx ie element restore stat-card --to <sha>히스토리에 sha 를 남긴 이유가 여기 있습니다. revert 가 아니라 checkout <sha> -- <paths> 를 쓰는데, 같은 커밋에 다른 컴포넌트가 섞여 있을 수 있기 때문입니다. 작업 트리가 더러우면 멈추고, 결과를 새 커밋으로 남겨 복원 자체도 되돌릴 수 있습니다.
흐름 시연
npx ie flow create "온보딩"
npx ie flow add 온보딩 --screen 대시보드
npx ie flow link 온보딩 --from "대시보드:P-chart" --to 상세
npx ie flow check 온보딩연결은 노드 통짜이거나 컴포넌트가 선언한 type:"action" 콜백에 붙습니다. value 까지 구분하므로 탭 3개를 각각 다른 화면으로 보낼 수 있습니다 — DOM 셀렉터와 달리 포털·라벨 보간에 영향받지 않는, 컴포넌트의 공개 API 이기 때문입니다.
편입 시점 버전을 박제합니다. 페이지를 리파인해도 진행 중인 시연이 흔들리지 않습니다. flow check 는 사라진 노드(리파인 중 id 를 바꾸면 조용히 끊깁니다)와 닿지 않는 화면을 미리 잡습니다.
테스트 199건.
다음
영문 문서 · 예제 앱 · 1.0.0 — Phase 4.