This Week In React #102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, Node 18, HTTP 103, CSS :has()...
New open-sourced lib by Meta for creating extensible text editors (with a system of plugins to support mentions, hashtags, collaborative editing...). It seems to be a modern, lightweight alternative to Draft.js (no need to use ImmutableJS this time 😏). Doesn't specifically depend on React, but provides an official binding. Can be used by other frameworks and could even target other plateforms (iOS support planned)
Mitosis is a tool that allows you to create a design system with a dialect close to React/JSX (inspired by Solid). Mitosis is able to compile these components to various frameworks (React, Angular, Svelte, React-Native...). This can be handy for large companies that use multiple frameworks over time. This official article is a good introduction.
Explains how to manage 2 forms associated with the same Remix route. It's only possible to have one
ActionFunction per route, so the best solution seems to be to use the
action attribute on the submit button.
A good overview of some accessibility principles in a React context: description of
aria-* props and their impact on screen readers, color, focus ring...
The upcoming Storybook 6.5 will include performance improvements to improve the local DX through lazy compiling stories: 3x faster startup, 2x faster rebuild. The impact seems significant for larger Storybooks. Compare with Ladle, an alternative to Storybook released recently that also tries to improve performances.
📜 Static Full-Text Search in Next.js with WebAssembly, Rust, and Xor Filters: a part dedicated to integrating WebAssembly with Next.js (Webpack config).
📖 Why Redux Toolkit is How To Use Redux Today: new doc nudging you to adopt Redux Toolkit.
📦 Next-Markdown: new lib to integrate Markdown content in Next.js. Supports MDX, Table of Contents, index...
📦 Redux 4.2:
createStoredeprecated with a warning
📦 React-Redux v8: compat React 18, codebase in TypeScript.
📦 Generouted: file-based routing, integration between React-Location and Vite. Modern features to compete with meta-frameworks: supports code-splitting, data loaders, nested layouts...
📦 Zustand v4.0.0-rc.0: JS backward compatible. Breaking changes TS.
📦 Proxy-Memoize 1.0: interesting alternative to Reselect to create memoized selectors, but can be used for other cases as well.
📦 Create-React-App v5.0.1: improves React 18 compat
💸 Intellij 2022.1: improves IDE Next.js support
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.
🐦 React-Native-Skia: drop-in React-Native-Svg replacement?
💡 PR: Add TypeScript support in New Architecture/Codegen: it is possible to write TurboModule spec in TypeScript (to describe your native module API)
📦 React-Native-Turbo-Starter: a boilerplate to create modern React-Native modules leveraging the new architecture.
📦 expo-github-action/command: can trigger an EAS build with a GitHub comment (experimental)
Start React Native: learn everything about gestures and animations with William Candillon
Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
TypeScript Weekly: the best TypeScript links every week, right in your inbox
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies
CSS has a new
:has() selector, often referred to as a "parent selector", which allows CSS rules to be applied to a parent element based on children. For example, you can change the parent layout of a card, but only if it contains an image element: this avoids having to apply a variant class on the parent. This article illustrates this new feature with many use cases. I found interesting the possibility of applying CSS variables on html according to the value of a <select> (useful demo for theming or dark mode support). Currently only available in Safari and Chrome Canary, but support could improve fast.
Be careful not to abuse it: in a component model like React, it is better to limit yourself to targeting local classes to avoid breaking the encapsulation model of your component.
A new status code is officially added in the HTML spec. It allows sending "early hints" to the browser to prefetch/preload resources before receiving the 200 response from the server. It seems useful particularly for CDNs (read this Cloudflare article) which will be able to send cached early hints (or even predicted through machine-learning 🤯) while fetching fresh content from the origin server.
<dialog> added in Safari 15.4 and growing support, it's time to take a look at this new element. Adam Argyle offers us a fairly complete article on the subject: based on the most modern web APIs, he implement a mega/mini modals with animation, accessibility, responsive, light dismiss, custom events...
Node.js 18: freshly released! With experimental support for
fetch(), Web Streams, a test runner...