Astro 0.21 beta版のご紹介
10月30日明朝に Astro 0.21のベータ版が公開されました。ただのリリースブログの焼き増しですが新要素を紹介します。
ちょっとだけおさらい
Astroには以下のような特徴があります。
- snowpackをベースとした静的サイトジェネレータ
- React/Preact/Vue.js/Svelte等のフレームワークサポート
- TypeScriptのサポート
- Markdownのサポート
- Partial Hydration
- JSXライクな独自Syntaxをもつ(.astroファイル)
などなど。。。
docはこちら。日本語の方に飛ばされると思いますが、まだ翻訳をしていない部分が多いので英語版を見ることをおすすめします。
最近Netlify、Vercel、Sentoryがスポンサーになりました。
ver0.21の新要素
内部ビルドエンジンがsnowpack -> Viteへ
一番の目玉でしょう。まさかのsnowpackベースではなくなりました。
- メンテナンスが行き届いていること
- ドキュメントが充実していること
- コミュニティの支持が熱いこと
- エラーメッセージが充実していること
など諸々の理由からsnowpackからViteへの移行が行われました。また、この変更によりRollupプラグインも使えるようになります。
9月頃にあったdemo dayでこの内容は発表されていたのですがastroはsnowpackと同じチームが作っており、viteに移行することでよりastroの方に集中したいという意図もあるようです。
Go製の新コンパイラ
以前までのコンパイラはsveletのforkディレクトリだったのですが、今回一新されました。Goで書かれており、WASMとして配布しています。
ブラウザ上やnode、denoのサーバー上で動かすことができます。
これにより
- Flexibility: WASMでどこでもコンパイラを実行。
- Speed: Goのコンパイル言語のパフォーマンスでサイトをより速く構築。
- Stability:独自のコンパイラを作成することで、長年のバグを修正。
が改善できました。まだまだバグは多いようなので見つけたらissueで報告しましょう。また、playgroundで試すこともできます。
Markdownファイル内でコンポーネントの展開が可能に
最も要望が多かった機能がついに実装されました。setupにコンポーネントのpathを書きます。
---
title: 'Astro 0.21 Early Preview'
setup: |
import Logo from '../components/Logo.astro';
import ReactCounter from '../components/Counter.jsx';
---
# Astro now supports components in Markdown!
<Logo />
- Back to markdown here.
- Supports static Astro components.
- Supports dynamic React/Vue/Svelte components!
<ReactCounter start={1} client:load />
結果!!(ちょっと見にくいけど)
Astroコンポーネント及びページのHMR対応
React、VueといったJavaScriptコンポーネントのHMR対応はされてきていましたが、単なる静的なHTMLである.astroファイルに対するHMRも今回対応しました。(あまりここに関してはわからないのでリリースブログを見てください🙇)
セットアップ
discordより現状確認できるバグを引用しておきます。
• プロダクションビルドの最適化はまだ行っていません。
• dev環境でのPartial hydration が断続的にタイムアウトします。 (最初に数回リフレッシュすれば大丈夫です)
•Windows環境で Partial hydrationのバグが存在します。
• いくつかコンパイラエラーが発生する場合があります。
• 現在マイナーな機能のマイグレーションガイドを作成しています。
astroのプロジェクト上で
$ npm i astro@next
$ npm i @astrojs/renderer-preact@next
以上２つを行う必要があります。
rendererも過去のものと互換性が無いため、必ず更新してください。(上記はpreactの例)
Discussion