Merge branch 'development'

Author: daun

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 <!-- ## [Unreleased] -->
 
+## [0.0.4] - 2023-07-22
+
+- Refactor
+
 ## [0.0.3] - 2023-07-22
 
 - Detect parallel containers of current visit
@@ -14,8 +18,9 @@
 
 - Initial release
 
-[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.0.3...HEAD
+[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.0.4...HEAD
 
+[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
 [0.0.1]: https://github.com/swup/parallel-plugin/releases/tag/0.0.1

README.md

@@ -131,12 +131,16 @@ the animation, parallel animations can be controlled using the classes `is-previ
 
 ## Timing
 
-Technically, the plugin will skip the out-animation, add the next container, wait for animations to
-finish, then remove the previous container. All animations now happen in the in-phase of the
+Technically, the plugin will **skip the out-animation**, add the next container, wait for animations to
+finish, then remove the previous container. **All animations now happen in the in-phase** of the
 lifecycle, after the `content:replace` hook that normally marks the middle of the animation
 process. Any containers that are not animated or not animated in parallel (e.g. a static header)
 will be replaced at the start of the parallel animation.
 
+This also applies when using the [JS plugin](https://swup.js.org/plugins/js-plugin/): the
+out-animation is skipped entirely and only the in-animation is executed. You'll need to perform
+both animations in the `in` handler.
+
 ## Options
 
 ### containers

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@swup/parallel-plugin",
   "amdName": "SwupParallelPlugin",
   "description": "A swup plugin for running the in and out animations in parallel",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",

package.json

@@ -1,4 +1,4 @@
-import type { Options as SwupOptions, Handler } from 'swup';
+import type { Handler, Visit } from 'swup';
 import { forceReflow } from 'swup';
 import Plugin from '@swup/plugin';
 
@@ -10,7 +10,7 @@ declare module 'swup' {
 }
 
 type PluginOptions = {
-	containers: SwupOptions['containers'];
+	containers: string[];
 };
 
 type ContainerSet = {
@@ -28,7 +28,7 @@ export default class SwupParallelPlugin extends Plugin {
 	};
 	options: PluginOptions;
 
-	originalContainers: SwupOptions['containers'] = [];
+	originalContainers: string[] | null = null;
 	previousContainers: Element[] = [];
 	nextContainers: Element[] = [];
 
@@ -57,58 +57,41 @@ export default class SwupParallelPlugin extends Plugin {
 	}
 
 	startVisit: Handler<'visit:start'> = (visit) => {
-		const { animate, parallel } = visit.animation;
-		const { containers } = this.options;
-		if (!animate || parallel === false) {
+		this.originalContainers = null;
+
+		if (!visit.animation.animate || visit.animation.parallel === false) {
 			return;
 		}
+
 		// Only mark as parallel visit if containers found
-		const hasContainers = containers.some((selector) => {
-			const el = document.querySelector(selector)
-			if (!el) return false;
-			return visit.containers.some(s => el.matches(s));
-		});
-		if (hasContainers) {
+		if (this.visitHasParallelContainers(visit)) {
 			visit.animation.wait = true;
 			visit.animation.parallel = true;
 		}
 	};
 
 	skipOutAnimation: Handler<'animation:out:await'> = (visit, args) => {
-		const { animate, parallel } = visit.animation;
-		if (animate && parallel) {
+		if (visit.animation.animate && visit.animation.parallel) {
 			args.skip = true;
 		}
 	};
 
-	insertContainers: Handler<'content:replace'> = (visit, args) => {
-		const { animate, parallel } = visit.animation;
-		const { containers } = visit;
-		const { page } = args;
-
-		if (!animate || !parallel) {
+	insertContainers: Handler<'content:replace'> = (visit, { page }) => {
+		if (!visit.animation.animate || !visit.animation.parallel) {
 			return;
 		}
 
-		const defaultContainers = [...containers];
-		const containersInParallel = this.options.containers;
-		const containersInSeries = defaultContainers.filter(
-			(selector) => !containersInParallel.includes(selector)
-		);
-		const hasContainers = containersInParallel.every((selector) =>
-			defaultContainers.includes(selector)
-		);
-		if (!hasContainers) {
+		const parallelContainers = this.options.containers;
+		const hasParallelContainers = parallelContainers.every((s) => visit.containers.includes(s));
+		if (!hasParallelContainers) {
 			console.warn(
-				'[parallel-plugin] Parallel containers must be included in default containers'
+				'[parallel-plugin] Parallel containers not found in list of replaced containers'
 			);
 			return;
 		}
 
 		// Replace parallel containers ourselves
-
-		const parallelContainers = this.parseContainers(page);
-		parallelContainers.forEach(({ previous, next }) => {
+		this.parseContainers(page).forEach(({ previous, next }) => {
 			this.previousContainers.push(previous);
 			this.nextContainers.push(next);
 
@@ -117,27 +100,25 @@ export default class SwupParallelPlugin extends Plugin {
 
 			next.classList.add('is-next-container');
 			forceReflow(next);
-			next.classList.remove('is-next-container');
 			previous.classList.add('is-previous-container');
+			next.classList.remove('is-next-container');
 		});
 
-		this.originalContainers = defaultContainers;
-		visit.containers = containersInSeries;
+		// Hand all other non-parallel containers to swup
+		this.originalContainers = visit.containers;
+		visit.containers = visit.containers.filter((s) => !parallelContainers.includes(s));
 	};
 
 	resetContainers: Handler<'content:replace'> = (visit) => {
-		const { animate, parallel } = visit.animation;
-		if (!animate || !parallel) {
-			return;
+		if (this.originalContainers) {
+			visit.containers = this.originalContainers;
 		}
-
-		visit.containers = this.originalContainers;
 	};
 
 	cleanupContainers = () => {
 		this.previousContainers.forEach((c) => c.remove());
-		this.previousContainers = [];
 		this.nextContainers.forEach((c) => c.classList.remove('is-next-container'));
+		this.previousContainers = [];
 		this.nextContainers = [];
 	};
 
@@ -149,4 +130,11 @@ export default class SwupParallelPlugin extends Plugin {
 			return previous && next ? [...containers, { previous, next }] : containers;
 		}, [] as ContainerSet[]);
 	}
+
+	visitHasParallelContainers(visit: Visit) {
+		return this.options.containers.some((selector) => {
+			const container = document.querySelector(selector);
+			return container?.matches(visit.containers.join(','));
+		});
+	}
 }