sv-router 0.0.8 → 0.1.0

package/README.md

@@ -18,11 +18,14 @@ A feature-rich yet intuitive routing library for Svelte single-page apps.
 ## Features
 
 - 🔒 **Typesafe navigation**: Get autocomplete and type checking for your routes.
-- 🗂️ **File-based routing (optional)**: Enjoy the DX of a meta-framework-like approach.
+- 🔄 **Flexibility**: Choose between code-based or file-based routing approaches.
 - 🌿 **Nested routes**: Create complex layouts with ease.
+- 🔍 **Reactive search params**: For simpler state management in the URL.
+- 🛡️ **Hooks**: For navigation guards, data loading, or analytics tracking.
 - ⚡ **Performance**: Optimized for speed with built-in code splitting and preloading.
-- 🧩 **Familiar API**: Follows established conventions from popular meta frameworks
-- 🚀 **Made for Svelte 5**: Benefit from faster performance and smaller bundle size.
+- 🧩 **Familiar API**: Follows established conventions from popular meta frameworks.
+- 🪶 **Lightweight**: Minimal impact on your bundle size.
+- 🚀 **Made for Svelte 5**: True Svelte 5 implementation with the latest features.
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",

package/src/create-router.svelte.js

@@ -113,6 +113,10 @@ export async function onNavigate(path, options = {}) {
 	syncSearchParams();
 	Object.assign(location, updatedLocation());
 
+	if (options.scrollToTop !== false) {
+		window.scrollTo({ top: 0, left: 0, behavior: options.scrollToTop });
+	}
+
 	for (const { afterLoad } of hooks) {
 		afterLoad?.();
 	}
@@ -130,12 +134,13 @@ export function onGlobalClick(event) {
 	if (url.origin !== currentOrigin) return;
 
 	event.preventDefault();
-	const { replace, state } = anchor.dataset;
+	const { replace, state, scrollToTop } = anchor.dataset;
 	onNavigate(url.pathname, {
 		replace: replace === '' || replace === 'true',
 		search: url.search,
 		state,
 		hash: url.hash,
+		scrollToTop: scrollToTop === 'false' ? false : /** @type ScrollBehavior */ (scrollToTop),
 	});
 }
 

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

@@ -9,11 +9,11 @@ import path from 'node:path';
  * }} GeneratedRoutes
  */
 
-const FILENAME_REGEX = /\(?([\w-]+)\)?(\.lazy)?\.svelte$/; // any.svelte, any.lazy.svelte, (any).svelte
-const PARAM_FILENAME_REGEX = /\(?\[(.*)\]\)?(\.lazy)?\.svelte$/; // [any].svelte, [any].lazy.svelte, ([any]).svelte
-const CATCH_ALL_FILENAME_REGEX = /\(?\[\.\.\.(.*)\]\)?(\.lazy)?\.svelte$/; // [...any].svelte, [...any].lazy.svelte, ([...any]).svelte
-const OUT_OF_LAYOUT_FILENAME_REGEX = /\(\[\.?\.?\.?(.*)\]\)(\.lazy)?\.svelte$/; // ([any]).svelte, ([...any]).lazy.svelte
-const HOOKS_FILENAME_REGEX = /(hooks)(\.svelte)?\.(js|ts)$/; // hooks.js, hooks.svelte.js, hooks.ts, hooks.svelte.ts
+const FILENAME_REGEX = /(?<=[/.]|^)\(?([\w-]+)\)?(\.lazy)?\.svelte$/; // any.svelte, any.lazy.svelte, (any).svelte
+const PARAM_FILENAME_REGEX = /(?<=[/.]|^)\(?\[([\w-]+)\]\)?(\.lazy)?\.svelte$/; // [any].svelte, [any].lazy.svelte, ([any]).svelte
+const CATCH_ALL_FILENAME_REGEX = /(?<=[/.]|^)\(?\[\.\.\.([\w-]+)\]\)?(\.lazy)?\.svelte$/; // [...any].svelte, [...any].lazy.svelte, ([...any]).svelte
+const OUT_OF_LAYOUT_FILENAME_REGEX = /(?<=[/.]|^)\(\[\.?\.?\.?([\w-]+)\]\)(\.lazy)?\.svelte$/; // ([any]).svelte, ([...any]).lazy.svelte
+const HOOKS_FILENAME_REGEX = /(?<=[/.]|^)(hooks)(\.svelte)?\.(js|ts)$/; // hooks.js, hooks.svelte.js, hooks.ts, hooks.svelte.ts
 
 /**
  * @param {string} routesPath

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

@@ -9,10 +9,6 @@ export function writeRouterCode() {
 			fs.mkdirSync(genConfig.genCodeDirPath);
 		}
 
-		// Write `.router/router.ts` file
-		const routerCode = generateRouterCode(genConfig.routesPath);
-		writeFileIfDifferent(genConfig.routerPath, routerCode);
-
 		// Write `.router/tsconfig.json` file
 		const tsConfig = {
 			compilerOptions: {
@@ -35,7 +31,15 @@ export function writeRouterCode() {
 		};
 		writeFileIfDifferent(genConfig.tsconfigPath, JSON.stringify(tsConfig, undefined, 2));
 
-		console.log('✅️ Routes generated');
+		// Write `.router/router.ts` file
+		const routerCode = generateRouterCode(genConfig.routesPath);
+		const written = writeFileIfDifferent(genConfig.routerPath, routerCode);
+
+		if (written) {
+			console.log('✅️ Routes generated');
+		} else {
+			console.log('✅️ Routes already up to date');
+		}
 	} catch (error) {
 		console.error(
 			'Error during routes generation:',
@@ -51,5 +55,6 @@ export function writeRouterCode() {
 function writeFileIfDifferent(filePath, content) {
 	if (!fs.existsSync(filePath) || fs.readFileSync(filePath, 'utf8') !== content) {
 		fs.writeFileSync(filePath, content);
+		return true;
 	}
 }

package/src/index.d.ts

@@ -29,7 +29,7 @@ export const Router: Component;
  * The reactive search params of the URL. It is just a wrapper around `SvelteURLSearchParam` that
  * will update the url on change.
  */
