From 5310ca85d8229ce21f4e934dd1769f2e8fe4c1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Wed, 26 Nov 2025 14:21:06 -0600 Subject: [PATCH] chore: Rename demo folder to playground. This is to free up the "demo" name for a clean demo. --- demo/README.md | 45 ---------------- {demo => playground}/.gitignore | 0 {demo => playground}/.vscode/extensions.json | 0 playground/README.md | 51 +++++++++++++++++++ {demo => playground}/index.html | 0 {demo => playground}/package-lock.json | 26 ++++++---- {demo => playground}/package.json | 2 +- {demo => playground}/public/vite.svg | 0 {demo => playground}/src/App.svelte | 36 +++++++++---- {demo => playground}/src/app.scss | 0 {demo => playground}/src/assets/logo.svg | 0 {demo => playground}/src/assets/svelte.svg | 0 {demo => playground}/src/assets/test.svg | 0 {demo => playground}/src/lib/Alert.svelte | 0 {demo => playground}/src/lib/Badge.svelte | 0 .../src/lib/Breadcrumb.svelte | 0 .../src/lib/BreadcrumbItem.svelte | 0 {demo => playground}/src/lib/Card.svelte | 0 {demo => playground}/src/lib/CardBody.svelte | 0 .../src/lib/CardHeader.svelte | 0 .../src/lib/CodeSnippet.svelte | 0 {demo => playground}/src/lib/DemoBc.svelte | 0 .../src/lib/FeatureItem.svelte | 0 .../src/lib/FeatureList.svelte | 0 .../src/lib/HashRoutes.svelte | 0 {demo => playground}/src/lib/ListGroup.svelte | 0 .../src/lib/ListGroupItem.svelte | 0 {demo => playground}/src/lib/NavBar.svelte | 13 +++-- {demo => playground}/src/lib/NotFound.svelte | 0 {demo => playground}/src/lib/SubNav.svelte | 0 .../src/lib/ThemeSwitch.svelte | 0 {demo => playground}/src/lib/Tooltip.svelte | 0 .../src/lib/demo/ApiFeaturesView.svelte | 0 .../src/lib/demo/DemoView.svelte | 0 .../src/lib/demo/LinkFeaturesView.svelte | 0 .../src/lib/demo/LocationFeaturesView.svelte | 0 .../src/lib/demo/NavBar.svelte | 0 .../src/lib/demo/RouteFeaturesView.svelte | 0 .../lib/demo/RouterEngineFeaturesView.svelte | 0 .../src/lib/demo/RouterFeaturesView.svelte | 0 {demo => playground}/src/lib/hash-routing.ts | 0 .../src/lib/state/theme.svelte.ts | 0 .../src/lib/state/title.svelte.ts | 0 {demo => playground}/src/lib/types.ts | 0 .../src/lib/views/ViewSkeleton.svelte | 0 .../views/hash-routing/HashRoutingDemo.svelte | 0 .../views/hash-routing/HashRoutingView.svelte | 0 .../lib/views/hash-routing/InCodeView.svelte | 0 .../views/hash-routing/ShowCodeButton.svelte | 0 .../code-samples/basic-hash-router.svelte | 0 .../code-samples/basic-hash-router.txt | 0 .../code-samples/hash-url-examples.ts | 0 .../code-samples/links-and-navigation.svelte | 0 .../code-samples/live-hash-display.svelte | 0 .../code-samples/multi-hash-router.svelte | 0 .../code-samples/multi-hash-router.txt | 0 .../code-samples/path-and-hash.txt | 0 .../src/lib/views/home/FeaturesTable.svelte | 0 .../src/lib/views/home/Hero.svelte | 0 .../src/lib/views/home/HomeView.svelte | 0 .../src/lib/views/home/Quickstart.svelte | 0 .../code-samples/hash-routing-example.txt | 0 .../home/code-samples/multi-hash-example.txt | 0 .../code-samples/path-routing-example.txt | 4 +- .../views/path-routing/PathRoutingView.svelte | 0 .../code-samples/basic-path-router.txt | 0 .../code-samples/link-component.txt | 0 .../code-samples/nested-routing.txt | 0 .../code-samples/route-guards.txt | 0 .../code-samples/route-parameters.txt | 14 ++--- .../path-routing/code-samples/url-examples.ts | 0 .../views/path-routing/views/HomeView.svelte | 0 .../views/redirected/RedirectedView.svelte | 6 ++- {demo => playground}/src/main.ts | 0 {demo => playground}/src/vite-env.d.ts | 0 {demo => playground}/svelte.config.js | 0 {demo => playground}/tsconfig.app.json | 0 {demo => playground}/tsconfig.json | 0 {demo => playground}/tsconfig.node.json | 0 {demo => playground}/vite.config.ts | 0 80 files changed, 120 insertions(+), 77 deletions(-) delete mode 100644 demo/README.md rename {demo => playground}/.gitignore (100%) rename {demo => playground}/.vscode/extensions.json (100%) create mode 100644 playground/README.md rename {demo => playground}/index.html (100%) rename {demo => playground}/package-lock.json (98%) rename {demo => playground}/package.json (94%) rename {demo => playground}/public/vite.svg (100%) rename {demo => playground}/src/App.svelte (75%) rename {demo => playground}/src/app.scss (100%) rename {demo => playground}/src/assets/logo.svg (100%) rename {demo => playground}/src/assets/svelte.svg (100%) rename {demo => playground}/src/assets/test.svg (100%) rename {demo => playground}/src/lib/Alert.svelte (100%) rename {demo => playground}/src/lib/Badge.svelte (100%) rename {demo => playground}/src/lib/Breadcrumb.svelte (100%) rename {demo => playground}/src/lib/BreadcrumbItem.svelte (100%) rename {demo => playground}/src/lib/Card.svelte (100%) rename {demo => playground}/src/lib/CardBody.svelte (100%) rename {demo => playground}/src/lib/CardHeader.svelte (100%) rename {demo => playground}/src/lib/CodeSnippet.svelte (100%) rename {demo => playground}/src/lib/DemoBc.svelte (100%) rename {demo => playground}/src/lib/FeatureItem.svelte (100%) rename {demo => playground}/src/lib/FeatureList.svelte (100%) rename {demo => playground}/src/lib/HashRoutes.svelte (100%) rename {demo => playground}/src/lib/ListGroup.svelte (100%) rename {demo => playground}/src/lib/ListGroupItem.svelte (100%) rename {demo => playground}/src/lib/NavBar.svelte (90%) rename {demo => playground}/src/lib/NotFound.svelte (100%) rename {demo => playground}/src/lib/SubNav.svelte (100%) rename {demo => playground}/src/lib/ThemeSwitch.svelte (100%) rename {demo => playground}/src/lib/Tooltip.svelte (100%) rename {demo => playground}/src/lib/demo/ApiFeaturesView.svelte (100%) rename {demo => playground}/src/lib/demo/DemoView.svelte (100%) rename {demo => playground}/src/lib/demo/LinkFeaturesView.svelte (100%) rename {demo => playground}/src/lib/demo/LocationFeaturesView.svelte (100%) rename {demo => playground}/src/lib/demo/NavBar.svelte (100%) rename {demo => playground}/src/lib/demo/RouteFeaturesView.svelte (100%) rename {demo => playground}/src/lib/demo/RouterEngineFeaturesView.svelte (100%) rename {demo => playground}/src/lib/demo/RouterFeaturesView.svelte (100%) rename {demo => playground}/src/lib/hash-routing.ts (100%) rename {demo => playground}/src/lib/state/theme.svelte.ts (100%) rename {demo => playground}/src/lib/state/title.svelte.ts (100%) rename {demo => playground}/src/lib/types.ts (100%) rename {demo => playground}/src/lib/views/ViewSkeleton.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/HashRoutingDemo.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/HashRoutingView.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/InCodeView.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/ShowCodeButton.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/basic-hash-router.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/basic-hash-router.txt (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/hash-url-examples.ts (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/links-and-navigation.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/live-hash-display.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/multi-hash-router.svelte (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/multi-hash-router.txt (100%) rename {demo => playground}/src/lib/views/hash-routing/code-samples/path-and-hash.txt (100%) rename {demo => playground}/src/lib/views/home/FeaturesTable.svelte (100%) rename {demo => playground}/src/lib/views/home/Hero.svelte (100%) rename {demo => playground}/src/lib/views/home/HomeView.svelte (100%) rename {demo => playground}/src/lib/views/home/Quickstart.svelte (100%) rename {demo => playground}/src/lib/views/home/code-samples/hash-routing-example.txt (100%) rename {demo => playground}/src/lib/views/home/code-samples/multi-hash-example.txt (100%) rename {demo => playground}/src/lib/views/home/code-samples/path-routing-example.txt (67%) rename {demo => playground}/src/lib/views/path-routing/PathRoutingView.svelte (100%) rename {demo => playground}/src/lib/views/path-routing/code-samples/basic-path-router.txt (100%) rename {demo => playground}/src/lib/views/path-routing/code-samples/link-component.txt (100%) rename {demo => playground}/src/lib/views/path-routing/code-samples/nested-routing.txt (100%) rename {demo => playground}/src/lib/views/path-routing/code-samples/route-guards.txt (100%) rename {demo => playground}/src/lib/views/path-routing/code-samples/route-parameters.txt (59%) rename {demo => playground}/src/lib/views/path-routing/code-samples/url-examples.ts (100%) rename {demo => playground}/src/lib/views/path-routing/views/HomeView.svelte (100%) rename {demo => playground}/src/lib/views/redirected/RedirectedView.svelte (79%) rename {demo => playground}/src/main.ts (100%) rename {demo => playground}/src/vite-env.d.ts (100%) rename {demo => playground}/svelte.config.js (100%) rename {demo => playground}/tsconfig.app.json (100%) rename {demo => playground}/tsconfig.json (100%) rename {demo => playground}/tsconfig.node.json (100%) rename {demo => playground}/vite.config.ts (100%) diff --git a/demo/README.md b/demo/README.md deleted file mode 100644 index e071773..0000000 --- a/demo/README.md +++ /dev/null @@ -1,45 +0,0 @@ -# @svelte-router/core Demo - -This folder contains the demo and tester 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 development of the library. - -For the second option, move your terminal's current directory to the repository's root folder, then: - -```bash -npm run prepack && npm link -``` - -Now move to the `/demo` 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 demo project. It does require you to run `npm run prepack` after the changes are 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 demo project in this case), will require re-linking if you perform any action on the installed packages, such as `npm up`, `npm i`, `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 in 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 demo page because global state that is set during the call to `init()` is lost. diff --git a/demo/.gitignore b/playground/.gitignore similarity index 100% rename from demo/.gitignore rename to playground/.gitignore diff --git a/demo/.vscode/extensions.json b/playground/.vscode/extensions.json similarity index 100% rename from demo/.vscode/extensions.json rename to playground/.vscode/extensions.json diff --git a/playground/README.md b/playground/README.md new file mode 100644 index 0000000..c1a2479 --- /dev/null +++ b/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. diff --git a/demo/index.html b/playground/index.html similarity index 100% rename from demo/index.html rename to playground/index.html diff --git a/demo/package-lock.json b/playground/package-lock.json similarity index 98% rename from demo/package-lock.json rename to playground/package-lock.json index c67da82..874e2b1 100644 --- a/demo/package-lock.json +++ b/playground/package-lock.json @@ -1,11 +1,11 @@ { - "name": "svelte-router-demo", + "name": "svelte-router-playground", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "svelte-router-demo", + "name": "svelte-router-playground", "version": "0.1.0", "dependencies": { "@floating-ui/dom": "^1.7.4", @@ -1382,6 +1382,13 @@ "node": ">=0.10" } }, + "node_modules/devalue": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.5.0.tgz", + "integrity": "sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==", + "dev": true, + "license": "MIT" + }, "node_modules/esbuild": { "version": "0.25.12", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", @@ -1432,9 +1439,9 @@ "license": "MIT" }, "node_modules/esrap": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.3.tgz", - "integrity": "sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.0.tgz", + "integrity": "sha512-WBmtxe7R9C5mvL4n2le8nMUe4mD5V9oiK2vJpQ9I3y20ENPUomPcphBXE8D1x/Bm84oN1V+lOfgXxtqmxTp3Xg==", "dev": true, "license": "MIT", "dependencies": { @@ -1759,9 +1766,9 @@ } }, "node_modules/svelte": { - "version": "5.43.14", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.14.tgz", - "integrity": "sha512-pHeUrp1A5S6RGaXhJB7PtYjL1VVjbVrJ2EfuAoPu9/1LeoMaJa/pcdCsCSb0gS4eUHAHnhCbUDxORZyvGK6kOQ==", + "version": "5.45.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.45.1.tgz", + "integrity": "sha512-arf+zybnG7sfOnQ0Xj+sld8+RDBnE9Uw2ofD4cNbIwlVSLbxfZrkdA9Gd6NfWdC101moFP58/l3ZG9dSNfrrEQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1773,8 +1780,9 @@ "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", + "devalue": "^5.5.0", "esm-env": "^1.2.1", - "esrap": "^2.1.0", + "esrap": "^2.2.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", diff --git a/demo/package.json b/playground/package.json similarity index 94% rename from demo/package.json rename to playground/package.json index 2e79597..90d9621 100644 --- a/demo/package.json +++ b/playground/package.json @@ -1,5 +1,5 @@ { - "name": "svelte-router-demo", + "name": "svelte-router-playground", "private": true, "version": "0.1.0", "type": "module", diff --git a/demo/public/vite.svg b/playground/public/vite.svg similarity index 100% rename from demo/public/vite.svg rename to playground/public/vite.svg diff --git a/demo/src/App.svelte b/playground/src/App.svelte similarity index 75% rename from demo/src/App.svelte rename to playground/src/App.svelte index 60b9f3e..ececd53 100644 --- a/demo/src/App.svelte +++ b/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 @@
- {#snippet children(_, rs)} + {#snippet children({ rs })}
{#snippet reference(ref)} @@ -69,10 +85,12 @@ - - - - + + + + + + nm && !location.path.startsWith('/feat')}>
diff --git a/demo/src/app.scss b/playground/src/app.scss similarity index 100% rename from demo/src/app.scss rename to playground/src/app.scss diff --git a/demo/src/assets/logo.svg b/playground/src/assets/logo.svg similarity index 100% rename from demo/src/assets/logo.svg rename to playground/src/assets/logo.svg diff --git a/demo/src/assets/svelte.svg b/playground/src/assets/svelte.svg similarity index 100% rename from demo/src/assets/svelte.svg rename to playground/src/assets/svelte.svg diff --git a/demo/src/assets/test.svg b/playground/src/assets/test.svg similarity index 100% rename from demo/src/assets/test.svg rename to playground/src/assets/test.svg diff --git a/demo/src/lib/Alert.svelte b/playground/src/lib/Alert.svelte similarity index 100% rename from demo/src/lib/Alert.svelte rename to playground/src/lib/Alert.svelte diff --git a/demo/src/lib/Badge.svelte b/playground/src/lib/Badge.svelte similarity index 100% rename from demo/src/lib/Badge.svelte rename to playground/src/lib/Badge.svelte diff --git a/demo/src/lib/Breadcrumb.svelte b/playground/src/lib/Breadcrumb.svelte similarity index 100% rename from demo/src/lib/Breadcrumb.svelte rename to playground/src/lib/Breadcrumb.svelte diff --git a/demo/src/lib/BreadcrumbItem.svelte b/playground/src/lib/BreadcrumbItem.svelte similarity index 100% rename from demo/src/lib/BreadcrumbItem.svelte rename to playground/src/lib/BreadcrumbItem.svelte diff --git a/demo/src/lib/Card.svelte b/playground/src/lib/Card.svelte similarity index 100% rename from demo/src/lib/Card.svelte rename to playground/src/lib/Card.svelte diff --git a/demo/src/lib/CardBody.svelte b/playground/src/lib/CardBody.svelte similarity index 100% rename from demo/src/lib/CardBody.svelte rename to playground/src/lib/CardBody.svelte diff --git a/demo/src/lib/CardHeader.svelte b/playground/src/lib/CardHeader.svelte similarity index 100% rename from demo/src/lib/CardHeader.svelte rename to playground/src/lib/CardHeader.svelte diff --git a/demo/src/lib/CodeSnippet.svelte b/playground/src/lib/CodeSnippet.svelte similarity index 100% rename from demo/src/lib/CodeSnippet.svelte rename to playground/src/lib/CodeSnippet.svelte diff --git a/demo/src/lib/DemoBc.svelte b/playground/src/lib/DemoBc.svelte similarity index 100% rename from demo/src/lib/DemoBc.svelte rename to playground/src/lib/DemoBc.svelte diff --git a/demo/src/lib/FeatureItem.svelte b/playground/src/lib/FeatureItem.svelte similarity index 100% rename from demo/src/lib/FeatureItem.svelte rename to playground/src/lib/FeatureItem.svelte diff --git a/demo/src/lib/FeatureList.svelte b/playground/src/lib/FeatureList.svelte similarity index 100% rename from demo/src/lib/FeatureList.svelte rename to playground/src/lib/FeatureList.svelte diff --git a/demo/src/lib/HashRoutes.svelte b/playground/src/lib/HashRoutes.svelte similarity index 100% rename from demo/src/lib/HashRoutes.svelte rename to playground/src/lib/HashRoutes.svelte diff --git a/demo/src/lib/ListGroup.svelte b/playground/src/lib/ListGroup.svelte similarity index 100% rename from demo/src/lib/ListGroup.svelte rename to playground/src/lib/ListGroup.svelte diff --git a/demo/src/lib/ListGroupItem.svelte b/playground/src/lib/ListGroupItem.svelte similarity index 100% rename from demo/src/lib/ListGroupItem.svelte rename to playground/src/lib/ListGroupItem.svelte diff --git a/demo/src/lib/NavBar.svelte b/playground/src/lib/NavBar.svelte similarity index 90% rename from demo/src/lib/NavBar.svelte rename to playground/src/lib/NavBar.svelte index 7bd22a1..e940ce1 100644 --- a/demo/src/lib/NavBar.svelte +++ b/playground/src/lib/NavBar.svelte @@ -25,6 +25,7 @@ activeState: { class: 'active', aria: { current: 'page' } } }, ]; + const redirectedHash = routingMode === 'multi' ? 'redir' : true;