動機

Reactの内部仕様について記事やソースコードを読んでもいまいち理解できず、console.logやdebuggerを仕込んで動作を確認したいことがある。
これと同等のことはChromeのdevtoolsのAdd logpoint, Add breakpointを使えば可能であるが、該当する箇所を見つけにくいと感じる。見つかっても次に読むべきコードにさくさく辿り着けない。
なので、コードリーディングしやすくできないか模索してみました。

React(Vite)でのやり方

ViteでReactアプリを作成

npm create vite@latest study-urql -- --template react-ts
cd study-urql
npm install

設定でミニファイをOFFにする

vite.config.tsのminifyをfalseにする

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    minify: false,
  }
})

ビルド

NODE_ENV=development npm run build

なぜ`NODE_ENV=development`がいる？

https://github.com/facebook/react/blob/ee1eb4826f4f7beb4e06f2c15f03145bb5bddf5b/packages/react/npm/index.js
ここにあるようにNODE_ENVをproduction以外にしておくミニファイされてないコードでビルドしてくれる模様。

debuggerを仕込む

useStateの処理を理解したいのでGitHubでそれっぽい箇所を特定したがこの先が追えなかったので、以下のようにとりあえずデバッガを仕込んでみる。

dist/assets/index-xxxxxx.js

      function useState(initialState) {
        var dispatcher = resolveDispatcher();
        debugger;
        return dispatcher.useState(initialState);
      }

Webサーバーを起動

http-server dist
- http-serverは別途インストールする必要あり

ステップ実行で追ってみる

とりあえず止まってくれたのでステップ実行してみると

これで次に読むべきコードが分かった。

続いて、
npmパッケージの本体にconsole.logを仕込んで動作させてみる。

任意のnpmパッケージ(URQL)でのやり方

上記の続き

urqlのインストール

npm install urql graphql

package.jsonを書き換えてミニファイを（強引に）OFFにする

node_modules/urql/package.jsonのmoduleをdist/urql.jsに書き換える

diff --git a/node_modules/urql/package.json b/node_modules/urql/package.json
index 95b7760..18f98b4 100644
--- a/node_modules/urql/package.json
+++ b/node_modules/urql/package.json
@@ -21,7 +21,7 @@
     "react"
   ],
   "main": "dist/urql.js",
-  "module": "dist/urql.es.js",
+  "module": "dist/urql.js",
   "types": "dist/urql.d.ts",
   "source": "src/index.ts",
   "files": [

同様に、node_modules/@urql/core/package.jsonのmoduleもdist/urql-core.jsに修正する。

ビルドし直す

NODE_ENV=development npm run build

console.logを仕込む

HTTPリクエストはどこで実行しているかが気になりGitHubでソースコードを検索してみると見つけたが、
本当にここが呼び出されいるのか確認するために console.log を仕込んでみた。

async function* fetchOperation(operation, url, fetchOptions) {
  var networkMode = true;
  var result = null;
  var response;
  try {
    yield await Promise.resolve();
    response = await (operation.context.fetch || fetch)(url, fetchOptions);
    // ここに仕込んだ
    console.log(response);
    var contentType = response.headers.get("Content-Type") || "";
    var results;
    ...

以下のように出力されることを確認できた。

これで安心してコードリーディングできる！
今回一番感じたメリットは、ビルドで出力したファイルをWebstormなどのIDEで定義ジャンプを使えたこと。
これでさくさく読めるはず！

宿題

URQLで使っているwonkaってライブラリも同様にしてみたが、ソースコードがミニファイされたままなのでこれをどうにかしたい。