UKYO Kazuma yaakaito

Node 22 では実験的な機能として glob と globSync が導入されました。

これまで glob パッケージを利用していた場合、次のように置き換えることが出来ます。

React 19 では、データ更新とそれに伴う一連の流れをうまく扱う方法として Actions が導入されるようです。例えば、これまでフォームの送信中の状態を次のように扱うことがありましたが、これが React の機能として標準化されます。

const [isPending, setIsPending] = useState(false);
const submit = () => {
  setIsPending(true);
  await foo();
  setIsPending(false);
}

@mozilla/readability を使うと簡単に本文を抽出することができます。これは Firefox のリーダービューで使われているもののようです。

今回はこの結果を Claude3 に投げたかったので、DOMPurify を組み合わせて最小限文章がわかりそうな DOM として取り出しています。

CLI で roouteTree を生成することができるので、ビルドツールに依存せずに単体で利用できます。便利。

$ pnpm tsr generate

Node 18 から実験的に導入された組み込みのテストランナーがありますが、これが 21 で対象を glob 指定できるようになりました。

swc-node と組み合わせると、それなりに使えそうなテストランナーになりそうです。

これらを用意した状態で次のコマンドにすると、 TS をトランスパイルしつつ watch モードで動くテストランナーが作れます。

dependabot に設定を追加しておけば動くみたい。

version: 2
updates:
  - package-ecosystem: "devcontainers"
    directory: "/"
 schedule:

--install-extension というコマンドがあり、これを使うと CLI から拡張機能をインストールできる。プロジェクトに直接関係しないけど devcontainer に入っていてほしい、みたいなものに個人の設定で使うと便利。

code --install-extension mhutchie.git-graph
code --install-extension eamodio.gitlens

SVGR というのがあり、これを通すと React Component を吐き出してくれる。webpack 用のローダーもあるが、頻繁に変更するわけでもないので CLI での利用。

npx @svgr/cli -- icons/clock-icon.svg > dist/ClockIcon.js

	actions/labeler で設定できる。

	- https://github.com/actions/labeler

	workflow と設定ファイルである `.github/labeler.yml` を作成する。

	基本は `changed-files` を利用して変更されたファイルをに対応したラベルをつけるようにする。`any` や `all` を使うことでもう少し複雑な条件を作れる。

	service-worker と alarms を組みわせると実現できる。

	- https://developer.chrome.com/docs/extensions/reference/api/alarms?hl=ja#examples
	- https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics?hl=ja

	service-worker が install されたタイミングで alarms を設定しておき、再起動時なども必要であれば alarms を設定し直すようにする。
	同一 service-worker 内で addListener しておくと定期的に特定の関数が実行される状態になる。