Elderjs / elderjs

Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.

Home Page:https://elderguide.com/tech/elderjs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PJAX transitions with Swup.js, how to re-init Elder hydration

JulianCataldo opened this issue · comments

Hey there ! Very glad to try Elder, coming from Nuxt / Next / Gridsome / Gatsby…
I find ElderJs to be pleasingly simple while still being uber powerful.

I've some precise questions about the "SPA feel" you can get with AJAX-like transitions.
I'm testing Elder with Swup.js, a PJAX library.
It's working correctly and as expected, instead of one specific drawback for now :
Re-hydration (partial and OR global) does not occur after a route change.
For example, the Clock example stays static.
Swup talks about this classic pitfall about PJAX libs.
They offers some hooks to "re-init" JS functions.
https://swup.js.org/getting-started/reloading-javascript

Some food for thought, somehow related :
https://navillus.dev/blog/astro-plus-swup

My question : how can I trigger programmatically what's Elder is doing on an initial page load for making it JS-interactive ? Thanks a lot for your insights.

@JulianCataldo Welcome! Glad you're enjoying Elder.js.

As answered in Discord, this isn't something that Elder.js offers out of the box, but you should be able to take the contents from the hydrateStack and wrap them with some sort of function where you activate the hydrate process.

My gut says this will take some fiddling but should be doable.