美味值：🌟🌟🌟🌟🌟

口味：青橘伏特加

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

PC 端在仓库里看体验更好，顺手赏个 Star 是对食堂最大的支持。

本期摘要

• Vue 2.7 Beta
• TypeScript 4.8 Beta
• React 开源奖
• JavaScript 开源奖
• Umi 4 发布
• 5 月登陆浏览器的 API
• Component party 9 大框架的语法和特性概览
• Ecma International 批准的新标准
• Git Command Explorer
• Jiffy Reader

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1. Vue 2.7 Beta

为了让还在使用 Vue2 的用户享受到 Vue3 的好处，Vue3 中的一些重要特性将会向后移植到 Vue2.7：

• Composition API
• SFC <script setup>
• SFC CSS v-bind

向后移植的功能不仅是上面几点，还包括其他的 API 和内容(API 暴露注意事项、与 Vue3 的行为差异、Beta 采用指南等)，可以前往链接查看。

2.7 稳定版计划于 2022 年 6 月底左右发布，截止本期周刊撰稿时，Vue 团队宣布 2.7 稳定版将于下周发布。一旦 2.7 稳定版发布，Vue2 将不再接收新功能，并将进入持续 18 个月的 LTS(长期支持)，这意味着 Vue2 将在 2023 年底结束生命周期。

2. TypeScript 4.8 Beta

主要更新如下：

• –strictNullChecks 下带来一系列正确性和一致性的改进
• 改进 infer 在模板字符串类型中的类型推断
• –build、–watch、–incremental 性能优化
• 比较对象和数组字面量时的错误
• 改进 Binding Patterns 推断
• 修复文件监听
• Find-All-References 性能改进

Breaking Changes

• lib.d.ts 更新
• 不受约束的泛型不再可分配给 {}
• 无法在 JavaScript 文件中导入/导出类型
• Binding Patterns 不再改变函数调用中的推断结果的类型

3. React 开源奖

GitNation 基金会于 2022 年 6 月 17 日颁布了 React 的 Open Source Awards。

年度最佳创新突破奖

• jotai：原始且灵活的 React 状态管理库。
• Remix：一个将 90 年代 Web 简单的心智模型与现代平台功能相结合的元框架，实现首屈一指的 UX 和 DX。
• refine：一个基于 React 的框架，用于快速构建内部工具。
• wagmi：以太坊的 React Hooks。
• Preview.js：在 IDE 中实时预览 React、Solid 和 Vue 组件。

最激动人心的技术应用

• Remotion：用 React 制作视频。
• React Flow：一个高度可定制的 React 组件，用于构建交互式图形和基于节点的编辑器。
• react-native-tvos：Fork 自 React Native，额外支持 Apple TV 和 Android TV。
• React Unity WebGL：为 Unity WebGL 构建嵌入 React 应用程序提供了一种现代解决方案，同时为 Unity 和 React 之间的双向通信和交互提供了高级 API。
• Jest Preview：在浏览器中预览 Jest 测试，并帮助你轻松的调试。

年度趣味项目

• Cuberun：使用 react-three-fiber 构建的合成波无限跑酷游戏。
• Tetromino：使用 React、Redux 和 Tailwind 构建的俄罗斯方块游戏。
• Corona Game：使用 react-three-fiber 构建的 3d 游戏。
• Heart Switch：React 的心形切换开关组件。
• LBA2 Remake：用 TypeScript、Three.js 和 React 实现 A Little Big Adventure 2。

对社区最有影响力的贡献项目

• ReactJSGirls：React 爱好者聚会，女性登台分享她们的学习和经验。
• React Newsletter：React 周刊。
• React Native Radio：播客，一起探索 React Native。
• Poimandres：一个开源开发者团队，主要维护和支持 React Spring、React Three Fiber 及其生态系统。
• Reactiflux：一个由 170,000 多名 React 开发人员组成的聊天社区。

生产力助推器

• Mantine：一个功能齐全的 React 组件库。
• React Use：React Hooks 工具包。
• Superplate：具有超能力的前端模版库，提供 30 多个插件，支持 React 和 Next.js。
• React Uploady：基于 React Hook 的上传组件。
• React Virtual：在 JS/TS、React、Solid、Vue 和 Svelte 中实现虚拟化滚动元素的无头 UI 。

4. JavaScript 开源奖

GitNation 基金会于 2022 年 6 月 16 日颁布了 JavaScript Open Source Award。

年度最佳创新突破奖

• Hoppscotch：开源的 API 开发生态系统。
• Solid：用于构建用户界面的声明式、高效且灵活的 JavaScript 库。
• Web3.js：以太坊 JavaScript API。

最激动人心的技术应用

• vanilla-extract：TypeScript 中的零运行时样式表，CSS Modules in TypeScript。
• tRPC：端到端的类型安全 API。
• zx：用 JavaScript 编写 Shell 脚本。
• Q.js：浏览器中的量子计算。
• Tauri：使用 Web 前端构建更小、更快、更安全的桌面应用程序，底层引擎和后端绑定由 Rust 编写。
• Partytown：将资源密集型第三方脚本从主线程转移到 Web Worker 中。

年度趣味项目

