Module

Eine NSH-App importiert alles, was sie verwendet, aus einer kleinen Menge von Modulen. Sie sind alle nativ: Der reaktive Graph, der Renderer und jedes Modul sind in Rust innerhalb der Runtime implementiert, und der Bundler belässt import ... from "nsh/..." als Imports, statt Code in dein Bundle zu kopieren. Dein Bundle enthält nur deinen eigenen Code.

import { createAnimatedValue, mount, signal, windowSize } from "nsh";
import { Button } from "nsh/base";
import { TabBar } from "nsh/mobile";

#Drei Schichten

Die UI von NSH ist in drei Schichten aufgebaut, genau wie die von GPUI Kit (gpui, gpui-base, gpui-component):

Schicht	Module	Was sie einer App bietet
Primitive	nsh, nsh/mobile, nsh/desktop	Reaktivität, die Host-Elemente, Layout, Listen, Canvas, Animation, Gesten, Geräteinformationen und die plattformeigenen APIs
Basiskomponenten	nsh/base	Ungestylte Komponenten, die Verhalten, Zustand, Fokus und Barrierefreiheit verantworten: ein Button, Markdown- und HTML-Dokumente, Navigationsstacks und Dialoge sowie die Systemdialoge, auf jeder Plattform
Komponentenbibliothek	die deiner App oder eine aus der Community	Buttons, Karten, Zeilen und Screens mit eigenem Look

Das Erscheinungsbild einer App gehört der App selbst. Ihre Komponentenbibliothek ist die dritte Schicht: Komponenten, die sie aus den Host-Elementen und nsh/base schreibt und mit style, Tailwind-Klassen und ihrem Theme gestaltet, Rust-Komponenten, die sie in einem eigenen Crate ausliefert, oder eine Bibliothek, die die Community auf derselben Grundlage veröffentlicht.

Es gibt kein Sammelmodul: Jede API befindet sich an genau einer Stelle. Die APIs der mobilen Plattformen liegen in nsh/mobile (iOS und Android) und die der Desktops in nsh/desktop (macOS, Windows, Linux). Beide lassen sich auf jeder Plattform importieren, sodass ein Bundle überall läuft (auf anderen Plattformen kehren ihre Aufrufe sofort zurück, und platform.os verrät dir, auf welcher Plattform du dich befindest).

Typen werden aus der Runtime generiert: nsh init, nsh build, nsh dev und nsh test schreiben .nsh/types neben deine App, sodass die TypeScript-Deklarationen stets zur Runtime passen, mit der du baust (siehe Projektstruktur).

#Alle Module

Modul	Exporte	Seite
nsh	signal, computed, effect, batch, untracked, cleanup, context, split, mount, ErrorBoundary; die Primitive View, Text, Scroll, List, Image (mit Image.getSize, Image.prefetch), Canvas (mit Path2D, CanvasRenderingContext2D, CanvasGradient), WebView, Video; safeArea, safeAreaInsets; Keyboard, keyboardFrame; Animation (createAnimatedValue, AnimatedValue, AnimatedNode, Animated, Easing, LayoutAnimation); die Umgebung (windowSize, colorScheme, setColorScheme, fontScale, pixelRatio, locale, platform, openUrl); PanResponder; Clipboard; Picker; Storage; host (available, call, on, sowie native SDK params und post); keymap (Tastenkürzel: mod+k, ctrl+shift+p, …); nativeComponent, nativeModule (Komponenten und Funktionen, die die einbettende App registriert); Barrierefreiheit (announce, setAccessibilityFocus, screenReaderEnabled, reduceMotion); die Typen für Elemente, Styles, Events und JSX (ViewRef, InputRef, …, ViewStyle, …)	nsh
nsh/base	Button, Input; TextView; createNavStack, NavStack, NavPage, Dialog; AlertDialog	nsh/base
nsh/mobile	isAvailable, TabBar (die Tab-Leiste des Systems, iOS und Android), InputAccessoryView (iOS), BackHandler (Android)	nsh/mobile
nsh/desktop	isAvailable, Window (Titel, Titelleiste, Maximieren, Vollbild), titleBar, Menu (Anwendungsmenü, Kontextmenüs)	nsh/desktop
Standardmodule	buffer, console, crypto, fs/promises, net, os, path, process, url, websocket, zlib	Standardmodule
Globals	fetch, URL, TextEncoder, Blob, FormData, AbortController, Intl, Timer, console, requestAnimationFrame, … (ohne Import)	Globale APIs

Referenzseiten, die keine Module sind:

Seite	Inhalt
Style-Referenz	Jeder Style-Schlüssel, sein Typ und seine Bedeutung
Tailwind-Referenz	Die Tailwind-Utilities und -Varianten, die class akzeptiert

#Host-Elemente

Die Host-Elemente sind Komponenten, die wie alles andere importiert werden: View, Text, Scroll, Image, List, Canvas, WebView, Video und Overlay aus nsh, die Basiskomponenten (Button, Input, Dialog, NavStack, NavPage) aus nsh/base, InputAccessoryView aus nsh/mobile. Nur If und Each sind Globals. Der Compiler erzeugt die Elemente direkt an Ort und Stelle, sodass die Imports zur Laufzeit nichts kosten. Ihre Props sind unter Elemente dokumentiert.