6.0.0

### Added - Added `PineconeRouter.settings.alwaysSendLoadingEvents` to always dispatch loading events even when no external templates or handlers are present ### Changed - No longer passes query when navigating by default ### Removed - Removed the option to pass search query when navigating, it served no real purpose. - Removed `includeQuery` parameters from all methods that had it - Removed `PineconeRouter.settings.includeQuery` setting
pinecone-router · Feb 21, 2025 · 966f0df · 966f0df
1 parent ee44bf8
commit 966f0df
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.0.0] - 2025-02-21
+
+### Added
+
+-   Added `PineconeRouter.settings.alwaysSendLoadingEvents` to always dispatch loading events even when no external templates or handlers are present
+
+### Changed
+
+-   No longer passes query when navigating by default
+
+### Removed
+
+-   Removed the option to pass search query when navigating, it served no real purpose.
+    -   Removed `includeQuery` parameters from all methods that had it
+    -   Removed `PineconeRouter.settings.includeQuery` setting
+
+### Fixed
+
+-   Fixed loading event not sent for preloaded templates (Fixes #54).
+
 ## [5.5.0] - 2025-02-11
 
 ### Added
@@ -427,3 +447,4 @@ It's mostly backward compatible but need a few tweaks:
 [5.3.0]: https://github.com/pinecone-router/router/compare/5.2.2..5.3.0
 [5.4.0]: https://github.com/pinecone-router/router/compare/5.3.0..5.4.0
 [5.5.0]: https://github.com/pinecone-router/router/compare/5.4.0..5.5.0
+[6.0.0]: https://github.com/pinecone-router/router/compare/5.5.0..6.0.0
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
   <img src="https://github.com/pinecone-router/router/blob/main/.github/pinecone-router-social-card-alt-big.png?raw=true" title="Pinecone Router logo with the text: The extendable client-side router for Alpine.js">
 </p>
 
-[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/pinecone-router/router?color=%2337C8AB&label=version&sort=semver)](https://github.com/pinecone-router/router/tree/5.5.0)
-[![npm bundle size](https://img.shields.io/bundlephobia/minzip/pinecone-router?color=37C8AB)](https://bundlephobia.com/result?p=pinecone-router@5.5.0)
+[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/pinecone-router/router?color=%2337C8AB&label=version&sort=semver)](https://github.com/pinecone-router/router/tree/6.0.0)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/pinecone-router?color=37C8AB)](https://bundlephobia.com/result?p=pinecone-router@6.0.0)
 [![Downloads from JSDelivr](https://data.jsdelivr.com/v1/package/npm/pinecone-router/badge?style=rounded)](https://www.jsdelivr.com/package/npm/pinecone-router)
 [![npm](https://img.shields.io/npm/dm/pinecone-router?color=37C8AB&label=npm&logo=npm&logoColor=37C8AB)](https://npmjs.com/package/pinecone-router)
 [![Changelog](https://img.shields.io/badge/change-log-%2337C8AB)](/CHANGELOG.md)
@@ -38,13 +38,13 @@ An easy to use but feature-packed router for Alpine.js.
 Include the following `<script>` tag in the `<head>` of your document, **before Alpine.js**:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/pinecone-router@5.5.0/dist/router.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/pinecone-router@6.0.0/dist/router.min.js"></script>
 ```
 
 **ES6 Module on the browser:**
 
 ```javascript
-import PineconeRouter from 'https://cdn.jsdelivr.net/npm/pinecone-router@5.5.0/dist/router.esm.js'
+import PineconeRouter from 'https://cdn.jsdelivr.net/npm/pinecone-router@6.0.0/dist/router.esm.js'
 import Alpine from 'https://esm.sh/alpinejs'
 Alpine.plugin(PineconeRouter)
 Alpine.start()
@@ -232,13 +232,13 @@ See [Redirecting](#redirecting)
 -   **`.global`**: define global handlers that will be run for every route, it is bound to the data of the element it is defined on
     so it's best to add to the router component element (`<div x-data="router" x-handler.global="[]">`), or any element with a access
     to the handlers you're using (doesn't have to be on the same element as x-data)
-    - These global handlers always run before route specific handlers.
+    -   These global handlers always run before route specific handlers.
 
 You can also define global handlers programmatically:
 
 ```js
 document.addEventListener('alpine:init', () => {
-  window.PineconeRouter.globalHandlers = []
+	window.PineconeRouter.globalHandlers = []
 })
 ```
 
@@ -261,11 +261,11 @@ Reference:
 -   _$router_.**params** _({var: something})_ Object that contains route parameters if any.
 -   _$router_.**hash** hash fragment without the #
 -   _$router_.**query** search query without the ?
--   _$router_.**navigate(path: string, includeQuery?: boolean)** same as clicking a link
--   _$router_.**redirect(path: string, includeQuery?: boolean): 'stop'** function that allow you to redirect to another page.
+-   _$router_.**navigate(path: string)** same as clicking a link
+-   _$router_.**redirect(path: string): 'stop'** function that allow you to redirect to another page.
 -   -   **Note**: usage within [x-handler](#x-handler): `return context.redirect('/path');`
--   _$router_.**back(includeQuery?: boolean)** go back in the navigation stack
--   _$router_.**forward(includeQuery?: boolean)** go forward in the navigation stack
+-   _$router_.**back()** go back in the navigation stack
+-   _$router_.**forward()** go forward in the navigation stack
 -   _$router_.**canGoBack(): boolean** check if you can go back in the navigation stack
 -   _$router_.**canGoForward(): boolean** check if you can go forward in the navigation stack
 -   _$router_.**navigationStack: String\[\]** the navigation array
@@ -311,7 +311,7 @@ Create your own middlewares [using this template](https://github.com/pinecone-ro
 		window.PineconeRouter.settings.basePath = '/' // set the base for the URL, doesn't work with hash routing
 		window.PineconeRouter.settings.templateTargetId = 'app' // Set an optional ID for where the internal & external templates will render by default.
 		window.PineconeRouter.settings.interceptLinks = true // Set to false to disable global handling of links by the router, see Disable link handling globally for more.
-		window.PineconeRouter.settings.includeQuery = true // set to false to clear the query when navigating either using links or through $router.navigate()
+		window.PineconeRouter.settings.alwaysSendLoadingEvents = false // set to true to always dispatch loading events even when no external templates or handlers are present
 	})
 </script>
 ```
@@ -331,14 +331,6 @@ If you click a link after using `back()`, meaning the `navigationindex` is not `
 
 Use `canGoBack()` or `canGoForward()` to check if the operation is possible.
 
-### Clearing Search Query on navigation
-
-This can be done in two ways:
-
-1. Per navigation using `$router.navigate(path: string, includeQuery?: boolean)`, by default includeQuery is true. set it to false to clear the query.
-   this also works for `$router.redirect(path: string, includeQuery?: boolean)`, `$router.back(includeQuery?: boolean)` and `router.forward(includeQuery?: boolean)`
-2. Globally using the setting `window.PineconeRouter.settings.includeQuery`, which is also on by default.
-
 ### Bypass link handling
 
 Adding a `native` / `data-native` attribute to a link will prevent Pinecone Router from handling it:
@@ -378,6 +370,9 @@ document.addEventListener('fetch-error', (err) => console.error(err))
 | **pinecone-end**   | document  | when the fetching ends successfuly           |
 | **fetch-error**    | document  | when the fetching of external templates fail |
 
+By default, these events only fire when there are external templates and/or handlers.
+To make it so they are always dispatched you can use the setting `window.PineconeRouter.settings.alwaysSendLoadingEvents = true`
+
 ### Adding and Removing routes & templates programmatically with Javascript
 
 you can add routes & remove them anytime programmatically using Javascript.

diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map
diff --git a/dist/router.esm.js b/dist/router.esm.js
diff --git a/dist/router.esm.js.map b/dist/router.esm.js.map
diff --git a/dist/router.min.js b/dist/router.min.js
diff --git a/dist/router.min.js.map b/dist/router.min.js.map
diff --git a/dist/types.d.ts b/dist/types.d.ts
@@ -13,10 +13,10 @@ export declare type Context = {
      * hash without leading '#'
      */
     hash: string;
-    redirect(path: string, includeQuery?: boolean): 'stop';
-    navigate(path: string, includeQuery?: boolean): void;
-    back(includeQuery?: boolean): void;
-    forward(includeQuery?: boolean): void;
+    redirect(path: string): 'stop';
+    navigate(path: string): void;
+    back(): void;
+    forward(): void;
     canGoBack(): boolean;
     canGoForward(): boolean;
     navigationStack: String[];
@@ -94,9 +94,9 @@ export declare interface Settings {
      */
     interceptLinks: boolean;
     /**
-     * @default true
-     * @summaryt Set to false to make it so search query is cleared when navigating
+     * @default false
+     * @summary Set to true to always send loading events, even if the template is inline and there are no handlers.
      */
-    includeQuery: boolean;
+    alwaysSendLoadingEvents: boolean;
 }
 //# sourceMappingURL=types.d.ts.map
diff --git a/dist/types.d.ts.map b/dist/types.d.ts.map
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
 	"description": "The extendable client-side router for Alpine.js.",
 	"license": "MIT",
 	"author": "Rafik El Hadi Houari <[email protected]>",
-	"version": "5.5.0",
+	"version": "6.0.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/pinecone-router/router"

diff --git a/src/index.ts b/src/index.ts
@@ -27,15 +27,15 @@ declare global {
 
 export default function (Alpine) {
 	const PineconeRouter = Alpine.reactive(<Window['PineconeRouter']>{
-		version: '5.5.0',
+		version: '6.0.0',
 		name: 'pinecone-router',
 
 		settings: <Settings>{
 			hash: false,
 			basePath: '/',
 			templateTargetId: null,
 			interceptLinks: true,
-			includeQuery: true,
+			alwaysSendLoadingEvents: false,
 		},
 
 		/**
@@ -62,39 +62,38 @@ export default function (Alpine) {
 			hash: window.location.hash.substring(1),
 			navigationStack: [],
 			navigationIndex: 0,
-			redirect(path, includeQuery = true) {
-				this.navigate(path, includeQuery)
+			redirect(path) {
+				this.navigate(path)
 				return 'stop'
 			},
-			navigate(path, includeQuery = true) {
-				navigate(path, false, false, null, includeQuery)
+			navigate(path) {
+				navigate(path, false, false, null)
 			},
 			canGoBack() {
 				return this.navigationIndex > 0
 			},
-			back(includeQuery = true) {
+			back() {
 				navigate(
 					this.navigationStack[this.navigationIndex - 1],
 					false,
 					false,
 					this.navigationIndex - 1,
-					includeQuery,
 				)
 			},
 			canGoForward() {
 				return this.navigationIndex < this.navigationStack.length - 1
 			},
-			forward(includeQuery = true) {
+			forward() {
 				navigate(
 					this.navigationStack[this.navigationIndex + 1],
 					false,
 					false,
 					this.navigationIndex + 1,
-					includeQuery,
 				)
 			},
 		},
-
+		endEventDispatched: false,
+		startEventDispatched: false,
 		/**
 		 * Add a new route
 		 */
@@ -159,7 +158,6 @@ export default function (Alpine) {
 
 		el._x_PineconeRouter_undoTemplate = () => {
 			clone.remove()
-
 			delete el._x_PineconeRouter_CurrentTemplate
 		}
 
@@ -178,12 +176,14 @@ export default function (Alpine) {
 		expression: string,
 		urls?: Array<string>,
 		targetEl?: HTMLElement,
+		inlineTemplate: boolean = false,
 	) {
-		if (el._x_PineconeRouter_CurrentTemplate)
+		if (el._x_PineconeRouter_CurrentTemplate) {
 			return el._x_PineconeRouter_CurrentTemplate
+		}
 		if (el.content.firstElementChild) {
 			make(el, expression, targetEl)
-			endLoading()
+			if (!inlineTemplate) endLoading()
 		} else if (urls) {
 			// Since during loading, the content is automatically put inside the template
 			// This first case will only happen if the content of the template was cleared somehow
@@ -261,11 +261,15 @@ export default function (Alpine) {
 	}
 
 	const startLoading = () => {
-		document.dispatchEvent(PineconeRouter.loadStart)
+		if (!PineconeRouter.startEventDispatched)
+			document.dispatchEvent(PineconeRouter.loadStart)
+		PineconeRouter.startEventDispatched = true
 	}
 
 	const endLoading = () => {
-		document.dispatchEvent(PineconeRouter.loadEnd)
+		if (!PineconeRouter.endEventDispatched)
+			document.dispatchEvent(PineconeRouter.loadEnd)
+		PineconeRouter.endEventDispatched = true
 	}
 
 	function fetchError(error: string) {
@@ -475,7 +479,7 @@ export default function (Alpine) {
 							route.handlersDone &&
 							PineconeRouter.context.route == path
 						found
-							? showAll(el, expression, null, targetEl)
+							? showAll(el, expression, null, targetEl, true)
 							: hide(el)
 					})
 				})
@@ -498,12 +502,9 @@ export default function (Alpine) {
 	document.addEventListener('alpine:initialized', () => {
 		middleware('init')
 		// virtually navigate the path on the first page load
-		// this will register the path in history and sets the pathvariable
-		// navigate(window.location.pathname, false, true)
+		// this will register the path in history and sets the path variable
 		if (PineconeRouter.settings.hash == false) {
-			// navigate to the current page to handle it
-			// ONLY if we not using hash routing for the default router
-			navigate(location.pathname, false, true)
+			navigate(location.pathname + location.search, false, true)
 		} else {
 			navigate(location.hash.substring(1), false, true)
 		}
@@ -603,14 +604,17 @@ export default function (Alpine) {
 	 * @param {string} path the path with no hash even if using hash routing
 	 * @param {boolean} fromPopState this will be set to true if called from window.onpopstate event
 	 * @param {boolean} firstLoad this will be set to true if this is the first page loaded, also from page reload
+	 * @param {number} navigationIndex the index of the navigation stack to go to
 	 */
 	async function navigate(
 		path,
 		fromPopState = false,
 		firstLoad = false,
 		navigationIndex = null,
-		includeQuery = true,
 	) {
+		PineconeRouter.startEventDispatched = false
+		PineconeRouter.endEventDispatched = false
+
 		if (!path) path = '/'
 
 		// only add basePath if it was set
@@ -675,9 +679,11 @@ export default function (Alpine) {
 			!route.handlers.length && !PineconeRouter.globalHandlers.length
 
 		if (
-			route.handlers.length ||
-			PineconeRouter.globalHandlers.length ||
-			route.templates.length
+			PineconeRouter.settings.alwaysSendLoadingEvents ||
+			((route.handlers.length ||
+				PineconeRouter.globalHandlers.length ||
+				route.templates.length) &&
+				PineconeRouter.context.path != path)
 		) {
 			startLoading()
 		}
@@ -698,13 +704,10 @@ export default function (Alpine) {
 			let fullPath = ''
 			if (PineconeRouter.settings.hash) {
 				fullPath = '#'
-				if (includeQuery && PineconeRouter.settings.includeQuery)
-					fullPath += window.location.search
+
 				fullPath += path
 			} else {
 				fullPath = path
-				if (includeQuery && PineconeRouter.settings.includeQuery)
-					fullPath += window.location.search
 				fullPath += window.location.hash
 			}
 			// don't create duplicate history entry on first page load
@@ -748,7 +751,13 @@ export default function (Alpine) {
 				},
 			)
 		}
-
+		// if PineconeRouter.settings.alwaysSendLoadingEvents is true
+		// and no end event was dispatched, end the loading
+		if (
+			PineconeRouter.settings.alwaysSendLoadingEvents &&
+			!PineconeRouter.endEventDispatched
+		)
+			endLoading()
 		middleware('onHandlersExecuted', route, path, firstLoad)
 	}