Fix missing props propagation in integration

.changeset/unlucky-dodos-drum.md

@@ -0,0 +1,5 @@
+---
+"astro-vtbot": patch
+---
+
+Fixes a bug where explicitly set properties of `<ViewTransitions />` were lost.

components/ProgressBar.astro

@@ -1,19 +1,23 @@
 ---
+export interface Props {}
 ---
+
 <script>
-  import "https://unpkg.com/@swup/progress-plugin@3"
+	import 'https://unpkg.com/@swup/progress-plugin@3';
 	import { loading } from './loading-indicator';
-
+	import { TRANSITION_AFTER_SWAP } from 'astro:transitions/client';
 	//@ts-ignore
 	const plugin = new SwupProgressPlugin();
 
-	document.addEventListener('astro:after-swap', () => plugin.progressBar.installStyleElement());
+	document.addEventListener(TRANSITION_AFTER_SWAP, () => plugin.progressBar.installStyleElement());
 
-	loading(() => plugin.startShowingProgress(), () => plugin.stopShowingProgress());
+	loading(
+		() => plugin.startShowingProgress(),
+		() => plugin.stopShowingProgress()
+	);
 </script>
 
 <style is:global>
 	.swup-progress-bar {
 	}
 </style>
-

components/ProgressBar.d.ts

@@ -0,0 +1 @@
+export default function ProgressBar(_props: import('./ProgressBar.astro').Props): any;

components/loading-indicator.ts

@@ -1,6 +1,9 @@
 /// <reference types="astro/client" />
-import { TRANSITION_BEFORE_PREPARATION, TRANSITION_BEFORE_SWAP, TRANSITION_PAGE_LOAD } from 'astro:transitions/client';
-
+import {
+	TRANSITION_BEFORE_PREPARATION,
+	TRANSITION_BEFORE_SWAP,
+	TRANSITION_PAGE_LOAD,
+} from 'astro:transitions/client';
 
 let show: () => void;
 let hide: () => void;
@@ -36,7 +39,6 @@ export async function ensureLoadingIndicator() {
 	}
 }
 
-
 const beforePreparation = () => {
 	if (!ownIndicator) ensureLoadingIndicator();
 	document.documentElement.classList.add(`loading`);
@@ -56,4 +58,3 @@ export function init(createIndicator: boolean = false) {
 	createIndicator && document.addEventListener(TRANSITION_PAGE_LOAD, ensureLoadingIndicator);
 	!createIndicator && document.removeEventListener(TRANSITION_PAGE_LOAD, ensureLoadingIndicator);
 }
-

components/template/LoadingIndicatorTemplate_CSS.astro

@@ -1,25 +1,33 @@
 ---
-import LoadingIndicator from 'astro-vtbot/components/LoadingIndicator.astro'
+import LoadingIndicator from 'astro-vtbot/components/LoadingIndicator.astro';
 ---
 
-{/* By rendering <LoadingIndicator/> here, 
-		you inherit the logic that sets the "loading" CSS class */}
+{
+	/* By rendering <LoadingIndicator/> here, 
+		you inherit the logic that sets the "loading" CSS class */
+}
 <LoadingIndicator />
 
-{/* Defining this div is only necessary 
-		if you do not want to use the default element that holds the favicon image  */}
-<div id="vtbot-loading-indicator"> <!-- make sure to use this id -->
-  ...
-<div>
-
-<style is:global>
-	#vtbot-loading-indicator { 
-	/* basic styling, typically with position: fixed */
-	/* hide the indicator with display: none, opacity: 0, visibility: hidden, right: -100vw, ... */
-		...
-	}
-	html.loading #vtbot-loading-indicator {
-	/* show the indicator with display: block, opacity: 1, visibility: visible, right: 3vw, ... */
-		...
-	}
-</style>
+{
+	/* Defining this div is only necessary 
+		if you do not want to use the default element that holds the favicon image  */
+}
+<div id="vtbot-loading-indicator">
+	<!-- make sure to use this id -->
+	<!-- ...  -->
+	<div>
+		<style is:global>
+			#vtbot-loading-indicator {
+				/* basic styling, typically with position: fixed */
+				/* hide the indicator with display: none, opacity: 0, visibility: hidden, right: -100vw, ... */
+
+				/* ... */
+			}
+			html.loading #vtbot-loading-indicator {
+				/* show the indicator with display: block, opacity: 1, visibility: visible, right: 3vw, ... */
+
+				/* ... */
+			}
+		</style>
+	</div>
+</div>

integration/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />

integration/vite-plugin-extend.ts

@@ -18,7 +18,7 @@ export default function vitePluginVtbotExtend(opts: ExtendOptions): Plugin {
 			if (!import.meta.env.DEV) linter = false;
 			if ((!linter && !loading) || id.match(/vtpl[123]\.astro$/) || !id.endsWith('.astro')) return;
 
-			const replacement = `"astro-vtbot/vtex${loading ? (linter ? "3" : "2") : "1"}"`;
+			const replacement = `"astro-vtbot/vtex${loading ? (linter ? '3' : '2') : '1'}"`;
 			const match = code.match(/from\s*['"]astro:transitions["']/ms);
 			if (match) {
 				const ast = parse(code, {
@@ -31,7 +31,7 @@ export default function vitePluginVtbotExtend(opts: ExtendOptions): Plugin {
 						if (node.type === 'ImportDeclaration' && node.source.value === 'astro:transitions') {
 							code =
 								code.substring(0, node.source.start) +
-							replacement +
+								replacement +
 								code.substring(node.source.end);
 						}
 					},

integration/vtpl1.astro

@@ -3,5 +3,5 @@ import { ViewTransitions } from 'astro:transitions';
 import Linter from '../components/Linter.astro';
 ---
 
-<ViewTransitions />
+<ViewTransitions {...Astro.props} />
 <Linter />

integration/vtpl2.astro

@@ -3,5 +3,5 @@ import { ViewTransitions } from 'astro:transitions';
 import LoadingIndicator from '../components/LoadingIndicator.astro';
 ---
 
-<ViewTransitions />
+<ViewTransitions {...Astro.props} />
 <LoadingIndicator />

integration/vtpl3.astro

@@ -3,5 +3,5 @@ import VTPL from './vtpl1.astro';
 import LoadingIndicator from '../components/LoadingIndicator.astro';
 ---
 
-<VTPL />
+<VTPL {...Astro.props} />
 <LoadingIndicator />