Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Avec la sortie officielle de Solid 2.0, le package de méta-cadre existant solid-start a été complètement retiré. Si votre équipe front-end gère des applications commerciales à grande échelle, vous devez éliminer la structure des dépendances dès maintenant. Supprimez complètement solid-start et les adaptateurs de plateforme de votre projet, et modifiez le point d'entrée du serveur pour exporter une fonction de contrat unique handleRequest(request: Request) basée sur l'API Web Standard Fetch. Le crochet onMount existant a été unifié dans le crochet onSettled, qui renvoie une fonction de nettoyage au moment où l'arbre de réactivité asynchrone est complètement résolu.
Pour effectuer la migration en toute sécurité, vous devez isoler les dépendances du package et remplacer manuellement le point d'entrée. Premièrement, supprimez solid-start du fichier package.json et mettez à jour la version de @solidjs/vite-plugin vers 2.0.0-rc.1 ou supérieur. Deuxièmement, créez un fichier vite.config.ts pour configurer les paramètres plugins: [solid({ start: true, ssr: true, router: { type: 'filesystem', dir: 'src/routes' } })]. Troisièmement, modifiez le gestionnaire de rendu dans le fichier de point d'entrée du serveur entry-server.tsx pour utiliser l'interface standard Web handleRequest(request: Request). En suivant ces étapes, vous pouvez réduire le taux d'échec de la compilation initiale de plus de 80 pour cent et résoudre les problèmes de compatibilité de la chaîne d'outils.
Le moteur réactif de Solid 2.0 a promu la promesse (Promise), une tâche asynchrone, au rang de valeur de signal de première classe du graphe réactif, et a complètement supprimé la primitive de recherche de données existante createResource. Les développeurs peuvent déclarer un createMemo standard à l'intérieur d'un composant et renvoyer directement une fonction asynchrone pour gérer les valeurs résolues sans logique de défense manuelle séparée. Pour éviter le phénomène de décalage de mise en page cumulatif (CLS), lorsque de nouvelles requêtes asynchrones sont déclenchées par des modifications de props parentes, la limite <Loading> maintient l'état précédent de l'interface utilisateur tout en ajustant la transparence avec la fonction isPending(user).
Pour refactoriser la logique de recherche asynchrone, vous devez combiner la structure de mémo standard avec les limites. Premièrement, écrivez un createMemo(() => fetchUser(props.userId)) standard contenant la logique de recherche de données. Deuxièmement, placez une limite <Errored> au sommet du modèle JSX pour capturer les erreurs réseau 5xx ou les promesses rejetées et fournir un bouton de récupération locale. Troisièmement, enveloppez le contenu interne avec <Loading fallback=""{<ProfileSkeleton"/>}"> et appliquez un style conditionnel tel que class={{ 'opacity-50': isPending(user) }}. Cette procédure garantit l'intégrité des données dans les situations de latence réseau et prévient la dégradation de l'expérience utilisateur.
La chaîne d'outils de Solid 2.0 a évincé les transpiles existants basés sur JavaScript et Babel pour adopter de manière intégrée les moteurs de compilation Oxc et Rolldown basés sur Rust, offrant une amélioration de la vitesse de compilation de 20 à 355 fois. Cependant, si un plugin hérité basé sur le runtime Node.js V8 est inclus au milieu du pipeline de build, cela génère une surcharge de sérialisation NAPI, ce qui annule les avantages de performance du compilateur Rust et provoque des erreurs d'analyse. Par conséquent, il est essentiel d'exécuter un script d'automatisation pour purifier les plugins de build hérités incompatibles.
Pour résoudre les conflits de plugins hérités, vous devez passer par des procédures d'inspection et de nettoyage. Premièrement, créez un fichier scripts/check-legacy-plugins.js à la racine du projet et définissez la liste des plugins en conflit tels que babel-plugin-transform-async-to-generator et @babel/plugin-proposal-decorators. Deuxièmement, utilisez le module du système de fichiers pour lire dynamiquement le contenu de vite.config.ts et exécutez une fonction de diagnostic pour vérifier si des chaînes de plugins incompatibles sont incluses. Troisièmement, exécutez la commande node scripts/check-legacy-plugins.js dans le terminal pour purifier les problèmes détectés, et exécutez la commande rm -rf node_modules/.vite .oxc_cache dans l'environnement de développement local pour effacer le cache. Grâce à ce processus, vous pouvez bloquer les erreurs de compilation initiales de la migration et restaurer la vitesse HMR du serveur de développement.
Le noyau de Solid 2.0 intègre par défaut des actions et des primitives de stockage optimiste pour simplifier le traitement des mutations d'état asynchrones. Contrairement au paradigme de stockage existant, la mise à jour optimiste fonctionne comme un mécanisme de superposition réactive qui superpose les modifications temporaires sous forme de couche par-dessus les données de stockage d'arrière-plan confirmées. La gestion des séquences de transactions à l'intérieur d'une action ou la sérialisation des requêtes permet de bloquer à la source les conditions de concurrence qui se produisent lorsque plusieurs composants s'abonnent au même magasin.
Pour mettre en place des transactions optimistes et un middleware de restauration manuelle, vous devez modifier la structure de gestion des données. Premièrement, appelez la fonction snapshot(store) pour capturer les données ponctuelles (point-in-time) juste avant la requête asynchrone. Deuxièmement, utilisez le rappel setStore pour enregistrer immédiatement l'état optimiste dans l'objet brouillon (draft) afin de le refléter de manière proactive dans l'interface utilisateur. Troisièmement, si une exception se produit lors de l'exécution de la fonction asynchrone du serveur, exécutez l'instruction setStore(() => previousSnapshot) à l'intérieur du bloc catch pour restaurer de force l'état précédent. Cela permet d'obtenir une gestion d'état stable sans perte de données de formulaire, même en cas de retard de réponse du réseau ou de temporisation (timeout).
Dans l'environnement de build Solid 2.0 et Vite 8, il est nécessaire de gérer efficacement les artefacts Rust et le cache de build du compilateur Oxc afin de réduire le temps de build CI/CD et d'économiser les coûts de maintenance du serveur. Pour éviter l'interruption des builds en raison d'erreurs de mémoire insuffisante dans l'environnement CI lors du traitement parallèle des données du compilateur Oxc, vous devez spécifier explicitement la limite de mémoire du tas (heap) et le nombre de threads de travail Rayon en tant que variables d'environnement. De plus, dans le runtime du serveur SSR, vous devez suivre si le contexte de l'arbre de réactivité asynchrone alloué à chaque requête HTTP est correctement libéré.
Pour appliquer l'optimisation du pipeline et la surveillance de la mémoire, vous devez modifier les fichiers de configuration. Premièrement, configurez une action de cache dans le fichier YAML du workflow GitHub Actions incluant les chemins path: ~/.cargo/registry, path: .oxc_cache et path: node_modules/.vite. Deuxièmement, déclarez NODE_OPTIONS="--max-old-space-size=8192", RAYON_NUM_THREADS="4" et UV_THREADPOOL_SIZE="8" dans les variables d'environnement d'exécution de la commande de build pour étendre la mémoire du tas à 8 Go et libérer le goulot d'étranglement des threads. Troisièmement, écrivez une fonction enveloppe de surveillance basée sur process.memoryUsage().heapUsed au point d'entrée du serveur pour configurer l'émission d'un journal d'avertissement si l'augmentation de la mémoire dépasse 10 Mo. Une fois cette procédure terminée, vous pouvez réduire le temps de construction requis dans l'environnement de production et empêcher de manière stable les fuites de mémoire du runtime.
