今日已更新 298 条资讯 | 累计 42709 条内容
关于我们

Deduplicating a constant did not stop it drifting

Daniel Pertu 2026年09月13日 20:50 3 次阅读 来源:Dev.to

Most of our app respects the user's theme preference. A handful of marketing and auth pages do not: they are designed dark, they only look right dark, and they render dark whatever your OS says. Implementing that is easy. Keeping it correct for two years, while other people add pages, is the actual problem. Ours broke twice, in the same way, for the same reason. Why the list existed twice To avoid a flash of the wrong theme you need the decision made before first paint , which means a blocking inline script in the document head: < script dangerouslySetInnerHTML = { { __html : ` var forceDark = ['/', '/login', '/pricing', /* ... */] if (forceDark.includes(location.pathname)) { document.documentElement.classList.add('dark') } ` , } } /> That handles the first load. But this is a single page app, so a client-side navigation from a themed page to a forced-dark one never re-runs that script. So there was also a component: // components/shared/ForceDarkMode.tsx const FORCE_DARK = [ ' / ' , ' /login ' , ' /pricing ' , /* ...again... */ ] Two lists. Different files. Different languages, effectively, since one is a string of JavaScript inside JSX and the other is real TypeScript. They had to agree exactly or the page would flash the wrong theme , and of course they did not: neither included the Aon or Korn Ferry pages, so those two rendered light beside nine identical dark siblings. Nobody noticed for a while, because you only see it if you happen to visit those two specific pages with a light OS theme. First fix: one list Obvious, and correct as far as it goes. Pull the array into its own module and have both callers import it. export const FORCE_DARK_PATHS : readonly string [] = [ ' / ' , ' /login ' , ' /signup ' , ' /pricing ' , ' /help ' , ' /about ' , /* ... */ ' /games/shl ' , ' /games/aon ' , ' /games/korn-ferry ' , ] /** True when the given pathname should be forced into dark mode. */ export function shouldForceDark ( pathname : string ): boolean { return FORCE_DARK_

本文内容来源于互联网,版权归原作者所有
查看原文