HonoのJSXでPolyglotなSVGからQuineでイルミネーション

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。OSS珍百景として紹介されたPRの作者の天野です。

今年は以下のあたりを中心にHonoにコミットしました

  • v3.12.0
    • CSRF Protection Middleware
    • css Helper
  • v4.0.0
    • Client Components
  • v4.5.0
    • Combine Middleware
    • React 19 Compatibility

この記事ではこれらの機能の実現に使った内部の機能に触れつつ、PolyglotなSVGを使ってHonoのJSXの表現力を試してみたいと思います。

できたもの

hono-polyglot-svgができました。以下のSVG画像ファイルはそのまま出力するとオリジナルのHonoのアイコン画像が表示されますが、HonoのJSXを経由すると、色を変えつつ自分自身を出力するQuineなSVG画像として出力されます。

  • http://localhost:3000/static/hono.svg : そのまま出力
  • http://localhost:3000/static/hono.svg?eval=1 : JSXで処理して出力

です。以下のような結果になります。

解説

コールバックから書き換える

HonoのJSXの文字列化では、要素の属性値や内容としてPromise<string | String>を返すことができ、useを使うことなしにasyncな関数コンポーネントから簡単に文字列の結果を出力することができます。さらにここでStringに対してisEscapedcallbacksを指定することで、出力される際の挙動をコントロールすることができます。

この特殊なStringを作成するためには、通常は"hono/utils/html"からエクスポートされているraw()を使いますが、使わずに作成することもできます(内部の構造は今後変更される可能性もあるので、推奨はされませんが)。

callbacksに指定した関数が呼び出されるタイミングは、単純な文字列化以外にもrenderToReadableStream()を使ってレスポンスを返す前後のタイミングなど、いくつかあるのですが、ここでは深入りせず単純な文字列化を前提とします。以下のようにしてcallbacksに指定した関数で渡されたbufferの値を変更すると、出力結果を書き換えることができます。

これが今回の、処理するたびにSVG画像の色が変わる挙動の仕組みです。Honoに実装された機能の中では「css Helper」でのstyle要素の埋め込みや、「React 19 Compatibility」でのtitle要素のhoistingで使われています。

(無駄に)Combine Middlewareを使う

「同じパスのURL」でありながら「処理方法(クエリストリングで指定)によって結果が変わる」ということを表現したかったので、Combine Middlewareのsome()を無駄に使って宣言的に書いてみました。以下のように書くと「evalが指定されたときにのみevalSvgMiddlewareを適用する」という挙動になります。

今回の例だと無理矢理感がありますが、hono.devのドキュメントでは認証と組み合わせた実用的な例も紹介されています。

解説は以上になります。

今年の振り返り

さて今年といえばHonoにとってはHono Conference 2024 - Our first stepの開催が一番のイベントだったと思います。(参加レポート書いてなかったですが。)コミッターの方やコメントをしてくれる方の顔を見られて、どんな話し方をするのかを知ることができたのは嬉しかったです。議論が円滑に進むかどうかはまた別の話だとしても、「GitHubのコメントが当人の声で再生できるようになる」というのは、やはりよいものだと思いました。

この記事について

これは Hono Advent Calendar 2024 のシリーズ 1の6日目の記事です。シリーズ 2もあるようなので、引き続きよろしくお願いします!

prettierで整形できて、minifyして書き出せる、MTML

  • 投稿日:
  • by
  • カテゴリ:

こんにちは、天野と申します。Movable Typeの開発に参加しています。

今日はMTML(Movable Type Markup Language)の話です。

MTMLを気持ちよく編集したい

公開される記事の典型的なMTMLは以下のようなものになります。

HTMLの属性の中にMTタグが入っていますが、「カスタム要素の入ったHTML」と思ってみれば特別見にくいものでもないと思います。VSCodeにMTMLの拡張を入れれば、属性の中にも色がついて見やすくなります。

