Frontend Weekly 2024-03-22

2024-03-22

/

Node.js

require(esm) in Node.js

--experimental-require-moduleフラグで、CommonJS から ESM をrequireできる仕組みが入った。 Top-Level await の非同期をスコープから外すことで実装が進んだ。「ESM は非同期で、CJS は同期であるため、CJS は ESM をロードできない」という神話があった。

おもしろポイント：“昨年、メモリリークを修正するためにV8 コードを参照していたとき、ESM 自体が実際には無条件に非同期になるように設計されていないことが偶然わかりました。”

require(esm) in Node.js

const esm = require("index.mjs")

Node.js に入る新しい CJS から ESM への読み込み方法の紹介 - hiroppy’s site

Best Practices for Writing Tests with React Testing Library

CSS から React コンポーネントを生成するライブラリ。data 属性や@scope を利用する仕組み。

MistCSS

エディター付きの React 開発環境をブラウザーだけで実装した話

https://speakerdeck.com/steelydylan/edeitafu-kinoreactkai-fa-huan-jing-wo-burauzadakedeshi-zhuang-sitahua

型テスト：TypeScript Compiler API
ユニットテスト：testing-library/react + jest-lite
リント：BiomeJS on Worker + ComLink
プレビュー：Service Worker をブラウザとサーバーのプロキシとして利用
React などのインポートの省略：importmap
サーバーを介さないトランスパイル：IndexedDB を使って SW 側でコードを取得、Wasm でトランスパイル
SW 上での TS トランスパイル：swc/wasm-web

仲間

https://github.com/matsuri-tech/generate-release-notes-body-based-on-pull-requests

Conventional Commits と CHANGELOG の自動生成でリリースのユーザ影響をわかりやすくした話 - ドワンゴ教育サービス開発者ブログ

Next.js AI Chatbot 2.0

Next.js AI Chatbot 2.0 – Vercel

一般的なものが多いが、satisfies never は知らない人が多そう。Utility type を配布するパッケージを利用するならともかく ts-reset を使うのには懐疑的。

TypeScript で知ってコードの安全性が上がった tips 集

satisfies never 以外にも引数に never を取る関数などでも表現できる。

1
const assertNever = (x: never): never => {
2
  throw new Error("Unreachable : " + x);
3
};
4

5
const selectType = (type: Type) => {
6
  switch (type) {
7
    case "File":
8
      return "file";
9
    // ...
10
    default:
11
      return assertNever(type);
12
    //throw new Error(type satisfies never)
13
  }
14
};