@keenmate/svelte-spa-router 1.0.2 → 1.0.4

package/.editorconfig

@@ -7,6 +7,9 @@ trim_trailing_whitespace = true
 charset = utf-8
 ij_javascript_use_semicolon_after_statement = false
 ij_typescript_use_semicolon_after_statement = false
+ij_html_quote_style = double
+ij_javascript_use_double_quotes = true
+ij_typescript_use_double_quotes = true
 
 [*.{xaml,cshtml,html,xml}]
 indent_style = tab

package/Router.svelte

@@ -1,11 +1,11 @@
 <script context="module">
-	import {derived, get, readable, writable} from 'svelte/store'
-	import {tick} from 'svelte'
-	import {SvelteSPARouterNavigationEvent} from './constants.js'
-	import {joinPaths} from './helpers/url-helpers.js'
+	import {derived, get, readable, writable} from "svelte/store"
+	import {tick} from "svelte"
+	import {SvelteSPARouterNavigationEvent} from "./constants.js"
+	import {joinPaths} from "./helpers/url-helpers.js"
 
 	export const HashRoutingEnabled = writable(true)
-	export const BasePath           = writable('/')
+	export const BasePath           = writable("/")
 
 	/**
 	 * Returns the current location from the hash.
@@ -16,13 +16,21 @@
 	function getLocation() {
 		const hashRoutingEnabled = get(HashRoutingEnabled)
 		const basePath           = get(BasePath)
-		let location
+		let location             = ""
+		let querystring          = ""
 
 		if (hashRoutingEnabled) {
-			const hashPosition = window.location.href.indexOf('#/')
+			const hashPosition = window.location.href.indexOf("#/")
 			location           = (hashPosition > -1) ?
 				window.location.href.substr(hashPosition + 1) :
-				'/'
+				"/"
+
+			// Check if there's a querystring
+			const qsPosition = location.indexOf("?")
+			if (qsPosition > -1) {
+				querystring = location.substr(qsPosition + 1)
+				location    = location.substr(0, qsPosition)
+			}
 		}
 		else {
 			const startsWithPrefix = window.location.pathname.startsWith(basePath)
@@ -31,15 +39,11 @@
 					BasePath)}"`)
 			}
 
-			location = '/' + window.location.pathname.substring(basePath.length)
-		}
-
-		// Check if there's a querystring
-		const qsPosition = location.indexOf('?')
-		let querystring  = ''
-		if (qsPosition > -1) {
-			querystring = location.substr(qsPosition + 1)
-			location    = location.substr(0, qsPosition)
+			location = "/" + window.location.pathname.substring(basePath.length).replace(/^\//, "")
+			// console.log("SAPA ROUTER Parsing querystring", window.location.search)
+			if (window.location.search) {
+				querystring = window.location.search.substring(1)
+			}
 		}
 
 		return {location, querystring}
@@ -55,11 +59,11 @@
 			set(getLocation())
 
 			const eventName = get(HashRoutingEnabled) ?
-				'hashchange' :
+				"hashchange" :
 				SvelteSPARouterNavigationEvent
-			console.log('Setting loc')
+			// console.log("Setting loc")
 			const update = () => {
-				console.log('Updating location', getLocation())
+				console.log("Updating location", getLocation())
 				set(getLocation())
 			}
 			window.addEventListener(eventName, update, false)
@@ -125,18 +129,18 @@
 		return jediForcePush(location, true)
 	}
 
-	async function jediForcePush(location, shouldReplace = false) {
+	async function jediForcePush(location_, shouldReplace = false) {
 		const hashRoutingEnabled = get(HashRoutingEnabled)
 		const basePath           = get(BasePath)
 
 		if (hashRoutingEnabled) {
-			if (!location || location.length < 1 || !/^(\/|#\/)/.test(location)) {
-				throw Error('Invalid parameter location')
+			if (!location_ || location_.length < 1 || !/^(\/|#\/)/.test(location_)) {
+				throw Error("Invalid parameter location")
 			}
 		}
 		else {
-			if (!location || location.length < 1 || !/^\//.test(location)) {
-				throw Error('Invalid parameter location')
+			if (!location_ || location_.length < 1 || !/^\//.test(location_)) {
+				throw Error("Invalid parameter location")
 			}
 		}
 
@@ -158,28 +162,29 @@
 			doNavigate(newHistoryState, undefined)
 
 			if (!shouldReplace) {
-				window.location.hash = (location.charAt(0) === '#' ? '' : '#') + location
+				window.location.hash = (location_.charAt(0) === "#" ? "" : "#") + location_
 			}
 			else {
-				window.dispatchEvent(new Event('hashchange'))
+				window.dispatchEvent(new Event("hashchange"))
+			}
+		} else {
+			if (location_ !== get(location)) {
+				if (!location_.startsWith(basePath)) {
+					location_ = joinPaths(basePath, location_)
+				}
+
+				// console.log(
+				// 	"Before navigate",
+				// 	window.history,
+				// 	window.history.pushState,
+				// 	doNavigate,
+				// 	newHistoryState,
+				// 	undefined,
+				// 	location_
+				// )
+				// window.history.pushState(newHistoryState, undefined, location)
+				doNavigate(newHistoryState, undefined, location_)
 			}
-		}
-		else {
-			if (!location.startsWith(basePath)) {
-				location = joinPaths(basePath, location)
-			}
-
-			console.log(
-				'Before navigate',
-				window.history,
-				window.history.pushState,
-				doNavigate,
-				newHistoryState,
-				undefined,
-				location
-			)
-			// window.history.pushState(newHistoryState, undefined, location)
-			doNavigate(newHistoryState, undefined, location)
 
 			window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
 		}
@@ -209,21 +214,29 @@
 		opts = linkOpts(opts)
 
 		// Only apply to <a> tags
-		if (!node || !node.tagName || node.tagName.toLowerCase() != 'a') {
-			throw Error('Action "link" can only be used with <a> tags')
+		if (!node || !node.tagName || node.tagName.toLowerCase() != "a") {
+			throw Error("Action 'link' can only be used with <a> tags")
 		}
 
 		updateLink(node, opts)
 
 		if (!get(HashRoutingEnabled)) {
-			node.addEventListener('click', ev => {
+			node.addEventListener("click", ev => {
 				ev.stopImmediatePropagation()
 				ev.preventDefault()
 
-				const shouldReplace = typeof opts !== 'string' && opts.shouldReplace
+				const linkTarget = ev.target.getAttribute("target")
+				if (linkTarget && linkTarget !== "_self") {
+					// prevent pushState when link is perhaps going outside of this window
+					window.open(node.getAttribute("href"), linkTarget)
+
+					return
+				}
+
+				const shouldReplace = typeof opts !== "string" && opts.shouldReplace
 
-				jediForcePush(node.getAttribute('href'), shouldReplace)
-				window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
+				jediForcePush(node.getAttribute("href"), shouldReplace)
+				// window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
 			}, {capture: true})
 		}
 
@@ -255,15 +268,15 @@
 	function updateLink(node, opts) {
 		const basePath = get(BasePath)
 
-		let href = opts.href || node.getAttribute('href')
+		let href = opts.href || node.getAttribute("href")
 
 		if (get(HashRoutingEnabled)) {
-			if (href && href.charAt(0) == '/') {
+			if (href && href.charAt(0) == "/") {
 				// Add # to the href attribute
-				href = '#' + href
+				href = "#" + href
 			}
-			else if (!href || href.length < 2 || href.slice(0, 2) != '#/') {
-				throw Error('Invalid value for "href" attribute: ' + href)
+			else if (!href || href.length < 2 || href.slice(0, 2) != "#/") {
+				throw Error("Invalid value for \"href\" attribute: " + href)
 			}
 		}
 		else {
@@ -272,19 +285,19 @@
 			}
 		}
 
-		node.setAttribute('href', href)
-		node.addEventListener('click', (event) => {
+		node.setAttribute("href", href)
+		node.addEventListener("click", (event) => {
 			// Prevent default anchor onclick behaviour
 			event.preventDefault()
 			if (!opts.disabled) {
-				scrollstateHistoryHandler(event.currentTarget.getAttribute('href'))
+				scrollstateHistoryHandler(event.currentTarget.getAttribute("href"))
 			}
 		})
 	}
 
 	// Internal function that ensures the argument of the link action is always an object
 	function linkOpts(val) {
-		if (val && typeof val == 'string') {
+		if (val && typeof val == "string") {
 			return {
 				href: val
 			}
@@ -328,8 +341,8 @@
 {/if}
 
 <script>
-	import {onDestroy, createEventDispatcher, afterUpdate} from 'svelte'
-	import {parse} from 'regexparam'
+	import {onDestroy, createEventDispatcher, afterUpdate} from "svelte"
+	import {parse} from "regexparam"
 
 	/**
 	 * Dictionary of all routes, in the format `'/path': component`.
@@ -351,7 +364,7 @@
 	/**
 	 * Optional prefix for the routes in this router. This is useful for example in the case of nested routers.
 	 */