ただMTMLはやはり独自のマークアップ言語で一般的なツールではパースできないので「自動整形ができない」「対応するタグで閉じられているか編集時に検証できない」という問題があります。上のGistの内容だと「</titl>」となっていてHTMLが壊れていますし、「encde_html」となっている箇所もあります。また「<mt:EntryTitle>」というのは「encode_html」を付け忘れていると思われます。

とういところで、「JSXで書ければ整形も検証も一般的なツールでできるのになぁ」というのを思ったのです。

MTMLとJSXの関係については以前もmt-data-api-react としてPoC的なことをやったことがあります。これは「既存のMTMLをそのままで、DataAPIから取得したデータでフロントエンドでレンダリングする」というテーマでした。今回はそれとは異なり「JSXを書いて、それをMTが処理できるMTMLに変換する」というものです。

JSXに馴染みのない方はここまで読んでnot for meだなと感じるかもしれませんが、この話はそうでもないのでもう少し読み進めてください。以下は前出のMTMLを書き換えたものですが、ほぼほぼXMLとして違和感はないだろうと思います。(ないということで話を進めます。)またこれはJSXとしてもValidであり、これを処理することができます。

Reactを書いている方は「JSXとしてもValid」というところで「Validかもしれないけど(TSXでは)型のエラーが出るよね」という話になってくると思いますが、JSXをReactでないJSXの処理系で型を付ければこれもいけます。

説明が長くなってきたので結果を見てみると、今回作ったmt-jsx-templateというコマンドで処理すると以下のような結果になります。

JSXで整形やバリデーションができる上に、つまるところJSXからMTMLへのトランスパイルになるので、その過程でMTMLをminifyして書き出すことができるのです。

実装部分は、honoというOSSのプロジェクトでJSXの処理系を実装したことがあったので、そこから一部をコピーしつつひとまず形にしました。

ちなみにTypeScriptで型も付けられるので、「encoee_html」もちゃんとエラーにできます。またトランスパイルのついでに「<$mt:EntryTitle$>」に自動で(デフォルトで)encode_htmlをつけることもできます。これは、結構いいんじゃないでしょうか。

JSXになればできること

JSXになると、自分でパースの努力をしなくてよくなるので「使われているCSSのクラス名を収集する」ということもやりやすくなります。(今までのテンプレートでも正規表現で収集すれば実用上十分な精度でできたと思いますが。)「JSXで書いてトランスパイルする」という処理が作業フローに組み込まれるのであれば、そのついでに「CSSのフレームワークから必要なCSSを抽出して最小限のCSSを作成する」というのもやろうかという話になってくると思います。

以下が、MasterCSSを使ったサイトのJSXテンプレートからクラス名を抽出して、使われているCSSのみを出力するイメージです。

このMTMLのclassを解析して、MasterCSSを使って以下のCSSを出力することができます。

フロントエンドに関しては、2023年においてはウェブサイトを運用する際には何らかのビルド作業が入っていることが多いと思いますが、MTMLや(MTMLの内容を踏まえた上での)CSSもビルドするようになってもいいのかもしれません。MTのプラグイン(主にPerl)でビルドできればよいようにも思いますが、プラグインだとサーバー上で動作させることになり制限があることも多いので、作業環境の方が自由に環境を作れるというのもあり、これはこれでよいアプローチだと思います。

「ここまでやるならJamstackで生成した方が素直じゃないか?」という指摘があっても否めない気もします。とはいえまあ、上と同じ理由で運用環境は自由にならないこともあるのでMTを使ううえではMTMLの開発効率が上がるのはよいことだと思います。

プレビューもしたい

「JSXでパースできる」ということは、mt:Entriesやmt:EntryTtileのモックを作ってあげれば、JSXを直接文字列化してテンプレートの出力結果も確認できそうです。これになってくると上で出たmt-data-api-reactとも近い話になってくるのですが。これをやるには時間が足りなかったのでやっていませんが、後はモックを頑張って作りさえすれば、プレビューできるというところまで来ていると思います。

今回作成したもの

mt-jsx-templateです。

$ npx mt-jsx-template ファイル名

