Qrac
Qrac
#74 の詳細。型定義をViteの拡張とした #93 ことでdefault exportをReactComponentとして扱えなくなったため、named exportをReactComponentに変換する仕様へと変更。これによりインラインのSVGとimgタグのSVGを同時に使える。 - Fork元であるvite-plugin-svgrと同じ使い方になった - https://github.com/pd4d10/vite-plugin-svgr ```tsx import { ReactComponent as Logo } from "../assets/logo.svg" import heart from "../assets/heart.svg" export default function () { return (...
SaaSの改修案件や試作デモを作る場合、レガシーなjQueryやAlpine.jsを絡めたときにSPAな開発モードだと動かない。静的な本番とDOMレンダーの仕組みが違うから。 DOMをいじるVanilla JSを更新した際にフルリロードされない点なども地味に面倒。 v3で本番に近づけるため、SSRに目をつけた。普通はReactから静的HTMLとJSを生成してハイドレーションするが、ハイドレーションせずに静的HTMLだけ開発サーバーに返せばSSGに近い。この状態をベースにアセットの読み込みを最適化すれば理想に近づきそう。
Viteの機能への追従を効率化するため、型定義の大部分をViteから読み込みMDXなどを追加して提供する。
テンプレートで読み込んだ画像などのパスが本番で修正されない問題を解決。v2ではテンプレートとアセットで別々の処理を行なっていたため解決されなかった。v3ではViteでまとめて処理する。 ```tsx import imageUrl from "../assets/image.png" export default function () { return } ``` 関連：#91
SPAのimportを利用していた機能なので作り直し。 ```tsx import "../assets/index.css" export default function () { return ( index ) } ``` - 関連：#72
エントリー機能は基本的に引き継ぐ。一時ファイル生成をなくしたいところ。 - 関連：#73
node v18にはundiciのfetchが入っているため、v18以上がLTSになるまではundiciを依存関係に含めておく。 - https://developer.mozilla.org/en-US/docs/Web/API/fetch#browser_compatibility
ministaのMDXコンフィグを反映できるコンパイラーコンポーネント。node.jsで処理してレンダリング前にHTMLを渡す仕様を検討。node.jsなので `@leafac/rehype-shiki` とかも動くのではないかと。
v2ではユーザーコンフィグ内の相対パスimportの内容をバンドルしておらず、一時ファイル生成によってimport元のパスも変わっていたため、ローカルで作成したViteプラグインが使えなかった。 - https://github.com/qrac/minista/blob/2.8.3/src/user.ts#L23-L30 また、この修正をv2に施したとしても、本番ビルドはHTML側でesbuild・アセット側でViteが別々に動作するため、Viteプラグインの導入はおそらく失敗する。 #89 のテストと合わせてこの問題を修正予定。
esbuildがTSConfigのJSX設定を読んでimport文を自動挿入してくれるようになったので、対応していないラッパーのtsupを使う理由が薄れた。ビルド処理自体は難しくないので自分でesbuildを利用して書く。