Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけた

Next.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。

• LinkではクリックするとsingletonRouterのpushを呼んでいる
• pushはchangeメソッドを呼んでいる
• next/next-server/lib/router/router.ts change
  • pathnameやqueryは、url、つまりLinkのhrefから抽出している
  • routeはただpathnameから最後の/を消しただけ
  • dynamic routeの場合(/posts/[id]みたいになっているやつ)なら、hrefとasを比べてパラメータを抜き出して、queryに突っ込んでいる
  • このへんでgetRouteInfoを使って、routeとかpathnameからコンポーネントを特定しようとしてそう
  • getRouteInfoではfetchComponentでrouteからコンポーネントを特定する。routeだけがルーティングに関係ありそう
    • fetchComponentではthis.pageLoader.loadPageに処理を移譲
      • pageLoaderはこのへんで作られていて、routerに渡される
      • pageLoader.loadPageはこの辺が実体。routeに書かれた情報からpages/以下のjsのファイルパスを探している様子が伺える。このあたりでいろいろごにょごにょして、next.jsのPageのコンポーネントを見つけていそう
  • RouteInfoが取得できたら、Routerをsetで更新する
    • set内ではインスタンスの更新 & routeInfoをnotifyしている
    • notifyはrouterのインスタンス化の時に受け取ったSubscriptionに通知
    • Subscriptionを作ってるのはこの辺。通知を受け取ると、fetchComponentで取得されたComponentなどを使って再レンダー。これで新しいページがレンダーされるはず。
      • renderの実体はdoRender
      • doRenderはAppContainerに包んでReactElementをrenderする
      • AppContainerはRouterContext.Providerでrouterを入れているので、更新されたrouterがコンポーネントから参照できる

vscode-powertoolsを使って、VSCodeの挙動を自分好みに変える

VSCodeを使っていると、より便利にするために挙動を少し変えたいと思うときがある。ほんとにちょっとした変更の場合、拡張を書くまではしたくないので、いい方法がないかなと思っていたところ、vscode-powertoolsを使うと自分好みにできそうだった。

今回僕が困っていたのは、Emacs Friendly Keymap拡張のemacs.C-yコマンドが、選択範囲がある時に選択範囲を消さずにペーストしてしまうことだった。この挙動を改善する。

https://github.com/egodigital/vscode-powertools#commands- を使うとVSCodeのコマンドを自分で実装できるので、この機能を使う。

やることとしては

• settings.jsonでvscode-powertoolsの設定を書く
• commandをjsファイルで実装する
• Keyboard Shortcutsを設定する

settings.jsonでvscode-powertoolsの設定を書く

以下のような設定をsettings.jsonに書く。

{
  "ego.power-tools": {},
  "ego.power-tools.user": {
    "commands": {
      // emacs.C-yの挙動を変え、選択範囲は消えるようにする
      "emacs.better-C-y": {
        "name": "emacs better C-y",
        "description": "emacs better C-y",
        "script": "emacs-better-c-y.js"
      }
    }
  },
}

この設定の要点は

• ego.power-toolsの設定はworkspace単位になるので、グローバルなコマンドを作りたければego.power-tools.userに設定する。
• emacs.better-C-yというIDのコマンドが作られる
• コマンドを実行するとemacs-better-c-y.jsというファイルが実装される。グローバルなコマンドは~/.vscode-powertools/以下にファイルを作成する

commandをjsファイルで実装する

あとはcommandをjsファイルで実装する。

~/.vscode-powertools/emacs-better-c-y.js

exports.execute = async args => {
  const vscode = args.require("vscode");

  await vscode.commands.executeCommand("editor.action.clipboardPasteAction");
  await vscode.commands.executeCommand("emacs.exitMarkMode");
};

Emacs Friendly KeymapではPromise.allでeditor.action.clipboardPasteActionとemacs.exitMarkModeを実行していたので、exitMarkModeが先に実行されると選択範囲が消えない現象になっていた。そこでawaitで順序を固定することで解決した。この挙動はたぶんバグなので、今度PRしようとは思っている。

Keyboard Shortcutsを設定する

最後に作ったコマンドにKeyboard Shortcutsを設定する。

keybindings.json

[
    // emacs.C-yと違い、範囲選択時には範囲を消してからペーストするように
    {
        "key": "ctrl+y",
        "command": "emacs.better-C-y",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+y",
        "command": "-emacs.C-y",
        "when": "editorTextFocus && !editorReadonly"
    },
]

まとめ

vscode-powertoolsを使って、VSCodeの挙動を自分好みに変える方法を書いた。これでどんどん自分好みにカスタマイズしていけそう。さらにvscode-powertoolsはいろいろなものを作れるので、他にも試したいと思う。

TypeScript 3.7.2でjsonをimportした際に、json構造によっては二度目の代入が型エラーになるバグを踏んだ

表題のとおり。TypeScript 3.8.0-dev.20191126では直っていたので、3.8.0が来るまで気長に待ちましょう。

再現コードはこちら。

https://github.com/shibayu36/typescript-json-module-bug/blob/master/test.ts

import data from "./data.json";
type Data = {
  a: string;
  array: {
    hoge: number;
  }[];
};

const d1: Data = data;
const d2: Data = data; // type check error ocurred

const copiedData = data;
const d3: Data = copiedData; // type check error didn't occur

const data2 = {
  a: "b",
  c: "d",
  array: [{ hoge: 1 }, { hoge: 2, foo: "bar" }]
};

const d4: Data = data2;
const d5: Data = data2; // type check error didn't occur

https://github.com/shibayu36/typescript-json-module-bug/blob/master/data.json

{
  "a": "b",
  "c": "d",
  "array": [{ "hoge": 1 }, { "hoge": 2, "foo": "bar" }]
}

• jsonにobjectのarrayが含まれていて、かつobjectのarray中に余分なフィールドが含まれている時(上記の例ならfooフィールド)、importした構造を一度目に代入する時は成功するのに、二度目に代入する時は型エラーが発生する
  • d1とd2への代入
• しかし、dataを一度別の変数に代入すると、同じ型の変数にも代入が成功する
  • d3への代入
• importではなく普通にobjectを作成した時(data2)、それは何回代入しても型チェックは通る