だけですぐに動かせます。また標準入力からも読み込めますので、動くことだけ確認したい場合には以下のコマンドを実行すれば変換された結果を見ることができます。

$ curl https://gist.githubusercontent.com/usualoma/e3d68e800bd264e9cdb0f2b7b1b19a64/raw/7c0b05a92e95f01f4e317d8c7ab46cb118296b66/entry.mtml.tsx | npx mt-jsx-template

TSXを書いて実際に型の付くことを確認したい場合には以下のようにプロジェクトにインストールして、tsconfig.jsonを設定してもらえば好きなエディタで動作させることができます。

$ npm install --save-dev mt-jsx-template

属性値の型も定義されているので、補完が効いたり、マニュアルを参照できたりします。

これは、結構いいんじゃないでしょうか!

この記事について

この記事は Movable Type Advent Calendar 2023 の25日目の記事です。皆様お疲れさまでした。それでは良いお年を!

honoのJSXの特徴

  • 投稿日:
  • by
  • カテゴリ:

これはなんの記事か?

honoはJSXを処理する実装をもっています。JSXはJavaScriptの構文を拡張したもので...のような話は皆さんご存知でしょうしググってもらった方が正確な情報を得られると思うのでここでは書かずに、honoの実装での特徴的なところについて書いていこうと思います。

特徴は?

文字列の出力に特化していることです。Reactでいうところの`renderToString(<App />)` のみに対応しています。`<App />.toString()` が文字列になります。`document.body.innerHTML = <App />`が動くのはそのためです。

Reactとの互換性は?

一般的なHTMLの要素をはじめ、Function Component、Fragment、dangerouslySetInnerHTMLなど、JSXの基本的な構成要素は揃っているので、特に戸惑うこと無くJSXを書いてHTMLを出力することができると思います。

非互換の一番大きな点としては、今まで書いたことはなく質問されたこともなかったのですが、`Component`のクラスに対応していないことかもしれません。とはいえ、文字列の出力に特化していて状態を持ちたいことはないと思うので、クラスが必要になる場面は基本的にはないと思います。

地味な違いとしては"class"を"className"と書く必要がないので、HTMLをそのまま持ってきて必要なところだけコンポーネントに置き換えるときに楽です。そこはpreactと一緒ですね。(ただ逆にReactから持ってくるときにはclassNameをclassに置き換える必要がありますが。)

ベンチマークは?

honoといえば「Ultrafast & Lightweight」なのでその点にもこだわっています。

honojs/hono/tree/main/benchmarks/jsx にベンチマークがあり、React、Preact、Nano、という本家+メジャーなJSX処理系と比較しています。「honoに実装されている機能の範囲で比較した場合」というベンチマークなのでhonoに有利な条件ですが、この中で最速になっています。

またベンチマークの例でバンドルした場合のサイズ(honoの本体は含まずに、JSXの処理系だけをバンドルしたサイズ)は3.9kbと小さく、これも比較した中で最小です。

JSXの処理系の中で最速でしょうか?

ルーターのベンチマークに関してはRegExpRouterが「必要十分な機能を持ったルーターとしてはJSの中で最速」となっていますが、JSXに関しては少し状況が違います。

honoのJSXでは(他の多くのJSXの処理系と同じように)一度データ構造の木を作成して、そこから文字列化を行っています。一度データ構造を作ることで親コンポーネントが子を管理しやすくなり、細かい要望に応えやすくなります。(後述するErrorBoundaryで同期的エラーを補足する場合とか)

ただJSXの文字列化のアプローチとしてはこの「データ構造の木を作成」というところを省略する方法もあり、その場合には細かい管理はできないもののより高速に処理できます。このアプローチを採用している処理系には@kitajs/htmlがあり、これは速度だけをみるとhonoのJSXよりも高速です。

非同期なコンポーネント

honoの3.10からは非同期なコンポーネントを使うことができるようになりました。

`<App />.toString()` がPromiseを返すようになってしまう気持ち悪さはありますが、受け取る側でラップすれば通常の文字列と同じ感覚で使うことができます。

