From 4cd640a9187954505d12de5b6d76a90d8ce4c2eb Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:32:45 -0500
Subject: [PATCH] docs(nx-dev): load external script dynamically on route
 changes (#29355)

Moved the external script loading logic to a dynamic handler triggered
on route changes using `useEffect`. This ensures the script is reloaded
with each route change and prevents duplicates by removing any
pre-existing script.
---
 nx-dev/nx-dev/pages/_app.tsx | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/nx-dev/nx-dev/pages/_app.tsx b/nx-dev/nx-dev/pages/_app.tsx
index 7c87e3ee43b24..a02685d90bcca 100644
--- a/nx-dev/nx-dev/pages/_app.tsx
+++ b/nx-dev/nx-dev/pages/_app.tsx
@@ -15,12 +15,37 @@ export default function CustomApp({
 }: AppProps): JSX.Element {
   const router = useRouter();
   const gaMeasurementId = 'UA-88380372-10';
+  // RR2B ---------
+  const SCRIPT_ID = 'external-js-script';
+  const SCRIPT_BASE_URL = 'https://s3-us-west-2.amazonaws.com/b2bjsstore/b/';
+  const SCRIPT_KEY = '0NW1GH7YJ4O4'; //
+  const SCRIPT_URL = `${SCRIPT_BASE_URL}${SCRIPT_KEY}/${SCRIPT_KEY}.js.gz`;
+  useEffect(() => {
+    const handleRouteChange = () => {
+      const existingScript = document.getElementById(SCRIPT_ID);
+      if (existingScript) {
+        existingScript.remove();
+      }
+      const script = document.createElement('script');
+      script.id = SCRIPT_ID;
+      script.src = SCRIPT_URL;
+      script.async = true;
+      document.body.appendChild(script);
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    handleRouteChange();
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, SCRIPT_URL]);
+  // ---------
+
   useEffect(() => {
     const handleRouteChange = (url: URL) =>
       sendPageViewEvent({ gaId: gaMeasurementId, path: url.toString() });
     router.events.on('routeChangeStart', (url) => handleRouteChange(url));
     return () => router.events.off('routeChangeStart', handleRouteChange);
-  }, [router]);
+  }, [router.events, gaMeasurementId]);
   return (
     <>
       <DefaultSeo
@@ -153,15 +178,6 @@ export default function CustomApp({
         `,
         }}
       />
-      <Script
-        id="rb2b-script-loader"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `
-        !function () {var reb2b = window.reb2b = window.reb2b || [];if (reb2b.invoked) return;reb2b.invoked = true;reb2b.methods = ["identify", "collect"];reb2b.factory = function (method) {return function () {var args = Array.prototype.slice.call(arguments);args.unshift(method);reb2b.push(args);return reb2b;};};for (var i = 0; i < reb2b.methods.length; i++) {var key = reb2b.methods[i];reb2b[key] = reb2b.factory(key);}reb2b.load = function (key) {var script = document.createElement("script");script.type = "text/javascript";script.async = true;script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/0NW1GH7YJ4O4.js.gz";var first = document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script, first);};reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("0NW1GH7YJ4O4");}();
-        `,
-        }}
-      />
     </>
   );
 }