sv-router 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -37,23 +37,23 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
-    "@eslint/js": "^9.21.0",
-    "@types/node": "^22.13.8",
-    "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.2",
+    "@eslint/js": "^9.23.0",
+    "@types/node": "^22.13.14",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^3.0.2",
-    "eslint-plugin-unicorn": "^57.0.0",
+    "eslint-plugin-svelte": "^3.3.3",
+    "eslint-plugin-unicorn": "^58.0.0",
     "globals": "^16.0.0",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-jsdoc": "^1.3.2",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte-check": "^4.1.4",
+    "svelte-check": "^4.1.5",
     "type-testing": "^0.2.0",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.25.0",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "typescript-eslint": "^8.28.0",
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9"
   },
   "peerDependencies": {
     "svelte": "^5"
@@ -64,7 +64,7 @@
     "docs:preview": "pnpm --filter docs preview",
     "test": "vitest",
     "check": "svelte-check && pnpm -r check",
-    "lint": "eslint .",
+    "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",

package/src/Router.svelte

@@ -1,8 +1,21 @@
 <script>
 	import { on } from 'svelte/events';
-	import { componentTree, onGlobalClick, onNavigate } from './create-router.svelte.js';
+	import { base, componentTree, onGlobalClick, onNavigate } from './create-router.svelte.js';
+	import { join } from './helpers/utils.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
 
+	/** @type {{ base?: string }} */
+	let { base: basename } = $props();
+
+	if (basename) {
+		base.name = (basename.startsWith('/') ? '' : '/') + basename;
+		const url = new URL(globalThis.location.href);
+		if (!url.pathname.startsWith(base.name)) {
+			url.pathname = join(base.name, url.pathname);
+			history.replaceState(history.state || {}, '', url.href);
+		}
+	}
+
 	onNavigate();
 
 	$effect(() => {

package/src/create-router.svelte.js

@@ -2,11 +2,11 @@ import { BROWSER, DEV } from 'esm-env';
 import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preloadOnHover } from './helpers/preload-on-hover.js';
-import { constructPath, resolveRouteComponents } from './helpers/utils.js';
+import { constructPath, join, resolveRouteComponents } from './helpers/utils.js';
 import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
-export let routes;
+let routes;
 
 /** @type {{ value: import('svelte').Component[] }} */
 export let componentTree = $state({ value: [] });
@@ -16,6 +16,11 @@ export let params = $state({ value: {} });
 
 export let location = $state(updatedLocation());
 
+/** @type {{ name?: string }} */
+export const base = {
+	name: undefined,
+};
+
 /**
  * @template {import('./index.d.ts').Routes} T
  * @param {T} r
@@ -85,12 +90,11 @@ export async function onNavigate(path, options = {}) {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
-	const {
-		match,
-		layouts,
-		hooks,
-		params: newParams,
-	} = matchRoute(path || globalThis.location.pathname, routes);
+	let matchPath = path || globalThis.location.pathname;
+	if (base.name && matchPath.startsWith(base.name)) {
+		matchPath = matchPath.slice(base.name.length) || '/';
+	}
+	const { match, layouts, hooks, params: newParams } = matchRoute(matchPath, routes);
 
 	for (const { beforeLoad } of hooks) {
 		try {
@@ -107,7 +111,8 @@ export async function onNavigate(path, options = {}) {
 		if (options.search) path += options.search;
 		if (options.hash) path += options.hash;
 		const historyMethod = options.replace ? 'replaceState' : 'pushState';
-		globalThis.history[historyMethod](options.state || {}, '', path);
+		const to = base.name ? join(base.name, path) : path;
+		globalThis.history[historyMethod](options.state || {}, '', to);
 	}
 
 	syncSearchParams();
@@ -148,7 +153,7 @@ function updatedLocation() {
 	return {
 		pathname: globalThis.location.pathname,
 		search: globalThis.location.search,
-		state: globalThis.history.state,
+		state: history.state,
 		hash: globalThis.location.hash,
 	};
 }

package/src/helpers/utils.js

@@ -44,3 +44,18 @@ export function resolveRouteComponent(input) {
 export function isLazyImport(input) {
 	return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/.test(String(input));
 }
+
+/** @param {...string} parts */
+export function join(...parts) {
+	let result = '';
+	for (let part of parts) {
+		if (!part.startsWith('/')) {
+			result += '/';
+		}
+		if (part.endsWith('/')) {
+			part = part.slice(0, -1);
+		}
+		result += part;
+	}
+	return result;
+}

package/src/index.d.ts

@@ -23,8 +23,11 @@ export const isActiveLink: IsActiveLink;
  * ```
  */
 export function createRouter<T extends Routes>(r: T): RouterApi<T>;
-/** The component that will render the current route. */
-export const Router: Component;
+/**
+ * The component that will render the current route. You can pass a `base` prop to set the base path
+ * that is prepended to every url.
+ */
+export const Router: Component<{ base?: string }>;
 /**
  * The reactive search params of the URL. It is just a wrapper around `SvelteURLSearchParam` that
  * will update the url on change.