Skip to content

Commit 3cb2126

Browse files
committed
Support global-error.tsx in Next App Dir
1 parent 3aa529a commit 3cb2126

File tree

1 file changed

+75
-37
lines changed

1 file changed

+75
-37
lines changed

src/useIsDark/scriptToRunAsap.ts

Lines changed: 75 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -90,61 +90,99 @@ export const getScriptToRunAsap: GetScriptToRunAsap = ({
9090
9191
})();
9292
93-
document.documentElement.setAttribute(
94-
"${data_fr_scheme}",
95-
(() => {
96-
const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
93+
const effect = ()=> {
9794
98-
if (colorSchemeReadFromLocalStorage === null) {
99-
return "${defaultColorScheme}";
100-
}
95+
document.documentElement.setAttribute(
96+
"${data_fr_scheme}",
97+
(() => {
98+
const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
10199
102-
return colorSchemeReadFromLocalStorage;
103-
})()
104-
);
105-
document.documentElement.setAttribute("${data_fr_theme}", isDark ? "dark" : "light")
100+
if (colorSchemeReadFromLocalStorage === null) {
101+
return "${defaultColorScheme}";
102+
}
106103
107-
{
104+
return colorSchemeReadFromLocalStorage;
105+
})()
106+
);
107+
document.documentElement.setAttribute("${data_fr_theme}", isDark ? "dark" : "light")
108108
109-
let element= document.getElementById("${rootColorSchemeStyleTagId}");
109+
{
110110
111-
if( element !== null ){
112-
element.remove()
113-
}
111+
let element= document.getElementById("${rootColorSchemeStyleTagId}");
114112
115-
element = document.createElement("style");
113+
if( element !== null ){
114+
element.remove()
115+
}
116116
117-
if ("${nonce}" !== "") {
118-
element.setAttribute("nonce", "${nonce}");
119-
}
117+
element = document.createElement("style");
120118
121-
element.id = "${rootColorSchemeStyleTagId}";
119+
if ("${nonce}" !== "") {
120+
element.setAttribute("nonce", "${nonce}");
121+
}
122122
123-
element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`);
123+
element.id = "${rootColorSchemeStyleTagId}";
124124
125-
document.head.appendChild(element);
125+
element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`);
126126
127-
}
127+
document.head.appendChild(element);
128128
129-
{
129+
}
130+
131+
{
130132
131-
const name = "theme-color";
133+
const name = "theme-color";
132134
133-
let element = document.querySelector(\`meta[name=\${name}]\`);
134-
135-
if( element !== null ){
136-
element.remove();
137-
}
135+
let element = document.querySelector(\`meta[name=\${name}]\`);
136+
137+
if( element !== null ){
138+
element.remove();
139+
}
138140
139-
element = document.createElement("meta");
141+
element = document.createElement("meta");
140142
141-
element.name = name;
143+
element.name = name;
142144
143-
element.content = isDark ? "${
144-
fr.colors.getHex({ "isDark": true }).decisions.background.default.grey.default
145-
}" : "${fr.colors.getHex({ "isDark": false }).decisions.background.default.grey.default}";
145+
element.content = isDark ? "${
146+
fr.colors.getHex({ "isDark": true }).decisions.background.default.grey.default
147+
}" : "${
148+
fr.colors.getHex({ "isDark": false }).decisions.background.default.grey.default
149+
}";
150+
151+
document.head.appendChild(element);
152+
153+
}
154+
155+
};
156+
157+
effect();
158+
159+
// NOTE: This is just for global-error.tsx support
160+
{
161+
162+
const observer = new MutationObserver((mutationsList) => {
163+
for (const mutation of mutationsList) {
164+
if (
165+
mutation.type === "attributes" &&
166+
mutation.attributeName === "${data_fr_scheme}"
167+
) {
168+
const htmlEl = mutation.target;
169+
170+
if (htmlEl.hasAttribute("data-fr-js")) {
171+
observer.disconnect();
172+
}
173+
174+
if (!htmlEl.hasAttribute("${data_fr_scheme}")) {
175+
effect();
176+
observer.disconnect();
177+
}
178+
}
179+
}
180+
});
146181
147-
document.head.appendChild(element);
182+
observer.observe(document.documentElement, {
183+
attributes: true,
184+
attributeFilter: ["${data_fr_scheme}"],
185+
});
148186
149187
}
150188

0 commit comments

Comments
 (0)