Qrac
Qrac
[メジャーリリース](https://vitejs.dev/blog/announcing-vite3.html)されたのでアップデートする。React 18対応 #54 と同時に行えるとベスト。
React 18で動くようにする。npmの一括アップグレードが行えず面倒なので。 内部で使っている `ReactDOM.render()` と `ReactDOM.hydrate()` APIはv18で変更されているので、書き換えないと動かないはず。typesにchildrenが含まれないなども対応必要かも。 あと、依存のreact-helmetもv18対応していないと思うので、自作するかreact-helmet-asyncで動くようにする。 APIをラップする関数を書いてハイブリッド対応するか、v17以前を切るかする。検証が倍化するのでv17以前を切る方が楽。 大きい変更なのでminista v3あたりに組み込む。
TSビルドやインストールをすっ飛ばしたDeno版のministaが作れるかもしれない。
処理をViteプラグインのみにしたい。SSGでも動くか確認する。
#75 後に仕様変更。スプライトアイコン（生成物）へのパス設定が直感的ではなかったため、ビルトインコンポーネントをViteに通して自動解決する。これによって使う場合に `iconId` だけ設定すれば良くなる。baseを変更した場合の相対パスや、別プラグインを用いたSVGファイルへの処理も可能になると思われる。 before ```tsx export default function () { return ( ) } ``` after ```tsx import { Icon } from "minista" export default function () { return...
## 開発ブランチ - https://github.com/qrac/minista/tree/v3 ## 概要 v3メジャーアップデートは開発環境の改新とコード全体のリファクタリングが中心。試行錯誤しながら作ってきたコードを1から見直してプロダクトの完成度を上げる。 v1（webpackベース）からv2（Vite & esbuildベース）への切り替えは上手くいった。Next.jsやAstroにある取り入れたい機能もおおむね実装できた。静的サイトは十分作れる。 目下の課題はSaaSの試作デモを作る場合で、既存のjQueryやAlpine.jsを絡めたときにSPAな開発モードだと動かない。静的な本番とDOMレンダーの仕組みが違うから。v3で開発と本番の差異を極力無くす。 ## 開発環境 - [x] #62 - [ ] #63 - [x] #64 - [x] #65 ## 新機能 - [x]...
v2の本番ビルドは「HTML側でesbuild・アセット側でVite」が別々に動作していたため、HTMLに関わるViteプラグインの追加が失敗していた。 v3では全体をViteのSSRで処理する #82 ので問題を解決できる可能性が高い。いくつかのプラグインでテストする。
v2のSSGは 1. esbuildで `.tsx` を `.mjs` に変換（一時ファイル生成） 2. nodeで `.mjs` 読み込む 3. `.html` 作成 だったが、v3はViteのSSRを使うことで 1. `.tsx` を読み込む 2. `.html` 作成 を直接行う。 https://ja.vitejs.dev/guide/ssr.html#pre-rendering-ssg - 一時ファイル生成がなくなることでパスの問題を軽減できる - 処理をViteに統一することでViteプラグインとの互換性 #89 を高められる
本番ビルドはViteのデフォルトだとHTMLの階層がおかしかったり不要なバンドルファイルが表示されるため使えない。ただ、Viteのデフォルトログにあるファイルサイズ表示は踏襲したい。Gzip表示も可能だけど見づらくなったので保留。 ```sh vite v3.1.7 building for production... ✓ 12 modules transformed. BUILD playground/core-assets/dist/assets/script-entry.js 0.08 KiB BUILD playground/core-assets/dist/about.html 0.30 KiB BUILD playground/core-assets/dist/index.html 0.46 KiB BUILD playground/core-assets/dist/assets/bundle.css 0.01 KiB BUILD playground/core-assets/dist/assets/style-entry.css 0.01...
基本設計はそのまま。 SSGに実装していたesbuildプラグインを削除できるので、今後はViteプラグインをメンテすれば良くなりそう。