PRNext 0.1.17: Entwicklertools und dauerhaftes Caching

#Entwicklungstools auf Ihrer Seite

Über das Menü auf dem schwebenden PRNext-Logo haben Sie Zugriff auf die Konsole und Inspektionstools. Client- und Servernachrichten teilen sich eine Ansicht, die Sie nach Quelle und Ebene filtern können. Anfragen, Routen und Kompilierungsmessungen helfen Ihnen bei der Untersuchung einer langsamen Aktualisierung oder einer fehlgeschlagenen Seite.

Telefon- und Tablet-Vorschauen geben der Anwendung die entsprechenden Ansichtsfensterabmessungen. Eigene Medienabfragen bestimmen das Layout. Sie können die Ausrichtung ändern, ohne die angezeigte Sitzung neu zu erstellen, und unterstützte Inhalte scrollen, indem Sie den Zeiger ziehen.

Panels werden bei Bedarf geladen, während die Nachrichtenerfassung früh genug beginnt, um Startprotokolle beizubehalten. Sie können den Indikator in eine andere Ecke verschieben oder die Konsolen- und Gerätevorschau in einem separaten Fenster öffnen.

#Geben Sie Ihrem Assistenten den Komponentenkontext

Wählen Sie „Element für KI auswählen“ und wählen Sie dann ein Element auf der Seite aus. Der Inspektor findet seine Position im Code und kann die Datei, Zeile, relevanten Code, berechnete Stile und einen Screenshot an Ihre Anfrage anhängen. Ihr Assistent verfügt über eine identifizierte Komponente, die ihm hilft, die gewünschte Änderung zu verstehen.

Verbinden Sie Codex, Cursor, Claude oder einen anderen kompatiblen Client mithilfe der von den Tools bereitgestellten MCP-Konfiguration. Sobald der Kontext über das Panel übermittelt wurde, steht er dem Assistenten zum Abrufen aus Ihrer Entwicklungssitzung zur Verfügung. Durch das Kopieren der Konfiguration wird die Verbindung vorbereitet; Der Austausch von Kontext und die Überprüfung von Änderungen erfordern eine aktive Verbindung.

Nach einer Änderung kann der Assistent prüfen, ob der Browser tatsächlich eine neue Zusammenstellung anzeigt. Das Ergebnis unterscheidet eine beobachtete Korrektur von einer fehlgeschlagenen oder nicht schlüssigen Prüfung. Die Projektberechtigungen gelten während dieser Arbeit weiterhin.

#Stellen Sie die Routen zusammen, die Sie öffnen

Ein großes Projekt kann viele Seiten umfassen, wenn Sie nur wenige davon verwenden. PRNext stellt angeforderte Routen mit ihren Layouts, Fehlerkomponenten und Abhängigkeiten zusammen. Ein umgekehrter Index in Rust verbindet geänderte Dateien mit den von ihnen abhängigen offenen Routen.

Wenn zwei geöffnete Seiten eine Kopfzeile teilen, werden durch die Bearbeitung dieser Kopfzeile die betroffenen Teile beider Seiten neu kompiliert. Eine Seite, die nicht geöffnet wurde, kann bis zum ersten Besuch warten. Middleware, benutzerdefinierte Handler und unsichere Abhängigkeiten verwenden weiterhin eine vollständige Kompilierung.

Persistente Transformationen vermeiden außerdem die Wiederholung gültiger Arbeiten nach einem Neustart. Entwicklungs- und Produktions-Builds verfügen über separate Caches. Die Wiederverwendung hängt von den Inhalts- und Kompilierungseinstellungen ab; ein fehlender oder ungültiger Eintrag wird einfach neu kompiliert. Diese Caches speichern Compilerarbeit, keine personalisierten Anwendungsantworten.

#Passen Sie Ihre Stile an und behalten Sie dabei den Seitenstatus bei

Sie können Abstände, Farben oder Typografie rund um ein Formular anpassen, das Sie bereits ausgefüllt haben. Eine kompatible CSS-Änderung veröffentlicht neue Stile, ohne JavaScript neu zu erstellen oder den Anwendungs-Worker neu zu starten. Der Browser behält seinen Dokument- und React-Status bei, während er sie anwendet.

Die Stylesheet-Dateien jeder Generation bleiben unveränderlich, sodass eine Registerkarte das Laden ihrer Assets abschließen kann, ohne dass sich der Inhalt dabei ändert. Eine Änderung an CSS-Modulexporten, Sass oder benutzerdefinierter Verarbeitung kann sich auf mehr Abhängigkeiten auswirken und zum vollständigen Compiler zurückkehren.