-	export let prefix = ''
+	export let prefix = ""
 
 	/**
 	 * If set to true, the router will restore scroll positions on back navigation
@@ -370,16 +383,16 @@
 		 * @param {SvelteComponent|WrappedComponent} component - Svelte component for the route, optionally wrapped
 		 */
 		constructor(path, component) {
-			if (!component || (typeof component != 'function' && (typeof component != 'object' || component._sveltesparouter !== true))) {
-				throw Error('Invalid component object')
+			if (!component || (typeof component != "function" && (typeof component != "object" || component._sveltesparouter !== true))) {
+				throw Error("Invalid component object")
 			}
 
 			// Path must be a regular or expression, or a string starting with '/' or '*'
 			if (!path ||
-				(typeof path == 'string' && (path.length < 1 || (path.charAt(0) != '/' && path.charAt(0) != '*'))) ||
-				(typeof path == 'object' && !(path instanceof RegExp))
+				(typeof path == "string" && (path.length < 1 || (path.charAt(0) != "/" && path.charAt(0) != "*"))) ||
+				(typeof path == "object" && !(path instanceof RegExp))
 			) {
-				throw Error('Invalid value for "path" argument - strings must start with / or *')
+				throw Error("Invalid value for \"path\" argument - strings must start with / or *")
 			}
 
 			const {pattern, keys} = parse(path)
@@ -387,7 +400,7 @@
 			this.path = path
 
 			// Check if the component is wrapped and we have conditions
-			if (typeof component == 'object' && component._sveltesparouter === true) {
+			if (typeof component == "object" && component._sveltesparouter === true) {
 				this.component  = component.component
 				this.conditions = component.conditions || []
 				this.userData   = component.userData
@@ -416,9 +429,9 @@
 			// If there's a prefix, check if it matches the start of the path.
 			// If not, bail early, else remove it before we run the matching.
 			if (prefix) {
-				if (typeof prefix == 'string') {
+				if (typeof prefix == "string") {
 					if (path.startsWith(prefix)) {
-						path = path.substr(prefix.length) || '/'
+						path = path.substr(prefix.length) || "/"
 					}
 					else {
 						return null
@@ -427,7 +440,7 @@
 				else if (prefix instanceof RegExp) {
 					const match = path.match(prefix)
 					if (match && match[0]) {
-						path = path.substr(match[0].length) || '/'
+						path = path.substr(match[0].length) || "/"
 					}
 					else {
 						return null
@@ -451,7 +464,7 @@
 			while (i < this._keys.length) {
 				// In the match parameters, URL-decode all values
 				try {
-					out[this._keys[i]] = decodeURIComponent(matches[i + 1] || '') || null
+					out[this._keys[i]] = decodeURIComponent(matches[i + 1] || "") || null
 				} catch (e) {
 					out[this._keys[i]] = null
 				}
@@ -522,7 +535,7 @@
 	let previousScrollState = null
 
 	// Update history.scrollRestoration depending on restoreScrollState
-	$: history.scrollRestoration = restoreScrollState ? 'manual' : 'auto'
+	$: history.scrollRestoration = restoreScrollState ? "manual" : "auto"
 	let popStateChanged = null
 	if (restoreScrollState) {
 		popStateChanged = (event) => {
@@ -537,7 +550,7 @@
 			}
 		}
 		// This is removed in the destroy() invocation below
-		window.addEventListener('popstate', popStateChanged)
+		window.addEventListener("popstate", popStateChanged)
 
 		afterUpdate(() => {
 			restoreScroll(previousScrollState)
@@ -570,7 +583,7 @@
 				location:    newLoc.location,
 				querystring: newLoc.querystring,
 				userData:    routesList[i].userData,
-				params:      (match && typeof match == 'object' && Object.keys(match).length) ? match : null
+				params:      (match && typeof match == "object" && Object.keys(match).length) ? match : null
 			}
 
 			// Check if the route can be loaded - if all conditions succeed
@@ -579,13 +592,13 @@
 				component    = null
 				componentObj = null
 				// Trigger an event to notify the user, then exit
-				dispatchNextTick('conditionsFailed', detail)
+				dispatchNextTick("conditionsFailed", detail)
 				return
 			}
 
 			// Trigger an event to alert that we're loading the route
 			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
-			dispatchNextTick('routeLoading', Object.assign({}, detail))
+			dispatchNextTick("routeLoading", Object.assign({}, detail))
 
 			// If there's a component to show while we're loading the route, display it
 			const obj = routesList[i].component
@@ -599,7 +612,7 @@
 
 					// Trigger the routeLoaded event for the loading component
 					// Create a copy of detail so we don't modify the object for the dynamic route (and the dynamic route doesn't modify our object too)
-					dispatchNextTick('routeLoaded', Object.assign({}, detail, {
+					dispatchNextTick("routeLoaded", Object.assign({}, detail, {
 						component: component,
 						name:      component.name,
 						params:    componentParams
@@ -626,7 +639,7 @@
 
 			// Set componentParams only if we have a match, to avoid a warning similar to `<Component> was created with unknown prop 'params'`
 			// Of course, this assumes that developers always add a "params" prop when they are expecting parameters
-			if (match && typeof match == 'object' && Object.keys(match).length) {
+			if (match && typeof match == "object" && Object.keys(match).length) {
 				componentParams = match
 			}
 			else {
@@ -638,7 +651,7 @@
 
 			// Dispatch the routeLoaded event then exit
 			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
-			dispatchNextTick('routeLoaded', Object.assign({}, detail, {
+			dispatchNextTick("routeLoaded", Object.assign({}, detail, {
 				component: component,
 				name:      component.name,
 				params:    componentParams
@@ -656,6 +669,6 @@
 
 	onDestroy(() => {
 		unsubscribeLoc()
-		popStateChanged && window.removeEventListener('popstate', popStateChanged)
+		popStateChanged && window.removeEventListener("popstate", popStateChanged)
 	})
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@keenmate/svelte-spa-router",
 	"private": false,
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "Router for SPAs using Svelte 4",
 	"main": "Router.svelte",
 	"svelte": "Router.svelte",