Merge branch 'development'

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 <!-- ## [Unreleased] -->
 
+## [0.1.1] - 2023-07-26
+
+- Bump dependencies
+
+## [0.1.0] - 2023-07-25
+
+- Refactor
+
 ## [0.0.4] - 2023-07-22
 
 - Refactor
@@ -18,8 +26,10 @@
 
 - Initial release
 
-[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.0.4...HEAD
+[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.1.1...HEAD
 
+[0.1.1]: https://github.com/swup/parallel-plugin/releases/tag/0.1.1
+[0.1.0]: https://github.com/swup/parallel-plugin/releases/tag/0.1.0
 [0.0.4]: https://github.com/swup/parallel-plugin/releases/tag/0.0.4
 [0.0.3]: https://github.com/swup/parallel-plugin/releases/tag/0.0.3
 [0.0.2]: https://github.com/swup/parallel-plugin/releases/tag/0.0.2

package.json

@@ -2,7 +2,7 @@
   "name": "@swup/parallel-plugin",
   "amdName": "SwupParallelPlugin",
   "description": "A swup plugin for animating the previous and next page in parallel",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -45,10 +45,10 @@
     "url": "https://github.com/swup/parallel-plugin.git"
   },
   "dependencies": {
-    "@swup/plugin": "^3.0.0-rc.25"
+    "@swup/plugin": "^3.0.0"
   },
   "peerDependencies": {
-    "swup": "^4.0.0-rc.24"
+    "swup": "^4.0.0"
   },
   "browserslist": [
     "extends @swup/browserslist-config"

src/index.ts

@@ -14,6 +14,7 @@ type PluginOptions = {
 };
 
 type ContainerSet = {
+	selector: string;
 	previous: HTMLElement;
 	next: HTMLElement;
 };
@@ -23,9 +24,7 @@ export default class SwupParallelPlugin extends Plugin {
 
 	requires = { swup: '>=4' };
 
-	defaults: PluginOptions = {
-		containers: []
-	};
+	defaults: PluginOptions = { containers: [] };
 	options: PluginOptions;
 
 	originalContainers: string[] | null = null;
@@ -59,39 +58,28 @@ export default class SwupParallelPlugin extends Plugin {
 	startVisit: Handler<'visit:start'> = (visit) => {
 		this.originalContainers = null;
 
-		if (!visit.animation.animate || visit.animation.parallel === false) {
-			return;
-		}
-
-		// Only mark as parallel visit if containers found
-		if (this.visitHasParallelContainers(visit)) {
+		// Only mark as parallel visit if containers found and animation matches
+		if (this.visitHasPotentialParallelAnimation(visit)) {
 			visit.animation.wait = true;
 			visit.animation.parallel = true;
 		}
 	};
 
 	skipOutAnimation: Handler<'animation:out:await'> = (visit, args) => {
-		if (visit.animation.animate && visit.animation.parallel) {
+		if (this.isParallelVisit(visit)) {
 			args.skip = true;
 		}
 	};
 
 	insertContainers: Handler<'content:replace'> = (visit, { page }) => {
-		if (!visit.animation.animate || !visit.animation.parallel) {
-			return;
-		}
-
-		const parallelContainers = this.options.containers;
-		const hasParallelContainers = parallelContainers.every((s) => visit.containers.includes(s));
-		if (!hasParallelContainers) {
-			console.warn(
-				'[parallel-plugin] Parallel containers not found in list of replaced containers'
-			);
+		if (!this.isParallelVisit(visit)) {
 			return;
 		}
 
 		// Replace parallel containers ourselves
-		this.parseContainers(page).forEach(({ previous, next }) => {
+		const containerSets = this.getContainersForVisit(visit, page);
+		const parallelContainers = containerSets.map(({ selector }) => selector);
+		containerSets.forEach(({ previous, next }) => {
 			this.previousContainers.push(previous);
 			this.nextContainers.push(next);
 
@@ -122,15 +110,42 @@ export default class SwupParallelPlugin extends Plugin {
 		this.nextContainers = [];
 	};
 
-	parseContainers({ html }: { html: string }): ContainerSet[] {
+	getContainersForVisit(visit: Visit, { html }: { html: string }): ContainerSet[] {
+		const { containers: parallelContainers } = this.options;
+		const containersInVisit = parallelContainers.filter((s) => visit.containers.includes(s));
+		if (!containersInVisit.length) {
+			console.warn('No parallel containers found in list of replaced containers');
+			return [];
+		}
+
 		const incomingDocument = new DOMParser().parseFromString(html, 'text/html');
-		return this.options.containers.reduce((containers, selector: string) => {
+
+		return containersInVisit.reduce((containers, selector: string) => {
 			const previous = document.querySelector<HTMLElement>(selector);
 			const next = incomingDocument.querySelector<HTMLElement>(selector);
-			return previous && next ? [...containers, { previous, next }] : containers;
+			return previous && next ? [...containers, { selector, previous, next }] : containers;
 		}, [] as ContainerSet[]);
 	}
 
+	isParallelVisit(visit: Visit) {
+		return visit.animation.animate && visit.animation.parallel;
+	}
+
+	markVisitAsParallelAnimation(visit: Visit) {
+		visit.animation.wait = true;
+		visit.animation.parallel = true;
+	}
+
+	visitHasPotentialParallelAnimation(visit: Visit) {
+		// Checking for visit.animation.parallel !== false here allows explicitly
+		// disabling parallel animations in user hooks before this plugin executes
+		return (
+			visit.animation.animate &&
+			visit.animation.parallel !== false &&
+			this.visitHasParallelContainers(visit)
+		);
+	}
+
 	visitHasParallelContainers(visit: Visit) {
 		return this.options.containers.some((selector) => {
 			const container = document.querySelector(selector);