これは実はReactとも互換性があって、18.2まではエラーになるのですが、Reactの18.3(2023年12月現在は@nextのステータス)では`renderToReadableStream`を使うことで文字列にすることができます。Suspenseも不要です。

完全な互換性があるわけではないのであまり不用意なことは言えないのですが、honoのJSXは独自の実装ではあるものの意外と本家の挙動も意識しており、後述するSuspenseにおいても相互の乗り換えで混乱することがないようにしています。

もちろんですが、返されたPromiseは並列で処理されるので、同時にたくさんの非同期なコンポーネントを使っても大丈夫です。

Suspense

honoの3.10で非同期なコンポーネントのサポートすると同時に、Reactで使えるSuspenseも用意しました。

前項の話とも重なりますが、Reactの18.2まではSuspence[fallback]を使う場合にはPromiseをthrowするというのが作法だったと思いますが、18.3ではPromiseをreturnでもいけるようです。(Reactには詳しくないのですが。)honoでは、従来どおりのthrowする方法も、returnする方法も、どちらもサポートしています。(関連する機能としては`use`というhookもあり、honoでも一度実装したのですが、honoでは単に async/await で十分であり必要な場面がないだろうということで削除しました。)

以下のコードはhonoでもReact(18.3)でもどちらでも、最初に「Loading...」が表示され、fetchの完了後に内容が更新されるという動作になります。

ErrorBoundary

ErrorBoundaryはReactの本体では提供されていないのですが、bvaughn/react-error-boundaryという公式のドキュメントからもリンクされていて広く使われているライブラリがあり便利そうだったので、仕様を真似て実装しました。

以下のコードで、最初に「Loading...」が表示され、その後例外が投げられたタイミングで「Something went wrong」に更新されるという動作になります。

ErrorBoundary[onError]やErrorBoundary[fallbackRender]を使って、ログを記録したり、エラーの内容に応じて出力を切り替えることもできます。

以上、honoのJSXの実装の紹介でした。

これは Hono Advent Calendar 2023 の13日目の記事です。引き続きよろしくお願いします!

Passkey - Passkeyで認証できるようにするプラグイン

  • 投稿日:
  • by
  • カテゴリ:

これは何か

Movable Typeの管理画面へのサインインでPasskeyの認証を利用できるようにするプラグインです。

mt-plugin-Passkey

必要な環境

サーバー環境に以下のPerl moduleが必要なので、ちょっと環境は選ぶかもしれません。

  • Crypt::PK::ECC
  • Crypt::PK::RSA

感想

1Passwordなどのパスワードマネージャを利用している場合には、普段からサインインの際の手間は殆どないのであまり変わらないようにも思いますが、「システムとして、パスワードよりも安全で手間のかからないサインインの方法を提供できる」というのが、Passkeyでサインイン可能にする際のシステム側のモチベーションであるように思いました。

(Passkey対応なので当然ですが)iCloudにPasskeyを登録しておけば、「デスクトップの端末からMTにサインインする際にiPhoneを経由して顔認証でサインインする」というのも思いの他さくっと成功するのでちょっとした感動があります。

TODO

  • サインインをしたタイミングでPasskeyの登録を促す
  • セッションの有効期限切れからの再サインインでパラメータを引き継ぐ(今は簡易的に実装しているのでダッシュボードに戻ります)
  • HTMLを書くのが面倒でalert()やprompt()を多用しているのでちゃんとする(でも今のブラウザはalert()も野暮ったくないので、意外と気にならないような気がしますが)
  • MFAプラグインと連携して他要素認証としてちゃんと扱われるようにする

というのができるともう少し「Passkey対応サービス」の雰囲気が出せそうな気がしました。

この記事について

この記事はMovable Type Advent Calendar 2023の2日目の記事です!

これは何か

Honoのv3.8.0のリリースでは「Improve path matching in the router」が入り、内部で利用しているルーターの仕様が変更になったのですが、高速なルーターの実装であるRegExpRouterは変更に対応しつつも速度を維持することができました。これはその経緯を解説する記事です。

