Sharang ParnerkarandClaude Opus 4.7
582355a1f2
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>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useSyncExternalStore } from "react";
|
|
import { Sun, Moon } from "lucide-react";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
function getThemeFromDom(): Theme {
|
|
const attr = document.documentElement.getAttribute("data-theme");
|
|
return attr === "dark" ? "dark" : "light";
|
|
}
|
|
|
|
// 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";
|
|
}
|
|
|
|
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";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
try {
|
|
localStorage.setItem("bp.theme", next);
|
|
} catch {
|
|
/* no-op */
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="theme-toggle"
|
|
onClick={toggle}
|
|
aria-label="Toggle theme"
|
|
title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
|
|
>
|
|
{theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
|
|
</button>
|
|
);
|
|
}
|