#Weniger wiederholte Arbeiten in der Rust-Engine

Indiziertes dynamisches Routing und der pstart-Proxy reduzieren die Arbeit rund um den Anwendungs-Worker. Akzeptierte HTTP-Verbindungen deaktivieren die Verzögerung für kleine Pakete. Dauerhafte Verbindungen unterstützen weiterhin Streaming und ermöglichen den Abschluss laufender Anforderungen.

Assets verwenden ihre validierten gzip- und Brotli-Dateien wieder. Der Komprimierungs-Cache-Index vermeidet das erneute Scannen des gesamten Verzeichnisses, wenn Dateien veröffentlicht werden, und die Bundle-Analyse kann komprimierte Größen wiederverwenden, die bereits bekannt sind.

Für das Vorrendern unabhängiger Produktionsrouten ist eine begrenzte Anzahl von Arbeitskräften erforderlich. Dadurch werden mehrere Routen vorbereitet, ohne für jede Seite einen Prozess zu erstellen, während die Anforderungsisolation, die deterministische Ausgabe und die für Fehlerseiten erforderliche Reihenfolge erhalten bleiben.

#Bereiten Sie den nächsten Worker während der Kompilierung vor

Der nächste Entwicklungsmitarbeiter kann bereits während der Kompilierung mit der Vorbereitung beginnen. Es übernimmt, sobald es bereit ist, nach Bereitschaftsprüfungen und einer authentifizierten Übergabe. Der vorherige Arbeiter hat Zeit, die laufende Arbeit zu beenden.

Das Compiler-Recycling reagiert auf Speicherdruck, anhaltendes Wachstum und ein Sitzungslimit. Es ersetzt den automatischen Neustart bei jeder 24-Kompilierung. Wenn eine frühe Worker-Vorbereitung nicht verfügbar ist, wird der normale Startpfad verwendet.

#Kompatibilität und Diagnose

Verwenden Sie .ts oder .tsx für TypeScript-Module, die eine React-Server- oder Client-Direktive enthalten. Nicht unterstützte .mts- und .cts-Grenzen werden abgelehnt, bevor der Build aktiviert wird, sowohl im Quellcode als auch nach der Transformation durch einen Loader. Gewöhnliche TypeScript-Helfer werden weiterhin unterstützt.

Um ein Aktualisierungsproblem zu untersuchen, verwendet prnext dev --safe vollständige Kompilierungen mit neuen Compilern. Es deaktiviert dauerhafte Transformationen und die frühe Worker-Vorbereitung und behält gleichzeitig die kompatible Fast Refresh bei. Durch die Diagnose wird ermittelt, was die Arbeit ausgelöst hat: Öffnen einer Route, Bearbeiten von Code, Ändern der Konfiguration oder Aktualisieren von CSS.

Die Next.js-Kompatibilität bleibt teilweise bestehen. Überprüfen Sie die für Ihre Anwendung spezifischen Seiten, Formulare, Serveraktionen und Integrationen im Produktions-Build.

#Aktualisieren Sie die neuen Tools und probieren Sie sie aus

Version 0.1.17-alpha ist auf npm verfügbar. Aktualisieren Sie das Paket in Ihrem PRNext-Projektverzeichnis und starten Sie den Entwicklungsserver neu.

npm install @thomas.f/prnext
npx --no-install prnext dev .

Öffnen Sie die im Terminal angezeigte Adresse und dann das Menü auf dem schwebenden PRNext-Logo. Wählen Sie „Client-Konsole“, um Nachrichten zu untersuchen, „Auf Seiteninformationen prüfen“ oder eine Telefon- oder Tablet-Vorschau, um Ihr Layout zu testen.

Um mit Ihrem Assistenten zu arbeiten, wählen Sie Element für AI auswählen, wählen Sie eine Komponente aus und öffnen Sie die Konfiguration für Ihren Client. Kopieren Sie die bereitgestellten MCP-Einstellungen in Ihren Client, lassen Sie den Entwicklungsserver laufen und warten Sie, bis die Tools die Verbindung bestätigen. Beschreiben Sie die Änderung im Panel und wählen Sie „Kontext an AI senden“ aus. Bitten Sie dann Ihren Assistenten, diesen PRNext-Kontext zu verwenden.