SolidJS and View Transitions API: A match made in heaven.

[kevintakeda]

I came to appreciate the seamless experience of working with SolidJS and View Transitions API, thanks to its synchronous updates, eliminating the need for asynchronous operations.

Demo 0 (counter):
https://playground.solidjs.com/anonymous/b69093be-3fff-4e1b-b20d-879fccf0fb4b

Demo 1 (shopping cart):
https://playground.solidjs.com/anonymous/515472ff-c71f-4205-b680-d56404acf37c

Demo 2 (shopping cart multiple):
https://playground.solidjs.com/anonymous/e4742f65-deb1-45e4-b351-12be5fcab536

Demo 3 (starfield):
https://playground.solidjs.com/anonymous/085a66fa-3d83-42d1-b9ad-64b0fb04c784

Demo 4 (multiplying stars):
https://playground.solidjs.com/anonymous/d9a2e72d-d843-48f8-820c-d223d9466815

Obs: Works on latest Chrome. Unfortunately, doesn't work on Firefox or Safari.

[hawkerboy7]

Hi @mishimalisa and others!
I wanted to have page transitions when navigating using the View Transitions API in my SPA.
The only way I got it to work is using the following:

const transition = function (fnStartingTheSynchronousTransition) {

	// In case the API is not yet supported
	if (!document.startViewTransition) { return fnStartingTheSynchronousTransition() }

	// Transition the changes in the DOM
	const transition = document.startViewTransition(fnStartingTheSynchronousTransition)
}

useBeforeLeave((e) => {

	// Stop the inmediate navigation and DOM change
	e.preventDefault()

	// Perform the action that triggers a DOM change synchronously
	transition(() => { e.retry(true) })
}))

Tough it works, to me this does not really seem to be the way it should be done.
Any other suggestions? :)

[kevintakeda]

Hey @hawkerboy7 , That's interesting. I haven't tried View Transitions with SPA before, but your solution might not always work. I just looked into the solid-router code, and the event.retry(true) seems to use navigate internally, which performs asynchronous operations even though retry function itself isn't async. This means the start transition might start before the new page is fully rendered, you have to check it.

I can't think of a better solution. It might require solid router to introduce a new primitive.

Something like (idea): useRouterTransition((end) => startViewTransition(async () => await end())), and as bonus it fetches (necessary data) before starting the transition.

[hawkerboy7]

Hi @mishimalisa,
Ahh I see, I did try to find something in the router, but I do not understand the router code good enough to know where to find what I am looking for :)

Upon reading the the definition properly, the function I named fnStartingTheSynchronousTransition can/should acutally be a promise.

A callback function typically invoked to update the DOM during the view transition process, which returns a Promise. The callback is invoked once the API has taken a screenshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.

So what you proposed seems good, but it can be passed in directly then right?

useBeforeRouterTriggersDOMChanges((DOMchangesAreComplete) => {
	document.startViewTransition(DOMchangesAreComplete)
})

In which DOMchangesAreComplete is a promise SolidJS router will fullfill when the DOM has changed,

What do you mean with:

and as bonus it fetches (necessary data) before starting the transition.

[kevintakeda]

@hawkerboy7 Yes! So, when you use startViewTransition, it basically freezes the page until the function or Promise returns. So it's better to minimize the time spent inside it by fetching all necessary stuff (non DOM updates) before and outside the View Transition.

[whoiscarlo]

@hawkerboy7 @mishimalisa

Where does this new piece of code:

useBeforeRouterTriggersDOMChanges((DOMchangesAreComplete) => {
	document.startViewTransition(DOMchangesAreComplete)
})

fit in this:

const transition = function (fnStartingTheSynchronousTransition) {

	// In case the API is not yet supported
	if (!document.startViewTransition) { return fnStartingTheSynchronousTransition() }

	// Transition the changes in the DOM
	const transition = document.startViewTransition(fnStartingTheSynchronousTransition)
}

useBeforeLeave((e) => {

	// Stop the inmediate navigation and DOM change
	e.preventDefault()

	// Perform the action that triggers a DOM change synchronously
	transition(() => { e.retry(true) })
}))

Or did I misunderstand the discussion?

[hawkerboy7]

Hi @whoiscarlo,

It would look like this:

const transition = function (fnStartingTheSynchronousTransition) {

	// In case the API is not yet supported
	if (!document.startViewTransition) { return fnStartingTheSynchronousTransition() }

	// Transition the changes in the DOM
	const transition = document.startViewTransition(fnStartingTheSynchronousTransition)
}

useBeforeRouterTriggersDOMChanges((DOMchangesAreComplete) => {

	// Perform the action that triggers a DOM change synchronously
	transition(DOMchangesAreComplete)
})

However looking at it again the names of the functions are quite bad, sorry :(
This might be clearer:

const transition = function (fnThatChangesTheDOM) {

	// In case the API is not yet supported
	if (!document.startViewTransition) { return fnThatChangesTheDOM() }

	// Transition the changes in the DOM
	const transition = document.startViewTransition(fnThatChangesTheDOM)
}

useBeforeRouterTriggersDOMChanges((triggerTheChangesToTheDOM) => {

	// Perform the action that triggers a DOM change synchronously
	transition(triggerTheChangesToTheDOM)
})