Merge pull request #10 from maxholman/animation

feat: add support for view transition api et al

.eslintrc.cjs

@@ -10,12 +10,8 @@ module.exports = {
     {
       files: ['src/examples/**/*', '__tests__/**/*.tsx', '*.config.ts'],
       rules: {
-        'import/no-extraneous-dependencies': [
-          1,
-          {
-            devDependencies: true,
-          },
-        ],
+        // allow extraneous DEV deps
+        'import/no-extraneous-dependencies': 'off',
       },
     },
   ],

.github/workflows/deploy.yml

@@ -1,24 +1,26 @@
 name: Deploy
 
 on:
-  workflow_dispatch: {}
+  workflow_dispatch:
   release:
     types: [published]
 
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
-          registry-url: https://registry.npmjs.org/
           cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+          node-version-file: .node-version
+
       - run: make
+
       - run: pnpm publish --access=public --no-git-checks
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/pr.yml

@@ -2,19 +2,20 @@ name: Unit Tests (PR)
 
 on:
   pull_request:
-    branches: ['master']
+    branches: ['canary', 'master']
 
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
-          registry-url: https://registry.npmjs.org/
+          node-version-file: .node-version
           cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+
       - run: make test

.node-version

@@ -1 +1 @@
-18
+20

CREDITS.md

