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 बनाता है, वह आपका है, आप उसे जैसे चाहें लाइसेंस करें।