v7: TS-native, oxlint/oxfmt, Tailwind v4, namedRoute builder

.github/workflows/deploy.yml

@@ -1,26 +1,28 @@
 name: Deploy
 
 on:
-  workflow_dispatch:
+  workflow_dispatch: {}
   release:
     types: [published]
 
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+      attestations: write
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
+          node-version: 24
+          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}}
+      - run: pnpm publish --access=public --no-git-checks --provenance

.github/workflows/pr.yml

@@ -6,16 +6,21 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        version: [24]
+        os: [ubuntu-latest]
+
+    runs-on: ${{ matrix.os }}
+
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version-file: .node-version
+          node-version: ${{ matrix.version }}
           cache: 'pnpm'
-          registry-url: 'https://registry.npmjs.org'
 
       - run: make test

.oxfmtrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "useTabs": false,
+  "semi": true,
+  "sortPackageJson": true,
+  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist", "build"],
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "biome.enabled": false,
+  "prettier.enable": false,
+  "eslint.enable": false,
+  "oxc.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+}

CREDITS.md

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

Makefile

@@ -1,12 +1,10 @@
 
-SRCS := $(shell find lib -print -name *.ts?)
-
-all: build/main.js types
+.PHONY: all
+all: test
 
 .PHONY: clean
 clean:
 	pnpm tsc -b --clean
-	rm -rf dist build
 
 .PHONY: distclean
 distclean: clean
@@ -15,26 +13,17 @@ distclean: clean
 .PHONY: test
 test: node_modules
 	pnpm tsc --noEmit
-	pnpm vitest run
-	$(MAKE) build/main.js
+	pnpm vitest run --typecheck
 
 .PRECIOUS: pnpm-lock.yaml
 node_modules: pnpm-lock.yaml package.json
 	pnpm install
 
 .PHONY: dev
 dev: node_modules
-	pnpm vite dev
-
-.PHONY: types
-types: node_modules
-	pnpm tsc
-
-build/main.js: node_modules $(SRCS) bundlesize.config.cjs
-	NODE_ENV=production pnpm vite build
-	npx bundlesize
+	pnpm vite dev --config examples/vite.config.ts examples
 
 .PHONY: pretty
 pretty:
-	pnpm eslint --fix .
-	pnpm prettier --write .
+	pnpm oxlint --fix .
+	pnpm oxfmt --write .

__tests__/components/NavigationInsideEffect.tsx

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

__tests__/hooks.test.tsx

@@ -2,12 +2,11 @@ import '@testing-library/jest-dom';
 import { render } from '@testing-library/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';
+import { Route, Router, Routes, useRouteParams } from '@block65/mrr';
+import { namedRoute } from '@block65/mrr/named-route';
 
 const login = namedRoute('/foo/:foo/bar/:bar?');
 
-// 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>;

__tests__/link.test.tsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react';
 import type { AnchorHTMLAttributes, FC, PropsWithChildren } from 'react';
 import { FormattedMessage, IntlProvider } from 'react-intl';
 import { expect, test } from 'vitest';
-import { Link, Router } from '../src/index.js';
-import { namedRoute } from '../src/named-route.js';
+import { Link, Router } from '@block65/mrr';
+import { namedRoute } from '@block65/mrr/named-route';
 
 const ComponentThatTakesProps: FC<
   PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>

