哲学

⚠️ 進行中の作業:Vize は積極的に開発中であり、まだ運用環境で使用する準備ができていません。以下の設計原則は、プロジェクトのビジョンと方向性を説明しています。

Vize は単なるコンパイラーではなく、Vue.js ツールがどのように機能するかについての設計ステートメントです。

Vize が存在する理由

JavaScript エコシステムは長い間、JavaScript コードのコンパイル、lint、フォーマット、型チェックを JavaScript ベースのツールに依存してきました。これにより根本的なボトルネックが生じます。コードを処理するツールは、ガベージコレクションの一時停止、シングルスレッドの実行、動的ディスパッチのオーバーヘッドなど、処理するコードと同じ実行時の制限を受けます。

Vize は異なるアプローチを採用しています。 Vue.js ツールチェーン全体を Rust で書き直すことで、これらの制約をアーキテクチャレベルで排除します。その結果は段階的な改善ではなく、可能性の決定的な変化です。

設計原則

1. 統合ツールチェーン

従来の Vue.js 開発では、コンパイラ (@vue/compiler-sfc)、リンター (eslint + eslint-plugin-vue)、フォーマッタ (prettier)、型チェッカー (vue-tsc)、およびコンポーネントエクスプローラー (Storybook) といった個別のツールの組み合わせを組み立てる必要があります。各ツールには、独自のパーサー、独自の AST 表現、および独自の構成形式があります。

Vize はこれらすべてを 1 つのバイナリに統合します。パーサー 1 つ。 ASTが1つ。 1 つの構成サーフェス。これにより、冗長な解析パスが排除され、構成の複雑さが軽減され、すべてのツールがコードの一貫した理解を共有できるようになります。

@vue/compiler-sfc  +  eslint-plugin-vue  +  prettier  +  vue-tsc  +  Storybook
                              ↓
                            vize

2. 機能としてのパフォーマンス

スピードはあればいいものではなく、開発者のエクスペリエンスの前提条件です。コンパイルに数秒かかると、開発者はフローを失います。 lint チェックに数分かかる場合、開発者はそれを無効にします。型チェックに時間がかかりすぎる場合、開発者はそれをスキップします。

Vize は、すべてのツールが対話的に使用できるほど高速に実行されるように設計されています。

コンパイル: 498ms で 15,000 個の SFC ファイル (マルチスレッド)
フォーマット: 大規模なコードベースでもほぼ瞬時に実行
Linting: LSP を介したリアルタイムのフィードバック
型チェック: V8 オーバーヘッドなしの増分分析

これは、Rust のゼロコスト抽象化、アリーナ割り当て、Rayon を使用したネイティブマルチスレッドによって実現されます。

3. ドロップインの互換性

Vize は、コードを書き直したり、ワークフローを変更したりすることを要求しません。 Vite プラグインは、@vitejs/plugin-vue のドロップイン代替品です。既存の Vue コンポーネント、<script setup>、スコープ付きスタイル、および HMR はすべて変更せずに機能します。

この原則は、より広範なエコシステムに適用されます。 Vize の Vite プラグインは Nuxt と互換性があり、LSP は標準プロトコルを通じて VS Code と統合されます。 Vize を採用することは、車を再構築するのではなく、エンジンをアップグレードするように感じるはずです。

4. 建築としての芸術

すべての Vize クレートには、絵画、彫刻、美術館のキュレーションといった視覚芸術のコンセプトにちなんで名付けられています。これは単なる気まぐれではありません。命名規則には哲学がコード化されています。コードは創造的な媒体であり、それを形作るツールは関与する技術を反映する必要があります。

木箱	アートの起源	役割
カートン	アーティストのポートフォリオ事例	共有ユーティリティ — ツールボックス
救済	彫刻面の投影	AST — コードの構造化された表面
アーマチュア	彫刻を支える骸骨	写真彫刻を支える骸骨パーサー — 構造フレームワーク
クロッキー	簡単なジェスチャースケッチ	意味分析 — 本質を捉える
アトリエ	アーティストのワークショップ	コンパイラー — 変換が行われる場所
展示品	ガラス製ディスプレイケース	バインディング — 作品を公開する
キヤノン	理想的なプロポーションの基準	型チェッカー - 正確性の保証
緑青	品質を示す老化した表面	リンター — 表面を研磨する
グリフ	彫刻されたシンボルまたは文字形	フォーマッタ — テキストの整形
マエストロ	名指揮者	LSP — エクスペリエンスの調整
博物館	博物館の複数形	写真博物館コンポーネントギャラリー — 作品の展示
フレスコ画	壁画テクニック	TUI フレームワーク — ターミナルのペイント

