Run the web app on TanStack Redact

docs/architecture.md

@@ -56,6 +56,11 @@ v4 with shadcn/ui components, [Paraglide JS](https://inlang.com/m/gerre34r/libra
 for German and English, [MapLibre GL JS](https://maplibre.org/) for the map and own WebGL2 code
 for the wind.
 
+The code is written against React 19, but the build runs it on
+[TanStack Redact](https://github.com/TanStack/redact), a smaller runtime with the same API: its
+Vite plugin points the `react` and `react-dom` imports at it. Redact renders synchronously, without
+React's concurrent rendering; removing `redact()` from `vite.config.ts` goes back to React.
+
 | Folder | |
 |---|---|
 | `src/routes/` | pages: start, station, point, map, gear, account, sign-in, sources, admin |

web/package.json

@@ -21,6 +21,7 @@
     "@simplewebauthn/browser": "^14.0.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-router": "^1.170.42",
+    "@tanstack/redact": "0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

web/src/components/favorite.tsx

@@ -15,6 +15,7 @@ import { describeError } from '@/lib/i18n';
 import { m } from '@/paraglide/messages';
 import { Button } from '@/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
+import { TEXT_CENTRED } from '@/ui/svg-style';
 import { AlarmButton } from './alarm';
 
 interface Props {
@@ -240,7 +241,7 @@ function SectorRose({ sector }: { sector: Sector }) {
     <svg viewBox="0 0 80 80" className="size-20 shrink-0" aria-hidden="true">
       <circle cx="40" cy="40" r={r} className="fill-none stroke-line" strokeWidth="1.5" />
       <path d={path} className="fill-emerald-500/40 stroke-emerald-500" strokeWidth="1.5" />
-      <text x="40" y="11" textAnchor="middle" className="fill-muted-foreground text-[9px]">
+      <text x="40" y="11" style={TEXT_CENTRED} className="fill-muted-foreground text-[9px]">
         {m.compass_points().split(',')[0]}
       </text>
     </svg>

web/src/components/live/stats-card.tsx

@@ -11,6 +11,7 @@ import { cn } from '@/lib/utils';
 import { petal, rings, rose, STATS_BANDS_KN, sectorDegrees, wholeYear, windyShare } from '@/lib/wind-stats';
 import { m } from '@/paraglide/messages';
 import { Card } from '@/ui/card';
+import { TEXT_CENTRED } from '@/ui/svg-style';
 import { WindArrow } from '@/ui/wind-arrow';
 import { windBand } from '@/ui/wind-scale';
 
@@ -75,7 +76,7 @@ function RoseChart({ month }: { month: MonthStats }) {
       {[0, 4, 8, 12].map((s) => {
         const [x, y] = at(1.13, sectorDegrees(s));
         return (
-          <text key={s} x={x} y={y + 4} textAnchor="middle" className="fill-muted-foreground font-medium text-[12px]">
+          <text key={s} x={x} y={y + 4} style={TEXT_CENTRED} className="fill-muted-foreground font-medium text-[12px]">
             {points[s]}
           </text>
         );
@@ -93,7 +94,7 @@ function RoseChart({ month }: { month: MonthStats }) {
         )),
       )}
       <circle r={HOLE - 2} className="fill-card stroke-line" />
-      <text y={3.5} textAnchor="middle" className="fill-muted-foreground text-[9px]">
+      <text y={3.5} style={TEXT_CENTRED} className="fill-muted-foreground text-[9px]">
         {percent(r.calm)}
       </text>
     </svg>

web/src/components/map/measured-spark.tsx

@@ -5,6 +5,7 @@ import { spark } from '@/lib/spark';
 import { formatWind, UNIT_LABEL } from '@/lib/units';
 import { useNow } from '@/lib/use-now';
 import { m } from '@/paraglide/messages';
+import { NON_SCALING_STROKE } from '@/ui/svg-style';
 
 const HOURS = 6;
 const W = 240;
@@ -34,7 +35,7 @@ export function MeasuredSpark({ slug, unit }: { slug: string; unit: WindUnit })
           d={s.line}
           className="fill-none stroke-chart-wind"
           strokeWidth={1.5}
-          vectorEffect="non-scaling-stroke"
+          style={NON_SCALING_STROKE}
           strokeLinejoin="round"
         />
         {s.gusts.map((g) => (

web/src/components/water-tile.tsx

@@ -10,6 +10,7 @@ import { cn } from '@/lib/utils';
 import { levelTrend, type Trend } from '@/lib/water';
 import { m } from '@/paraglide/messages';
 import { Card, CardHeader, CardMeta, CardTitle } from '@/ui/card';
+import { NON_SCALING_STROKE } from '@/ui/svg-style';
 
 /** The gauge near a place (within 15 km): level and its week, flood state, flow, current. */
 export function WaterTile({ lat, lon, timeZone }: { lat: number; lon: number; timeZone: string }) {
@@ -190,7 +191,7 @@ function History({ points }: { points: LevelPoint[] }) {
           strokeWidth="2"
           strokeLinejoin="round"
           strokeLinecap="round"
-          vectorEffect="non-scaling-stroke"
+          style={NON_SCALING_STROKE}
         />
       </svg>
       <div className="flex justify-between font-mono text-[11px] text-dim">

web/src/ui/svg-style.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+
+// SVG presentation attributes as CSS, which React and TanStack Redact both write as `style`.
+// Redact 0.3.1 hyphenates only clip*, fill* and stroke* attributes (attributeName() in
+// src/core/attributes.ts); `textAnchor` and `vectorEffect` reach the DOM in camelCase and do nothing.
+
+/** Text centred on its x. */
+export const TEXT_CENTRED: CSSProperties = { textAnchor: 'middle' };
+
+/** A stroke as wide on screen however the viewBox is stretched. */
+export const NON_SCALING_STROKE: CSSProperties = { vectorEffect: 'non-scaling-stroke' };

web/src/ui/wind-compass.tsx

@@ -4,6 +4,7 @@ import { inSector } from '@/lib/favorites';
 import { compass } from '@/lib/format';
 import { cn } from '@/lib/utils';
 import { m } from '@/paraglide/messages';
+import { TEXT_CENTRED } from '@/ui/svg-style';
 
 const C = 60;
 /** Every 10°, longer every 90° */
@@ -82,7 +83,7 @@ export function WindCompass({ dir, calm, range, sector, className }: Props) {
             x={x}
             y={y}
             dy="0.35em"
-            textAnchor="middle"
+            style={TEXT_CENTRED}
             className={cn('font-semibold text-[11px]', d === 0 ? 'fill-foreground' : 'fill-muted-foreground')}
           >
             {points[i * 4]}
@@ -114,7 +115,7 @@ export function WindCompass({ dir, calm, range, sector, className }: Props) {
       )}
       <circle cx={C} cy={C} r="3" className="fill-foreground" />
       {dir === null && (
-        <text x={C} y={C + 16} textAnchor="middle" className="fill-subtle font-mono font-semibold text-[10px]">
+        <text x={C} y={C + 16} style={TEXT_CENTRED} className="fill-subtle font-mono font-semibold text-[10px]">
           {calm ? '0' : 'VRB'}
         </text>
       )}

web/vite.config.ts

@@ -2,6 +2,7 @@
 import { fileURLToPath } from 'node:url';
 import { paraglideVitePlugin } from '@inlang/paraglide-js';
 import tailwindcss from '@tailwindcss/vite';
+import { redact } from '@tanstack/redact/vite';
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
@@ -20,6 +21,10 @@ export default defineConfig({
     // src/routes/* → src/routeTree.gen.ts; has to run before the React plugin.
     tanstackRouter({ target: 'react', autoCodeSplitting: true }),
     react(),
+    // TanStack Redact in place of React (https://github.com/TanStack/redact): the code keeps
+    // importing `react` and `react-dom`, the plugin points those imports at the smaller runtime.
+    // It renders synchronously; nothing here relies on concurrent rendering.
+    redact(),
     tailwindcss(),
   ],
   resolve: {