rEFui 运行时

Methanol 采用 rEFui 作为核心 JSX 运行时。尽管日常文档编写无需掌握 rEFui，但对于主题与组件开发者而言，深入了解其机制将大有裨益。

Methanol 在服务端与客户端均基于 rEFui 构建：

Server/SSG: 在 build（及 dev server）阶段将 JSX 编译为静态 HTML。
Client: 仅对客户端组件执行局部注水（Hydration），将其视为独立“Islands”，而页面其余部分维持纯静态 HTML 状态。

核心应用场景

模板深度定制（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>Double: {$(() => count.value * 2)}</p>
		</>
	)
}

DOMRenderer.render(document.body, App)

在 Methanol 体系中，通常只需导出组件，MDX 渲染器将自动完成挂载流程。

参考

更多信息请查看 rEFui 仓库。