chore: Rename demo folder to playground.

playground/README.md

@@ -0,0 +1,51 @@
+# @svelte-router/core Playground
+
+This folder contains the tester project the author uses while developing the library.  It is a **Vite + Svelte + TS** project created with `npm create vite@latest`.
+
+## How to Use
+
+Install dependencies:
+
+```bash
+npm ci
+```
+
+Then, you can do one of 2 options:
+
+1. Install the routing library:  `npm i @svelte-router/core`
+2. Build the package and link it with NPM.
+
+The first option simply pulls the latest version from `npmjs.org`.  Not good for library development as it doesn't allow testing whatever code changes were done.
+
+For the second option, move your terminal's current directory to the repository's root folder, then:
+
+```bash
+npm pack
+```
+
+Once packed:
+
+```bash
+npm link
+```
+
+Now move to the `/playground` folder and complete the link:
+
+```bash
+npm link @svelte-router/core
+```
+
+You are ready to run the development server:
+
+```bash
+npm run dev
+```
+
+Use the second option when developing/manipulating the library's code to see the effects in the playground project.  It does require you to run `npm pack` after every change made, though.  The link established by the `npm` CLI tool is based on the created `dist/` folder, not the `src/` folder.
+
+### Gotcha's
+
++ NPM can only handle **one** linked library.
++ A project using a linked library (the playground project in this case), will require re-linking if you perform any action on the installed packages, such as `npm up`, `npm i`, or `npm remove`.  Basically, any command that alters the contents of `node_modules/` will break the link.  Re-establish the link after meddling with `node_modules/`.
++ Potentially a bug in Vite:  HMR will work the first time you repackage, but will not work on subsequent repackage operations.  Use the `r` command on the running Vite dev server to restart it.
++ Depending on the change you make in the library, even with HMR you'll need to restart the Vite server or refresh the playground page because global state that is set during the call to `init()` might be lost.

demo/package.json → playground/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "svelte-router-demo",
+  "name": "svelte-router-playground",
   "private": true,
   "version": "0.1.0",
   "type": "module",

demo/src/App.svelte → playground/src/App.svelte

@@ -2,7 +2,16 @@
 	import './app.scss';
 	import NavBar from './lib/NavBar.svelte';
 	import Tooltip from './lib/Tooltip.svelte';
-	import { Router, Route, Fallback, RouterTrace, Redirector } from '@svelte-router/core';
+	import {
+		Router,
+		Route,
+		Fallback,
+		RouterTrace,
+		Redirector,
+		location,
+		buildHref
+	} from '@svelte-router/core';
+	import { calculateHref, calculateState } from '@svelte-router/core/kernel';
 	import NotFound from './lib/NotFound.svelte';
 	import HomeView from './lib/views/home/HomeView.svelte';
 	import PathRoutingView from './lib/views/path-routing/PathRoutingView.svelte';
@@ -11,16 +20,23 @@
 	import { initTitleContext } from './lib/state/title.svelte';
 	import HrInCodeView from './lib/views/hash-routing/InCodeView.svelte';
 	import RedirectedView from './lib/views/redirected/RedirectedView.svelte';
+	import { routingMode } from './lib/hash-routing';
 
 	initTitleContext();
 	let showNavTooltip = $state(false);
+	const redirectedHash = routingMode === 'multi' ? 'redir' : true;
 	const redirector = new Redirector();
 	redirector.redirections.push({
 		pattern: '/deprecated-path',
-		href: '/new-path',
+		href: () => {
+			const pathnamePiece = calculateHref({ hash: false }, '/feat');
+			const hashPiece = calculateHref({ hash: redirectedHash }, '/new-path');
+			return buildHref(pathnamePiece, hashPiece);
+		},
 		options: {
-			state: { redirected: true },
-		}
+			state: calculateState(redirectedHash, { redirected: true })
+		},
+		goTo: true
 	});
 
 	// Show tooltip after a short delay when app loads
@@ -44,7 +60,7 @@
 <div class="app">
 	<div class="d-flex flex-column h-100">
 		<Router id="root">
