Support global-error.tsx in Next App Dir

Author: garronej

src/useIsDark/scriptToRunAsap.ts

@@ -90,61 +90,99 @@ export const getScriptToRunAsap: GetScriptToRunAsap = ({
     
     })();
 
-    document.documentElement.setAttribute(
-        "${data_fr_scheme}",
-        (() => {
-            const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
+    const effect = ()=> {
 
-            if (colorSchemeReadFromLocalStorage === null) {
-                return "${defaultColorScheme}";
-            }
+        document.documentElement.setAttribute(
+            "${data_fr_scheme}",
+            (() => {
+                const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
 
-            return colorSchemeReadFromLocalStorage;
-        })()
-    );
-    document.documentElement.setAttribute("${data_fr_theme}", isDark ? "dark" : "light")
+                if (colorSchemeReadFromLocalStorage === null) {
+                    return "${defaultColorScheme}";
+                }
 
-    {
+                return colorSchemeReadFromLocalStorage;
+            })()
+        );
+        document.documentElement.setAttribute("${data_fr_theme}", isDark ? "dark" : "light")
 
-        let element= document.getElementById("${rootColorSchemeStyleTagId}");
+        {
 
-		if( element !== null ){
-			element.remove()
-		}
+            let element= document.getElementById("${rootColorSchemeStyleTagId}");
 
-        element = document.createElement("style");
+    		if( element !== null ){
+    			element.remove()
+    		}
 
-		if ("${nonce}" !== "") {
-			element.setAttribute("nonce", "${nonce}");
-		}
+            element = document.createElement("style");
 
-        element.id = "${rootColorSchemeStyleTagId}";
+    		if ("${nonce}" !== "") {
+    			element.setAttribute("nonce", "${nonce}");
+    		}
 
-        element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`);
+            element.id = "${rootColorSchemeStyleTagId}";
 
-        document.head.appendChild(element);
+            element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`);
 
-    }
+            document.head.appendChild(element);
 
-    {
+        }
+
+        {
 
-        const name = "theme-color";
+            const name = "theme-color";
 
-        let element = document.querySelector(\`meta[name=\${name}]\`);
-		
-		if( element !== null ){
-			element.remove();
-		}
+            let element = document.querySelector(\`meta[name=\${name}]\`);
+    
+    		if( element !== null ){
+    			element.remove();
+    		}
 
-        element = document.createElement("meta");
+            element = document.createElement("meta");
 
-        element.name = name;
+            element.name = name;
 
-        element.content = isDark ? "${
-            fr.colors.getHex({ "isDark": true }).decisions.background.default.grey.default
-        }" : "${fr.colors.getHex({ "isDark": false }).decisions.background.default.grey.default}";
+            element.content = isDark ? "${
+                fr.colors.getHex({ "isDark": true }).decisions.background.default.grey.default
+            }" : "${
+    fr.colors.getHex({ "isDark": false }).decisions.background.default.grey.default
+}";
+
+            document.head.appendChild(element);
+
+        }
+
+    };
+
+    effect();
+
+    // NOTE: This is just for global-error.tsx support
+    {
+
+        const observer = new MutationObserver((mutationsList) => {
+          for (const mutation of mutationsList) {
+            if (
+              mutation.type === "attributes" &&
+              mutation.attributeName === "${data_fr_scheme}"
+            ) {
+              const htmlEl = mutation.target;
+
+              if (htmlEl.hasAttribute("data-fr-js")) {
+                observer.disconnect(); 
+              }
+
+              if (!htmlEl.hasAttribute("${data_fr_scheme}")) {
+                effect();
+                observer.disconnect(); 
+              }
+            }
+          }
+        });
 
-        document.head.appendChild(element);
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["${data_fr_scheme}"],
+        });
 
     }