__tests__/main.test.tsx

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { expect, test } from 'vitest';
-import { Link, Route, Router, Routes, useLocation } from '../src/index.js';
-import { namedRoute } from '../src/named-route.js';
+import { Link, Route, Router, Routes, useLocation } from '@block65/mrr';
+import { namedRoute } from '@block65/mrr/named-route';
 
 export const LocationDisplay = () => {
   const [location] = useLocation();

__tests__/named-route.test-d.ts

@@ -0,0 +1,63 @@
+import { assertType, expectTypeOf, test } from 'vitest';
+import { namedRoute } from '@block65/mrr/named-route';
+
+test('paramless route - build is optional', () => {
+  const route = namedRoute('/');
+  assertType<string>(route.build());
+  assertType<string>(route.build({ hash: '#foo' }));
+});
+
+test('parameterised route - params required', () => {
+  const route = namedRoute('/user/:id');
+  assertType<string>(route.build({ params: { id: '1' } }));
+
+  // @ts-expect-error - params is required
+  route.build();
+  // @ts-expect-error - params is required
+  route.build({});
+  // @ts-expect-error - id is required
+  route.build({ params: {} });
+});
+
+test('searchParams() narrows searchParams type', () => {
+  const route = namedRoute('/search').searchParams<{ q: string }>();
+
+  assertType<string>(route.build({ searchParams: { q: 'hello' } }));
+
+  // @ts-expect-error - wrong key
+  route.build({ searchParams: { wrong: 'nope' } });
+  // @ts-expect-error - missing required key
+  route.build({ searchParams: {} });
+});
+
+test('searchParams() with path params', () => {
+  const route = namedRoute('/user/:id').searchParams<{ tab: string }>();
+
+  assertType<string>(
+    route.build({ params: { id: '1' }, searchParams: { tab: 'posts' } }),
+  );
+
+  // @ts-expect-error - params still required
+  route.build({ searchParams: { tab: 'posts' } });
+  // @ts-expect-error - wrong searchParams key
+  route.build({ params: { id: '1' }, searchParams: { wrong: 'nope' } });
+});
+
+test('path type is preserved as literal', () => {
+  const route = namedRoute('/user/:id');
+  expectTypeOf(route.path).toEqualTypeOf<'/user/:id'>();
+});
+
+test('path type preserved through searchParams()', () => {
+  const route = namedRoute('/user/:id').searchParams<{ q: string }>();
+  expectTypeOf(route.path).toEqualTypeOf<'/user/:id'>();
+});
+
+test('searchParams is chainable', () => {
+  const route = namedRoute('/').searchParams<{ a: string }>();
+  const route2 = route.searchParams<{ b: string }>();
+
+  assertType<string>(route2.build({ searchParams: { b: 'yes' } }));
+  // @ts-expect-error - old type no longer valid
+  route2.build({ searchParams: { a: 'nope' } });
+});

__tests__/named-route.test.ts

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { expect, test } from 'vitest';
-import { namedRoute } from '../src/named-route.js';
+import { namedRoute } from '@block65/mrr/named-route';
 
 const route1 = namedRoute('/');
 const route2 = namedRoute('/test');

__tests__/navigate.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 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 { Route, Router, Routes, useNavigate } from '@block65/mrr';
+import { namedRoute } from '@block65/mrr/named-route';
 import { NavigationInsideEffect } from './components/NavigationInsideEffect.js';
 import { LocationDisplay } from './main.test.js';
 

__tests__/nested.test.tsx

@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 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 { namedRoute } from '@block65/mrr/named-route';
+import { Route, Router, Routes } from '@block65/mrr';
 import { LocationDisplay } from './main.test.js';
 
 test('wildcard routes + nested', async () => {

__tests__/route.test.tsx

@@ -2,14 +2,14 @@ import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { useCallback, useEffect, type FC } from 'react';
 import { expect, test, vi } from 'vitest';
-import { namedRoute } from '../lib/named-route.js';
+import { namedRoute } from '@block65/mrr/named-route';
 import type { RouteComponentProps } from '../lib/types.js';
 import {
   Route,
   Router,
   Routes,
   type SyntheticNavigateEvent,
-} from '../src/index.js';
+} from '@block65/mrr';
 
 const login = namedRoute('/');
 

__tests__/type-inference.test.tsx

@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import { render } from '@testing-library/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';
+import { Route, Router, Routes } from '@block65/mrr';
+import { namedRoute } from '@block65/mrr/named-route';
 
 const login = namedRoute('/foo/:foo');