ミニマリストなSSGフレームワーク。JSXとTypeScriptのJSXトランスフォーマーを活用
OnoはAstroのミニマルな代替として設計されており、TypeScriptの組み込みJSX変換機能を活用しています。コアとなる哲学は：
- 最小限の依存関係: TypeScript標準の
tsxトランスフォーム機能を使用し、複雑なビルドツールチェーンを回避 - 高い移植性: Web Workersやブラウザ上でも動作できるほど軽量に設計
- シンプルなアーキテクチャ: 静的サイト生成機能の最小限のサブセットに焦点を当て、本当に重要なものに集中
- 将来のビジョン: ブラウザベースのREPL体験とクライアントサイドでの静的サイト生成を実現
重量級フレームワークとは異なり、Onoはシンプルさを追求しています。フル機能フレームワークの複雑さなしに、JSXとコンポーネントベースの開発のパワーを求める開発者に最適です。
これは以下のパッケージを含むモノレポです：
| パッケージ | 説明 | npm |
|---|---|---|
| @hashrock/ono | CLIを備えたコアSSGフレームワーク |  |
| create-ono | プロジェクトスキャフォールディングツール |  |
| @hashrock/ono-repl | ブラウザベースのREPLプレイグラウンド | - |
| @hashrock/ono-lp | LLM搭載のランディングページジェネレーター | - |
最も簡単な始め方はcreate-onoを使用することです：
npm create ono my-project
cd my-project
npm install
npx ono devOno REPL - Worker搭載のJSXプレイグラウンドをブラウザで！
または、シンプルなJSXファイルを作成して直接ビルドすることもできます：
# Onoをインストール
npm install @hashrock/ono
# JSXファイルを作成
echo 'export default function App() {
return (
<html>
<head><title>Hello Ono</title></head>
<body>
<h1>Hello, Ono!</h1>
</body>
</html>
);
}' > index.jsx
# ビルド
npx ono build index.jsx
# または開発サーバーを起動
npx ono dev index.jsx- 静的HTMLサイト構築用のミニマルなJSXランタイム
- JSXファイル用の組み込みバンドラー
- JSXからHTMLへのビルド用CLIツール
- ライブリロード付き開発サーバー
- 自動再ビルド用のファイル監視
- コンポーネントとpropsのサポート
- アトミックCSS生成用のUnoCSS統合
- マルチページサイト用のpagesディレクトリサポート
- Markdownサポート付きのコンテンツコレクション
[slug].jsxパターンによる動的ルート- TypeScriptのJSXトランスフォームを使用
- React Fragmentは非対応:
<>...</>や<React.Fragment>はサポートされていません。代わりに配列や親要素でラップしてください。
JSXファイルを静的HTMLにビルド：
ono build # pages/ディレクトリ内のすべてのページをビルド
ono build pages # pages/ディレクトリ内のすべてのページをビルド
ono build example/index.jsx # 単一ファイルをビルド
ono build --output dist # 出力ディレクトリを指定ライブリロード付きの開発サーバーを起動：
ono dev # pages/ディレクトリ用の開発サーバーを起動
ono dev pages # pages/ディレクトリ用の開発サーバーを起動
ono dev example/index.jsx # 単一ファイル用の開発サーバーを起動
ono dev --port 8080 # カスタムポートで開発サーバーを起動
ono dev --output build # カスタム出力ディレクトリを使用export default function App() {
return (
<html>
<head>
<title>My Site</title>
</head>
<body>
<Header title="Welcome" />
<main>
<p>Hello, Ono!</p>
</main>
</body>
</html>
);
}
function Header({ title }) {
return (
<header>
<h1>{title}</h1>
</header>
);
}OnoはUnoCSSと自動的に統合されます。JSXでユーティリティクラスを使用するだけです：
export default function App() {
return (
<div class="max-w-800px mx-auto p-8">
<h1 class="text-3xl font-bold text-blue-600">
Welcome to Ono
</h1>
<p class="mt-4 text-gray-700">
UnoCSSユーティリティは自動的に生成されます！
</p>
</div>
);
}カスタム設定用に、プロジェクトルートにuno.config.jsファイルを作成します：
import { presetUno } from "unocss";
export default {
presets: [presetUno()],
theme: {
colors: {
primary: "#0070f3",
},
},
shortcuts: {
"btn": "px-4 py-2 rounded bg-primary text-white",
},
};Onoはpages/ディレクトリにJSXファイルを配置することでマルチページサイトの構築をサポートします：
pages/
├── index.jsx → dist/index.html
├── about.jsx → dist/about.html
└── blog/
└── first-post.jsx → dist/blog/first-post.html
// JSXランタイム
import { createElement } from '@hashrock/ono/jsx-runtime';
// レンダラー
import { renderToString } from '@hashrock/ono';
const html = renderToString(<div>Hello</div>);
// バンドラー
import { bundle } from '@hashrock/ono';
const code = await bundle('./path/to/file.jsx');
// コンテンツコレクション
import { getCollection } from '@hashrock/ono/content';
const posts = await getCollection('blog');これはpnpm workspacesで管理されているモノレポです。
# pnpmがインストールされていない場合
npm install -g pnpm
# 依存関係をインストール
pnpm install
# すべてのテストを実行
pnpm test
# すべてのパッケージをビルド
pnpm build# onoパッケージのテストを実行
pnpm --filter @hashrock/ono test
# REPL開発サーバーを起動
pnpm --filter @hashrock/ono-repl dev
# REPLをビルド
pnpm --filter @hashrock/ono-repl build# ユニットテスト
pnpm --filter @hashrock/ono test
# スナップショットテスト
pnpm --filter @hashrock/ono test:snapshot
# スナップショットを更新
pnpm --filter @hashrock/ono test:snapshot:updateスナップショットテストの詳細はpackages/ono/SNAPSHOT_TESTING.mdを参照してください。
MIT