Svelteコンパイラのコードを読む Part.2

TL;DR

ざっと雰囲気をつかみたい場合は、Svelteのコントリビューターが書いたまとめ記事があるので、そちらを読むほうが絶対に良いです。

The Svelte Compiler Handbook | Tan Li Hau

動画がいい場合はこっち。

https://www.youtube.com/watch?v=e2pGS1eqja8

ここからは、この記事のアウトラインに沿ってコードを1行ずつ読んでいく・・ってことをやります。

コンパイル結果

先に、この単純なコンポーネントである`App.svlete`を、`compile()`に渡すとどうなるかを見ておく。

const { compile } = require("svelte/compiler");

const result = compile(
  `
  <script>
    let name = "svelte";
  </script>
  <p>Hello {name}</p>
`,
  {
    generate: "dom", // or "ssr"
  }
);

console.log(result);

というイメージのコード。

`dom`つまりCSR用の場合の結果はこうなる。

/* App.svelte generated by Svelte v3.23.2 */
import {
  SvelteComponent,
  detach,
  element,
  init,
  insert,
  noop,
  safe_not_equal,
} from "svelte/internal";

function create_fragment(ctx) {
  let p;

  return {
    c() {
      p = element("p");
      p.textContent = `Hello ${name}`;
    },
    m(target, anchor) {
      insert(target, p, anchor);
    },
    p: noop,
    i: noop,
    o: noop,
    d(detaching) {
      if (detaching) detach(p);
    },
  };
}

let name = "svelte";

class App extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default App;

コンポーネントのクラスがそのまま返る。
`fragment`は剥き身のコンポーネントのようなイメージで、コードでも度々出てくる。

`ssr`の場合はこうなる。

/* App.svelte generated by Svelte v3.23.2 */
import { create_ssr_component, escape } from "svelte/internal";

let name = "svelte";

const App = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
  return `<p>Hello ${escape(name)}</p>`;
});

export default App;

コンポーネントを返す関数を含んだオブジェクトが返る。DOMはもちろんただの文字列の表現。

というように、コンポーネントを実行可能なコードにコンパイルする処理なのである。

ちなみにこの様子は、公式のREPLでオプションをいじればすぐ見れるのでおすすめ。

https://svelte.dev/repl

svelte.compile()

さて本題のコードへ。

`parse()`で得たSvelte流のASTを元に、Svelteのランタイムに変換していくステップ。

コンパイラの肝であり、ここを読めばコンパイル時に何が成されているのかのすべてがわかるはず・・！

function compile(
  source: string,
  options: CompileOptions
): {
  js: { code: string };
  css: { code: string };
  ast: Ast;
  warnings: Warning[];
  vars: Var[];
  stats: Stats;
} {}

compiler/compile/Component.ts

https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/Component.ts

`*.svelte`ファイルはそれぞれがコンポーネントという単位で扱われて、その実態がこのクラス。
コンストラクタでASTを受け取って、それを再帰で歩きながら精査する。

コンストラクタでやってることはこんな感じ。

まずはCSSまわりからはじまる。

• 各コンポーネントでscopedなCSSを実現するための`Stylesheet`クラスの初期化
  • https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/css/Stylesheet.ts
  • `css`のASTを受け取る
  • `.svelte-1tyk8gu`みたいなハッシュ作ってるのもココ（使うのは少し先）
• CSSのルール（セレクタと`{}`）単位でチェックしていく
  • ASTの`Atrule` -> `Rule` -> `Declaration`を、それぞれのクラスに変換
  • あとでunusedなものを見つけられるようなマーキングも
• `stylesheet.validate()`
  • `:global()`を変な位置で宣言してないかなどを検証

つぎに、`markup`と`script`の部分。

• `svelte:option`要素があればそれのパース
  • コンポーネント全体へ関係するオプションなので
  • `CustomElement`としての指定があるかどうかも
• `context=module`な`script`部の精査
  • 変数名に`$`を使ってたらエラーにする
  • Writableな変数の宣言のマーキング
• 通常の`script`部の精査
  • 同様に変数名の精査や、`writable`な変数のマーキング
  • リアクティブな変数のマーキングも
  • 再代入による値の更新部分のマーキング
• `markup`部を表現する`Fragment`クラスの初期化
  • `html`のASTを受け取る
  • 再帰でASTの`type`からそれぞれのクラスに仕分けていく
    • https://github.com/sveltejs/svelte/tree/master/src/compiler/compile/nodes
  • Svelteで利用できるテンプレートの構文は、すべてここで定義されてる
  • 不正な記述があったらここで弾かれる（a11y的にこの属性をつけろとかもここであわせてみてる）
  • `{#if}`とか`{#each}`とか、ブロックごとにスコープを区切りながら
  • 参照されてたら、変数に`referenced`とマーク

そして最後にまとめの処理。

• 再び`script`部の精査
  • この時点ですべての変数やその用途がわかってる
  • `markup`部で新たに参照されてたりするのでそれをアップデート
  • 存在しない変数を参照してたら警告するなども
  • リアクティブな宣言を抽出して、依存グラフを作る
  • `import`してるものがあればそれもココでチェックしておく
• scopedなCSSの`class`属性の付与
  • 最初の方で用意したハッシュ
• unusedなCSSセレクタの警告

まずは`script`部と`markup`部のASTを掘っていって、リアクティブな依存関係や参照の関係を明らかにして、最後に最適化するってのがメインの処理だった。

これでASTを元に必要な情報を持った`Component`のインスタンスを作るところまでできたので、次はそれをレンダリングしていく。
この時点ではまだ書き出しできる文字列にはなってない。

まとめ

• `compile()`を経てJavaScriptやCSSは実行可能な文字列になる
• `compile()`は、まず`parse()`を使ってSvelteのASTを用意する
• そのASTを使って、`Component`クラスを初期化する
  • ここでやってるのは、変数とその依存関係の精査
  • ASTを使って、ASTを変換しながらそれをプロパティに持つクラスに置き換えてってる感じ

さて、この`Component`を使ってランタイムのコードをレンダリングするのが次にやること。

次回へ続く。