Was macht React zu Phoenix LiveView?
Reproduzieren Sie die angeforderte React-Oberfläche unter Integration in die Architektur der Zielanwendung. Behandeln Sie die Quelle als visuelle und verhaltensorientierte Referenz; befolgen Sie explizite Zielvorgaben, wo diese abweichen. Leiten Sie Konventionen aus dem Code ab, anstatt ein React-Framework, CSS-System, eine Komponentenbibliothek oder eine bestimmte Phoenix-Version anzunehmen.
Umfang und Konventionen festlegen
- Lesen Sie die geltenden Repository-Anweisungen und die relevante Dokumentation beider Projekte. Lokalisieren Sie den React-Einstiegspunkt, die Zielanwendung und die angeforderte Route oder Komponente. Projekte können separate Repositories sein oder sich einen Workspace teilen.
- Durchsuchen Sie Manifeste und bestehende Implementierungen, um Styling, Komponenten, Schriftarten, Themes, Assets, Routing, Authentifizierung, Datenzugriff und JavaScript-Integration zu identifizieren. Prüfen Sie, ob bereits eine Route, ein Teil-Port, eine Komponente oder ein Hook existiert, bevor Sie eine neue erstellen.
- Beschränken Sie den Umfang auf die zugewiesene Oberfläche und das erforderliche Verhalten. Ein statischer Mockup erfordert keine neuen Backend-Funktionen; eine funktionale Migration erfordert echte Integrationen oder explizit offengelegte Lücken.
- Respektieren Sie die Test- und Tool-Berechtigungen des Benutzers. Quellinspektion, Referenzinspektion, Vorbereitung einer Vorschau, automatisierte Tests und Browser-QA sind separate Aktivitäten; gehen Sie nicht davon aus, dass alle autorisiert sind.
1. Die Quelle inspizieren
Lesen Sie css-extraction.md. Verfolgen Sie die Seite, visuell signifikante Kind-Elemente, Styles, Komponentenvarianten, Assets und Zustandslogik. Stellen Sie Folgendes fest:
- Layout, responsive Regeln, Typografie, Themes, Bilder und Animationen.
- Effektive Styles nach Bibliotheksstandards, lokalen Überschreibungen, bedingten Props und der CSS-Kaskade.
- Navigation, Formulare, Overlays, Ladezustände, Berechtigungen, Mutationen, Persistenz und Wiederherstellungspfade, die für den Umfang relevant sind.
Erstellen Sie eine kompakte Migrationslandkarte: Quellkomponente → Zielkomponente, Quelldaten/-aktion → Zielkontext/-event, Quell-Token → Zieläquivalent. Trennen Sie beobachtetes Verhalten von Annahmen und ungelösten Laufzeitwerten.
Bei einer Analyseanfrage: Liefern Sie Ergebnisse und stoppen Sie. Bei einer autorisierten Implementierung: Zeigen Sie wesentliche Lücken oder Abweichungen kurz auf und fahren Sie fort. Fragen Sie nur, wenn eine ungelöste Entscheidung den Umfang, das Verhalten oder die Wiedergabetreue wesentlich verändert; Sie benötigen keine separate Bestätigung für routinemäßige Übersetzungsentscheidungen.
2. In Phoenix implementieren
Lesen Sie liveview-conventions.md. Verwenden Sie Zielkomponenten, Layouts, Kontexte, Autorisierung, Tokens, Assets und Hooks wieder, wenn sie das erforderliche Ergebnis reproduzieren.
- Übersetzen Sie gerenderte Ausgabe und Verhalten, nicht mechanisch die React-Syntax oder Komponentennamen.
- Bewahren Sie visuelle Werte, responsive Regeln, Zustände und Semantik. Ersetzen Sie keine vage ähnliche Schriftart, kein Symbol, keine Komponente und keine Animation ohne Begründung.
- Wenden Sie explizite Zielvorgaben konsequent an und erklären Sie sichtbare Abweichungen. Übernehmen Sie niemals die Schriftbeschränkungen, den Speicheranbieter, die Routenstruktur oder die Namensgebung eines anderen Projekts in den Port.
- Behalten Sie server-eigenen Zustand in LiveView und Kontexten; verwenden Sie CSS oder bestehende Client-Mechanismen für lokales visuelles Verhalten. Fügen Sie Hooks nur für Browser-Fähigkeiten hinzu, die diese benötigen.
- Vervollständigen Sie die zutreffenden Lade-, Leer-, Validierungs-, Ausstehend-, Erfolgs-, Fehler-, Wiederholungs-, Berechtigungs- und Wiederherstellungszustände. Bewahren Sie Benutzereingaben bei Fehlern und verhindern Sie, dass wiederholte Aktionen Daten beschädigen.
3. Überprüfung und Übergabe
Überprüfen Sie Änderungen anhand der Migrationslandkarte, einschließlich responsiver/Theme-Varianten, Autorisierung, Ereignisbehandlung, Barrierefreiheit und Lebenszyklusbereinigung. Prüfen Sie, ob erforderliche Assets und referenzierte Komponenten vorhanden sind.
Verwenden Sie Projektverifikationsbefehle und Laufzeitwerkzeuge nur, wenn dies erlaubt ist. Bereiten Sie eine Live-Vorschau vor, wenn dies gestattet ist. Geben Sie niemals an, eine Laufzeit-, visuelle oder Testverifikation allein durch Quellinspektion durchgeführt zu haben.
Fassen Sie kurz zusammen: Was wurde portiert, wesentliche Abweichungen, Mocks oder fehlende Integrationen, durchgeführte oder unterlassene Verifikation, und Zustände, die der Benutzer testen sollte. Wenn eine Abhängigkeit den Abschluss blockiert, identifizieren Sie diese konkret und schließen Sie unabhängige Arbeiten im Rahmen ab.