Closed13日前にクローズ10

Astro+Splide+swupでいい感じに動かしたい。

非エンジニア（デザイナー）による開発ログ。
Astro+Splide+swupの構成でポートフォリオサイトの開発中。

swupを導入していい感じに遷移できるようになったがTOPページのSplideが初回以降ページ内遷移で動かなくなる。（別のページのフィルタリングのスクリプトも同様）
swupは遷移タイミングでmainタグを置き換えているのでAstroコンポーネント内に書いたscriptが初回以降の遷移で効かなくなるっぽい。
Asrtoコンポーネントに書いているスクリプトはheadタグにスクリプトとして書き出されるので、Swupで遷移した時headタグが取り残される感じで更新されずにうまくいっていないっぽい？
swupで用意されているreloadScriptsはtrueにしても変わらない模様。
TOPページのコンポーネントのスクリプトでmount()メソッドを呼び出してSplideを動かしている。なお、Splideは対象となる要素がすでにロードされている必要があるようなのでSwupで遷移した後にDOMの生成を待ってmount()を呼ぶ必要がありそう。
swupのhookを使ってみたが変わらず、さらにhookを使っていると遷移時のフェードの挙動が不安定になる様子。

swupで遷移時にスクリプトが動かないのは結構上がっているみたい。

SPAっぽくフェードで遷移したいだけだからAstroのView Transitionsでもいいのかも。

一旦swupを切って進める。

View Transitionsで何とかなりそう。

AstroのView Transitionsではスマホで動かないので、Swupを使うことにする。

デザインを変更してSplideはやめる。

Swupのスクリプト挙動不全はいろいろ試して何とかなった。

ページによってcssの読み込みが遅れる問題が発生。

Astroの仕様により4KB以上のスタイルはLinkタグになるらしい。

このスクラップは13日前にクローズされました