API
मॉड्यूल
एक NSH ऐप अपनी ज़रूरत की हर चीज़ मॉड्यूल के एक छोटे से समूह से इम्पोर्ट करता है। ये सभी नेटिव हैं: रिएक्टिव ग्राफ़, रेंडरर और हर मॉड्यूल रनटाइम के अंदर Rust में इम्प्लीमेंट किए गए हैं, और बंडलर import ... from "nsh/..." को आपके बंडल में कोड कॉपी करने के बजाय इम्पोर्ट के रूप में ही रखता है। आपके बंडल में केवल आपका अपना कोड होता है।
import { createAnimatedValue, mount, signal, windowSize } from "nsh";
import { Button } from "nsh/base";
import { TabBar } from "nsh/mobile";
#तीन लेयर
NSH का UI तीन लेयर में बना है, ठीक GPUI Kit की तरह (gpui, gpui-base, gpui-component):
| लेयर | मॉड्यूल | ऐप को यह क्या देती है |
|---|---|---|
| प्रिमिटिव | nsh, nsh/mobile, nsh/desktop | रिएक्टिविटी, होस्ट एलिमेंट, लेआउट, लिस्ट, कैनवास, एनिमेशन, जेस्चर, डिवाइस की जानकारी और प्लेटफ़ॉर्म के अपने API |
| बेस कंपोनेंट | nsh/base | बिना स्टाइल वाले कंपोनेंट जो व्यवहार, स्टेट, फ़ोकस और एक्सेसिबिलिटी संभालते हैं: बटन, Markdown और HTML डॉक्यूमेंट, नेविगेशन स्टैक और डायलॉग, तथा सिस्टम के डायलॉग, हर प्लेटफ़ॉर्म पर |
| कंपोनेंट लाइब्रेरी | आपके ऐप की अपनी, या समुदाय की कोई लाइब्रेरी | लुक वाले बटन, कार्ड, रो और स्क्रीन |
ऐप का लुक ऐप का अपना होता है। उसकी कंपोनेंट लाइब्रेरी तीसरी लेयर है: वे कंपोनेंट जो वह होस्ट एलिमेंट और nsh/base से लिखता है और जिन्हें style, Tailwind क्लास और अपनी थीम से स्टाइल करता है, वे Rust कंपोनेंट जो वह अपने क्रेट में शिप करता है, या समुदाय द्वारा इसी आधार पर प्रकाशित कोई लाइब्रेरी।
कोई सर्व-समावेशी मॉड्यूल नहीं है: हर API ठीक एक ही जगह रहता है। मोबाइल प्लेटफ़ॉर्म के API nsh/mobile (iOS और Android) में हैं और डेस्कटॉप के API nsh/desktop (macOS, Windows, Linux) में; दोनों को हर प्लेटफ़ॉर्म पर इम्पोर्ट किया जा सकता है, इसलिए एक ही बंडल हर जगह चलता है (अन्य प्लेटफ़ॉर्म पर इनके कॉल तुरंत लौट आते हैं, और platform.os बताता है कि आप किस प्लेटफ़ॉर्म पर हैं)।
टाइप रनटाइम से जनरेट किए जाते हैं: nsh init, nsh build, nsh dev और nsh test आपके ऐप के बगल में .nsh/types लिखते हैं, इसलिए TypeScript डिक्लेरेशन हमेशा उस रनटाइम से मेल खाते हैं जिसके साथ आप बिल्ड करते हैं (प्रोजेक्ट संरचना देखें)।
#सभी मॉड्यूल
| मॉड्यूल | एक्सपोर्ट | पेज |
|---|---|---|
nsh | signal, computed, effect, batch, untracked, cleanup, context, split, mount, ErrorBoundary; प्रिमिटिव View, Text, Scroll, List, Image (Image.getSize, Image.prefetch के साथ), Canvas (Path2D, CanvasRenderingContext2D, CanvasGradient के साथ), WebView, Video; safeArea, safeAreaInsets; Keyboard, keyboardFrame; एनिमेशन (createAnimatedValue, AnimatedValue, AnimatedNode, Animated, Easing, LayoutAnimation); एनवायरनमेंट (windowSize, colorScheme, setColorScheme, fontScale, pixelRatio, locale, platform, openUrl); PanResponder; Clipboard; Picker; Storage; host (available, call, on, साथ ही नेटिव SDK params और post); keymap (कीबोर्ड शॉर्टकट: mod+k, ctrl+shift+p, …); nativeComponent, nativeModule (वे कंपोनेंट और फ़ंक्शन जिन्हें एम्बेड करने वाला ऐप रजिस्टर करता है); एक्सेसिबिलिटी (announce, setAccessibilityFocus, screenReaderEnabled, reduceMotion); एलिमेंट, स्टाइल, इवेंट और JSX के टाइप (ViewRef, InputRef, …, ViewStyle, …) | nsh |
nsh/base | Button, Input; TextView; createNavStack, NavStack, NavPage, Dialog; AlertDialog | nsh/base |
nsh/mobile | isAvailable, TabBar (सिस्टम का टैब बार, iOS और Android), InputAccessoryView (iOS), BackHandler (Android) | nsh/mobile |
nsh/desktop | isAvailable, Window (टाइटल, टाइटल बार, मैक्सिमाइज़, फ़ुल स्क्रीन), titleBar, Menu (एप्लिकेशन मेनू, कॉन्टेक्स्ट मेनू) | nsh/desktop |
| स्टैंडर्ड मॉड्यूल | buffer, console, crypto, fs/promises, net, os, path, process, url, websocket, zlib | स्टैंडर्ड मॉड्यूल |
| ग्लोबल | fetch, URL, TextEncoder, Blob, FormData, AbortController, Intl, टाइमर, console, requestAnimationFrame, … (इम्पोर्ट की ज़रूरत नहीं) | ग्लोबल API |
वे रेफ़रेंस पेज जो मॉड्यूल नहीं हैं:
| पेज | क्या कवर करता है |
|---|---|
| स्टाइल रेफ़रेंस | हर स्टाइल की, उसका टाइप और अर्थ |
| Tailwind रेफ़रेंस | वे Tailwind यूटिलिटी और वेरिएंट जिन्हें class स्वीकार करता है |
#होस्ट एलिमेंट
होस्ट एलिमेंट ऐसे कंपोनेंट हैं जिन्हें बाकी सब की तरह ही इम्पोर्ट किया जाता है: View, Text, Scroll, Image, List, Canvas, WebView, Video और Overlay nsh से, बेस कंपोनेंट (Button, Input, Dialog, NavStack, NavPage) nsh/base से, InputAccessoryView nsh/mobile से। केवल If और Each ग्लोबल हैं। कंपाइलर एलिमेंट को उसी जगह बना देता है, इसलिए इम्पोर्ट पर रनटाइम में कोई लागत नहीं आती। इनके प्रॉप्स एलिमेंट के अंतर्गत डॉक्यूमेंट किए गए हैं।