-			{#snippet children(_, rs)}
+			{#snippet children({ rs })}
 				<header>
 					<Tooltip shown={showNavTooltip} placement="bottom">
 						{#snippet reference(ref)}
@@ -69,10 +85,12 @@
 							<Route key="hr-in-code" path="/hash-routing/in-code">
 								<HrInCodeView />
 							</Route>
-							<Route key="redirected" path="/new-path">
-								<RedirectedView />
-							</Route>
-							<Fallback>
+							<Router hash={redirectedHash} id="redirector-router">
+								<Route hash={redirectedHash} key="redirected" path="/new-path">
+									<RedirectedView />
+								</Route>
+							</Router>
+							<Fallback when={(_, nm) => nm && !location.path.startsWith('/feat')}>
 								<NotFound />
 							</Fallback>
 						</div>

demo/src/lib/NavBar.svelte → playground/src/lib/NavBar.svelte

@@ -25,6 +25,7 @@
 			activeState: { class: 'active', aria: { current: 'page' } }
 		},
 	];
+	const redirectedHash = routingMode === 'multi' ? 'redir' : true;
 </script>
 
 <nav class="navbar navbar-expand-lg bg-primary-subtle" {...restProps}>
@@ -51,7 +52,7 @@
 						<Link class="nav-link" activeFor="home" href="/" id="homeLink">Home</Link>
 					</li>
 					<Route key="homeMenuPr">
-						{#snippet children(rp, _, rs)}
+						{#snippet children({ rs })}
 							{#if !rs.pathRouting?.match}
 								<li class="nav-item">
 									<Link class="nav-link" activeFor="pathRouting" href="/path-routing">
@@ -65,7 +66,7 @@
 						<SubNav title="Path Routing" links={pathRoutingLinks} />
 					</Route>
 					<Route key="homeMenuHr">
-						{#snippet children(rp, _, rs)}
+						{#snippet children({ rs })}
 							{#if !rs.hashRouting?.match}
 								<li class="nav-item">
 									<Link class="nav-link" activeFor="hashRouting" href="/hash-routing">
@@ -85,7 +86,13 @@
 						<Link class="nav-link" href="/deprecated-path">Deprecated Link</Link>
 					</li>
 					<li class="nav-item">
-						<Link class="nav-link" activeFor="redirected" href="/new-path">New Link</Link>
+						<Link
+							class="nav-link"
+							activeFor="redirected"
+							href="/feat{routingMode === 'multi' ? '#redir=/new-path' : '#/new-path'}"
+						>
+							New Link
+						</Link>
 					</li>
 					<li class="nav-item">
 						<Link class="nav-link disabled" href="/disabled" tabindex={-1} aria-disabled="true">

demo/src/lib/views/home/code-samples/path-routing-example.txt → playground/src/lib/views/home/code-samples/path-routing-example.txt

@@ -3,8 +3,8 @@
     <HomePage />
   </Route>
   <Route key="profile" path="/user/:id">
-    {#snippet children(params)}
-      <UserProfile userId={params.id} />
+    {#snippet children({ rp })}
+      <UserProfile userId={rp?.id} />
     {/snippet}
   </Route>
 </Router>

demo/src/lib/views/path-routing/code-samples/route-parameters.txt → playground/src/lib/views/path-routing/code-samples/route-parameters.txt

@@ -1,23 +1,23 @@
 <!-- Route with single parameter -->
 <Route key="user" path="/user/:id">
-  {#snippet children(params)}
-    <h1>User ID: {params.id}</h1>
+  {#snippet children({ rp })}
+    <h1>User ID: {rp?.id}</h1>
   {/snippet}
 </Route>
 
 <!-- Route with multiple parameters -->
 <Route key="post" path="/blog/:category/:slug">
-  {#snippet children(params)}
+  {#snippet children({ rp })}
     <BlogPost 
-      category={params.category} 
-      slug={params.slug} 
+      category={rp?.category} 
+      slug={rp?.slug} 
     />
   {/snippet}
 </Route>
 
 <!-- Route with rest parameter (catch-all) -->
 <Route key="files" path="/files/*">
-  {#snippet children(params)}
-    <FileExplorer path={params.rest} />
+  {#snippet children({ rp })}
+    <FileExplorer path={rp?.rest} />
   {/snippet}
 </Route>

demo/src/lib/views/redirected/RedirectedView.svelte → playground/src/lib/views/redirected/RedirectedView.svelte

@@ -2,12 +2,16 @@
 	import { location } from '@svelte-router/core';
 	import Alert from '../../Alert.svelte';
 	import { getTitleContext } from '../../state/title.svelte';
+	import { routingMode } from '../../hash-routing';
 
 	getTitleContext().current = 'New Feature (Redirector Demo)';
+	const redirectedHash = routingMode === 'multi' ? 'redir' : true;
+	const redirected = !!location.getState(redirectedHash)?.redirected;
+	location.navigate('', { hash: redirectedHash, state: undefined, replace: true });
 </script>
 
 <article class="container">
-	{#if location.getState(false)?.redirected}
+	{#if redirected}
 		<Alert background="warning">
 			You have been redirected here from a deprecated path. Please update your bookmarks!
 		</Alert>