-export const searchParams: URLSearchParams;
+export const searchParams: SearchParams;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type BaseProps = {};
@@ -162,9 +162,17 @@ export type NavigateOptions =
 			search?: string;
 			state?: string;
 			hash?: string;
+			scrollToTop?: ScrollBehavior | false;
 	  }
 	| undefined;
 
+export type SearchParams = URLSearchParams & {
+	append: (name: string, value: string, options?: { replace?: boolean }) => void;
+	delete: (name: string, value?: string, options?: { replace?: boolean }) => void;
+	set: (name: string, value: string, options?: { replace?: boolean }) => void;
+	sort: (options?: { replace?: boolean }) => void;
+};
+
 type NavigateArgs<T extends string> =
 	| (PathParams<T> extends never
 			? [T] | [T, NavigateOptions]

package/src/search-params.svelte.js

@@ -2,15 +2,15 @@ import { SvelteURLSearchParams } from 'svelte/reactivity';
 
 let searchParams = new SvelteURLSearchParams(globalThis.location.search);
 
-/** @type {URLSearchParams} */
+/** @type {import('./index.js').SearchParams} */
 const shell = {
-	append(...args) {
-		searchParams.append(...args);
-		updateUrlSearchParams();
+	append(name, value, options) {
+		searchParams.append(name, value);
+		updateUrlSearchParams(options);
 	},
-	delete(...args) {
-		searchParams.delete(...args);
-		updateUrlSearchParams();
+	delete(name, value, options) {
+		searchParams.delete(name, value);
+		updateUrlSearchParams(options);
 	},
 	entries() {
 		return searchParams.entries();
@@ -31,13 +31,13 @@ const shell = {
 	keys() {
 		return searchParams.keys();
 	},
-	set(...args) {
-		searchParams.set(...args);
-		updateUrlSearchParams();
+	set(name, value, options) {
+		searchParams.set(name, value);
+		updateUrlSearchParams(options);
 	},
-	sort() {
+	sort(options) {
 		searchParams.sort();
-		updateUrlSearchParams();
+		updateUrlSearchParams(options);
 	},
 	toString() {
 		return searchParams.toString();
@@ -60,19 +60,17 @@ export function syncSearchParams() {
 	if (searchParams.toString() === newSearchParams.toString()) {
 		return;
 	}
-
-	for (const key of searchParams.keys()) {
-		searchParams.delete(key);
-	}
+	searchParams = new SvelteURLSearchParams();
 	for (const [key, value] of newSearchParams.entries()) {
 		searchParams.append(key, value);
 	}
 }
 
-function updateUrlSearchParams() {
+/** @param {{ replace?: boolean }} [options] */
+function updateUrlSearchParams(options) {
 	let url = globalThis.location.origin + globalThis.location.pathname;
 	if (searchParams.size > 0) {
 		url += '?' + searchParams.toString();
 	}
-	globalThis.history.pushState({}, '', url);
+	globalThis.history[options?.replace ? 'replaceState' : 'pushState']({}, '', url);
 }