Blazor ComponentsをVue.jsから使うためのコードのGeneratorを作った

Qiitaで過去に公開した

この記事では、AngularとReactからBlazor Componentsを使うためのコード生成のサンプルを紹介した。

まとめのところで書いたようにオレオレテンプレートを作り上げることで、Reactのコード生成を拡張出来ることの例をあげたが、同様にテンプレートを書き換えることでVue.js向けのGeneratorも作ることが出来たので紹介する。

Blazor側で使用するアノテーションや、C#とJavaScriptの型の対応付のような共通処理に関しては前述した記事に記載してあるので省略し、ここではVue.js依存の処理の紹介をする。

https://github.com/yamachu/aspnet-samples/commit/e2f216267fa6201071a426e016cded16ef93a4be#diff-060eba5642108539fcc4d415774c915df08792683a2903a397ec3ed23c6183d8

もともとのComponentsの生成コードを追ったことがわかる人に取っては一目瞭然だが、なんてことのないReact向けのコードをVue.js向けに移植しただけである。 Vue.jsの3からReactのCustom Hooksみたいな処理が書けるComposition APIが導入されたので、その微妙な差異を吸収するだけでVue.js向けのコードが移植できる。

Vue.jsの3.2(?)から導入された<script setup> SFCと組み合わせることによってよりComponentのPropsも記述しやすくなり、またReactで使用していたコード生成のものに似せやすくなっている。

実際に使う側は

<script setup lang='ts'>
import { getCurrentInstance } from 'vue';
import { useBlazor } from './blazor-vue';
interface Props {
  title: string;
  incrementAmount: number | undefined;
  customObject: object;
  customCallback: (_: object) => void;
}
const props = defineProps<Props>();
const instance = getCurrentInstance();
const Counter = useBlazor(instance, 'counter', props)
</script>

<template>
    <Counter />
</template>

これだけで済む。

と、またBlazorの依存から逃げることの出来ていない内容を紹介したが

runtime/src/mono/sample/wasm/browser-es6 at main · dotnet/runtime · GitHub

こんな感じでBlazor非依存でC# のコードを実行するサンプルも紹介されている。実際に試してコードを追って見たところ、main関数やstatic methodは実行できるが、class methodはまだ駄目そう(?)な様に見えるので引続きwatchしていこう。

窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

Blazor ComponentsをVue.jsから使うためのコードのGeneratorを作った