Text.js 최신 소식
Text.js 팀의 릴리스 소식과 엔지니어링 노트.
Text.js 1.0
Text.js 1.0은 안정 버전이에요. 프레임마다 console.log 하나로 DevTools 콘솔에 React 19와 App Router 앱을 렌더링해요.
Adam뒤집힌 아키텍처
React 커밋이 DevTools의 console.log 호출 하나가 되는 과정.
AdamTurbolog: 깜빡임 제거
프레임마다 콘솔을 지우면 DevTools 페인트의 70~81%에서 화면이 비어 보였어요. 프레임을 덧붙이자 1%로 줄었고, 모두 첫 프레임에서 발생했어요.
Adam콘솔의 오른쪽에서 왼쪽으로 쓰는 텍스트
Text.js는 유니코드 양방향 알고리즘을 구현하고 BidiTest.txt의 770,241개 테스트 케이스를 모두 통과해요. 히브리어와 아랍어를 시각적 순서로 렌더링하며, 아랍어 자형 처리를 적용하고 셀 격자에 맞춰 정렬해요.
AdamuseKeymap으로 키보드 단축키 설정
useKeymap으로 바인딩을 한 번 선언하면 Text.js가 키 입력을 전달하고, ? 도움말 화면에 나열하고, 푸터에 표시하고, Ctrl+K 명령 팔레트에 추가해요.
Adam콘솔에서의 서버 렌더링
Text.js 0.4는 서버에서 페이지를 렌더링하고 프레임을 셀 변경분으로 콘솔에 스트리밍할 수 있어요. 정적 라우트는 첫 프레임을 HTML에 프리렌더링해요.
AdamText.js의 FIGlet 글꼴
@textjs/font는 FIGlet .flf 글꼴을 파싱하고 figlet 프로그램처럼 배치해요. 테스트에서 figlet 2.2.5로 기록한 출력 273개를 재현하며, 모두 일치해요.
AdamYoga로 콘솔 레이아웃 구성
Text.js는 포인트 배율을 1로 설정해 WebAssembly에서 Yoga를 실행하므로 모든 상자가 정수 단위 셀에 맞춰져요. 텍스트는 Intl.Segmenter로 나누고 셀 단위로 측정해요.
AdamText.js 0.1
Text.js 0.1은 DevTools 콘솔에서 렌더링하는 앱에 React 19 리컨실러, Yoga 레이아웃, 파일 시스템 기반 App Router를 제공해요.
Adamconsole.log에 React 렌더링
Text.js는 프레임마다 스타일이 적용된 console.log 호출 하나로 DevTools 콘솔에 React 앱을 그려요.
Adam