Astro のコードを読む Part.1

はじめに

最近のAstroですが、順調にメジャーリリースを目指して開発中です。

the official Astro v1.0.0 release will be available on June 8, 2022.
https://astro.build/blog/astro-1-beta-release/

という感じなので、コードを読むのにも丁度いいかなと。

もちろんバグやら挙動不審なところは散見されるものの、Partial HydrationできるSSGとしてのアイデンティティを確立しつつ、SSRもできるようになったりと、なかなか筋がいいなと思ってる今日この頃。

では本題へ。

リポジトリ構造

モノレポ。開発するには`pnpm`を使ってねって書いてあった。

❯ tree -d -L 2
.
├── assets
│   ├── brand
│   └── social
├── examples
│   ├── blog
│   ├── blog-multiple-authors
│   ├── component
│   ├── docs
│   ├── env-vars
│   ├── framework-alpine
│   ├── framework-lit
│   ├── framework-multiple
│   ├── framework-preact
│   ├── framework-react
│   ├── framework-solid
│   ├── framework-svelte
│   ├── framework-vue
│   ├── integrations-playground
│   ├── minimal
│   ├── non-html-pages
│   ├── portfolio
│   ├── ssr
│   ├── starter
│   ├── subpath
│   ├── with-markdown
│   ├── with-markdown-plugins
│   ├── with-markdown-shiki
│   ├── with-nanostores
│   ├── with-tailwindcss
│   └── with-vite-plugin-pwa
├── packages
│   ├── astro
│   ├── astro-prism
│   ├── create-astro
│   ├── integrations
│   ├── markdown
│   └── webapi
├── patches
└── scripts
    ├── cmd
    ├── memory
    ├── notify
    ├── smoke
    ├── stats
    └── utils

Exampleが豊富に用意されてることが伺える！

今回の主旨としての読みたいコードは、`packages`配下にあるものたち。

❯ tree -d -L 2 packages
packages
├── astro
│   ├── components
│   ├── src
│   └── test
├── astro-prism
├── create-astro
│   ├── src
│   └── test
├── integrations
│   ├── deno
│   ├── lit
│   ├── netlify
│   ├── node
│   ├── partytown
│   ├── preact
│   ├── react
│   ├── sitemap
│   ├── solid
│   ├── svelte
│   ├── tailwind
│   ├── turbolinks
│   ├── vercel
│   └── vue
├── markdown
│   └── remark
└── webapi
    ├── run
    ├── src
    └── test

ざっくり見てみる。

• `astro`
  • Astroの実装の本体
• `astro-prism`
  • `import { Prism } from "@astrojs/prism";`して使う
  • PrismでシンタックスハイライトできるAstroコンポーネント
  • 今のところ、別途でインストールしなくても使える
• `create-astro`
  • いわゆるスターター
  • `npm init astro`するやつ
• `integrations/xxx`
  • Astroと組み合わせて使うもの
  • レンダラとしてコンポーネント利用できるものや
  • ライブラリとして利用するもの、Astroを拡張するものなど
• `markdown`
  • `@astrojs/markdown-remark`
  • Astro用に拡張された`remark`で、Markdownを扱う各所で使われる
  • `import { Markdown } from "astro/components";`でも使われてる
• `webapi`
  • Nodeのランタイムでも、いわゆるWebのAPIを使えるようにする自作ポリフィル集
  • これだけでお腹いっぱいになるレベルのやつ
  • Fetch APIまわりや、SSR時に困らないようにDOM系も

というわけで、

• `astro`
• `integrations/xxx`のレンダラ系

この2つを重点的に読んでいきたい。

astroパッケージ

まずはディレクトリ構造から。

❯ tree -d -L 2
.
├── components
├── src
│   ├── @types
│   ├── adapter-ssg
│   ├── cli
│   ├── core
│   ├── integrations
│   ├── runtime
│   ├── template
│   ├── vite-plugin-astro
│   ├── vite-plugin-astro-postprocess
│   ├── vite-plugin-astro-server
│   ├── vite-plugin-build-css
│   ├── vite-plugin-build-html
│   ├── vite-plugin-config-alias
│   ├── vite-plugin-env
│   ├── vite-plugin-integrations-container
│   ├── vite-plugin-jsx
│   ├── vite-plugin-markdown
│   └── vite-plugin-scripts
└── test
    ├── benchmark
    └── fixtures

Astroは、基本的にはSSGのためのCLIでありつつ、Partial HydrationするためのCSR用、SSR用など一部ランタイムを提供してる。

ビルドや開発用にはヘビーにViteを使ってて、そのためのプラグインがいっぱいある感じ。

`core`はさておき、他の枝を見ておく。

integrations/xxxパッケージ

Astro本体と組み合わせて使える公式パッケージ群。

npmから別途でインストールして、設定ファイルである`astro.config.mjs`でその指定をする。

ジャンルごとに大別すると、4つある。

• レンダラー
• ライブラリ
• アダプター
• その他

integrationsの仕組みとしては、Astroの各プロセスごとにフックが呼ばれるようになっていて、そのタイミングで実行コンテキストに介入したり、Viteの設定を更新したり、成果物をいじったりできる。

それぞれ見ていく。

次回へ続く

という感じで、概観はわかったかなーと。めちゃめちゃ外枠だけやけど。

ただまぁAstroといえば、やっぱりCLIの`dev`と`build`コマンドがメインなので、続きは暇を見てそこを追っていこうかと。