swup/body-class-plugin

A swup plugin for updating the body classname 🎊

swup 4 is released  🎉  Check out the release notes and upgrade guide.

Swup

Versatile and extensible page transition library for server-rendered websites.

Features • Demos • Plugins • Themes • Documentation • Discussions

Overview

Swup adds page transitions to server-rendered websites. It manages the complete page load lifecycle and smoothly animates between the current and next page. In addition, it offers many other quality-of-life improvements like caching, smart preloading, native browser history and enhanced accessibility.

Make your site feel like a snappy single-page app — without any of the complexity.

Features

• ✏️ Works out of the box with minimal markup
• ✨ Auto-detects CSS transitions & animations for perfect timing
• 🔗 Updates URLs and preserves native browser history
• 🏓 Manages the scroll position between pages and anchor links
• 🚀 Uses a cache to speed up subsequent page loads
• 📡 Offers hooks to customize and extend the page load lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Demos

Explore our interactive demos to see swup in action.

Documentation

Visit our official documentation to learn more.

Plugins

Swup is small by design. Extended features can be added via plugins:

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

Check out the list of official plugins and third-party integrations.

Themes

Get started quickly with one of three official themes: fade, slide, and overlay.

Examples

Take a look at the interactive demos and sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers!   👀

Become a sponsor on Open Collective or support development through GitHub sponsors.

This project is tested with BrowserStack.

body-class-plugin's Issues

Getting "TypeError: Cannot read property 'pageClass' of undefined" when using plugin

Describe your issue:
I'm trying to use this plugin in my wordpress theme, the SWUP works* but it doesn't work and returns this error:

TypeError: Cannot read property 'pageClass' of undefined
    at vendor.min.js?ver=20151215:1
    at vendor.min.js?ver=20151215:1
    at Array.forEach (<anonymous>)
    at w.e.default [as triggerEvent] (vendor.min.js?ver=20151215:1)
    at w.e.default [as renderPage] (vendor.min.js?ver=20151215:1)
    at vendor.min.js?ver=20151215:1

*I have a problem with the SWUP too which I commented here

Swup config or any additional relevant code used:

const domain = window.location.origin
const options = {    
    linkSelector: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
    containers: [".site"],
    plugins: [new SwupBodyClassPlugin()]
};
const swup = new Swup(options);

I also tried the config without the linkSelector change and other linkSelector configs but I still get this error.

Before creating this issue, did you think of...:

• [-] Have you checked closed issues for similar/related problems.
• [-] Have you provided all helpful information available?
• [-] Have you considered creating a demo so we can help you better?

Edit:
I explained the fix here

v3.1.0 - Error: Failed to resolve entry for package "@swup/body-class-plugin".

The package may have incorrect main/module/exports specified in its package.json.

16:35:16.524 | [commonjs--resolver] Failed to resolve entry for package "@swup/body-class-plugin". The package may have incorrect main/module/exports specified in its package.json.
-- | --
16:35:16.813 | error   Failed to resolve entry for package "@swup/body-class-plugin". The package may have incorrect main/module/exports specified in its package.json.
16:35:16.813 | File:
16:35:16.813 | /opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:28708:11
16:35:16.814 | Code:
16:35:16.814 | 28707 \| function packageEntryFailure(id, details) {
16:35:16.814 | > 28708 \|     throw new Error(`Failed to resolve entry for package "${id}". ` +
16:35:16.814 | \|           ^
16:35:16.814 | 28709 \|         `The package may have incorrect main/module/exports specified in its package.json` +
16:35:16.814 | 28710 \|         (details ? ': ' + details : '.'));
16:35:16.814 | 28711 \| }
16:35:16.815 | Stacktrace:
16:35:16.815 | Error: Failed to resolve entry for package "@swup/body-class-plugin". The package may have incorrect main/module/exports specified in its package.json.
16:35:16.815 | at packageEntryFailure (file:///opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:28708:11)
16:35:16.815 | at resolvePackageEntry (file:///opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:28705:5)
16:35:16.815 | at tryNodeResolve (file:///opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:28436:20)
16:35:16.815 | at Object.resolveId (file:///opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:28197:28)
16:35:16.815 | at file:///opt/buildhome/repo/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:25356:40
16:35:16.815 | at async PluginDriver.hookFirstAndGetPlugin (file:///opt/buildhome/repo/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:25256:28)
16:35:16.815 | at async resolveId (file:///opt/buildhome/repo/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:23931:26)
16:35:16.816 | at async ModuleLoader.resolveId (file:///opt/buildhome/repo/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24345:15)
16:35:16.816 | at async Object.resolveId (file:///opt/buildhome/repo/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:7984:10)
16:35:16.816 | at async PluginDriver.hookFirstAndGetPlugin (file:///opt/buildhome/repo/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:25256:28)
16:35:16.816 |  
16:35:16.848 | Failed: build command exited with code: 1
16:35:17.750 | Failed: error occurred while running build command

This happens when deploying in an Astro website on Cloudflare. Here's an example https://github.com/MythemeCloud/mytheme-web

Not working in Safari

Description of the issue

It appears that the plugin is not working as expected in Safari (classes are not removed/added on navigation) while Firefox has no issues.

Context and environment

I tested on Safari 16.6, 17.0 and iOS 16.6.
In case this is not easily reproducible, I'll gladly create a demo.

Thank you very much for your support!

Before creating this issue...

• Have you provided all helpful information available?
• Have you checked closed issues for similar/related problems?
• Have you considered creating a demo so we can help you better?

The "publish package" action failed

...maybe because that was the first Release of this plugin??

How to use exactly?

I have the plugin installed and can see it pinging the tag in Chrome Dev Tools, but it's not changing, adding, removing any classes. How exactly do I add a class based on the current page? Is there some more javascript that needs to be added besides what's shown in the example?

loadPage with query param throws error

Describe your issue:
When using loadPage() method to load an URL, the content being loaded in can be a cached version of the content, if said URL was previously visited.
To get around that I thought of invalidating the cache by appending a random GET param to the URL being loaded, each time it is called.

Something like this:

let d = new Date();
swup.loadPage({ url: url + '?r=' + d.getTime() });

But now Swup throws an error with the following message:
TypeError: page is undefined

Error happens on this line of the body class plugin:

body-class-plugin/dist/SwupBodyClassPlugin.js

Line 174 in 3147786

if (page.pageClass !== '') {

When I remove the GET param, everything works as it should, albeit with cached content being returned by loadPage().

The following issues seem related:
#8
swup/swup#115

Any suggestions? Should I append the param as FormData and set the method to POST?

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?
• Have you considered creating a demo so we can help you better?

String.includes() not supported in IE

IE11 lacks support for String.includes() (browser support).

Can we change this code to use indexOf() instead?

body-class-plugin/src/index.js

Lines 41 to 43 in 05535e8

	isValidClassName(className) {
	return className !== '' && className.includes(this.options.prefix);
	}

At the very least, would be good to mention browser support in the docs and link to polyfills.

Thanks!