Feat/toggle flags w cmd

CHANGELOG.md

@@ -11,6 +11,7 @@ You can also check the
 
 # Unreleased
 
+
 - Features
   - Limits can now be displayed in bar charts
   - Exact limit values are now displayed in legend
@@ -58,7 +59,9 @@ You can also check the
   - Fixed Map Symbol Layer custom color palette support for all palette types
 - Maintenance
   - Added authentication method to e2e tests
-  - Added authentication to Vercel previews for easier testing
+  - Added authentication to vercel previews for easier testing
+  - flags can now be toggle by clicking "ctrl + t + d" on the keyboard (t,d =>
+    toggle debug)
 
 # [5.2.4] - 2025-02-06
 

app/flags/index.tsx

@@ -1,2 +1,2 @@
 export { flag } from "./flag";
-export { default as useFlag, useFlags } from "./useFlag";
+export { default as useFlag, useFlags } from "./use-flags";

app/flags/use-flags.ts

@@ -0,0 +1,84 @@
+import qs from "qs";
+import { useEffect, useState } from "react";
+import useKonami, { UseKonamiArgs } from "use-konami";
+
+import { flag, FLAG_PREFIX } from "./flag";
+import { FlagName } from "./types";
+
+export default function useFlagValue(name: FlagName) {
+  const [flagValue, setFlag] = useState(() => flag(name));
+
+  useEffect(() => {
+    const handleChange = (changed: string) => {
+      if (changed === name) {
+        setFlag(flag(name));
+      }
+    };
+
+    flag.store.ee.on("change", handleChange);
+
+    return () => {
+      flag.store.removeListener("change", handleChange);
+    };
+  }, [setFlag, name]);
+
+  return flagValue;
+}
+
+export function useFlags() {
+  const [flags, setFlags] = useState(flag.list());
+
+  useEffect(() => {
+    const handleChange = () => {
+      setFlags(flag.list());
+    };
+
+    flag.store.ee.on("change", handleChange);
+
+    return () => {
+      flag.store.removeListener("change", handleChange);
+    };
+  }, [setFlags]);
+
+  return flags;
+}
+
+type UseDebugShortcutProps = {
+  enable?: boolean;
+};
+
+export const useDebugShortcut = ({
+  enable,
+}: UseDebugShortcutProps = {}): void => {
+  const konamiConfig: UseKonamiArgs = {
+    sequence: ["t", "o", "g", "g", "l", "e", "d", "e", "b", "u", "g"],
+    onUnlock: () => {
+      if (enable) {
+        addDebugFlag();
+      }
+    },
+  };
+
+  useKonami(konamiConfig);
+};
+
+const addDebugFlag = () => {
+  const currentUrl = new URL(window.location.href);
+  const currentParams = qs.parse(currentUrl.search.substring(1));
+
+  const debugFlagKey = `${FLAG_PREFIX}debug`;
+  const hasDebugFlag = currentParams[debugFlagKey] === "true";
+
+  if (hasDebugFlag) {
+    delete currentParams[debugFlagKey];
+  } else {
+    currentParams[debugFlagKey] = "true";
+  }
+
+  const newSearch = qs.stringify(currentParams);
+  const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ""}`;
+  window.history.pushState({}, "", newUrl);
+
+  const event = new Event("popstate");
+  window.dispatchEvent(event);
+};

app/package.json

@@ -151,6 +151,7 @@
     "urql": "^2.0.5",
     "use-debounce": "^7.0.0",
     "use-immer": "^0.5.1",
+    "use-konami": "^1.0.1",
     "use-sync-external-store": "^1.2.0",
     "wellknown": "^0.5.0",
     "wonka": "4.0.15",

app/pages/_app.tsx

@@ -11,8 +11,10 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { SnackbarProvider } from "@/components/snackbar";
+import "@/configurator/components/color-picker.css";
 import { PUBLIC_URL } from "@/domain/env";
 import { flag } from "@/flags/flag";
+import { useDebugShortcut } from "@/flags/use-flags";
 import { GraphqlProvider } from "@/graphql/GraphqlProvider";
 import { i18n, parseLocaleString } from "@/locales/locales";
 import { LocaleProvider } from "@/locales/use-locale";
@@ -24,8 +26,6 @@ import AsyncLocalizationProvider from "@/utils/l10n-provider";
 import "@/utils/nprogress.css";
 import { useNProgress } from "@/utils/use-nprogress";
 
-import "@/configurator/components/color-picker.css";
-
 const GQLDebugPanel = dynamic(() => import("@/gql-flamegraph/devtool"), {
   ssr: false,
 });
@@ -68,6 +68,8 @@ export default function App({
   const shouldShowGQLDebug =
     process.env.NODE_ENV === "development" || flag("debug");
 
+  useDebugShortcut({ enable: true });
+
   return (
     <>
       <Head>