Create playground

[daun]

Set up a simple test site with basic setup and transitions for people to try out swup.

Options:

• Repo with static files and npx serve
• Microsite on docs domain
• REPL on Glitch, CodeSandbox, etc.

[hirasso]

@daun I have created a playground over at codesandbox:

https://codesandbox.io/s/swup-test-case-template-6ci5si

I like this approach a lot, since the test case is instantly available online for everyone to see.

If you also like it, we could add a link to this sandbox to the template for new issues.

[daun]

Thanks; great work! Nice and simple. A few questions:

• Should we remove the nav from the container? It's a common usecase and might make sense here.
• Should we add a few plugins by default? Scroll and debug or something. It might give people a template for how to include them; on the other hand it might complicate things.
• Should we add very minimal branding? Colors, logo, etc. Happy to help out if that sounds like too much hassle.
• Will we get copyright problems with the photo? Stupid, but I've seen it happen...

[hirasso]

Thanks; great work! Nice and simple. A few questions:

• Should we remove the nav from the container? It's a common usecase and might make sense here.

I actually tried to keep it as simple as possible. Added the nav to the container to enable the "is-active" class. But maybe adding the nav as a second container would help many people understanding the concept. Will do this.

• Should we add a few plugins by default? Scroll and debug or something. It might give people a template for how to include them; on the other hand it might complicate things.

Great idea! I would only install DebugPlugin by default, though – this is meant for reduced test cases, after all.

• Should we add very minimal branding? Colors, logo, etc. Happy to help out if that sounds like too much hassle.

I also thought about this, but same argument as above, I would prefer to keep as many complexities as possible out of this.

• Will we get copyright problems with the photo? Stupid, but I've seen it happen...

I saw it being used by the statamic docs, so I think it is copyright-free. Still I actually just removed it, though – following my above reasoning I think is was too distracting.

[hirasso]

Ok, added a few things:

• very minimal styling to match the swup docs, contradicting myself from 5 minutes ago ;)
• additional swup container for the #nav
• DebugPlugin and ScrollPlugin enabled, again following your suggestion
• a few other plugins already added to the dependencies so that they are ready to be imported and used

Let me know what you tink.

[daun]

Beautiful 🥬 I'll add it to the issue template. Is the URL final?

[hirasso]

Actually, I would like to take care of a few last improvements before we add it to the template. The URL is final, except if you have other suggestions?

I would then really like a tag "needs testcase" for the issues, this could help us a lot with the communication.

[hirasso]

...I just noticed a possible deal-breaker for codesandbox: The scrollRestauration seems to not be working in the fake (preview) browser. Maybe then we should try if glitch.com is able to handle this properly?

[daun]

No problem, let me know when you feel it's ready. The URL is fine!

I added a new issue label needs reproduction. That's the most common one I found across a few popular projects.

You're right that scroll restoration seems broken on CodeSandbox. I think it's not a blocker for now but we can move to Glitch whenever convenient.

[daun]

I'll start a list of alternatives:

• Glitch (should work)
• CodePen (npm installs?)
• StackBlitz (never tried)
• JSFiddle (npm installs?)
• GitPod (pricing?)

[hirasso]

I just tried a few:

• Glitch.com: the overall development experience is inferior to Codesandbox. Also, I wasn't able to get the test case to work at all
• StackBlitz: better experience, felt promising at first. But then I got a runtime error from swup that I couldn't get around:

Error in /turbo_modules/swup@2.0.18/lib/helpers/getDataFromHtml.js (30:40)
Cannot read properties of null (reading 'innerText')

• CodePen and JSFiddle don't support multiple html pages, or am I missing something here?
• GitPod is out of the race IMO, since it is a payed service.

I would say, let's stay with Codesandbox, for now. I will add a little disclaimer to the template that it doesn't cover every aspect. But the lively discussion over at #475 wouldn't have been possible without the test case I guess, so it's a big win, already!

[daun]

That runtime error means the document is missing a title tag. Actually a good reminder to check in swup and fail gracefully if no title tag is found.

[daun]

Yes, I agree it's a great tool for debugging already!

[hirasso]

Hmm, but actually every file has a title tag:

https://stackblitz.com/edit/swup-test-case-template

[daun]

Looks like StackBlitz is not returning the actual original document on ajax requests. The swup containers are missing as well.

[daun]

StackBlitz doesn't serve raw html apparently. The response for fetch basically looks like this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" media="screen" href="..." />
  <script src="..." crossorigin="anonymous"></script>
  <script>(function(){_preboot("https://l.staticblitz.com/b/v1/swup-test-case-template/d83ad5f4d33", {"p":"stackblitz","a":"SuRrSps-HjMVg","o":true,"u":"example","$":false})})()</script>
</head>
<body></body>
</html>

[hirasso]

Thanks for checking it. Lets just stick to CodeSandbox for now, ok? I already added the disclaimer to it. Ready for the issue template from my side!

[daun]

This is now linked in the issue template for bug reports.