jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 05:41:17 -04:00
Code Issues Activity

minify the theme restoration script injected into head

Browse Source 
also switches the MDX minifier to uglify-js for consistency
This commit is contained in:
Jake Jarvis
2022-04-21 14:05:11 -04:00
parent 05469218b1
commit 008bb3213b
5 changed files with 237 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/ThemeScript/ThemeScript.tsx
View File

@@ -1,34 +1,10 @@
import { minify } from "uglify-js";
import { clientScript } from "./script";
import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/config/themes";
// comments are up here to avoid having them inside the actual client output:
// - `p` is the user's saved preference
// - `c` is the map of theme -> classname
// - `l` is the list of <html>'s current class(es), which the `cn` values are removed to start fresh
// - `q` is always the CSS media query for prefers dark mode
// - `m` is the listener which tests that media query
// - `try/catch` is in case I messed something up here bigly... (will default to light theme)
/* eslint-disable no-empty, no-var, one-var */
const clientScript = () => {
try {
var p = localStorage.getItem("__STORAGE_KEY__"),
c = "__CLASS_NAMES__",
l = document.documentElement.classList;
l.remove("__LIST_OF_CLASSES__");
if (p === "light" || p === "dark") {
l.add(c[p]);
} else {
var q = "__MEDIA_QUERY__",
m = window.matchMedia(q);
l.add(c[m.media !== q || m.matches ? "dark" : "light"]);
}
} catch (e) {}
};
/* eslint-enable no-empty, no-var, one-var */
// since the function above will end up being injected as a plain dumb string, we need to set the dynamic values here:
const prepareScript = (script: unknown) => {
const functionString = String(script)
const ThemeScript = () => {
// since the function above will end up being injected as a plain dumb string, we need to set the dynamic values here:
const functionString = String(clientScript)
.replace('"__MEDIA_QUERY__"', `"${darkModeQuery}"`)
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames))
@@ -38,25 +14,31 @@ const prepareScript = (script: unknown) => {
.map((t: string) => `"${t}"`)
.join(",")
);
// somewhat "minify" the final code by removing tabs/newlines:
// https://github.com/sindresorhus/condense-whitespace/blob/main/index.js
// .replace(/\s{2,}/gu, "")
// .trim();
// make it an IIFE:
return `(${functionString})()`;
// minify the final code, a bit hacky but this is ONLY done at build-time, so uglify-js is never bundled or sent to
// the browser to execute:
const minified = minify(`(${functionString})()`, {
toplevel: true,
compress: {
negate_iife: false,
},
parse: {
bare_returns: true,
},
}).code;
// the script tag injected manually into `<head>` in _document.tsx.
// even though it's the proper method, using next/script with `strategy="beforeInteractive"` still causes flash of
// white on load. injecting a normal script tag lets us prioritize setting the `<html>` class even more urgently.
return (
<script
key="restore-theme"
dangerouslySetInnerHTML={{
// make it an IIFE:
__html: `(function(){${minified}})();`,
}}
/>
);
};
// the script tag injected manually into `<head>` in _document.tsx.
// even though it's the proper method, using next/script with `strategy="beforeInteractive"` still causes flash of
// white on load. injecting a normal script tag lets us prioritize setting `<html>` attributes even more.
const ThemeScript = () => (
<script
key="restore-theme"
dangerouslySetInnerHTML={{
__html: prepareScript(clientScript),
}}
/>
);
export default ThemeScript;