@@ -0,0 +1,9 @@
+Credit to [@nikparo](https://github.com/nikparo) for "Running React parent effects before child effects"
+
+```
+// 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.
+```
+
+https://gist.github.com/nikparo/33544fe0228dd5aa6f0de8d03e96c378

Makefile

@@ -28,9 +28,9 @@ dev: node_modules
 
 .PHONY: types
 types: node_modules
-	pnpm tsc --emitDeclarationOnly --removeComments false
+	pnpm tsc
 
-build/main.js: node_modules $(SRCS)
+build/main.js: node_modules $(SRCS) bundlesize.config.cjs
 	NODE_ENV=production pnpm vite build
 	npx bundlesize
 

__tests__/hooks.test.tsx

@@ -1,16 +1,15 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import type { FC } from 'react';
 import { expect, test } from 'vitest';
 import type { ExtractRouteParams } from '../lib/types.js';
 import { Route, Router, Routes, useRouteParams } from '../src/index.js';
 import { namedRoute } from '../src/named-route.js';
 
 const login = namedRoute('/foo/:foo/bar/:bar?');
 
-const EffCee: FC<ExtractRouteParams<typeof login.path>> = () => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const EffCee = (_: ExtractRouteParams<typeof login.path>) => {
   const match = useRouteParams();
-
   return <pre>{JSON.stringify(match, null, 2)}</pre>;
 };
 
@@ -26,6 +25,7 @@ test('useMatch', async () => {
     >
       <Routes>
         <Route path={login.path} component={EffCee} />
+        <Route>if you see this, the test failed</Route>
       </Routes>
     </Router>,
   );

__tests__/index.test.tsx

@@ -4,6 +4,10 @@ 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();
 
@@ -27,11 +31,15 @@ test('basic', async () => {
         </Route>
         <Route path="/">
           <h1 data-testid="root">You are at the root!</h1>
-          <Link href={login.build({ origin })}>login</Link>
+          <Link href={login.build({ origin: window.location.origin })}>
+            login
+          </Link>
         </Route>
         <Route>
           <h1>404</h1>
-          <Link href={root.build({ origin })}>Go to root</Link>
+          <Link href={root.build({ origin: window.location.origin })}>
+            Go to root
+          </Link>
         </Route>
       </Routes>
     </Router>,

__tests__/navigate.test.tsx

@@ -82,9 +82,7 @@ test('programmatic navigation with hooks', async () => {
   );
 
   await waitFor(() => {
-    // global location
-    // eslint-disable-next-line no-restricted-globals
-    expect(location.href).toBe('http://localhost:3000/pickles?foo=bar');
+    expect(window?.location.href).toBe('http://localhost:3000/pickles?foo=bar');
 
     expect(screen.getByTestId('location-display')).toHaveTextContent(
       'http://localhost:3000/pickles?foo=bar',

__tests__/nested.test.tsx

@@ -10,7 +10,7 @@ test('wildcard routes + nested', async () => {
   const userRoot = namedRoute('/users');
   const userView = namedRoute('/users/blah/:userId');
 
-  const ComponentWithUserId: FC<{ userId: string }> = ({ userId }) => (
+  const ComponentWithUserId = ({ userId }: { userId: string }) => (
     <>userId = {userId}</>
   );
 

__tests__/route.test.tsx

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import { useCallback, type FC, type PropsWithChildren } from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect, type FC } from 'react';
 import { expect, test, vi } from 'vitest';
 import { namedRoute } from '../lib/named-route.js';
+import type { RouteComponentProps } from '../lib/types.js';
 import {
   Route,
   Router,
@@ -14,7 +14,7 @@ import {
 const login = namedRoute('/');
 
 test('custom route', async () => {
-  const CustomRoute = (props: PropsWithChildren<{ path: string }>) => (
+  const CustomRoute = <T extends string>(props: RouteComponentProps<T>) => (
     <Route {...props} />
   );
 
@@ -53,7 +53,7 @@ test('cancel nav', async () => {
 });
 
 test('routes with components/children/paths/no paths', async () => {
-  const HelloComponent: FC = () => <h1>hello</h1>;
+  const HelloComponent = () => <h1>hello</h1>;
 
   const { asFragment } = render(
     <Router>

__tests__/type-inference.test.tsx

@@ -1,14 +1,13 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import type { FC } from 'react';
 import { expect, test } from 'vitest';
 import type { ExtractRouteParams } from '../lib/types.js';
 import { Route, Router, Routes } from '../src/index.js';
 import { namedRoute } from '../src/named-route.js';
 
-const login = namedRoute('/foo/:foo/bar/:bar?');
+const login = namedRoute('/foo/:foo');
 
-const EffCee: FC<ExtractRouteParams<typeof login.path>> = (props) => (
+const EffCee = (props: ExtractRouteParams<typeof login.path>) => (
   <h1>{props.foo}</h1>
 );
 
@@ -19,7 +18,10 @@ test('inferred component function props', async () => {
         <Route path={login.path}>
           <h1>normal</h1>
         </Route>
-        <Route path={login.path} component={(props) => <h1>{props.foo}</h1>} />
+        <Route
+          path={login.path}
+          component={(params) => <h1>{params.foo}</h1>}
+        />
         <Route path={login.path} component={EffCee} />
         <Route>Default route with children</Route>
       </Routes>

bundlesize.config.cjs

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

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -10,6 +10,54 @@
         flex-direction: column;
         height: 100vh;
       }
+
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+      }
+
+      @keyframes fade-out {
+        to {
+          opacity: 0;
+        }
+      }
+
+      @keyframes slide-from-bottom {
+        from {
+          transform: translateY(50px);
+        }
+      }
+
+      @keyframes slide-to-top {
+        to {
+          transform: translateY(-50px);
+        }
+      }
+
+      @keyframes slide-to-start {
+        to {
+          transform: translateX(-100%);
+        }
+      }
+
+      @keyframes slide-from-end {
+        from {
+          transform: translateX(100%);
+        }
+      }
+
+      ::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;
+      }
     </style>
   </head>
 

lib/Route.tsx

@@ -0,0 +1,26 @@
+import type { RouteComponentProps } from './types.js';
+import { useRouteMatch } from './use-route-match.js';
+
+export const Route = <TPath extends string>(
+  props: RouteComponentProps<TPath>,
+) => {
+  const match = useRouteMatch<TPath>();
+
+  if (match) {
+    if (
+      props &&
+      'component' in props &&
+      typeof props.component === 'function'
+    ) {
+      return props.component(match.params);
+    }
+
+    if ('children' in props) {
+      return <>{props.children}</>;
+    }
+
+    return <props.component {...match.params} />;
+  }
+
+  return null;
+};