Add beta-switch package

apps/cyberstorm-remix/app/root.tsx

@@ -231,6 +231,7 @@ function Root() {
         <ScrollRestoration />
         <Scripts />
         {shouldShowAds ? <AdsInit /> : null}
+        <BetaButtonInit />
       </body>
     </html>
   );
@@ -357,3 +358,28 @@ function AdsInit() {
 
   return <></>;
 }
+
+// Temporary solution for adding the beta button
+// REMIX TODO: Move to dynamic html
+function BetaButtonInit() {
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+
+  // This will be loaded 2 times in development because of:
+  // https://react.dev/reference/react/StrictMode
+  // If strict mode is removed from the entry.client.tsx, this should only run once
+  useEffect(() => {
+    if (!startsHydrated.current && isHydrated) return;
+    if (typeof window !== "undefined") {
+      const $script = document.createElement("script");
+      $script.src = "/cyberstorm-static/scripts/beta-switch.js";
+      $script.setAttribute("async", "true");
+
+      document.body.append($script);
+
+      return () => $script.remove();
+    }
+  }, []);
+
+  return <></>;
+}

apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx

@@ -66,6 +66,7 @@ export function Navigation(props: {
           <DevelopersDropDown />
         </nav>
         <div className={styles.headerRightSide}>
+          <div id="nimbusBeta" suppressHydrationWarning />
           <LinkButton
             primitiveType="link"
             href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"

apps/cyberstorm-remix/public/cyberstorm-static/scripts/beta-switch.js

@@ -0,0 +1,74 @@
+const enabledPages = ["/communities", "c/[^/]+/?$"];
+const legacy = {
+  protocol: "https://",
+  hostname: "thunderstore.io",
+  port: "",
+};
+const beta = {
+  protocol: "https://",
+  hostname: "new.thunderstore.io",
+  port: "",
+};
+async function checkBetaRedirect() {
+  let switchProject = legacy;
+  if (window.location.hostname === beta.hostname) {
+    switchProject = legacy;
+  } else if (window.location.hostname === legacy.hostname) {
+    switchProject = beta;
+  }
+  window.location.replace(
+    `${switchProject.protocol}${switchProject.hostname}${
+      switchProject.port !== "" ? ":" : ""
+    }${switchProject.port}${window.location.pathname}`
+  );
+}
+async function insertSwitchButton() {
+  let betaIsAvailable = false;
+  enabledPages.forEach((regPath) => {
+    const regExecuted = new RegExp(regPath).exec(window.location.pathname);
+    const found = regExecuted !== null && regExecuted.length < 2;
+    if (!betaIsAvailable && found) {
+      betaIsAvailable = true;
+    }
+  }, betaIsAvailable);
+  if (betaIsAvailable) {
+    const switchButton = document.createElement("button");
+    if (window.location.hostname === legacy.hostname) {
+      switchButton.setAttribute(
+        "style",
+        "display:flex;align-items:center;gap:10px;color:#FFF;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal;fill:#FFF;background:transparent;border-width:0px;"
+      );
+    } else {
+      switchButton.setAttribute(
+        "style",
+        "display:flex;height:30px;padding: 0px 12px;justify-content:center;align-items:center;gap:12px;color:#F5F5F6;font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:normal;fill:#49B5F7;background:transparent;"
+      );
+    }
+    switchButton.onclick = async () => {
+      checkBetaRedirect();
+    };
+    switchButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:inherit;height:16px;width:16px;"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z"/></svg> Switch to ${
+      window.location.hostname === legacy.hostname ? "beta" : "legacy"
+    }`;
+    const el = document.querySelector("#nimbusBeta");
+    if (el) {
+      el.appendChild(switchButton);
+    } else {
+      console.error(
+        "Couldn't insert beta switch, because the container element doesn't exist"
+      );
+    }
+  }
+}
+async function insertSwitchButtonListener() {
+  insertSwitchButton();
+  document.removeEventListener("DOMContentLoaded", insertSwitchButtonListener);
+}
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
+  insertSwitchButton();
+} else {
+  document.addEventListener("DOMContentLoaded", insertSwitchButtonListener);
+}

packages/beta-switch/.gitignore

@@ -0,0 +1,3 @@
+/dist/
+/node_modules/
+/tsconfig.tsbuildinfo

packages/beta-switch/README.md

@@ -0,0 +1,8 @@
+# beta-switch
+For switching between two sites running in the same domain
+
+
+## Scripts
+
+- `yarn run build`: Builds the project
+- `yarn run dev`: Builds the project & watches files for changes, triggering a rebuild

packages/beta-switch/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@thunderstore/beta-switch",
+  "version": "0.1.0",
+  "description": "Small thing for switching between two projects running in the same domain",
+  "repository": "https://github.com/thunderstore-io/thunderstore-ui/tree/master/packages/beta-switch",
+  "main": "dist/thunderstore-beta-switch.cjs.js",
+  "module": "dist/thunderstore-beta-switch.esm.js",
+  "types": "dist/thunderstore-beta-switch.cjs.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

packages/beta-switch/src/index.ts

@@ -0,0 +1,88 @@
+const enabledPages = ["/communities", "c/[^/]+/?$"];
+
+const legacy = {
+  protocol: "https://",
+  hostname: "thunderstore.io",
+  port: "",
+};
+
+const beta = {
+  protocol: "https://",
+  hostname: "new.thunderstore.io",
+  port: "",
+};
+
+async function checkBetaRedirect() {
+  let switchProject = legacy;
+
+  if (window.location.hostname === beta.hostname) {
+    switchProject = legacy;
+  } else if (window.location.hostname === legacy.hostname) {
+    switchProject = beta;
+  }
+
+  // Don't include the search params as those differ in projects and are not handled gracefully
+  window.location.replace(
+    `${switchProject.protocol}${switchProject.hostname}${
+      switchProject.port !== "" ? ":" : ""
+    }${switchProject.port}${window.location.pathname}`
+  );
+}
+
+async function insertSwitchButton() {
+  let betaIsAvailable = false;
+  enabledPages.forEach((regPath) => {
+    const regExecuted = new RegExp(regPath).exec(window.location.pathname);
+    const found = regExecuted !== null && regExecuted.length < 2;
+    if (!betaIsAvailable && found) {
+      betaIsAvailable = true;
+    }
+  }, betaIsAvailable);
+
+  if (betaIsAvailable) {
+    const switchButton = document.createElement("button");
+
+    if (window.location.hostname === legacy.hostname) {
+      switchButton.setAttribute(
+        "style",
+        "display:flex;align-items:center;gap:10px;color:#FFF;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal;fill:#FFF;background:transparent;border-width:0px;"
+      );
+    } else {
+      switchButton.setAttribute(
+        "style",
+        "display:flex;height:30px;padding: 0px 12px;justify-content:center;align-items:center;gap:12px;color:#F5F5F6;font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:normal;fill:#49B5F7;background:transparent;"
+      );
+    }
+    switchButton.onclick = async () => {
+      checkBetaRedirect();
+    };
+
+    switchButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:inherit;height:16px;width:16px;"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z"/></svg> Switch to ${
+      window.location.hostname === legacy.hostname ? "beta" : "legacy"
+    }`;
+
+    const el = document.querySelector("#nimbusBeta");
+    if (el) {
+      el.appendChild(switchButton);
+    } else {
+      console.error(
+        "Couldn't insert beta switch, because the container element doesn't exist"
+      );
+    }
+  }
+}
+
+async function insertSwitchButtonListener() {
+  insertSwitchButton();
+  document.removeEventListener("DOMContentLoaded", insertSwitchButtonListener);
+}
+
+// Run above code
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
+  insertSwitchButton();
+} else {
+  document.addEventListener("DOMContentLoaded", insertSwitchButtonListener);
+}

packages/beta-switch/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "removeComments": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["./src/**/*.tsx", "./src/**/*.ts"],
+  "exclude": ["node_modules"]
+}