@keenmate/svelte-spa-router 1.0.1 → 1.0.3

package/.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*.{cs,js,scss,css,cshtml,json,svelte,vue}]
+indent_style = tab
+indent_size = 2
+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
+indent_size = 2
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.cs]
+csharp_new_line_before_open_brace = all

package/Router.d.ts

@@ -97,6 +97,10 @@ export type LinkActionOpts = {
 	href?: string
 	/** If true, link is disabled */
 	disabled?: boolean
+	/**
+	 * If true, link will replace instead of push new history entry
+	 */
+	replace?: boolean
 }
 
 /** Type for the update function of the link action */

package/Router.svelte

@@ -15,29 +15,35 @@
 	 */
 	function getLocation() {
 		const hashRoutingEnabled = get(HashRoutingEnabled)
-		const basePath = get(BasePath)
-		let location
+		const basePath           = get(BasePath)
+		let location             = ""
+		let querystring          = ""
 
 		if (hashRoutingEnabled) {
 			const hashPosition = window.location.href.indexOf("#/")
 			location           = (hashPosition > -1) ?
 				window.location.href.substr(hashPosition + 1) :
 				"/"
-		} else {
+
+			// 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)
 			if (!hashRoutingEnabled && !startsWithPrefix) {
-				throw new Error(`Hash routing disabled and location: "${window.location.href}" does not start with expected base path: "${get(BasePath)}"`)
+				throw new Error(`Hash routing disabled and location: "${window.location.href}" does not start with expected base path: "${get(
+					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,7 +61,7 @@
 			const eventName = get(HashRoutingEnabled) ?
 				"hashchange" :
 				SvelteSPARouterNavigationEvent
-			console.log("Setting loc")
+			// console.log("Setting loc")
 			const update = () => {
 				console.log("Updating location", getLocation())
 				set(getLocation())
@@ -123,16 +129,17 @@
 		return jediForcePush(location, true)
 	}
 
-	async function jediForcePush(location, shouldReplace = false) {
+	async function jediForcePush(location_, shouldReplace = false) {
 		const hashRoutingEnabled = get(HashRoutingEnabled)
-		const basePath = get(BasePath)
+		const basePath           = get(BasePath)
 
 		if (hashRoutingEnabled) {
-			if (!location || location.length < 1 || !/^(\/|#\/)/.test(location)) {
+			if (!location_ || location_.length < 1 || !/^(\/|#\/)/.test(location_)) {
 				throw Error("Invalid parameter location")
 			}
-		} else {
-			if (!location || location.length < 1 || !/^\//.test(location)) {
+		}
+		else {
+			if (!location_ || location_.length < 1 || !/^\//.test(location_)) {
 				throw Error("Invalid parameter location")
 			}
 		}
@@ -155,26 +162,29 @@
 			doNavigate(newHistoryState, undefined)
 
 			if (!shouldReplace) {
-				window.location.hash = (location.charAt(0) === "#" ? "" : "#") + location
-			} else {
+				window.location.hash = (location_.charAt(0) === "#" ? "" : "#") + location_
+			}
+			else {
 				window.dispatchEvent(new Event("hashchange"))
 			}
 		} 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)
+			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_)
+			}
 
 			window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
 		}
@@ -185,7 +195,7 @@
 	 * @typedef {Object} LinkActionOpts
 	 * @property {string} href - A string to use in place of the link's href attribute. Using this allows for updating link's targets reactively.
 	 * @property {boolean} disabled - If true, link is disabled
-	 * @property {boolean} shouldReplace - If true, link will replace instead of push new history entry
+	 * @property {boolean} replace - If true, link will replace instead of push new history entry
 	 */
 
 	/**
@@ -205,20 +215,26 @@
 
 		// Only apply to <a> tags
 		if (!node || !node.tagName || node.tagName.toLowerCase() != "a") {
-			throw Error("Action \"link\" can only be used with <a> tags")
+			throw Error("Action 'link' can only be used with <a> tags")
 		}
 
 		updateLink(node, opts)
 
 		if (!get(HashRoutingEnabled)) {
 			node.addEventListener("click", ev => {
+				const linkTarget = ev.target.getAttribute("target")
+				if (linkTarget && linkTarget !== "_self") {
+					// prevent pushState when link is perhaps going outside of this window
+					return
+				}
+
 				ev.stopImmediatePropagation()
 				ev.preventDefault()
 
 				const shouldReplace = typeof opts !== "string" && opts.shouldReplace
 
 				jediForcePush(node.getAttribute("href"), shouldReplace)
-				window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
+				// window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
 			}, {capture: true})
 		}
 
@@ -239,7 +255,8 @@
 		// If this exists, then this is a back navigation: restore the scroll position
 		if (state) {
 			window.scrollTo(state.__svelte_spa_router_scrollX, state.__svelte_spa_router_scrollY)
-		} else {
+		}
+		else {
 			// Otherwise this is a forward navigation: scroll to top
 			window.scrollTo(0, 0)
 		}
@@ -255,10 +272,12 @@
 			if (href && href.charAt(0) == "/") {
 				// Add # to the href attribute
 				href = "#" + href
-			} else if (!href || href.length < 2 || href.slice(0, 2) != "#/") {
+			}
+			else if (!href || href.length < 2 || href.slice(0, 2) != "#/") {
 				throw Error("Invalid value for \"href\" attribute: " + href)
 			}
-		} else {
+		}
+		else {
 			if (href && !href.startsWith(basePath)) {
 				href = joinPaths(basePath, href)
 			}
@@ -280,7 +299,8 @@
 			return {
 				href: val
 			}
-		} else {
+		}
+		else {
 			return val || {}
 		}
 	}
@@ -383,7 +403,8 @@
 				this.conditions = component.conditions || []
 				this.userData   = component.userData
 				this.props      = component.props || {}
-			} else {
+			}
+			else {
 				// Convert the component to a function that returns a Promise, to normalize it
 				this.component  = () => Promise.resolve(component)
 				this.conditions = []
@@ -409,14 +430,17 @@
 				if (typeof prefix == "string") {
 					if (path.startsWith(prefix)) {
 						path = path.substr(prefix.length) || "/"
-					} else {
+					}
+					else {
 						return null
 					}
-				} else if (prefix instanceof RegExp) {
+				}
+				else if (prefix instanceof RegExp) {
 					const match = path.match(prefix)
 					if (match && match[0]) {
 						path = path.substr(match[0].length) || "/"
-					} else {
+					}
+					else {
 						return null
 					}
 				}
@@ -482,7 +506,8 @@
 		routes.forEach((route, path) => {
 			routesList.push(new RouteItem(path, route))
 		})
-	} else {
+	}
+	else {
 		// We have an object, so iterate on its own properties
 		Object.keys(routes).forEach((path) => {
 			routesList.push(new RouteItem(path, routes[path]))
@@ -517,7 +542,8 @@
 			// navigation)
 			if (event.state && (event.state.__svelte_spa_router_scrollY || event.state.__svelte_spa_router_scrollX)) {
 				previousScrollState = event.state
-			} else {
+			}
+			else {
 				previousScrollState = null
 			}
 		}
@@ -589,7 +615,8 @@
 						name:      component.name,
 						params:    componentParams
 					}))
-				} else {
+				}
+				else {
 					component    = null
 					componentObj = null
 				}
@@ -612,7 +639,8 @@
 			// 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) {
 				componentParams = match
-			} else {
+			}
+			else {
 				componentParams = null
 			}
 

package/active.js

@@ -1,6 +1,6 @@
-import {parse} from "regexparam"
-import {BasePath, HashRoutingEnabled, loc} from "./Router.svelte"
-import {get} from "svelte/store"
+import {parse} from 'regexparam'
+import {BasePath, HashRoutingEnabled, loc} from './Router.svelte'
+import {get} from 'svelte/store'
 
 // List of nodes to update
 const nodes = []
@@ -16,7 +16,7 @@ function checkActive(el) {
 }
 
 function toggleClasses(el, className, shouldAdd) {
-	(className || "").split(" ").forEach((cls) => {
+	(className || '').split(' ').forEach((cls) => {
 		if (!cls) {
 			return
 		}
@@ -33,7 +33,7 @@ function toggleClasses(el, className, shouldAdd) {
 // Listen to changes in the location
 loc.subscribe((value) => {
 	// Update the location
-	location = value.location + (value.querystring ? "?" + value.querystring : "")
+	location = value.location + (value.querystring ? '?' + value.querystring : '')
 
 	// Update all nodes
 	nodes.map(checkActive)
@@ -56,25 +56,27 @@ export default function active(node, opts) {
 	const basePath = get(BasePath)
 
 	// Check options
-	if (opts && (typeof opts == "string" || (typeof opts == "object" && opts instanceof RegExp))) {
+	if (opts && (typeof opts == 'string' || (typeof opts == 'object' && opts instanceof RegExp))) {
 		// Interpret strings and regular expressions as opts.path
 		opts = {
 			path: opts
 		}
-	} else {
+	}
+	else {
 		// Ensure opts is a dictionary
 		opts = opts || {}
 	}
 
 	// Path defaults to link target
-	if (!opts.path && node.hasAttribute("href")) {
-		opts.path = node.getAttribute("href")
+	if (!opts.path && node.hasAttribute('href')) {
+		opts.path = node.getAttribute('href')
 
 		if (get(HashRoutingEnabled)) {
-			if (opts.path && opts.path.length > 1 && opts.path.charAt(0) == "#") {
+			if (opts.path && opts.path.length > 1 && opts.path.charAt(0) == '#') {
 				opts.path = opts.path.substring(1)
 			}
-		} else {
+		}
+		else {
 			if (opts.path.startsWith(basePath)) {
 				opts.path = opts.path.substring(basePath.length)
 			}
@@ -83,18 +85,18 @@ export default function active(node, opts) {
 
 	// Default class name
 	if (!opts.className) {
-		opts.className = "active"
+		opts.className = 'active'
 	}
 
 	// If path is a string, it must start with '/' or '*'
 	if (!opts.path ||
-		typeof opts.path == "string" && (opts.path.length < 1 || (opts.path.charAt(0) != "/" && opts.path.charAt(0) != "*"))
+		typeof opts.path == 'string' && (opts.path.length < 1 || (opts.path.charAt(0) != '/' && opts.path.charAt(0) != '*'))
 	) {
-		throw Error("Invalid value for \"path\" argument")
+		throw Error('Invalid value for "path" argument')
 	}
 
 	// If path is not a regular expression already, make it
-	const {pattern} = typeof opts.path == "string" ?
+	const {pattern} = typeof opts.path == 'string' ?
 		parse(opts.path) :
 		{pattern: opts.path}
 

package/constants.js

@@ -1 +1 @@
-export const SvelteSPARouterNavigationEvent = "popstate"
+export const SvelteSPARouterNavigationEvent = 'popstate'

package/nightwatch.conf.cjs

@@ -1,52 +1,52 @@
 // Selenium configuration
-const seleniumHost = process.env.SELENIUM_HOST || "127.0.0.1"
-const seleniumPort = parseInt(process.env.SELENIUM_PORT || "4444", 10)
+const seleniumHost = process.env.SELENIUM_HOST || '127.0.0.1'
+const seleniumPort = parseInt(process.env.SELENIUM_PORT || '4444', 10)
 
 // Launch URL - where the server is
-const launchUrl = process.env.LAUNCH_URL || "http://localhost:5050"
+const launchUrl = process.env.LAUNCH_URL || 'http://localhost:5050'
 
 // Increase max listeners to avoid a warning
-require("events").EventEmitter.defaultMaxListeners = 100
+require('events').EventEmitter.defaultMaxListeners = 100
 
 module.exports = {
-	src_folders: [
-		"test/cases/"
-	],
+		src_folders: [
+				'test/cases/'
+		],
 
-	output_folder: "result",
+		output_folder: 'result',
 
-	test_runner: {
-		type:    "mocha",
-		options: {
-			ui:       "bdd",
-			reporter: "list"
-		}
-	},
-
-	test_settings: {
-		default:           {
-			launch_url: launchUrl
+		test_runner: {
+				type:    'mocha',
+				options: {
+						ui:       'bdd',
+						reporter: 'list'
+				}
 		},
-		"selenium.chrome": {
-			selenium:            {
-				start_process: false,
-				host:          seleniumHost,
-				port:          seleniumPort
-			},
-			webdriver:           {
-				start_process: false
-			},
-			desiredCapabilities: {
-				browserName:    "chrome",
-				chromeOptions:  {
-					args: [
-						"--headless",
-						"--no-sandbox",
-						"--disable-gpu"
-					]
+
+		test_settings: {
+				default:           {
+						launch_url: launchUrl
 				},
-				acceptSslCerts: true
-			}
+				'selenium.chrome': {
+						selenium:            {
+								start_process: false,
+								host:          seleniumHost,
+								port:          seleniumPort
+						},
+						webdriver:           {
+								start_process: false
+						},
+						desiredCapabilities: {
+								browserName:    'chrome',
+								chromeOptions:  {
+										args: [
+												'--headless',
+												'--no-sandbox',
+												'--disable-gpu'
+										]
+								},
+								acceptSslCerts: true
+						}
+				}
 		}
-	}
 }

package/package.json

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

package/wrap.js

@@ -41,13 +41,13 @@
  */
 export function wrap(args) {
 	if (!args) {
-		throw Error("Parameter args is required")
+		throw Error('Parameter args is required')
 	}
 
 	// We need to have one and only one of component and asyncComponent
 	// This does a "XNOR"
 	if (!args.component == !args.asyncComponent) {
-		throw Error("One and only one of component and asyncComponent is required")
+		throw Error('One and only one of component and asyncComponent is required')
 	}
 
 	// If the component is not async, wrap it into a function returning a Promise
@@ -56,8 +56,8 @@ export function wrap(args) {
 	}
 
 	// Parameter asyncComponent and each item of conditions must be functions
-	if (typeof args.asyncComponent != "function") {
-		throw Error("Parameter asyncComponent must be a function")
+	if (typeof args.asyncComponent != 'function') {
+		throw Error('Parameter asyncComponent must be a function')
 	}
 	if (args.conditions) {
 		// Ensure it's an array
@@ -65,8 +65,8 @@ export function wrap(args) {
 			args.conditions = [args.conditions]
 		}
 		for (let i = 0; i < args.conditions.length; i++) {
-			if (!args.conditions[i] || typeof args.conditions[i] != "function") {
-				throw Error("Invalid parameter conditions[" + i + "]")
+			if (!args.conditions[i] || typeof args.conditions[i] != 'function') {
+				throw Error('Invalid parameter conditions[' + i + ']')
 			}
 		}
 	}