ディレクティブを実装しよう (v-bind)

方針

ここからは Vue.js の醍醐味であるディレクティブを実装していきます。
例の如く、ディレクティブも transformer に噛ませるのですが、そこで登場するのが DirectiveTransform というインタフェースです。 DirectiveTransform は DirectiveNode,ElementNode を受け取り、Transform 後の Property を返すようなものになっています。

export type DirectiveTransform = (
  dir: DirectiveNode,
  node: ElementNode,
  context: TransformContext,
) => DirectiveTransformResult

export interface DirectiveTransformResult {
  props: Property[]
}

まずは今回目指す開発者インタフェースから確認してみましょう。

import { createApp, defineComponent } from 'chibivue'

const App = defineComponent({
  setup() {
    const bind = { id: 'some-id', class: 'some-class', style: 'color: red' }
    return { count: 1, bind }
  },

  template: `<div>
  <p v-bind:id="count"> v-bind:id="count" </p>
  <p :id="count * 2"> :id="count * 2" </p>

  <p v-bind:["style"]="bind.style"> v-bind:["style"]="bind.style" </p>
  <p :["style"]="bind.style"> :["style"]="bind.style" </p>

  <p v-bind="bind"> v-bind="bind" </p>

  <p :style="{ 'font-weight': 'bold' }"> :style="{ font-weight: 'bold' }" </p>
  <p :style="'font-weight: bold;'"> :style="'font-weight: bold;'" </p>

  <p :class="'my-class my-class2'"> :class="'my-class my-class2'" </p>
  <p :class="['my-class']"> :class="['my-class']" </p>
  <p :class="{ 'my-class': true }"> :class="{ 'my-class': true }" </p>
  <p :class="{ 'my-class': false }"> :class="{ 'my-class': false }" </p>
</div>`,
})

const app = createApp(App)

app.mount('#app')

v-bind には概ね上記のような記法があります。詳しくは下記の公式ドキュメントを参照してください。
class や style についても今回取り扱います。

https://vuejs.org/api/built-in-directives.html#v-bind

AST の変更

まず、AST についてですが、今は exp, arg 共に string という簡易的なものになってしまっているので、ExpressionNode を受け取れるように変更します。

export interface DirectiveNode extends Node {
  type: NodeTypes.DIRECTIVE
  name: string
  exp: ExpressionNode | undefined // ここ
  arg: ExpressionNode | undefined // ここ
}

改めて name と arg と exp について説明しておくと、 name は v-bind や v-on などのディレクティブ名です。on や bind が入ります。今回は v-bind を実装していくので、bind が入ります。

arg は : で指定する引数です。v-bind でいうと、 id や style などが入ります。
(v-on の場合は click や input などがここに入ってきます。)

exp は右辺です。v-bind:id="count" でいうと count が入ります。
exp も arg も、動的に変数を埋め込むことができるので、型は ExpressionNode になります。
( v-bind:[key]="count" のように arg も動的にできるので)

dir_ast

Parser の変更

parser の実装をこの AST の変更に追従します。exp, arg を SimpleExpressionNode としてパースします。

ついでに v-on などで使う @ やスロットで使う # などもパースします。
(正規表現を考えるのが面倒くさい(説明しながら徐々に追加するのが面倒臭い)のでとりあえず本家のものをそのまま拝借します)
参考: https://github.com/vuejs/core/blob/623ba514ec0f5adc897db90c0f986b1b6905e014/packages/compiler-core/src/parse.ts#L802

少し長いので、コード中にコメントを書きながら説明していきます。