この命名システムは実用的な目的を果たしており、クレート階層を直感的にすることができます。 vize_atelier_dom を見ると、それが VDOM 出力 を生成する ワークショップ であることがすぐにわかります。 vize_patina を見ると、コードが洗練されていることが分かります。

彫刻のアナロジー

最も深い類似点は、ソフトウェアのコンパイルと彫刻との間にあります。彫刻家の仕事の仕組みを考えてみましょう。

1.アーマチュア— 彫刻家はアーマチュア、つまり基本構造を定義するワイヤーの骨格を構築することから始めます。 Vize では、パーサー (vize_armature) が生のソーステキストから構造フレームワーク (AST) を構築します。

2.レリーフ— 彫刻家はアーマチュアの上にサーフェスを構築し、平面から突き出る構造化されたサーフェスであるレリーフを作成します。 Vize では、AST (vize_relief) によって、元はフラットなテキストだったものに構造化された 3 次元の形式が与えられます。

3.クロッキー— 最終的な彫刻に着手する前に、アーティストは主題の本質的な性格を理解するために簡単なスケッチ (croquis) を作成します。 Vize では、セマンティック分析 (vize_croquis) は、コンパイルターゲットにコミットすることなく、コードの意味 (どの変数がバインドされているか、どの式が有効であるか) を取得するクイックパスです。

4.アトリエ— 彫刻家は、atelier (ワークショップ) に移動して、最終的な作品を作成します。複数のアトリエが同じ主題の異なる演出を制作する場合があります。 Vize では、コンパイルバックエンド (vize_atelier_dom、vize_atelier_vapor、vize_atelier_ssr) は、分析された同じ AST の異なるレンディション (VDOM、Vapor、SSR) を生成する異なるワークショップです。

5.展示品— 完成した作品は、他の人が観察できるように、展示品 (ガラスの展示ケース) に置かれます。 Vize では、バインディング (vize_vitrine) は、JavaScript コンシューマーがコンパイルされた出力にアクセスできるようにする透明なレイヤーです。

6.美術館— 最後に、作品は鑑賞と研究のために博物館に展示されます。 Vize では、コンポーネントギャラリー (vize_musea) でコンポーネントが展示、調査、文書化されます。

高品質の工芸品のたとえ

残りの木箱は職人技に似ています。

Canon(タイプチェッカー) — 古典彫刻では、canon は人間の理想的なプロポーションの標準でした。ポリュクレイトスは、完璧な図形の数学的比率を定義する Kanon を書きました。 Vize では、型チェッカーがコードの「理想的な比率」を強制します。型は正しく、プロパティは一致し、エミッションは適合する必要があります。
緑青(リンター) — 緑青は、古い素材に現れる表面仕上げであり、品質と手入れを示しています。豊かな緑青を持つブロンズ彫刻はよく維持されています。 Vize では、リンターがコードの表面を検査し、コードの品質に影響を与える問題を特定します。
グリフ(フォーマッタ) — glyph は、彫刻された記号または文字の形です。フォント内の正確で一貫した文字の形を考えてください。各グリフには正確な比率と間隔があります。 Vize では、フォーマッタによってコードの正確な比率が一貫していることが保証されます。
マエストロ(LSP) — マエストロは、アンサンブルを調整して統一されたパフォーマンスを実現するマスター指揮者です。 Vize では、LSP サーバーがすべての言語機能 (補完、診断、書式設定、ナビゲーション) を統合して、統一されたエディターエクスペリエンスを実現します。
フレスコ(TUI) — フレスコは、顔料を濡れた漆喰に塗布し、壁自体の一部にする絵画技法です。 Vize では、TUI フレームワークがインターフェイスを端末表面に直接「ペイント」します。

5. 蒸気ファーストの考え方

Vue 3.6 では、仮想 DOM を使用せずにきめの細かいリアクティブコードを生成するコンパイル戦略である Vapor モードが導入されています。 Vize は、最初から Vapor モードをファーストクラスのコンパイルターゲットとして設計されました。

@vue/compiler-sfc は Vapor サポートを段階的に追加しましたが、Vize の vize_atelier_vapor は最初から vize_atelier_dom と一緒に構築されました。これは、共有コンパイルインフラストラクチャ (vize_atelier_core) が両方の出力モードを同様に適切に提供するように設計されていることを意味します。