「Improve path matching in the router」とはどのような変更であったか?

RegExpRouterの話に入る前に「Improve path matching in the router」の説明をします。リリースノートにもありますが以下のような定義のとき、以前は1つのアプリケーション内で「異なる階層に、同じ名前のパラメータ」を指定すると例外が投げられてしまい実行できなかったのですが、これができるようになりました。

この例だけ見ると「なぜ今までこれができなかったのか?」というように見えますが、例えば以下のような定義のときに、今までは内部のインターフェイスが「`c.req.param()` の戻り値をすべてのハンドラで共有」となっていて、両方に一致した時に妥当な結果を返せなかったため、ルーティングの登録の時点で例外を投げる仕様にしていました。

この仕様を改善するために、「`c.req.param()` の戻り値をすべてのハンドラで共有」となっていた内部のインターフェイスを「`c.req.param()` の戻り値は対応するルーティングで指定されたもののみ」とするように変更して、パラメータ名がルーティング間で重複するような定義も受け入れるようにしたのが「Improve path matching in the router」の変更になります。

リクエストとレスポンスの対応で見ると、以下のように変わっています。

この変更のルーターへの影響

以前の仕様だとルーターが返すのは以下でしたが、

  • 一致したハンドラのリスト
  • 一致したパスのパラメータ

新しい仕様だと以下になります。

  • 一致したハンドラのリスト
  • ハンドラ毎のパラメータ

インターフェイスはだいたい以下のように変わっています。(最終的にはもう少し複雑になります。)

以前の仕様だと、一致したハンドラの数に関わらずリクエスト時に生成するオブジェクトの数は一定でしたが、このインターフェイスだとハンドラの数に比例して増えることになります。

オブジェクトの生成はどのランタイムでも特別遅いわけではないので、一般的なJSのアプリケーションの中ではそこまで避けるべきものでもないと思いますが、RegExpRouterは「JSのルーター界隈」という(ニッチな😀)世界で戦っているのでこの辺りが問題になりました。

RegExpRouterでの対応

RegExpRouterは(ご存知でない方は過去の資料を参照してください)正規表現の結果を可能な限りそのまま使うことで高速化しているので、それを活かせるようにルーター側のインターフェイスの方でも歩み寄ってもらって、以下のようにすることで対応しました。

急にまとまってしまって戸惑うかもしれませんが、minifyしたときのコードが小さくなるようにRecordからArrayにするというのも入れつつ最終的にこのようになりました。実際のコードではコメント付きでこんな感じになっています。詳細については実際のコードを見てもらうほうがいいかもしれません。

RegExpRouterに関してはこのインターフェイスにあわせて、上で出した例に対してはこのようなルーティングの結果を返すようになりました。

これは `[T, ParamIndexMap][]` と `ParamStash` のタプルですが、前者は `match()` の呼び出し前に準備しておくことができ、後者についてはコメントにある通り `String.prototype.match()` の戻り値そのものとなっています。`c.req.param(key)` の呼び出しではこのデータ構造から値を引いて返すので、その際には以前の仕様では発生しなかったオーバーヘッドが発生するのですが、実際の運用の環境でも多くは以下のような条件を満たすので、

  • 同じkeyで何度も `c.req.param(key)` が呼ばれるようなことはない
  • パスから取得するパラメータは多くても2〜3程度
  • middlewareは '*' や、静的なパス以下の '/js/*' のような使い方が多く、パラメータを取るケースは少ない

実運用の環境でも、そしてベンチマークでも、このオーバーヘッドが見える形で影響してくることはないものと思われます。

以上が、RegExpRouterが「Improve path matching in the router」の変更でも速度を維持できた(パラメータが少ない場合にはむしろ速くなるケースもある)理由です。

この記事について

この記事は Hono Advent Calendar 2023 の1日目の記事です。明日から毎日楽しみです。よろしくお願いします!