-

.svelte-kit/__package__/Elegua.js

@@ -105,7 +105,7 @@ const regExpEscape = (s) => s.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
 // @param {string} route - a route to be compiled into regexp, ex: '/blog/:id'.
 export function namedPath(route) {
     // checking for named component paths
-    return RegExp(route.split('/').map((x) => x.startsWith(':') ? `(?<${regExpEscape(x.slice(1, x.length))}>[a-zA-Z0-9][a-zA-Z0-9\_\-]*)` : regExpEscape(x)).join(`\\/`));
+    return RegExp(route.split('/').map((x) => x.startsWith(':') ? `(?<${regExpEscape(x.slice(1, x.length))}>[a-zA-Z0-9][a-zA-Z0-9\_\-]*)` : regExpEscape(x)).join(`\\/`) + '$');
 }
 export function dynamic(path, routes, defaultRoute) {
     for (let i = 0; i < routes.length; i++) {

README.md

@@ -40,18 +40,19 @@ pnpm run dev
 - Dependency free (except for Svelte, of course)
 - Easy api, feels very natural and intuitive.
 - Minimalist: it's all in a single file (**2.2KB** gzipped/**6.7KB** unpacked)
-  - It's tree-shakable, could end up smaller than that
+  - It's tree-shakable, could end up smaller than that depending on what you use.
 - Fully reactive: changes to api reflect the browser's url, and vice versa.
 - No `<Route>`, `<Link>` or any other components. Uses regular `{#if}/{:else}` blocks from Svelte to control routing/rendering. It's all stores/functions.
 - History API only (who uses hash paths nowawdays?)
 - [Dynamic routing](#dynamic)
 - Regular \<a\> links supported out of the box. No need for \<Link\> additional components.
 - Can [prevent route changes](#preventchange) on conditions (e.g. prevent exit from changed form)
 - Route types supported:
-  - [Fixed path](#path) routes, i.e. `/`
+  - [Fixed path](#path) routes, i.e. `/` or `/blog`
   - [Variable routes](#resolve) (`/xxx/:group/:id`) (yes, they can be nested)
   - [Regexp routes](#regexp-routes): any rule you could imagine if it can be expressed by a RegExp expression (ex: `/id/[0-9]+\.json`)
   - Fallback/error routes
+- Elegua doesn't get into your way, giving full flexibility (I prize that one a lot).
 - Unique features such as [`preventUnload()`](#preventunload) and [`preventChange()`](#preventchange).
 - Really fast.
 

dist/Elegua.js

@@ -105,7 +105,7 @@ const regExpEscape = (s) => s.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
 // @param {string} route - a route to be compiled into regexp, ex: '/blog/:id'.
 export function namedPath(route) {
     // checking for named component paths
-    return RegExp(route.split('/').map((x) => x.startsWith(':') ? `(?<${regExpEscape(x.slice(1, x.length))}>[a-zA-Z0-9][a-zA-Z0-9\_\-]*)` : regExpEscape(x)).join(`\\/`));
+    return RegExp(route.split('/').map((x) => x.startsWith(':') ? `(?<${regExpEscape(x.slice(1, x.length))}>[a-zA-Z0-9][a-zA-Z0-9\_\-]*)` : regExpEscape(x)).join(`\\/`) + '$');
 }
 export function dynamic(path, routes, defaultRoute) {
     for (let i = 0; i < routes.length; i++) {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "elegua",
-	"version": "2.2.1",
+	"version": "2.2.2",
 	"private": false,
 	"homepage": "https://github.com/howesteve/elegua",
 	"bugs": {
@@ -10,7 +10,7 @@
 		"dev": "echo Starting demo application... && vite dev",
 		"build:page": "vite build --outDir build; echo \"/* /index.html 200\" > build/_redirects",
 		"build:component": "svelte-package -i src/lib -o dist",
-		"build": "pnpm run build:component;pnpm run build:component",
+		"build": "pnpm run build:component",
 		"clean:page": "rm -fr page",
 		"clean:dist": "rm -fr dist",
 		"clean": "pnpm run clean:dist;pnpm run clean:page",

src/Main.svelte

@@ -65,6 +65,9 @@
     <h1>Author {$match && $match[1]}</h1>
     <!-- Loads posts using named params -->
   {:else if resolve($path, '/blog/:post')}
+    <Post id={$params['post']} />
+    <!-- Loads posts using nested named params (both $params['post'] and $params['id']) will be set -->
+  {:else if resolve($path, '/blog/:post/:id')}
     <Post id={$params['post']} />
     <!-- Hash routing -->
   {:else if $path === '/hash'}

src/Post.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
   import { get } from 'svelte/store';
-  import { params } from './lib/Elegua';
+  import { params, match } from './lib/Elegua';
   import posts from './posts';
   export let id = '';
   const r = get(posts).filter((x) => x.slug === id);
   const post = r ? r[0] : undefined;
 </script>
 
 <div class="post">
-  <p>This was load using a named param:</p>
-  <code>{`{#if resolve($path, '/blog/:post')}`}</code>
-  <br><code>{`<Post id={$params['post']}`}</code>
   {#if post}
+    <p>This was loaded using a named param:</p>
+    <code>{`{#if resolve($path, '/blog/:post')}`}</code>
+    <br><code>{`  <Post id={$params['post']}`}</code>
+    <br><code>{`{/if}`}</code>
     <h2>{post.slug}</h2>
     <b>$params: {JSON.stringify($params)}</b>
+    <br><b>$match: {JSON.stringify($match)}</b>
     <p>{post.date.toLocaleString()}</p>
     <div>{post.contents}</div>
   {:else}

src/lib/Elegua.ts

@@ -115,7 +115,7 @@ export function namedPath(route: string): RegExp {
   return RegExp(
     route.split('/').map((x) =>
       x.startsWith(':') ? `(?<${regExpEscape(x.slice(1, x.length))}>[a-zA-Z0-9][a-zA-Z0-9\_\-]*)` : regExpEscape(x)
-    ).join(`\\/`)
+    ).join(`\\/`) + '$' 
   );
 }