Que fait React vers Phoenix LiveView ?
Reproduisez l'interface React demandée tout en l'intégrant à l'architecture de l'application de destination. Traitez la source comme la référence visuelle et comportementale ; suivez les exigences explicites de la destination lorsqu'elles diffèrent. Découvrez les conventions à partir du code plutôt que de supposer un framework React, un système CSS, une bibliothèque de composants ou une version de Phoenix.
Établir le périmètre et les conventions
- Lisez les instructions applicables du dépôt et la documentation pertinente dans les deux projets. Localisez le point d'entrée React, l'application de destination et la route ou le composant demandé. Les projets peuvent être des dépôts séparés ou partager un espace de travail.
- Inspectez les manifests et les implémentations existantes pour identifier le style, les composants, les polices, les thèmes, les ressources, le routage, l'authentification, l'accès aux données et l'intégration JavaScript. Vérifiez s'il existe une route, un port partiel, un composant ou un hook existant avant d'en créer un nouveau.
- Limitez le périmètre à l'interface assignée et au comportement requis. Une maquette statique ne nécessite pas de nouvelles fonctionnalités backend ; une migration fonctionnelle nécessite des intégrations réelles ou des lacunes explicitement divulguées.
- Respectez les permissions de test et d'outils de l'utilisateur. L'inspection de la source, l'inspection des références, la préparation de l'aperçu, les tests automatisés et l'assurance qualité du navigateur sont des activités distinctes ; ne supposez pas que toutes sont autorisées.
1. Inspecter la source
Lisez css-extraction.md. Parcourez la page, les enfants visuellement significatifs, les styles, les variantes de composants, les ressources et la logique d'état. Établissez :
- La mise en page, les règles responsives, la typographie, les thèmes, les images et les animations.
- Les styles effectifs après les valeurs par défaut de la bibliothèque, les surcharges locales, les props conditionnelles et la cascade CSS.
- La navigation, les formulaires, les superpositions, le chargement, les permissions, les mutations, la persistance et les chemins de récupération pertinents pour le périmètre.
Enregistrez une carte de migration compacte : composant source → composant de destination, donnée/action source → contexte/événement de destination, jeton source → équivalent de destination. Séparez le comportement observé des hypothèses et des valeurs d'exécution non résolues.
Pour une demande d'analyse, livrez les résultats et arrêtez-vous. Pour une implémentation autorisée, signalez brièvement les lacunes ou écarts matériels et continuez. Ne demandez que lorsqu'un choix non résolu modifie considérablement le périmètre, le comportement ou la fidélité ; n'exigez pas une confirmation séparée pour les décisions de traduction de routine.
2. Implémenter dans Phoenix
Lisez liveview-conventions.md. Réutilisez les composants de destination, les mises en page, les contextes, l'autorisation, les jetons, les ressources et les hooks lorsqu'ils reproduisent le résultat requis.
- Traduisez le rendu et le comportement plutôt que de reproduire mécaniquement la syntaxe React ou les noms de composants.
- Préservez les valeurs visuelles, les règles responsives, les états et la sémantique. Ne substituez pas une police, une icône, un composant ou une animation vaguement similaire sans justification.
- Appliquez les exigences explicites de la destination de manière cohérente et expliquez les écarts visibles. N'introduisez jamais les restrictions de police, le fournisseur de stockage, la structure de route ou la nomenclature d'un autre projet dans le port.
- Conservez l'état appartenant au serveur dans LiveView et les contextes ; utilisez CSS ou des mécanismes clients existants pour le comportement visuel local. N'ajoutez des hooks que pour les capacités du navigateur qui en ont besoin.
- Complétez les états applicables de chargement, vide, validation, en attente, succès, échec, nouvelle tentative, permission et récupération. Préservez la saisie de l'utilisateur en cas d'échec et empêchez les actions répétées de corrompre les données.
3. Revoir et remettre
Passez en revue les modifications par rapport à la carte de migration, y compris les variantes responsives/thèmes, l'autorisation, la gestion des événements, l'accessibilité et le nettoyage du cycle de vie. Vérifiez que les ressources requises et les composants référencés existent.
Utilisez les commandes de vérification du projet et les outils d'exécution uniquement lorsque cela est autorisé. Préparez un aperçu en direct si permis. Ne prétendez jamais à une vérification d'exécution, visuelle ou de test à partir de la seule inspection de la source.
Remettez brièvement : ce qui a été porté, les écarts matériels, les maquettes ou intégrations manquantes, la vérification effectuée ou omise, et les états que l'utilisateur doit tester. Si une dépendance bloque l'achèvement, identifiez-la concrètement et terminez le travail indépendant dans le périmètre.