Merge pull request #21 from swup/next

Update for swup 4

CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+<!-- ## [Unreleased] -->
+
+## [3.0.0] - 2023-07-26
+
+- Update for swup 4 compatibility
+
+## [2.0.0] - 2023-03-10
+
+- Switch to microbundle
+- Export native ESM module
+
+## [1.0.2] - 2020-02-25
+
+- Support IE 11
+
+## [1.0.1] - 2019-05-13
+
+- Fix plugin name
+
+## [1.0.0] - 2019-05-11
+
+- Initial release
+
+[Unreleased]: https://github.com/swup/body-class-plugin/compare/3.0.0...HEAD
+
+[3.0.0]: https://github.com/swup/body-class-plugin/releases/tag/3.0.0
+[2.0.0]: https://github.com/swup/body-class-plugin/releases/tag/2.0.0
+[1.0.2]: https://github.com/swup/body-class-plugin/releases/tag/1.0.2
+[1.0.1]: https://github.com/swup/body-class-plugin/releases/tag/1.0.1
+[1.0.0]: https://github.com/swup/body-class-plugin/releases/tag/1.0.0

README.md

@@ -0,0 +1,45 @@
+# Swup Body Class Plugin
+
+A [swup](https://swup.js.org) plugin for updating the `body` classname after each page load.
+
+## Installation
+
+Install the plugin from npm and import it into your bundle.
+
+```bash
+npm install @swup/body-class-plugin
+```
+
+```js
+import SwupBodyClassPlugin from '@swup/body-class-plugin';
+```
+
+Or include the minified production file from a CDN:
+
+```html
+<script src="https://unpkg.com/@swup/body-class-plugin@3"></script>
+```
+
+## Usage
+
+To run this plugin, include an instance in the swup options.
+
+```javascript
+const swup = new Swup({
+  plugins: [new SwupBodyClassPlugin()]
+});
+```
+
+## Options
+
+### prefix
+
+By default, all classes are updated. If your site uses classes on the body element for functionality
+like opening menus, you can tell the plugin to only update classnames starting with a prefix,
+e.g. `page-`. It will then only update those classes and leave all other classes untouched.
+
+```javascript
+{
+  prefix: 'page-'
+}
+```

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@swup/body-class-plugin",
   "amdName": "SwupBodyClassPlugin",
-  "version": "2.0.1",
-  "description": "Swup plugin for replacing content of body class.",
+  "version": "3.0.0",
+  "description": "A swup plugin for updating the body classname",
   "type": "module",
   "source": "src/index.js",
   "main": "./dist/index.cjs",
@@ -17,7 +17,7 @@
     "dev": "swup-plugin dev",
     "lint": "swup-plugin lint",
     "format": "swup-plugin format",
-    "prepublish": "npm run build"
+    "prepublishOnly": "npm run build"
   },
   "author": {
     "name": "Georgy Marchuk",
@@ -37,10 +37,10 @@
     "url": "https://github.com/swup/body-class-plugin.git"
   },
   "dependencies": {
-    "@swup/plugin": "^2.0.0"
+    "@swup/plugin": "^3.0.0"
   },
   "peerDependencies": {
-    "swup": "^3.0.0"
+    "swup": "^4.0.0"
   },
   "browserslist": [
     "extends @swup/browserslist-config"

src/index.js

@@ -1,44 +1,40 @@
 import Plugin from '@swup/plugin';
 
-export default class BodyClassPlugin extends Plugin {
-	name = 'BodyClassPlugin';
+export default class SwupBodyClassPlugin extends Plugin {
+	name = 'SwupBodyClassPlugin';
 
-	constructor(options) {
-		super();
+	requires = { swup: '>=4' };
 
-		const defaultOptions = {
-			prefix: ''
-		};
+	defaults = {
+		prefix: ''
+	};
 
-		this.options = {
-			...defaultOptions,
-			...options
-		};
+	constructor(options = {}) {
+		super();
+		this.options = { ...this.defaults, ...options };
 	}
 
 	mount() {
-		this.swup.on('contentReplaced', () => {
-			const page = this.swup.cache.getCurrentPage();
-
-			// remove old classes
-			document.body.className.split(' ').forEach((className) => {
-				if (this.isValidClassName(className)) {
-					document.body.classList.remove(className);
-				}
-			});
-
-			// add new classes
-			if (page.pageClass !== '') {
-				page.pageClass.split(' ').forEach((className) => {
-					if (this.isValidClassName(className)) {
-						document.body.classList.add(className);
-					}
-				});
-			}
-		});
+		this.on('content:replace', this.updateBodyClass);
+	}
+
+	updateBodyClass(visit, { page: { html } }) {
+		this.updateClassNames(document.body, this.getBodyElement(html));
+	}
+
+	getBodyElement(html) {
+		const doc = new DOMParser().parseFromString(html, 'text/html');
+		return doc.querySelector('body');
+	}
+
+	updateClassNames(el, newEl) {
+		const remove = [...el.classList].filter((className) => this.isValidClassName(className));
+		const add = [...newEl.classList].filter((className) => this.isValidClassName(className));
+		el.classList.remove(...remove);
+		el.classList.add(...add);
 	}
 
 	isValidClassName(className) {
-		return className !== '' && className.indexOf(this.options.prefix) !== -1;
+		return className && className.startsWith(this.options.prefix);
 	}
 }