内部仕様を理解するためにReactなどのnpmパッケージにconsole.log, debuggerを仕込んでみた

# 動機
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`にする
```typescript
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でそれっぽい箇所](https://github.com/facebook/react/blob/ee1eb4826f4f7beb4e06f2c15f03145bb5bddf5b/packages/react/src/ReactHooks.js#L96)を特定したがこの先が追えなかったので、以下のようにとりあえずデバッガを仕込んでみる。

```js:dist/assets/index-xxxxxx.js
      function useState(initialState) {
        var dispatcher = resolveDispatcher();
        debugger;
        return dispatcher.useState(initialState);
      }
```      

## Webサーバーを起動
- http-server dist
    - http-serverは別途インストールする必要あり

## ステップ実行で追ってみる
![スクリーンショット 2024-01-23 1.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19909/4c7249c4-1a5c-bf69-a6f7-c4860dcedc1a.png)

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

![スクリーンショット 2024-01-23 1.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19909/98ea6dfa-acba-9e4d-7cbf-7525516b29bb.png)

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

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

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

上記の続き

## urqlのインストール
- npm install urql graphql

## package.jsonを書き換えてミニファイを（強引に）OFFにする
- `node_modules/urql/package.json`の`module`を`dist/urql.js`に書き換える
```diff
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` を仕込んでみた。

```js
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;
    ...
```

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

![スクリーンショット 2024-01-25 1.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19909/12ee6aea-89dd-6bf3-67e4-29a8ab40e81d.png)

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

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