natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Router transition

Browse Source
This commit is contained in:
natxocc
2026-04-06 19:05:13 +02:00
parent bf3069d439
commit 9666c3d034
7 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/sigpro.esm.js vendored
View File

@@ -365,7 +365,7 @@ var For = (source, renderFn, keyFn, tag = "div", props = { style: "display:conte
var Router = (routes) => { var Router = (routes) => {
const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = Tag("div", { class: "router-outlet" }); const outlet = Tag("div", { class: "router-transition" });
let currentView = null; let currentView = null;
Watch([currentPath], async () => { Watch([currentPath], async () => {
const path = currentPath(); const path = currentPath();

2
dist/sigpro.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/sigpro.js vendored
View File

@@ -408,7 +408,7 @@
var Router = (routes) => { var Router = (routes) => {
const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = Tag("div", { class: "router-outlet" }); const outlet = Tag("div", { class: "router-transition" });
let currentView = null; let currentView = null;
Watch([currentPath], async () => { Watch([currentPath], async () => {
const path = currentPath(); const path = currentPath();

2
dist/sigpro.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
docs/api/router.md
View File

@@ -19,7 +19,7 @@ Router(routes: Route[]): HTMLElement
## Usage Patterns ## Usage Patterns
### 1. Defining Routes ### 1. Defining Routes
The `Router` returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container. The `Router` returns a `div` element with the class `.router-transition`. When the hash changes, the router destroys the previous view and mounts the new one inside this container.
```javascript ```javascript
const App = () => Div({ class: "app-layout" }, [ const App = () => Div({ class: "app-layout" }, [
@@ -79,11 +79,11 @@ Watch(() => {
--- ---
## Styling the Outlet ## Styling the transition of Router
The router returns a standard `div` with the `.router-outlet` class. You can easily style it or add transitions: The router returns a standard `div` with the `.router-transition` class. You can easily style it or add transitions:
```css ```css
.router-outlet { .router-transition {
display: block; display: block;
min-height: 100vh; min-height: 100vh;
animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease;

2
docs/sigpro.js
View File

@@ -408,7 +408,7 @@
var Router = (routes) => { var Router = (routes) => {
const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = Tag("div", { class: "router-outlet" }); const outlet = Tag("div", { class: "router-transition" });
let currentView = null; let currentView = null;
Watch([currentPath], async () => { Watch([currentPath], async () => {
const path = currentPath(); const path = currentPath();

2
sigpro.js
View File

@@ -370,7 +370,7 @@ const For = (source, renderFn, keyFn, tag = "div", props = { style: "display:con
const Router = (routes) => { const Router = (routes) => {
const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = Tag("div", { class: "router-outlet" }); const outlet = Tag("div", { class: "router-transition" });
let currentView = null; let currentView = null;
Watch([currentPath], async () => { Watch([currentPath], async () => {