Salut à tous !
Cette semaine, je me suis intéressé à la sortie de Lit 3.0 pour voir si l'usage des Web Components devenait plus facile avec React.
Coté React-Native, la version 0.73 est en release candidate avec de nombreuses améliorations DX. On parle aussi d'optimisation des composants Text et View. Canvaskit-js permet de faire tourner Skia sur le web pour seulement 20kb!
Il y a eu quelques annonces intéressantes à la ViteConf la semaine dernière, dont un port de Rollup en Rust, et l'usage de Vite avec Remix ou encore React-Native.
J'ai été l'invité de Melvyn dans un podcast pour parler des dessous de cette newsletter d'un point de vue business (rappel: je build in public), mais on aborde aussi quelques sujets React 😜
💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !

💸 Sponsor
highlight.io - The open-source, full-stack monitoring Platform
highlight.io is a truly open-source application monitoring solution. They support Session Replay, Error Monitoring, and Logging platform; a perfect solution for your next project.
Don't waste time trying to guess why a bug happens. Use highlight and get a clear picture of your browser and server-side application.
It is super easy to install in your favorite framework: React.js, Next.js, Remix, or anything else!

⚛️ React
Le framework Web Components de Google Lit vient de sortir en v3.0. En dehors des améliorations du framework (decorators, template compiler, Preact Signals), on retrouve en particulier la graduation du package d'intégration @lit/react
qui sort du Lab, devient stable et sort en v1.0.
Cette intégration facilite l'usage des Web Components dans une app React (ou Preact) en créant un wrapper qui va mapper les props React sur les properties de l'élément cible, gérer les event handlers et faciliter le typage TypeScript. Elle comble certaines lacunes de React 18 qui ne s'intègre pas facilement avec les Web Components: les props sont mappées sur des attributs et non des properties. Voir la documentation pour le framework React.
Mais est-ce qu'un dev React moderne peut facilement utiliser tout ça? Lit propose des packages expérimentaux @lit-labs/ssr, @lit-labs/ssr-react et @lit-labs/nextjs mais le support est limité et ne marchera pas avec Next.js App Router. Le Declarative Shadow DOM, qui permet le SSR, n'est pas encore implémenté dans Firefox, mais un polyfill existe. Bref, Lit devrait bien fonctionner sur une app CRA, mais semble encore un peu risqué si vous avez besoin de SSR et SEO.

- 💸 Create collaborative applications like Figma and Miro in a few lines of code with Ably's in-app collaboration SDK
- 👀 Remix PR - Add experimental Vite support
- 👀 Remix PR - Add startViewTransition support
- 👀 Next.js PR - Document Server Actions
.bind
method: la doc Next.js recommande maintenant d'utilisermyAction.bind(null, myArg)
pour passer des arguments supplémentaires à une Server Action. La fonction retournée sera alors également une Server Action. - 📜 UI Composition - AKA taking a step back to take a step forward: article qui présente un exemple de composant Card qui a trop de responsabilité. Propose de le splitter et d'utiliser la composition pour le rendre plus maintenable.
- 📜 Server-side pagination with Remix: j'ai trouvé cette implémentation de pagination très intéressante, sans aucun listener
onClick
ni JS pour manipuler la query string. Repose uniquement sur le comportement natif des forms et donc compatible progressive enhancement. Ma réserve: impossible d'ouvrir une page dans un nouvel onglet 😅. - 📜 Access the Loader Data in Remix: présente différentes manières d'utiliser
useLoaderData
ouuseRouteLoaderData
et leurs tradeoffs, en fonction d'où on les utilise. - 📜 Why I love Remix, And why you should too
- 📜 Making React Apps Memory Efficient - Million.js Beyond Speed
- 📜 Test your React Libraries Locally with Yalc
- 📜 Why we still use React HOCs
- 📜 Progressively Enhanced WebGL Lens Refraction
- 📦 Fresh v1.5 - Partials, client side navigation and more: le framework Preact implémente une navigation client-side basée sur des "Partials" qui permet de préserver le state lors des navigations. Le support View Transitions arrive.
- 📦 next-safe-action v4 - Typesafe Server Actions in your Next.js 13 app: validation des inputs avec Zod. Note: un projet similaire Zact est déprécié au profit de
next-safe-action
. - 📦 Astro Starlight v0.11: ajoute le support des component overrides
- 📦 React-Query 5.0.0 RC.10: les dernières RCs apportent des améliorations notables 🐦 devtools et 🐦 TypeScript.