@keenmate/svelte-spa-router 1.0.1

package/active.js

@@ -0,0 +1,119 @@
+import {parse} from "regexparam"
+import {BasePath, HashRoutingEnabled, loc} from "./Router.svelte"
+import {get} from "svelte/store"
+
+// List of nodes to update
+const nodes = []
+
+// Current location
+let location
+
+// Function that updates all nodes marking the active ones
+function checkActive(el) {
+	const matchesLocation = el.pattern.test(location)
+	toggleClasses(el, el.className, matchesLocation)
+	toggleClasses(el, el.inactiveClassName, !matchesLocation)
+}
+
+function toggleClasses(el, className, shouldAdd) {
+	(className || "").split(" ").forEach((cls) => {
+		if (!cls) {
+			return
+		}
+		// Remove the class firsts
+		el.node.classList.remove(cls)
+
+		// If the pattern doesn't match, then set the class
+		if (shouldAdd) {
+			el.node.classList.add(cls)
+		}
+	})
+}
+
+// Listen to changes in the location
+loc.subscribe((value) => {
+	// Update the location
+	location = value.location + (value.querystring ? "?" + value.querystring : "")
+
+	// Update all nodes
+	nodes.map(checkActive)
+})
+
+/**
+ * @typedef {Object} ActiveOptions
+ * @property {string|RegExp} [path] - Path expression that makes the link active when matched (must start with '/' or '*'); default is the link's href
+ * @property {string} [className] - CSS class to apply to the element when active; default value is "active"
+ */
+
+/**
+ * Svelte Action for automatically adding the "active" class to elements (links, or any other DOM element) when the current location matches a certain path.
+ *
+ * @param {HTMLElement} node - The target node (automatically set by Svelte)
+ * @param {ActiveOptions|string|RegExp} [opts] - Can be an object of type ActiveOptions, or a string (or regular expressions) representing ActiveOptions.path.
+ * @returns {{destroy: function(): void}} Destroy function
+ */
+export default function active(node, opts) {
+	const basePath = get(BasePath)
+
+	// Check options
+	if (opts && (typeof opts == "string" || (typeof opts == "object" && opts instanceof RegExp))) {
+		// Interpret strings and regular expressions as opts.path
+		opts = {
+			path: opts
+		}
+	} 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 (get(HashRoutingEnabled)) {
+			if (opts.path && opts.path.length > 1 && opts.path.charAt(0) == "#") {
+				opts.path = opts.path.substring(1)
+			}
+		} else {
+			if (opts.path.startsWith(basePath)) {
+				opts.path = opts.path.substring(basePath.length)
+			}
+		}
+	}
+
+	// Default class name
+	if (!opts.className) {
+		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) != "*"))
+	) {
+		throw Error("Invalid value for \"path\" argument")
+	}
+
+	// If path is not a regular expression already, make it
+	const {pattern} = typeof opts.path == "string" ?
+		parse(opts.path) :
+		{pattern: opts.path}
+
+	// Add the node to the list
+	const el = {
+		node,
+		className:         opts.className,
+		inactiveClassName: opts.inactiveClassName,
+		pattern
+	}
+	nodes.push(el)
+
+	// Trigger the action right away
+	checkActive(el)
+
+	return {
+		// When the element is destroyed, remove it from the list
+		destroy() {
+			nodes.splice(nodes.indexOf(el), 1)
+		}
+	}
+}

package/constants.js

@@ -0,0 +1 @@
+export const SvelteSPARouterNavigationEvent = "popstate"

package/helpers/url-helpers.js