function parseAttribute(
  context: ParserContext,
  nameSet: Set<string>,
): AttributeNode | DirectiveNode {
  // .
  // .
  // .
  // .
  // directive
  const loc = getSelection(context, start)
  // ここの正規表現は本家から拝借
  if (/^(v-[A-Za-z0-9-]|:|\.|@|#)/.test(name)) {
    const match =
      // ここの正規表現は本家から拝借
      /(?:^v-([a-z0-9-]+))?(?:(?::|^\.|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(
        name,
      )!

    // name 部分のマッチを見て、`:` で始まっていた場合には bind として扱う
    let dirName =
      match[1] ||
      (startsWith(name, ':') ? 'bind' : startsWith(name, '@') ? 'on' : '')

    let arg: ExpressionNode | undefined

    if (match[2]) {
      const startOffset = name.lastIndexOf(match[2])
      const loc = getSelection(
        context,
        getNewPosition(context, start, startOffset),
        getNewPosition(context, start, startOffset + match[2].length),
      )

      let content = match[2]
      let isStatic = true

      // `[arg]` のような動的な引数の場合、`isStatic` を false として、中身を content として取り出す
      if (content.startsWith('[')) {
        isStatic = false
        if (!content.endsWith(']')) {
          console.error(`Invalid dynamic argument expression: ${content}`)
          content = content.slice(1)
        } else {
          content = content.slice(1, content.length - 1)
        }
      }

      arg = {
        type: NodeTypes.SIMPLE_EXPRESSION,
        content,
        isStatic,
        loc,
      }
    }

    return {
      type: NodeTypes.DIRECTIVE,
      name: dirName,
      exp: value && {
        type: NodeTypes.SIMPLE_EXPRESSION,
        content: value.content,
        isStatic: false,
        loc: value.loc,
      },
      loc,
      arg,
    }
  }
}

これで今回扱いたい AST Node にパースすることができました。

Transformer の実装

続いて、この AST を Codegen 用の AST に transform する実装を書いていきます。
少々複雑なので、以下の図に軽く流れをまとめました。まずはそちらをご覧ください。
大まかに、必要な項目を挙げると、v-bind に引数が存在するかどうか、class かどうか、style かどうかです。
※ 今回関係してくる処理以外の部分は省略しています。(あまり厳格な図ではありませんがご了承ください。)

dir_ast

まず、前提として、ディレクティブというものは基本的に要素 (element) に対して宣言されているものなので、

ディレクティブに関する transformer は transformElement に呼ばれます。

今回は v-bind を実装したいので、transformVBind と言う関数を実装していくのですが、
注意点として、この関数では args が存在している宣言のみの変換を行う点が挙げられます。

transformVBind は、

v-bind:id="count"

のようなものを、

{
  id: count
}

というオブジェクト(実際にはこのオブジェクトを表す Codegen Node)に変換する役割のみを持ちます。

本家の実装でも、以下のような説明がなされています。

codegen for the entire props object. This transform here is only for v-bind with args.

引用元: https://github.com/vuejs/core/blob/623ba514ec0f5adc897db90c0f986b1b6905e014/packages/compiler-core/src/transforms/vBind.ts#L13C1-L14C16

流れを見てもわかる通り、transformElement では directive の arg をチェックして、存在していなければ transformVBind を実行せず mergeProps という関数呼び出しに変換しています。

v-bind="hoge"の形式で渡された引数と、そのほかの props をマージする関数です。

vue

<p v-bind="bindingObject" class="my-class">hello</p>

↓

h('p', mergeProps(bindingObject, { class: 'my-class' }), 'hello')

また、class と style に関してはさまざまな開発者インタフェースを持っているため、normalize する必要があります。
https://vuejs.org/api/built-in-directives.html#v-bind

normalizeClass と normalizeStyle という関数を実装し、それぞれに適用します。

arg が動的な場合は、特定が不可能なため、normalizeProps という関数を実装し、それを呼び出すようにします。 (内部で normalizeClass と normalizeStyle を呼び出します)

さてここまで実装できたら動作を見てみましょう！

vbind_test

とっても良さそうです！

次回は v-on を実装していきます。

ここまでのソースコード:
GitHub

ディレクティブを実装しよう (v-bind) ​

方針 ​

AST の変更 ​

Parser の変更 ​

Transformer の実装 ​

ディレクティブを実装しよう (v-bind)

方針

AST の変更

Parser の変更

Transformer の実装