Merge pull request #12 from maxholman/master

refactor + support for view transitions

.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+node_modules
+dist
+build

__tests__/NavigationInsideEffect.tsx → __tests__/components/NavigationInsideEffect.tsx

@@ -1,6 +1,6 @@
 import { type FC, useEffect } from 'react';
-import { useNavigate } from '../src/index.js';
-import { LocationDisplay } from './index.test.js';
+import { useNavigate } from '../../src/index.js';
+import { LocationDisplay } from '../main.test.js';
 
 export const NavigationInsideEffect: FC = () => {
   const { navigate } = useNavigate();

__tests__/index.test.tsx → __tests__/main.test.tsx

@@ -4,10 +4,6 @@ import { expect, test } from 'vitest';
 import { Link, Route, Router, Routes, useLocation } from '../src/index.js';
 import { namedRoute } from '../src/named-route.js';
 
-if (!window) {
-  throw new Error('window is not defined');
-}
-
 export const LocationDisplay = () => {
   const [location] = useLocation();
 
@@ -20,7 +16,7 @@ test('basic', async () => {
   const userView = namedRoute('/user/:userId');
 
   const { asFragment } = render(
-    <Router pathname="/">
+    <Router pathname="/" useNavApi={false}>
       <LocationDisplay />
       <Routes>
         <Route path={userView.path}>

__tests__/navigate.test.tsx

@@ -3,8 +3,8 @@ import type { FC } from 'react';
 import { expect, test } from 'vitest';
 import { Route, Router, Routes, useNavigate } from '../src/index.js';
 import { namedRoute } from '../src/named-route.js';
-import { NavigationInsideEffect } from './NavigationInsideEffect.js';
-import { LocationDisplay } from './index.test.js';
+import { NavigationInsideEffect } from './components/NavigationInsideEffect.js';
+import { LocationDisplay } from './main.test.js';
 
 const usersView = namedRoute('/users/:userId');
 
@@ -35,7 +35,7 @@ const Buttons: FC = () => {
 
 test('nav with clicks', async () => {
   render(
-    <Router pathname="/users/test1">
+    <Router pathname="/users/test1" useNavApi={false}>
       <LocationDisplay />
       <Routes>
         <Route
@@ -76,7 +76,7 @@ test('nav with clicks', async () => {
 
 test('programmatic navigation with hooks', async () => {
   render(
-    <Router pathname="/">
+    <Router pathname="/" useNavApi={false}>
       <NavigationInsideEffect />
     </Router>,
   );

__tests__/nested.test.tsx

@@ -4,7 +4,7 @@ import type { FC } from 'react';
 import { expect, test } from 'vitest';
 import { namedRoute } from '../lib/named-route.js';
 import { Route, Router, Routes } from '../src/index.js';
-import { LocationDisplay } from './index.test.js';
+import { LocationDisplay } from './main.test.js';
 
 test('wildcard routes + nested', async () => {
   const userRoot = namedRoute('/users');
@@ -17,7 +17,7 @@ test('wildcard routes + nested', async () => {
   const ParamlessComponent: FC = () => <>I am a Paramless Component</>;
 
   const { asFragment } = render(
-    <Router pathname="/users/blah/test1">
+    <Router pathname="/users/blah/test1" useNavApi={false}>
       <LocationDisplay />
       <Routes>
         <Route wildcard path={userRoot.path}>

__tests__/route.test.tsx

@@ -8,7 +8,7 @@ import {
   Route,
   Router,
   Routes,
-  type PartialNavigateEventListener,
+  type SyntheticNavigateEvent,
 } from '../src/index.js';
 
 const login = namedRoute('/');
@@ -33,11 +33,11 @@ test('custom route', async () => {
 
 test('cancel nav', async () => {
   const Component: FC = () => {
-    const onNav = useCallback<PartialNavigateEventListener>(async (e) => {
+    const onNav = useCallback(async (e: SyntheticNavigateEvent) => {
       e.preventDefault();
     }, []);
     return (
-      <Router hook={onNav}>
+      <Router intercept={onNav} useNavApi={false}>
         <Routes>
           <Route path={login.path}>
             <h1>custom route</h1>
@@ -56,7 +56,7 @@ test('routes with components/children/paths/no paths', async () => {
   const HelloComponent = () => <h1>hello</h1>;
 
   const { asFragment } = render(
-    <Router>
+    <Router useNavApi={false}>
       <Routes>
         <Route path={login.path} component={HelloComponent} />
         <Route path={login.path}>
@@ -84,7 +84,7 @@ test('effects inside route components or children dont fire', async () => {
   };
 
   render(
-    <Router>
+    <Router useNavApi={false}>
       <Routes>
         <Route path="/random" component={HelloComponent} />
         <Route path="random2">

bundlesize.config.cjs

@@ -2,12 +2,12 @@ module.exports = {
   files: [
     {
       path: './build/*.js',
-      maxSize: '4 kB',
+      maxSize: '4.5 kB',
       compression: 'brotli',
     },
     {
       path: './build/main.js',
-      maxSize: '3 kB',
+      maxSize: '3.5 kB',
       compression: 'brotli',
     },
   ],

index.html

@@ -4,60 +4,49 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <meta name="color-scheme" content="dark" />
+
     <style>
       #root {
         display: flex;
         flex-direction: column;
         height: 100vh;
       }
 
-      @keyframes fade-in {
-        from {
-          opacity: 0;
-        }
-      }
-
-      @keyframes fade-out {
-        to {
-          opacity: 0;
-        }
+      /*
+    @keyframes fade-in {
+      from {
+        opacity: 0;
       }
+    }
 
-      @keyframes slide-from-bottom {
-        from {
-          transform: translateY(50px);
-        }
+    @keyframes fade-out {
+      to {
+        opacity: 0;
       }
+    }
 
-      @keyframes slide-to-top {
-        to {
-          transform: translateY(-50px);
-        }
+    @keyframes slide-from-right {
+      from {
+        transform: translateX(30px);
       }
+    }
 
-      @keyframes slide-to-start {
-        to {
-          transform: translateX(-100%);
-        }
+    @keyframes slide-to-left {
+      to {
+        transform: translateX(-30px);
       }
+    }
 
-      @keyframes slide-from-end {
-        from {
-          transform: translateX(100%);
-        }
-      }
+    ::view-transition-old(root) {
+      animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+    }
 
-      ::view-transition-old(pooopies) {
-        animation:
-          90ms ease-in both fade-out,
-          90ms linear both slide-to-start;
-      }
-
-      ::view-transition-new(pooopies) {
-        animation:
-          90ms ease-in both fade-in,
-          90ms linear both slide-from-end;
-      }
+    ::view-transition-new(root) {
+      animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+    } */
     </style>
   </head>
 

lib/DelayedEffect.tsx

@@ -0,0 +1,13 @@
+import { useEffect, type FC } from 'react';
+
+/**
+ * Sometimes you want to run parent effects before those of the children. E.g.
+   when setting something up or binding document event listeners. By passing the
+   effect to the first child it will run before any effects by later children.
+ * @param {Function} effect
+  * @returns {null}
+  */
+export const DelayedEffect: FC<{ effect: () => void }> = ({ effect }) => {
+  useEffect(() => effect(), [effect]);
+  return null;
+};