@@ -0,0 +1,29 @@
+import {BasePath} from "../Router.svelte"
+import {get} from "svelte/store"
+
+/**
+ * @typedef {Object} Location
+ * @property {string} location - Location (page/view), for example `/book`
+ * @property {string} [querystring] - Querystring from the hash, as a string not parsed
+ */
+export function joinPaths(...paths) {
+	if (!paths || !paths.length) {
+		return get(BasePath)
+	}
+
+	return paths
+		.map(x => x.trim())
+		.filter(x => x)
+		.map((x, i, arr) => {
+			if (i === 0) {
+				return x.replace(/\/$/, "")
+			} else if (i < arr.length - 1) {
+				return x.replace(/(^\/|\/$)/, "")
+			} else {
+				return x.replace(/^\//, "")
+			}
+		})
+		.map((x) => x.trim())
+		.filter(x => x)
+		.join("/")
+}

package/nightwatch.conf.cjs

@@ -0,0 +1,52 @@
+// Selenium configuration
+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"
+
+// Increase max listeners to avoid a warning
+require("events").EventEmitter.defaultMaxListeners = 100
+
+module.exports = {
+	src_folders: [
+		"test/cases/"
+	],
+
+	output_folder: "result",
+
+	test_runner: {
+		type:    "mocha",
+		options: {
+			ui:       "bdd",
+			reporter: "list"
+		}
+	},
+
+	test_settings: {
+		default:           {
+			launch_url: launchUrl
+		},
+		"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

@@ -0,0 +1,70 @@
+{
+	"name": "@keenmate/svelte-spa-router",
+	"private": false,
+	"version": "1.0.1",
+	"description": "Router for SPAs using Svelte 4",
+	"main": "Router.svelte",
+	"svelte": "Router.svelte",
+	"types": "Router.d.ts",
+	"type": "module",
+	"exports": {
+		"./active": {
+			"types": "./active.d.ts",
+			"import": "./active.js"
+		},
+		"./wrap": {
+			"types": "./wrap.d.ts",
+			"import": "./wrap.js"
+		},
+		".": {
+			"types": "./Router.d.ts",
+			"svelte": "./Router.svelte"
+		},
+		"./*": {
+			"import": "./*"
+		}
+	},
+	"scripts": {
+		"build-test-app": "(cd test/app && npx rollup -c)",
+		"start-test-app": "npx serve -n -l 5050 test/app/dist",
+		"eslint": "npx eslint -c .eslintrc.cjs --ext .js,.svelte,.html .",
+		"lint": "npm run eslint",
+		"nightwatch": "npx nightwatch -e selenium.chrome -c nightwatch.conf.cjs",
+		"test": "npm run nightwatch"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/keenmate/svelte-spa-router.git"
+	},
+	"keywords": [
+		"router",
+		"svelte",
+		"svelte3",
+		"svelte4",
+		"spa"
+	],
+	"author": "Alessandro Segala (@ItalyPaleAle)",
+	"license": "MIT",
+	"funding": "https://github.com/sponsors/ItalyPaleAle",
+	"bugs": {
+		"url": "https://github.com/ItalyPaleAle/svelte-spa-router/issues"
+	},
+	"homepage": "https://github.com/ItalyPaleAle/svelte-spa-router#readme",
+	"dependencies": {
+		"regexparam": "2.0.2"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"chromedriver": "^119.0.1",
+		"eslint": "^8.55.0",
+		"eslint-plugin-html": "^7.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"nightwatch": "^2.6.23",
+		"rollup": "^4.7.0",
+		"rollup-plugin-css-only": "^4.5.2",
+		"rollup-plugin-svelte": "^7.1.6",
+		"serve": "^14.2.1",
+		"svelte": "^4.2.8"
+	}
+}

package/wrap.d.ts

@@ -0,0 +1,41 @@
+import {ComponentType} from "svelte"
+import {AsyncSvelteComponent, RoutePrecondition, WrappedComponent} from "./Router"
+
+/** Options object for the call to `wrap` */
+export interface WrapOptions {
+	/** Svelte component to load (this is incompatible with `asyncComponent`) */
+	component?: ComponentType
+
+	/** Function that returns a Promise that fulfills with a Svelte component (e.g. `{asyncComponent: () => import('Foo.svelte')}`)  */
+	asyncComponent?: AsyncSvelteComponent
+
+	/** Svelte component to be displayed while the async route is loading (as a placeholder); when unset or false-y, no component is shown while component */
+	loadingComponent?: ComponentType
+
+	/** Optional dictionary passed to the `loadingComponent` component as params (for an exported prop called `params`) */
+	loadingParams?: object
+
+	/** Optional object that will be passed to events such as `routeLoading`, `routeLoaded`, `conditionsFailed` */
+	userData?: object
+
+	/** Optional key-value dictionary of static props that will be passed to the component. The props are expanded with {...props}, so the key in the dictionary becomes the name of the prop. */
+	props?: object
+
+	/** Route pre-conditions to add, which will be executed in order */
+	conditions?: RoutePrecondition[] | RoutePrecondition
+}
+
+/**
+ * Wraps a component to enable multiple capabilities:
+ *
+ * 1. Using dynamically-imported component, with (e.g. `{asyncComponent: () => import('Foo.svelte')}`), which also allows bundlers to do code-splitting.
+ * 2. Adding route pre-conditions (e.g. `{conditions: [...]}`)
+ * 3. Adding static props that are passed to the component
+ * 4. Adding custom userData, which is passed to route events (e.g. route loaded events) or to route pre-conditions (e.g. `{userData: {foo: 'bar}}`)
+ *
+ * @param args Arguments object
+ * @returns Wrapped component
+ */
+export function wrap(args: WrapOptions): WrappedComponent
+
+export default wrap

package/wrap.js

@@ -0,0 +1,93 @@
+/**
+ * @typedef {Object} WrappedComponent Object returned by the `wrap` method
+ * @property {SvelteComponent} component - Component to load (this is always asynchronous)
+ * @property {RoutePrecondition[]} [conditions] - Route pre-conditions to validate
+ * @property {Object} [props] - Optional dictionary of static props
+ * @property {Object} [userData] - Optional user data dictionary
+ * @property {bool} _sveltesparouter - Internal flag; always set to true
+ */
+
+/**
+ * @callback AsyncSvelteComponent
+ * @returns {Promise<SvelteComponent>} Returns a Promise that resolves with a Svelte component
+ */
+
+/**
+ * @callback RoutePrecondition
+ * @param {RouteDetail} detail - Route detail object
+ * @returns {boolean|Promise<boolean>} If the callback returns a false-y value, it's interpreted as the precondition failed, so it aborts loading the component (and won't process other pre-condition callbacks)
+ */
+
+/**
+ * @typedef {Object} WrapOptions Options object for the call to `wrap`
+ * @property {SvelteComponent} [component] - Svelte component to load (this is incompatible with `asyncComponent`)
+ * @property {AsyncSvelteComponent} [asyncComponent] - Function that returns a Promise that fulfills with a Svelte component (e.g. `{asyncComponent: () => import('Foo.svelte')}`)
+ * @property {SvelteComponent} [loadingComponent] - Svelte component to be displayed while the async route is loading (as a placeholder); when unset or false-y, no component is shown while component
+ * @property {object} [loadingParams] - Optional dictionary passed to the `loadingComponent` component as params (for an exported prop called `params`)
+ * @property {object} [userData] - Optional object that will be passed to events such as `routeLoading`, `routeLoaded`, `conditionsFailed`
+ * @property {object} [props] - Optional key-value dictionary of static props that will be passed to the component. The props are expanded with {...props}, so the key in the dictionary becomes the name of the prop.
+ * @property {RoutePrecondition[]|RoutePrecondition} [conditions] - Route pre-conditions to add, which will be executed in order
+ */
+
+/**
+ * Wraps a component to enable multiple capabilities:
+ * 1. Using dynamically-imported component, with (e.g. `{asyncComponent: () => import('Foo.svelte')}`), which also allows bundlers to do code-splitting.
+ * 2. Adding route pre-conditions (e.g. `{conditions: [...]}`)
+ * 3. Adding static props that are passed to the component
+ * 4. Adding custom userData, which is passed to route events (e.g. route loaded events) or to route pre-conditions (e.g. `{userData: {foo: 'bar}}`)
+ *
+ * @param {WrapOptions} args - Arguments object
+ * @returns {WrappedComponent} Wrapped component
+ */
+export function wrap(args) {
+	if (!args) {
+		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")
+	}
+
+	// If the component is not async, wrap it into a function returning a Promise
+	if (args.component) {
+		args.asyncComponent = () => Promise.resolve(args.component)
+	}
+
+	// Parameter asyncComponent and each item of conditions must be functions
+	if (typeof args.asyncComponent != "function") {
+		throw Error("Parameter asyncComponent must be a function")
+	}
+	if (args.conditions) {
+		// Ensure it's an array
+		if (!Array.isArray(args.conditions)) {
+			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 + "]")
+			}
+		}
+	}
+
+	// Check if we have a placeholder component
+	if (args.loadingComponent) {
+		args.asyncComponent.loading       = args.loadingComponent
+		args.asyncComponent.loadingParams = args.loadingParams || undefined
+	}
+
+	// Returns an object that contains all the functions to execute too
+	// The _sveltesparouter flag is to confirm the object was created by this router
+	const obj = {
+		component:        args.asyncComponent,
+		userData:         args.userData,
+		conditions:       (args.conditions && args.conditions.length) ? args.conditions : undefined,
+		props:            (args.props && Object.keys(args.props).length) ? args.props : {},
+		_sveltesparouter: true
+	}
+
+	return obj
+}
+
+export default wrap