breaking changes (#232)

* breaking changes

* preparation for 2.0.0

* Update README.md

.changeset/rotten-moles-draw.md

@@ -0,0 +1,29 @@
+---
+'astro-vtbot': major
+---
+
+When installed as an integration, the <Linter /> and <LoadingIndicator /> components will no longer be auto-installed on all pages. The `autoLint` and `loadingIndicator` options in the `vtbot()` integration in your astro-config file now default to `false` instead of `true`. These options will be completely removed in a future release.
+
+
+## What's Changing?
+
+- If you use astro-vtbot as a library and haven't installed it as an Astro integration: Nothing changes for you.
+
+- If you have installed it as an integration and have explicitly opted out of the linter and loading indicator: remove these settings: `{autoLint: false, loadingIndicator: false}` from your astro-config file.
+
+- If you have installed it as an integration and called vtbot({...}) with one option or no parameter at all:
+To ensure continued functionality, explicitly add the `<Linter />` and/or `<LoadingIndicator />` components to the pages that need them. Ideally, include them in your common `layout.astro` file for consistency across your site. Make sure that the call to `vtbot()` in you astro-config file does not set any options.
+
+### Temporary Workaround
+You can restore the previous behavior by enabling the deprecated options, but note that they will be removed soon:
+
+```ts
+import vtbot from "astro-vtbot";
+
+export default defineConfig({
+	integrations: [vtbot({
+		autoLint: true, loadingIndicator: true
+	})]
+});
+```
+Take action now to ensure smooth transitions and avoid future disruptions.

README.md

@@ -15,27 +15,26 @@ A current deployment of tech demos and the documentation can be found at https:/
 
 ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!!
 
-Brings you the latest version of @vtbag/element-crossing, with a bug fix for letting `data-*` properties cross over to the new page!
 
-For details, see the [CHANGELOG of the ElementCrossing](https://github.com/vtbag/element-crossing/blob/main/CHANGELOG.md).
+Version 2.0.0 🎉 of astro-vtbot is here!
 
+This release changes what is automatically installed if you add astro-vtbot as an astro integration via `astro add astro-vtbot`. Now installing as an integration using `astro add astro-vtbot` should be your default choice for installing astro-vtbot. This gives you access to the `inspection-chamber` on every page via Astro's devToolbar!
 
-## Recently Learned Tricks ##
-
-> The Inspection Chamber DevTools now als work for `pnpm` projects! \
-Big shout out and "Thank You!" to [Lukas](https://github.com/Trombach) for providing this fix!
-
-> New component for browser-native cross-document view transitions: The `<CamShaft>` component prevents the pseudo-smooth-scroll effect caused by view transition groups that exceed the height of the viewport when navigating to a different vertical scroll position.
+In contrast, `<LoadingIndicator />` and the `<Linter />` components will no longer be automatically integrated and must be explicitly added if needed, e.g. in a global Layout.astro. During a transition period, the previous behavior can still be restored using toggles in the astro.config file.
 
-> The `<TurnSignal>` enables Astro's forward/backward animations provided by `transition:animate` to work with native cross-document `@view-transition{}`. Optionally you can configure the component with a total order of your site's pages, allowing it to automatically detect the transition direction.
+For details, see the [CHANGELOG](https://github.com/martrapp/vtbot/blob/main/CHANGELOG.md).
 
-> The `<ElementCrossing />` is a component for those of you who experiment with CSS-only cross-document view transitions and miss a way to preserve state of HTML elements across navigation: Transfer selected element state to the other side!
+**On the plus side:** There’s an exciting new mode in the `<TurnSignal/>` component! It allows for view transition types on a per-link basis!
+For further information see these demos: [blog demo](http://localhost:4321/signal-demo/link-types/blog/), [@vtbag image viewer demo](https://vtbag.dev/viewer-demo/) and the [@vtbag fishpond demo](https://vtbag.dev/link-demo/).
 
-> Inspection Chamber: See your view transitions like never before: examine every detail, reveal, debug, and optimize! Now, drill down into the effects of each pseudo-element introduced by the view transition API and even selectively toggle individual animations to better understand what’s happening! Summon the Inspection Chamber as a component ([&lt;InspectionChamber />](https://events-3bg.pages.dev/library/InspectionChamber/)) or [install The Bag as an integration!](hhttps://events-3bg.pages.dev/library/Installation/#installing-as-an-astro-integration) and access the Chamber from the **devToolbar**!
+## Recently Learned Tricks ##
 
+> Latest version of @vtbag/element-crossing, with a bug fix for letting `attr-*` properties cross over to the new page!
 
-> Starlight Support: Ever wanted to see what your Starlight site looks like with view transitions enabled? Follow [these steps](https://events-3bg.pages.dev/jotter/starlight/guide/) to get rid of full page loads and make your Starlight site look like a SPA!
+> The Inspection Chamber DevTools now also work for `pnpm` projects! \
+Big shout out and "Thank You!" to [Lukas](https://github.com/Trombach) for providing this fix!
 
+> New component for browser-native cross-document view transitions: The `<CamShaft>` component prevents the pseudo-smooth-scroll effect caused by view transition groups that exceed the height of the viewport when navigating to a different vertical scroll position.
 
 
 ## Reusable Components 🧩

components/TurnSignal.astro

@@ -1,18 +1,21 @@
 ---
 import signalURL from '@vtbag/turn-signal?url';
+import debugURL from '@vtbag/turn-signal/debug?url';
 import forcedTraversalURL from '@vtbag/turn-signal/forced-traversal?url';
 export interface Props {
 	selector?: string;
 	forcedTraversal?: boolean;
 	directionTypes?: string;
 	directionAttribute?: string;
+	debug?: boolean;
 }
 
 const {
 	selector,
 	forcedTraversal,
 	directionTypes = '',
 	directionAttribute = 'data-astro-transition, back, forward, forward',
+	debug = false,
 } = Astro.props;
 ---
 
@@ -23,7 +26,7 @@ const {
 			{...(selector ? { 'data-selector': selector } : {})}
 			{...(directionTypes ? { 'data-direction-types': directionTypes } : {})}
 			{...(directionAttribute ? { 'data-direction-attribute': directionAttribute } : {})}
-			src={signalURL}
+			src={debug ? debugURL : signalURL}
 		/>
 	)
 }

components/loading-indicator.ts

@@ -27,13 +27,11 @@ export function initialize(onPageLoad?: () => void | Promise<void>, lowPrio = fa
 	document.addEventListener('astro:page-load', doInit);
 	document.addEventListener('astro:before-preparation', (e) => {
 		doShow();
-		if ('loader' in e) {
-			const originalLoader = e.loader as () => Promise<void>;
-			e.loader = async () => {
-				await originalLoader();
-				doHide();
-			};
-		}
+		const originalLoader = e.loader;
+		e.loader = async () => {
+			await originalLoader();
+			doHide();
+		};
 	});
 }
 

integration/index.ts

@@ -1,6 +1,6 @@
 import type { AstroIntegration } from 'astro';
 import vitePluginVtbotExtend from './vite-plugin-extend';
-//@ts-expect-error
+
 import icon from '../assets/bag-of-tricks-mono.svg?raw';
 import { fileURLToPath } from 'node:url';
 
@@ -14,8 +14,8 @@ export default function createIntegration(options?: VtBotOptions): AstroIntegrat
 		name: 'astro-vtbot',
 		hooks: {
 			'astro:config:setup': (setupOptions) => {
-				const linter = options?.autoLint ?? true;
-				const loading = options?.loadingIndicator ?? true;
+				const linter = options?.autoLint ?? false;
+				const loading = options?.loadingIndicator ?? false;
 				if (linter || loading) {
 					setupOptions.updateConfig({
 						vite: {
@@ -24,7 +24,6 @@ export default function createIntegration(options?: VtBotOptions): AstroIntegrat
 					});
 				}
 
-				//@ts-expect-error
 				if (import.meta.env.DEV) {
 					setupOptions.injectRoute({
 						pattern: '/_vtbot_inspection_chamber.js',