React로 만드는 화면

NoWayOS에는 브라우저가 없고, 앞으로도 없을 것입니다. 그게 핵심입니다. 그래도 디자이너와 프런트엔드 개발자는 쓰던 도구를 그대로 쓸 수 있습니다. Screen Compiler는 선언된 부분 집합에 맞춰 TSX로 작성한 React 화면을 NoWayOS UI 런타임용 Rust로 변환합니다. 빌드할 때 여러분의 컴퓨터나 CI에서 실행되며, 장치에는 절대 실려 가지 않습니다.

이것을

export function WelcomeScreen({ onStart, onHelp }: WelcomeProps) {
 return (
 <Screen>
 <Column gap={SPACE_SM} padding={SPACE_LG}>
 <Text id="title">Welcome</Text>
 <Text>Touch Start to begin.</Text>
 <Spacer />
 <Button id="start" onPress={onStart}>Start</Button>
 <Button onPress={onHelp}>Help &amp; accessibility</Button>
 </Column>
 </Screen>
 );
}

이렇게

pub fn build<B: ui::UiBuilder>(b: &mut B) -> Result<Nodes<B::Node>, B::Error> {
 let n1 = b.text("Welcome")?; // welcome.tsx:17:9 <Text>
 let n2 = b.text("Touch Start to begin.")?; // welcome.tsx:18:9 <Text>
 let n4 = b.spacer(None)?; // welcome.tsx:20:9 <Spacer>
 let n5 = b.button("Start", actions::START)?; // welcome.tsx:21:9 <Button>
 let n6 = b.button("Help & accessibility", actions::HELP)?; // welcome.tsx:24:9 <Button>
 let n0 = b.column(ui::Layout::new().gap(super::tokens::SPACE_SM).padding(super::tokens::SPACE_LG), &[n1, n2, n4, n5, n6])?; // welcome.tsx:16:7 <Column>
 Ok(Nodes { root: n0, title: n1, start: n5 })
}

각 노드는 자신이 나온 TSX의 줄과 열을 가리킵니다. 변환된 화면은 NoWayOS의 렌더러가 그리며, 승인된 이미지와 픽셀 단위로 일치해야 합니다. (저장소의 fixtures/welcome.tsx와 그로부터 생성된 Rust를 줄여 실었습니다.)

변환하는 것

Screen Compiler 키트로 만든 화면: Screen, Column, Row, Text, Button, TextInput, Checkbox, RadioGroup, Spacer, Card, Notice, HeaderBar, ProgressBar, Icon. 그 밖에 상수로 쓰는 디자인 토큰, 액션이 되는 콜백 props, 애플리케이션이 실행 중에 설정하는 텍스트, 애플리케이션이 보이거나 숨기는 부분({cond && <X/>})도 변환합니다.

정확하거나, 아예 하지 않거나. 부분 집합 밖의 것은 비슷하게 흉내 내지 않고, 파일, 줄, 열을 밝혀 거부합니다. 같은 화면은 어떤 컴퓨터에서든 바이트 단위까지 같은 Rust를 만듭니다. 생성된 코드에는 unsafe도, unwrap도, panic도 없습니다.

해 보기

Screen Compiler의 개발 컨테이너와 계약 검사는 NoWayOS에서 가져오므로, 두 저장소를 나란히 클론하십시오.

mkdir nowayos-work && cd nowayos-work
git clone https://github.com/NoWayOS/nowayos.git
git clone https://github.com/NoWayOS/screen-compiler.git screen-compiler
make -C nowayos container # the dev image, once
cd screen-compiler
make test # unit, property, snapshot and command-line tests
make run ARGS="check fixtures/welcome.tsx" # check one screen against the subset
make contract-check # build every screen against NoWayOS's UI, and draw it

승인된 이미지

변환된 모든 화면에는 승인된 이미지가 있습니다. 화면이나 NoWayOS의 레이아웃, 그리기 방식을 바꿔 화면 모습이 달라지면, screen-compiler에서 make bless-images로 이미지를 다시 그리십시오. 커밋하기 전에 사람이 하나하나 보고 승인합니다. nowayos 쪽에서는 make screen-compiler-check로 어떤 변경이 어떤 승인된 이미지를 바꾸게 되는지 확인할 수 있습니다.

자신의 화면에만 쓰십시오

Screen Compiler는 샌드박스가 아니라 빌드 도구입니다. 신뢰하는 코드만 컴파일하듯, 신뢰하는 TSX만 변환하십시오.

라이선스

Screen Compiler는 MIT입니다. 여러분의 화면에서 생성된 Rust 코드는 여러분의 것이며, 원하는 대로 라이선스할 수 있습니다.