rEFui ランタイム

Methanol は JSX ランタイムとして rEFui を採用しています。ドキュメント執筆者が必ずしも rEFui の詳細を理解する必要はありませんが、独自のテーマや高度なコンポーネントを開発する際には非常に強力なツールとなります。

Methanol は、以下の両方のフェーズで rEFui を活用しています。

• サーバーサイド (SSG): build 時（および開発サーバー）に JSX を静的な HTML へとレンダリングします。
• クライアントサイド: クライアント専用コンポーネントのみを小さな “islands” として部分的にハイドレーション（Partial Hydration）します。ページ全体をハイドレーションすることなく、高いパフォーマンスを維持します。

主な活用シーン

• カスタムテンプレートの構築（theme.template）
• components/ ディレクトリにおけるインタラクティブなコンポーネント開発
• rawHTML やコンテキストヘルパーによるレンダリング制御

JSX ランタイムの仕組み

Methanol は自動 JSX ランタイムを使用し、refui をインポートソースとして MDX をコンパイルします。そのため、開発者は標準的な JSX 仕様に従ってコンポーネントを記述できます。

export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}

コンポーネントデモ（Web 環境）

Methanol の外部で rEFui を試す場合は、DOM レンダラーを使用してシンプルなリアクティブコンポーネントを構築するのが最も直感的です。

import { signal } from 'refui'
import { createDOMRenderer } from 'refui/dom'
import { defaults } from 'refui/browser'

const DOMRenderer = createDOMRenderer(defaults)

const App = () => {
	const count = signal(0)
	const increment = () => {
		count.value += 1
	}

	return (R) => (
		<>
			<h1>こんにちは、rEFui</h1>
			<button on:click={increment}>クリック！ カウント: {count}</button>
			<p>2倍: {$(() => count.value * 2)}</p>
		</>
	)
}

DOMRenderer.render(document.body, App)

Methanol 環境下では、通常コンポーネントを export するだけで、MDX レンダラーが適切なタイミングでマウント処理を行います。

参考資料

詳細については、rEFui 公式リポジトリ を参照してください。