@keenmate/svelte-spa-router 1.0.1 → 1.0.2

package/.editorconfig

@@ -0,0 +1,18 @@
+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
+
+[*.{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

@@ -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.
@@ -15,26 +15,28 @@
 	 */
 	function getLocation() {
 		const hashRoutingEnabled = get(HashRoutingEnabled)
-		const basePath = get(BasePath)
+		const basePath           = get(BasePath)
 		let location
 
 		if (hashRoutingEnabled) {
-			const hashPosition = window.location.href.indexOf("#/")
+			const hashPosition = window.location.href.indexOf('#/')
 			location           = (hashPosition > -1) ?
 				window.location.href.substr(hashPosition + 1) :
-				"/"
-		} else {
+				'/'
+		}
+		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)
+			location = '/' + window.location.pathname.substring(basePath.length)
 		}
 
 		// Check if there's a querystring
-		const qsPosition = location.indexOf("?")
-		let querystring  = ""
+		const qsPosition = location.indexOf('?')
+		let querystring  = ''
 		if (qsPosition > -1) {
 			querystring = location.substr(qsPosition + 1)
 			location    = location.substr(0, qsPosition)
@@ -53,11 +55,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,15 +127,16 @@
 
 	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)) {
-				throw Error("Invalid parameter location")
+				throw Error('Invalid parameter location')
 			}
-		} else {
+		}
+		else {
 			if (!location || location.length < 1 || !/^\//.test(location)) {
-				throw Error("Invalid parameter location")
+				throw Error('Invalid parameter location')
 			}
 		}
 
@@ -155,17 +158,19 @@
 			doNavigate(newHistoryState, undefined)
 
 			if (!shouldReplace) {
-				window.location.hash = (location.charAt(0) === "#" ? "" : "#") + location
-			} else {
-				window.dispatchEvent(new Event("hashchange"))
+				window.location.hash = (location.charAt(0) === '#' ? '' : '#') + location
+			}
+			else {
+				window.dispatchEvent(new Event('hashchange'))
 			}
-		} else {
+		}
+		else {
 			if (!location.startsWith(basePath)) {
 				location = joinPaths(basePath, location)
 			}
 
 			console.log(
-				"Before navigate",
+				'Before navigate',
 				window.history,
 				window.history.pushState,
 				doNavigate,
@@ -185,7 +190,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
 	 */
 
 	/**
@@ -204,20 +209,20 @@
 		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 shouldReplace = typeof opts !== 'string' && opts.shouldReplace
 
-				jediForcePush(node.getAttribute("href"), shouldReplace)
+				jediForcePush(node.getAttribute('href'), shouldReplace)
 				window.dispatchEvent(new Event(SvelteSPARouterNavigationEvent))
 			}, {capture: true})
 		}
@@ -239,7 +244,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)
 		}
@@ -249,38 +255,41 @@
 	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
-			} else if (!href || href.length < 2 || href.slice(0, 2) != "#/") {
-				throw Error("Invalid value for \"href\" attribute: " + href)
+				href = '#' + href
 			}
-		} else {
+			else if (!href || href.length < 2 || href.slice(0, 2) != '#/') {
+				throw Error('Invalid value for "href" attribute: ' + href)
+			}
+		}
+		else {
 			if (href && !href.startsWith(basePath)) {
 				href = joinPaths(basePath, href)
 			}
 		}
 
-		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
 			}
-		} else {
+		}
+		else {
 			return val || {}
 		}
 	}
@@ -319,8 +328,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`.
@@ -342,7 +351,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
@@ -361,16 +370,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)
@@ -378,12 +387,13 @@
 			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
 				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 = []
@@ -406,17 +416,20 @@
 			// 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) || "/"
-					} else {
+						path = path.substr(prefix.length) || '/'
+					}
+					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 {
+						path = path.substr(match[0].length) || '/'
+					}
+					else {
 						return null
 					}
 				}
@@ -438,7 +451,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
 				}
@@ -482,7 +495,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]))
@@ -508,7 +522,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) => {
@@ -517,12 +531,13 @@
 			// navigation)
 			if (event.state && (event.state.__svelte_spa_router_scrollY || event.state.__svelte_spa_router_scrollX)) {
 				previousScrollState = event.state
-			} else {
+			}
+			else {
 				previousScrollState = null
 			}
 		}
 		// This is removed in the destroy() invocation below
-		window.addEventListener("popstate", popStateChanged)
+		window.addEventListener('popstate', popStateChanged)
 
 		afterUpdate(() => {
 			restoreScroll(previousScrollState)
@@ -555,7 +570,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
@@ -564,13 +579,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
@@ -584,12 +599,13 @@
 
 					// 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
 					}))
-				} else {
+				}
+				else {
 					component    = null
 					componentObj = null
 				}
@@ -610,9 +626,10 @@
 
 			// 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 {
+			}
+			else {
 				componentParams = null
 			}
 
@@ -621,7 +638,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
@@ -639,6 +656,6 @@
 
 	onDestroy(() => {
 		unsubscribeLoc()
-		popStateChanged && window.removeEventListener("popstate", popStateChanged)
+		popStateChanged && window.removeEventListener('popstate', popStateChanged)
 	})
 </script>

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.2",
 	"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 + ']')
 			}
 		}
 	}