前端周热点120：use RFC, Sandpack, Progressive enhancement, Streaming, Storybook

站长

2022年11月07日 18:42 · 阅读数 53

⚛️ React

React RFC: First class support for promises and async/await

React团队决定回到async/await 模型以简化服务器组件的使用。问题是：在客户端组件上很难支持async/await 。所以他们提议在客户端引入use(promise)API。与其他hooks不同， use可以被有条件地调用。后来，它可以和其他 "可使用 "的东西一起使用，比如React context（实际上，你已经可以有条件地使用useContext！）。使用不同的API也可以被看作是一种特性：它允许区分服务器组件和客户端组件。

这个RFC引起了有趣的争论。我们想知道与data fetching库的集成会是什么样子。generators的使用似乎适合这种情况，但它们在实践中很难使用。我们正在等待一个新的RFC，它将引入一个缓存API。

The Web’s Next Transition

Kent C. Dodds对3种主要的网络架构进行了很好的回顾，并作了很好的说明和记录。他强调了最新的架构，即当前的趋势。逐步增强的单页应用。Remix是这种架构的一个实现，它有经过深思熟虑的抽象概念，鼓励模仿浏览器的本地行为。我不太同意服务器是绝对必要的。Docusaurus也是一个PESPA的实现，没有JavaScript也能很好地工作。

A World-Class Code Playground with Sandpack

Josh Comeau赞扬了 Sandpack，他用来创建交互式代码游乐场的CodeSandbox工具箱。它看起来很容易使用，而且非常灵活!

📜 Streaming: is it worth it?: Qwik的作者Solid和Marko解释了流媒体的优势，以及为什么很难采用这种技术。在React背景下，所使用的库（Helmet、CSS-in-JS、Redux......）必须兼容，才能使流媒体有效。
📜 Storybook - First-class Vite support: 7.0即将进入测试阶段：支持无配置的Vite，预捆绑，不再需要Webpack，支持Vue 2、Lit和Svelte等新。
📜 Moving From React to htmx: 关于从React成功迁移到[htmx]（htmx.org/）的反馈（文章+视频）…
📜 Prioritise content over components: 从不同的角度对React组件的设计提出有趣的想法：设计师、开发人员和内容作者（CMS）。
📜 A little semantic HTML trick for React components: explains how to respect the semantics of HTML by passing the DOM element to be created in props.
📜 Using Web Components With Next (or Any SSR Framework)
📜 Exploring how virtual DOM is implemented in React
📜 Lazy-load React components in Remix
🐦 React tip: isFocused should almost never be a prop
🚧 Streaming SSR in Preact prototype
🧑‍🎓 Create a 3D site with Game Controls in Spline and React (video)
🎨 Satori + React-Three-Fiber demo
🎨 Satori + SVG code syntax highlighting demo
🎙️ Docusaurus 2 is a pretty big deal
🎥 In Defense of useEffect
🎥 Making React Context Fast!
📦 Planby - React.js based component for schedules and timelines
📦 Gatsby v5 beta
📦 Astro 1.5
📦 SWR 2.0 RC

📱 React-Native

2022: How can we improve React Native?

React-Native团队希望得到关于React-Native中需要改进的内容的反馈。提到的一些要点。CSS支持（Yoga, gap, grid, shadows...），跨平台支持，版本升级，调试，键盘，Metro symlinks...

💬 Restructuring React Native's Public API
📜 Setting up React Native Monorepo with Yarn Workspaces
📜 How to Use Module Federation with Re.Pack 3
🚧 Expo Router 0.0.27 + Layout API change RFC
🚧 React-Native Bottom Sheet v5 will have web support
🚧 React-Native Flex gap support coming?
📖 Expo docs improvements: "Running E2E tests on EAS Build now works on Android"
📦 Metro 0.73.0
📦 React-Native 0.70.3
🎥 Flip card Animation in React-Native Re-Animated 2
🎙️ React-Native-Radio 248 - Introducing Ignite v8: Maverick!

🔀 Other

StackBlitz Codeflow

StackBlitz WebContainers允许通过WebAssembly在浏览器中运行Node.js。你可以直接在浏览器中运行VS Code、Next.js或Docusaurus，而不是通过远程Docker容器。Codeflow增加了与GitHub的整层集成，使得通过在本地以安全的方式运行pull-request，可以很容易地打开、审查或编辑：对于开源项目非常有用。

他们还推出了Web Publisher，一个简化的Markdown文件的编辑视图（编辑器、预览、保存按钮）。对于在Git上贡献文档来说非常方便，即使是技术性不强的用户。有一个真正的内容预览，而不是GitHub Markdown预览的降级体验。这是一个[Docusaurus用户的重要需求]（twitter.com/ericsimons4…

Fontaine - Automatic font fallback based on font metrics

允许在加载自定义字体时避免布局转移。使后备字体与最终字体的大小相同，这样过渡就很平稳，不会影响文本容器的大小。好主意!

转载自:https://juejin.cn/post/7163098995768688677