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

more optimization/error handling

Browse Source
This commit is contained in:
Jake Jarvis
2022-04-22 09:18:53 -04:00
parent 831139c132
commit 8a97b706be
12 changed files with 93 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/ThemeScript/ThemeScript.tsx
View File

@@ -1,32 +1,34 @@
import { memo } from "react";
import { useMemo } from "react";
import { minify } from "uglify-js";
import { clientScript } from "./script";
import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/config/themes";
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))
.replace(
'"__LIST_OF_CLASSES__"',
Object.values(themeClassNames)
.map((t: string) => `"${t}"`)
.join(",")
);
const minified = useMemo(() => {
// since the client function will end up being injected as a plain dumb string, we need to set dynamic values here:
const functionString = String(clientScript)
.replace('"__MEDIA_QUERY__"', `"${darkModeQuery}"`)
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames))
.replace(
'"__LIST_OF_CLASSES__"',
Object.values(themeClassNames)
.map((t) => `"${t}"`)
.join(",")
);
// 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;
// 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:
return 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
@@ -36,10 +38,10 @@ const ThemeScript = () => {
key="restore-theme"
dangerouslySetInnerHTML={{
// make it an IIFE:
__html: `(function(){${minified}})();`,
__html: `(function(){${minified}})()`,
}}
/>
);
};
export default memo(ThemeScript);
export default ThemeScript;

10
components/ThemeScript/script.js
View File

@@ -1,7 +1,7 @@
/* eslint-disable no-var */
/* eslint-disable no-empty, no-var, prefer-destructuring */
// 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.
// finally exported as an inline `<script>` tag in ThemeScript.tsx for _document.tsx to use.
export const clientScript = () => {
// `try/catch` in case I messed something up here bigly... (will default to light theme)
try {
@@ -9,9 +9,9 @@ export const clientScript = () => {
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
// the list of <html>'s current class(es)...
var classList = document.documentElement.classList;
// ...from which `classNames` are removed to start fresh:
classList.remove("__LIST_OF_CLASSES__");
if (pref === "light" || pref === "dark") {
@@ -23,5 +23,5 @@ export const clientScript = () => {
var prefersDark = window.matchMedia(darkQuery);
classList.add(classNames[prefersDark.media !== darkQuery || prefersDark.matches ? "dark" : "light"]);
}
} catch (error) {} // eslint-disable-line no-empty
} catch (error) {}
};