Frontend Weekly 2024-03-22

2024年3月22日

ESM in Node.jsについての記事や、Next.js AI Chatbot 2.0について紹介する。

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を取る関数などでも表現できる。

const assertNever = (x: never): never => {
  throw new Error("Unreachable : " + x)
}

const selectType = (type: Type) => {
  switch (type) {
    case "File":
      return "file"
		// ...
    default:
      return assertNever(type)
	    //throw new Error(type satisfies never)
  }
}