前端技术双周刊 2023-06-04：React 发布 10 周年整

微信公众号：依赖注入

发布时间：2023.06.04

本周内容：资讯x3、开源x4、文章x5

动态

React 圆桌会议 - Server Components, Suspense 和 Actions

为庆祝 React 成立 10 周年，Delba de Oliveira（Vercel 的高级开发倡导者）与来自 React 核心团队的 Andrew Clark 和 Sebastian Markbåge 主持了一场关于 React、服务器组件等的圆桌讨论。

Promise.withResolvers 进入 Stage2

某些情况下需要在 Promise 外部获取 resolve 和 reject 句柄，我们通常会这么编写代码


function cancelableTimeout(ms) {
  let cancel;
  const promise = new Promise((resolve, reject) => {
    const timeoutId = setTimeout(resolve, ms);
    cancel = () => {
      clearTimeout(timeoutId);
      reject(new Error('The timeout was canceled.'))
    }
  });

  return { promise, cancelTimeout };
}

有了 Promise.withResolvers 之后，我们的代码会简洁很多

function cancelableTimeout(ms) {
  const { promise, resolve, reject } = Promise.withResolvers();

  const timeoutId = setTimeout(resolve, ms);
  const cancelTimeout = () => {
    clearTimeout(timeoutId);
    reject(new Error('The timeout was canceled.'))
  }

  return { promise, cancelTimeout };
}

Chrome 114 支持 popover API

弹窗在 Web 应用中无处不在，但是至今为止构建它们仍然非常麻烦，从 Chrome114 版本开始加入的 popover 将会使该问题得到缓解。

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.<p>
</div>

开源

htmlparser2（3.9k star）

一个高性能且容错能力强的 HTML、XML 解析工具。

cRonstrue（912 star）

一个将 Cron 指令转化可读文本的工具，该工具零依赖很轻量，且有超过 30 种语言的国际化支持。

cronstrue.toString("* * * * *");
> "Every minute"

cronstrue.toString("0 23 ? * MON-FRI");
> "At 11:00 PM, Monday through Friday"

cronstrue.toString("0 23 * * *", { verbose: true });
> "At 11:00 PM, every day"

cronstrue.toString("23 12 * * SUN#2");
> "At 12:23 PM, on the second Sunday of the month"

cronstrue.toString("23 14 * * SUN#2", { use24HourTimeFormat: true });
> "At 14:23, on the second Sunday of the month"

cronstrue.toString("* * * ? * 2-6/2", { dayOfWeekStartIndexZero: false });
> "Every second, every 2 days of the week, Monday through Friday"

cronstrue.toString("* * * 6-8 *", { monthStartIndexZero: true });
> "Every minute, July through September"

BlockNote（2.5k star）

一个基于 React 的 Notion 风格富文本编辑器，借助 BlockNote，开发人员可以轻松地为他们的应用程序添加下一代文本编辑体验，其用户体验与行业领导者如 Notion 或 Coda 不相上下。不过目前该项目还处在 beta 阶段，值得持续关注。

ls-lint（1.4k star）

一个基于 Go 实现的专注目录名 lint 的工具，其性能非常优异，可以在几毫秒内检查数千个文件和目录。