カランのブログ

今のモード ライト

深入理解 Svelte（1）— Svelte 編譯過程 | Svelte 系列文

如果想問問題或單純回饋的話可以填寫表單唷

記事のタイトルや概要は自動翻訳であるため（中身は翻訳されてない場合が多い）、変な言葉が出たり、意味伝わらない場合がございます。空いてる時間で翻訳します。

スベルテの深い理解 (1) — スヴェルテのコンパイルプロセス

Svelteの深い理解（1）- Svelteのコンパイルプロセス

この記事を読む前に、読者はSvelteまたは他のフロントエンドフレームワークの使用経験があり、実装原理に興味を持っていることを前提としています。

「Svelteのコンパイル方法（0）- 抽象構文木とは何ですか？」をまだ読んでいない場合は、先に読んでからこの記事を読むことをおすすめします。

この記事では、次のいくつかの質問に答えたいと思います：

  • なぜSvelteはコードをJavaScriptにコンパイルできるのか
  • Svelteではテンプレートエンジンのような文法（{#if} {#await}など）を使用できる理由と、一般的なテンプレートエンジンとの違いは何か

序文

最終的なコードを生成するために、Svelteはコンポーネントを1回コンパイルして必要な情報を取得する必要があります。Svelteのコンパイルプロセスは、コードの生成までの間にいくつかのステージを経ます。

  • JavaScript、HTML + Svelteテンプレート構文、CSS構文をASTに解析する
    • <script>内のJavaScriptコードを acorn を使ってASTに解析する
    • HTML + Svelteテンプレート構文（{#if} {variable}など）を独自のパーサーを使ってASTに解析する
    • CSS構文を csstree を使ってASTに解析する
  • new Component(ast) を呼び出して Svelte コンポーネントを生成する。コンポーネントには instance、fragment、varsなどの情報が含まれます（src/compiler/compile/Component.ts）
  • renderer.render を呼び出して js と css を生成する

実際のフローと処理は、上記よりもはるかに複雑です（intro、outroの制御、イベントリスナー、変数トラッキングなど）。全体のフローは、次の図を参照してください：

Svelteのコンパイルフロー

1. ソースコードをASTに解析する

Svelteはまずコンポーネントを3つの主要な部分に分割します：HTML（およびSvelteの構文）、CSS、JavaScript。それぞれを異なるパーサーで解析します。

Svelteコンポーネントが解析された後の構造を知りたい場合は、AST Explorerで確認できます：

<script>
  let count = 0;
  count++;
</script>

<style>
  p {
    font-size: 14px;
  }
</style>

<p>count is {count}</p>

生成された抽象構文木（右側）：

Screenshot_2021-02-07 AST explorer(3)

解析後、html、css、instanceの3つのASTが生成されます。instanceは、<script>タグ内に含まれるJavaScriptコードを指します。

2. Svelteコンポーネント（Component）を生成する

svelte

このステージでは、SvelteはASTの中で必要な情報をComponentクラスに格納します。これには、コンポーネントのHTML（Svelteではfragmentと呼ばれる）、宣言された変数、instanceのASTなどが含まれます。

次に、instance（上記の図で<script>で囲まれた部分）を走査し、すべての変数の使用状況を把握します。この時点で、変数が宣言されているが使用されていないか、変数に$がプレフィックスとして付いているかどうかなどを検出できます。

その後、HTMLの部分を走査し、fragmentを作成します。これは、Svelteコンパイルの中でも最も重要なロジックの1つです。Fragmentにはさまざまな種類があり、通常のHTMLタグやif、awaitなどのSvelteの構文が含まれます。

// https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/nodes/shared/map_children.ts
function get_constructor(type) {
  switch (type) {
    case 'AwaitBlock': return AwaitBlock;
    case 'Body': return Body;
    case 'Comment': return Comment;
    case 'EachBlock': return EachBlock;
    case 'Element': return Element;
    case 'Head': return Head;
    case 'IfBlock': return IfBlock;
    case 'InlineComponent': return InlineComponent;
    case 'KeyBlock': return KeyBlock;
    case 'MustacheTag': return MustacheTag;
    case 'Options': return Options;
    case 'RawMustacheTag': return RawMustacheTag;
    case 'DebugTag': return DebugTag;
    case 'Slot': return Slot;
    case 'Text': return Text;
    case 'Title': return Title;
    case 'Window': return Window;
    default: throw new Error(`Not implemented: ${type}`);
  }
}

異なるタイプの各fragmentには、Svelteが処理を容易にするために個別にクラスが作成されます。各クラスの実装の詳細には触れませんが、いくつかの例を挙げます：

  • Elementは通常のHTMLタグに対応し、イベントハンドラや属性のチェック、a11yのチェックなどを処理します。
    • たとえば、tagNameがaでありhrefが指定されていない場合、警告が表示されます（ソースコード）
  • IfBlockは{#if} {:else}の構文を処理します
  • EachBlockは{#each}の構文を処理します

その後、Svelteは対応するCSSにハッシュを追加して名前の衝突を防ぎ、cssスタイルを生成します。

3. fragmentとblocksを作成する

ついにコード生成のステージに入ります。コード生成のロジックは、src/compiler/render_dom/Renderer.tsにあります（SvelteはSSRかDOMかに応じてrendererを選択するため、ここではDOMを例に説明します）。

最初に、Wrapper内のrender関数を使用してfragmentを作成します。たとえば、Text.tsは、テキストを生成する部分を処理します。fragmentは子ノードを繰り返し処理し、対応するコードをrender関数で生成し、コードフラグメントをblockに追加します。

その後、blockを宣言し、block内には非常に多くのコードフラグメント（例：マウント、アンマウント時に生成するコードなど）が含まれます。最終的に、create_fragment関数を作成するために使用されます。これはSvelteの中で最も重要で複雑な部分と言えます。全体の実装は、src/compiler/render_dom/index.tsで確認できます。

コードの生成部分では、作者のRich Harrisが作成したcode-redを使用しています。このライブラリの特徴は、var a = 1といった形式で対応するASTノードを直接生成できることです。たとえば、例のvariableAは実際にはVariableDeclarationノードになります。また、テンプレートリテラルの構文を使用して簡単にコードを生成することもできます。

コード生成の詳細については、IT鐵人賽のビデオ「生成元件程式碼」を参照してください。

https://youtu.be/lxd6vsmL7RY

たとえば、動的にadd関数を生成したい場合は、次のように書くことができます：

最後に、printメソッドを使用して構文木をコードに変換します。次に、Svelteの実装を見てみましょう（EachBlock.tsを例に挙げますが、他の生成は比較的複雑です）。生成されるコードの元のソースコードを見てみましょう：

// each_block_else.c()をコンポーネントの作成時に呼び出す
block.chunks.create.push(b`
  if (${each_block_else}) {
    ${each_block_else}.c();
  }
`);

// SSRの場合は、each_block_else.l()をclaim時に呼び出す
if (this.renderer.options.hydratable) {
  block.chunks.claim.push(b`
    if (${each_block_else}) {
      ${each_block_else}.l(${parent_nodes});
    }
  `);
}

// each_block_else.m()をmount時に呼び出す
block.chunks.mount.push(b`
  if (${each_block_else}) {
    ${each_block_else}.m(${initial_mount_node}, ${initial_anchor_node});
  }
`);

ここで呼び出されているbは、code-redのAPIの1つであり、これらが実際に生成されるコードです。

なぜSvelteはコードをJavaScriptにコンパイルできるのか？

この記事の冒頭での質問に戻りますが、Svelteはコードを事前にコンパイルし、解析するため、.svelteファイルをJavaScriptにコンパイルできるのです。

Svelteではなぜテンプレートエンジンのような文法を使用できるのか、一般的なテンプレートエンジンとはどのように異なるのか

Svelteは独自のパーサーを実装しており、通常のHTMLだけでなく、{}の中の文法も解析することができます。そして、上記で説明したコンパイルフローを経て、対応するJavaScriptコードを生成します。一般的なテンプレートエンジンとの違いは、Svelteの文法はリアクティブであり、一般的なテンプレートエンジンの文法は静的なHTMLです。例えば、erbを例に取ると：

<% unless content.empty? %>
  <div>
    <%= content.text %>
  </div>
<% end %>

このような文法は通常、HTMLをサーバーサイドでレンダリングしてから返されます。しかし、Svelteの文法では：

{#if content}
  <div>
    {content.text}  
  </div>
{/if}

contentが空でない場合にのみ画面が更新されます。

まとめ

この記事では、Svelteのコンパイルからコード生成までの大まかなフローを説明しました。コードをASTに解析し、fragmentと対応するノードを作成し、最後にrendererを使用してコードを生成します。詳細や実装についてはあまり触れていませんが、後続の記事で詳しく説明します。この記事を読んだ後、Svelteのコード生成プロセスについてある程度理解していただければ幸いです。

参考資料

この文章が役に立つと思うなら、下のリンクで応援してくれると大変嬉しいです✨

Buy me a coffee