sv-router 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.1.0",
+  "version": "0.3.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/cli/index.js

@@ -18,10 +18,13 @@ function arg(option) {
 	return args[pathArgIndex];
 }
 
-const pathArg = arg('path');
-if (pathArg) genConfig.routesPath = pathArg;
+const allLazyArg = arg('allLazy');
+if (allLazyArg) genConfig.allLazy = true;
 
 const jsArg = arg('js');
 if (jsArg) genConfig.routesInJs = true;
 
+const pathArg = arg('path');
+if (pathArg) genConfig.routesPath = pathArg;
+
 writeRouterCode();

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
@@ -41,7 +46,7 @@ export function createRouter(r) {
 				return params.value;
 			},
 			get pathname() {
-				return location.pathname;
+				return /** @type {import('./index.d.ts').Path<T>} */ (location.pathname);
 			},
 			get search() {
 				return location.search;
@@ -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/gen/config.js

@@ -1,7 +1,8 @@
 /**
  * @type {{
- * 	routesPath: string;
+ * 	allLazy: boolean;
  * 	routesInJs: boolean;
+ * 	routesPath: string;
  * 	readonly genCodeDirPath: string;
  * 	readonly routerPath: string;
  * 	readonly tsconfigPath: string;
@@ -9,8 +10,9 @@
  * }}
  */
 export const genConfig = {
-	routesPath: 'src/routes',
+	allLazy: false,
 	routesInJs: false,
+	routesPath: 'src/routes',
 	genCodeDirPath: '.router',
 	get routerPath() {
 		return '.router/router.' + (this.routesInJs ? 'js' : 'ts');

package/src/gen/generate-router-code.js

@@ -17,16 +17,17 @@ const HOOKS_FILENAME_REGEX = /(?<=[/.]|^)(hooks)(\.svelte)?\.(js|ts)$/; // hooks
 
 /**
  * @param {string} routesPath
+ * @param {{ allLazy?: boolean }} [options]
  * @returns {string}
  */
-export function generateRouterCode(routesPath) {
+export function generateRouterCode(routesPath, options) {
 	const absoluteRoutesPath = path.join(process.cwd(), routesPath);
 	if (!fs.existsSync(absoluteRoutesPath)) {
 		throw new Error(`Routes directory not found at \`${routesPath}\``);
 	}
 	const fileTree = buildFileTree(absoluteRoutesPath);
 	const routeMap = createRouteMap(fileTree);
-	return createRouterCode(routeMap, path.posix.join('..', routesPath));
+	return createRouterCode(routeMap, path.posix.join('..', routesPath), options);
 }
 
 /**
@@ -119,9 +120,10 @@ function filePathToRoute(filename) {
 /**
  * @param {GeneratedRoutes} routes
  * @param {string} routesPath
+ * @param {{ allLazy?: boolean }} [options]
  * @returns {string}
  */
-export function createRouterCode(routes, routesPath) {
+export function createRouterCode(routes, routesPath, { allLazy = false } = {}) {
 	if (!routesPath.endsWith('/')) {
 		routesPath += '/';
 	}
@@ -135,7 +137,7 @@ export function createRouterCode(routes, routesPath) {
 		for (const [key, value] of Object.entries(routes)) {
 			if (typeof value === 'object') {
 				result[key] = handleImports(value, routesPath);
-			} else if (key === 'hooks' || !value.endsWith('.lazy.svelte')) {
+			} else if (key === 'hooks' || (!value.endsWith('.lazy.svelte') && !allLazy)) {
 				const variableName = pathToCorrectCasing(value);
 				importsMap.set(variableName, routesPath + value);
 				result[key] = variableName;

package/src/gen/write-router-code.js

@@ -32,7 +32,7 @@ export function writeRouterCode() {
 		writeFileIfDifferent(genConfig.tsconfigPath, JSON.stringify(tsConfig, undefined, 2));
 
 		// Write `.router/router.ts` file
-		const routerCode = generateRouterCode(genConfig.routesPath);
+		const routerCode = generateRouterCode(genConfig.routesPath, { allLazy: genConfig.allLazy });
 		const written = writeFileIfDifferent(genConfig.routerPath, routerCode);
 
 		if (written) {

package/src/helpers/match-route.js

@@ -61,6 +61,8 @@ export function matchRoute(pathname, routes) {
 				}
 				if (breakFromLayouts) {
 					routePart = `(${routePart})`;
+				} else if ('layout' in routes && routes.layout) {
+					layouts.push(routes.layout);
 				}
 				const resolvedPath = /** @type {keyof Routes} */ (
 					(index ? '/' : '') + routeParts.join('/')

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.
@@ -131,7 +134,7 @@ export type RouterApi<T extends Routes> = {
 		 */
 		params: AllParams<T>;
 		/** The reactive pathname of the URL. */
-		pathname: string;
+		pathname: Path<T>;
 		/** The reactive query string part of the URL. */
 		search: string;
 		/** The reactive history state that can be passed to the `navigate` function. */

package/src/vite-plugin/index.d.ts

@@ -2,17 +2,23 @@ import type { Plugin } from 'vite';
 
 export type RouterOptions = {
 	/**
-	 * The path to the routes folder.
+	 * If true, all routes will be lazy loaded by default.
 	 *
-	 * @default 'src/routes'
+	 * @default false
 	 */
-	path?: string;
+	allLazy?: boolean;
 	/**
 	 * If true, generates the routes in a .js file instead of a .ts file.
 	 *
 	 * @default false
 	 */
 	js?: boolean;
+	/**
+	 * The path to the routes folder.
+	 *
+	 * @default 'src/routes'
+	 */
+	path?: string;
 };
 
 export const router: (options?: RouterOptions) => Plugin;

package/src/vite-plugin/plugin.js

@@ -7,8 +7,9 @@ import { writeRouterCode } from '../gen/write-router-code.js';
  * @returns {import('vite').Plugin}
  */
 export function router(options) {
-	if (options?.path) genConfig.routesPath = options.path;
+	if (options?.allLazy) genConfig.allLazy = options.allLazy;
 	if (options?.js) genConfig.routesInJs = options.js;
+	if (options?.path) genConfig.routesPath = options.path;
 
 	return {
 		name: 'sv-router',