• Big Heads：自动生成头像。
• Ossart：将你的 GitHub activity 打印为艺术品。
• Gaze Detection：在 JavaScript 中使用机器学习来检测眼球运动并构建注视控制体验。
• Yoha：一个实用的手部跟踪引擎。

对社区最有影响力的贡献项目

• pnpm：快速、节省磁盘空间的包管理器，精益求精。
• Three.js journey：学习 Three.js 的最佳方式。
• Devs for Ukraine：Devs For Ukraine 是一个免费的在线工程师会议，旨在筹集资金并为乌克兰提供支持。
• Medusa：开源 Shopify 替代品。
• Bytes.dev：最佳 JavaScript Newsletter。

生产力助推器

• Amplication：自动生成使用 TypeScript 和 Node.js 构建的后端应用程序，以及使用 React 构建的客户端。
• Zod：带有静态类型推断的 TypeScript 优先模式验证。
• Hardhat：Hardhat 是一个用于编译、部署、测试和调试以太坊软件的开发环境。
• Omni：提高生产力的多合一浏览器插件，提供浏览器选项卡、书签、历史记录等管理功能。

5. Umi 4 发布

新功能

• 多构建引擎：支持 Vite 和 Webpack。
• 默认快：MFSU V3 + Webpack 5 缓存(解决 Dev 时编译慢的问题)、Webpack 5 物理缓存 + CD 平台(解决 Build 时编译慢的问题)、esbuild 作为 js 和 css 的压缩器、jest 的 transformer 等等的环节提速。
• Umi Max：内网 Bigfish 的外部版本。
• React Router 6，路由层实现更优雅，不过有一些 Break Change。
• 支持 Vue，由社区同学提供，只需装载一个 preset 即可切换到 Vue。
• 默认最快的 CSR 请求，避免 React 项目经典的 Render-Then-Fetch 的加载瀑布流问题。
• 白盒稳定的 Lint，内置精挑细选的 lint 规则。
• SSR，重写 SSR 功能，此功能目前处于 beta 阶段。
• API 路由，打包成不同平台支持的 Serverless Function 产物。
• 微生成器，小型脚手架、控制功能的开启与关闭、库版本切换。

DX 改进

• 自动 https(实现基于 mkcert)。
• 浏览器里的构建进度条。
• Terminal 中的日志。
• umi.js 产物调试。
• 项目级插件：plugin.ts(可以在项目级做很多事，比如 deadCode 检测等)。
• Umi UI 卷土重来(排查问题时，提供 Umi 框架的内部状态作为开发辅助)。

6. 5 月登陆浏览器的 API

一些在 2022 年 5 月登陆稳定版和测试版浏览器的新功能。

稳定的浏览器

• Chrome 102 和 Safari 15.5 包含 inert 属性，一个全局 HTML 属性，使开发人员能够从 tab 顺序和可访问性树中移除一个元素，带来更好的可访问性。
• Chrome 102 包含 hidden=until-found，可以在页面中查找并滚动到折叠区域内的文本。
• Chrome 102 发布了 Navigation API，经典的 Histroy API 看起来很简单，但是它的定义不是很明确，在极端情况和不同浏览器的实现方式方面存在 大量问题，Navigation API 是全新的实现。
• Firefox 101 支持 Constructable Stylesheets，使 Shadow DOM 创建和分发可重用样式变得更加容易。
• Firefox 101 包含 prefers-contrast，该媒体功能用来检测用户是否请求以较低或者较高的对比度呈现页面内容。

Beta 浏览器

• Chrome 103 包含 Local Font Access API，允许访问用户本地安装的字体。
• Firefox 102 包含 update 媒体功能，用于查询输出设备是否可以在内容渲染后修改其外观。

下面我们来看技术资料。

技术资料

1. Component party

九大前端框架语法和特性快速概览。

2. Ecma International 批准的新标准

第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范，该规范是 ECMAScript 语言规范的第十三版，包括如下特性：

• Top-level await
• Object.hasOwn()
• .at()
• Error Cause
• RegExp Match Indices
• Class Fields
  • Private instance methods and accessors
  • Class Public Instance Fields & Private Instance Fields
  • Static class fields and private static methods

此外，还包括 ECMAScript 2022 国际化 API 规范、C# 语言规范、数据迁移方法。

3. Git Command Explorer

交互式 Git 命令探索器，可以离线访问。根据你的输入，帮你找到正确的 Git 命令，作者还实现了一个数组方法探索器。

4. Jiffy Reader

最近很火的一个黑科技 Bionic Reading，通过将英文单词的前几个字母加粗，从而提升你的阅读速度(高达 10 倍)，这个浏览器插件可以将文本渲染成 Bionic Reading，你觉得阅读速度提升了吗？

其他信息

• vite 3.0.0-beta.2
• React Native v0.69
• pnpm v7.4.0-1
• Chrome V8 博客更换地址
• JSConf Budapest 2022
• React 18 加载数据的最佳方式
• 维护内部 React 组件库的注意事项
• Rust 即将出现在 Linux 内核中
• The State of WebAssembly 2022

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1. 维护内部 React 组件库的注意事项

2. 转转搭建 iconfont 平台实践

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。