6. 開発者の主権

Vize は独立したツールチェーンです。これは Vue.js コアチームによって管理されておらず、Vue アプリケーションを構築する「公式」方法であるとは主張しません。これは意図的なものです。

独立性を維持することで、Vize は次のことが可能になります。

下位互換性の負担を負わずにコンパイル戦略を実験できます
ガバナンスプロセスに拘束された公式プロジェクトよりも迅速に行動できる
最終的に公式ツールチェーンに影響を与える可能性のあるアイデアの実験場として機能します
最大のパフォーマンスを求める開発者に代替手段を提供します

同時に、Vize は公式の Vue.js 仕様を綿密に追跡します。目標は断片化ではなく互換性です。

7. 酸化の肩の上に立つ

Vize は単独で存在するわけではありません。これは、JavaScript ツールをシステム言語で書き直す広範な運動 (コミュニティが「酸化」と呼ぶもの) の一環です。 Vize はこのエコシステムを採用し、統合します。

OXC— Vize は JavaScript と TypeScript の解析に酸化コンパイラー (oxc) を使用します。 OXC は、vize_croquis (セマンティック分析) および vize_atelier_core (コード生成) を強化する高性能 JS/TS AST 解析を提供します。 Vize は JS パーサーを再実装するのではなく、OXC の実績ある実装に委譲します。
oxlint— Vize は oxlint を念頭に置いて設計されています。 vize_patina は Vue 固有のテンプレート lint を処理しますが、より広範な JavaScript lint ストーリーは、oxlint の Rust ネイティブルールエンジンによって最適に処理されます。 2 つのツールは補完的なものであり、競合するものではありません。
Corsa— corsa-bind を中心に構築された Vize のネイティブ TypeScript 実行層は、JavaScript ホスト型コンパイラーを介してすべてをルーティングすることなく、JavaScript/TypeScript の型チェックに対して Vize が取っている方向性を表しています。 vize_canon は、Vue 固有のテンプレートタイプ分析を提供し続けながら、ネイティブ診断にこのスタックを使用します。
LightningCSS— Vize は、vize_atelier_sfc 内の CSS 解析と変換に LightningCSS を使用し、スコープ付きスタイルの Rust ネイティブ CSS 処理を活用します。

この分野には、ツール間の AST 相互運用性、言語の境界を越えた増分分析、エディターの統合の一貫性など、未解決の課題がまだ多くあります。 Vize は、Vue.js エコシステム内のこれらの問題に対する解決策の実験場となり、より広範な酸化運動に貢献することを目指しています。

8. Vite+ および OXC とのコラボレーション

Vite+ と OXC はフレームワークに依存しないツールチェーンです。これらは、あらゆるフレームワークで機能する汎用の JS/TS/CSS バンドル、解析、lint、およびフォーマット機能を提供します。 Vize はVue 固有であり、これらのエコシステムツールと競合するのではなく、統合するように設計されています。

Vize は、JavaScript/TypeScript 解析については OXC に、Vue SFC 内の CSS 処理については LightningCSS に直接依存しています。 Vize リンター (パティナ) とフォーマッタ (グリフ) は、フレームワークに依存しないツールの範囲外である Vue 固有の問題 (テンプレートディレクティブ、SFC 構造、コンポーネント規約) を処理します。 OXC とのより深い統合が計画されています。たとえば、<script> ブロックのリンティング/フォーマットを OXC に委任し、Vize が Vue 固有の <template> および SFC 調整レイヤーを処理します。 Vize の Vite プラグイン (@vizejs/vite-plugin) は Vite 上に構築されており、@vitejs/plugin-vue のドロップイン代替品となるように設計されており、Vite エコシステムを完全に受け入れています。

Vize の作者として、私 (@ubugeeei) は明確にしておきたい:私はこれらのプロジェクトのいずれに対しても敵対的な意図はありません。私はコラボレーションに完全にオープンであり、最良の結果は相互補完するツールから得られると信じています。より良い統合を可能にするためにどちらかの側に変更が必要な場合は、それを実現するために協力する準備ができています。

名前

*Vize**(/viːz/) は 3 つの単語から派生しています。
大臣— 賢明なカウンセラーまたはアドバイザー
バイザー— はっきりと見るのに役立つもの
アドバイザー— より良い意思決定を行うのに役立つガイド

これらは、コードを透視し、賢明にアドバイスするツールについて説明しています。発音は「そよ風」と韻を踏んでおり、速く、楽に、さわやかになります。