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
| 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 しておくと定期的に特定の関数が実行される状態になる。 |
SVGR というのがあり、これを通すと React Component を吐き出してくれる。webpack 用のローダーもあるが、頻繁に変更するわけでもないので CLI での利用。
npx @svgr/cli -- icons/clock-icon.svg > dist/ClockIcon.js
:has() が 2023 年末にすべてのブラウザでサポートされて、現実的に利用できるようになった。
「渡したセレクターにマッチする子要素を持つ親要素であるか」を判定できるので、例えばリストが空のときにセクションごと消すことができる。
<style>
section:has(ul:empty) {