jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-26 07:46:06 -05: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;

27
components/ThemeScript/script.js Normal file
View File

@@ -0,0 +1,27 @@
/* eslint-disable no-var */
// this function is converted to a string verbatim, substitutions are made to insert dynamic values, minified, and then
// finally exported as an inline `<script>` tag in ThemeScript.tsx for pages/_document.tsx to use.
export const clientScript = () => {
// `try/catch` in case I messed something up here bigly... (will default to light theme)
try {
// user's saved preference:
var pref = localStorage.getItem("__STORAGE_KEY__");
// map of theme -> classname:
var classNames = "__CLASS_NAMES__";
// the list of <html>'s current class(es), from which `classNames` are removed to start fresh
// eslint-disable-next-line prefer-destructuring
var classList = document.documentElement.classList;
classList.remove("__LIST_OF_CLASSES__");
if (pref === "light" || pref === "dark") {
classList.add(classNames[pref]);
} else {
// CSS media query for system dark mode preference:
var darkQuery = "__MEDIA_QUERY__";
// the listener which tests the above media query:
var prefersDark = window.matchMedia(darkQuery);
classList.add(classNames[prefersDark.media !== darkQuery || prefersDark.matches ? "dark" : "light"]);
}
} catch (error) {} // eslint-disable-line no-empty
};