fix(portal): pass Next.js 16's React-strict lint rules in M10.2

CI on PR #13 failed at `pnpm lint --max-warnings 0`. Four findings, all new-in-N16 react-strict checks: * ThemeToggle.tsx — "Calling setState synchronously within an effect" Rewrites the theme reader to use `useSyncExternalStore` with a `MutationObserver` on `<html data-theme>`. SSR snapshot stays "light" (matches the root layout); the head script and the toggle just write the attribute, the observer pushes the change into React. Drops the `mounted` flag because the icon now mirrors the DOM truthfully. * WorkflowEditor.tsx — "Cannot access refs during render" `stateRef.current = { pan, zoom }` was a direct ref-mutation in the component body so the global mousemove handler could read the latest viewport without re-subscribing. Moves the mirror into a `useEffect` keyed on `[pan, zoom]` — same semantics, satisfies the rule. * MockWorker.tsx — drops an unused `eslint-disable-next-line no-console` (the `no-console` rule isn't enabled). * public/mockServiceWorker.js — auto-generated by `msw init`; adds it to the eslint flat-config `ignores` so the lint pass never crosses it. Local: `pnpm lint` + `pnpm typecheck` both clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-04 17:30:24 +02:00
parent 0797f8f99c
commit 582355a1f2
4 changed files with 40 additions and 16 deletions
@@ -6,7 +6,14 @@ const config = [
  ...nextWebVitals,
  ...nextTypescript,
  {
-    ignores: [".next/**", "node_modules/**", "coverage/**", "next-env.d.ts"],
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "coverage/**",
+      "next-env.d.ts",
+      // Auto-generated by `msw init` — patched on every MSW upgrade.
+      "public/mockServiceWorker.js",
+    ],
  },
 ];

@@ -28,7 +28,6 @@ export function MockWorker() {
          quiet: true,
        });
      } catch (e) {
-        // eslint-disable-next-line no-console
        console.error("[mock-worker] failed to start:", e);
      }
    })();
@@ -1,24 +1,36 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { Sun, Moon } from "lucide-react";

 type Theme = "light" | "dark";

-function readTheme(): Theme {
-  if (typeof document === "undefined") return "light";
+function getThemeFromDom(): Theme {
  const attr = document.documentElement.getAttribute("data-theme");
  return attr === "dark" ? "dark" : "light";
 }

-export function ThemeToggle() {
-  const [theme, setTheme] = useState<Theme>("light");
-  const [mounted, setMounted] = useState(false);
+// SSR snapshot — must be a stable reference per React's docs. The root
+// layout always renders `data-theme="light"` on the server, then a head
+// script overrides to the user's preference before hydration. `<html>`
+// has `suppressHydrationWarning` so the mismatch is intentional.
+function getServerSnapshot(): Theme {
+  return "light";
+}

-  useEffect(() => {
-    setTheme(readTheme());
-    setMounted(true);
-  }, []);
+function subscribe(onChange: () => void): () => void {
+  const target = document.documentElement;
+  const observer = new MutationObserver(onChange);
+  observer.observe(target, { attributes: true, attributeFilter: ["data-theme"] });
+  return () => observer.disconnect();
+}
+
+export function ThemeToggle() {
+  // useSyncExternalStore is the idiomatic way to read DOM-driven state
+  // into a React component without tripping the "no setState in effect"
+  // rule. The MutationObserver in `subscribe` keeps us in sync when any
+  // other code path (e.g. system preference handler) flips the attribute.
+  const theme = useSyncExternalStore(subscribe, getThemeFromDom, getServerSnapshot);

  function toggle() {
    const next: Theme = theme === "dark" ? "light" : "dark";
@@ -28,7 +40,6 @@ export function ThemeToggle() {
    } catch {
      /* no-op */
    }
-    setTheme(next);
  }

  return (
@@ -37,9 +48,9 @@ export function ThemeToggle() {
      className="theme-toggle"
      onClick={toggle}
      aria-label="Toggle theme"
-      title={mounted ? `Switch to ${theme === "dark" ? "light" : "dark"} theme` : "Toggle theme"}
+      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
    >
-      {mounted && theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
+      {theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
    </button>
  );
 }
@@ -80,8 +80,15 @@ export function WorkflowEditor({ frozen }: { frozen: boolean }) {

  const wrapRef = useRef<HTMLDivElement | null>(null);
  const dragRef = useRef<DragState>(null);
+  // Latest pan/zoom mirrored into a ref so the global mousemove handler
+  // (registered once in the effect below) can read the current viewport
+  // without re-subscribing on every change. The mirror is updated in an
+  // effect rather than during render to satisfy React's "no ref access
+  // during render" rule.
  const stateRef = useRef({ pan, zoom });
-  stateRef.current = { pan, zoom };
+  useEffect(() => {
+    stateRef.current = { pan, zoom };
+  }, [pan, zoom]);

  const toWorld = useCallback((cx: number, cy: number) => {
    const wrap = wrapRef.current;