jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 15:25:33 -04:00
Code Issues Activity

type check .js files

Browse Source
This commit is contained in:
Jake Jarvis
2022-07-05 20:17:01 -04:00
parent 760f07cd11
commit c69a593d61
8 changed files with 216 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/ThemeScript/ThemeScript.tsx
View File

@@ -17,9 +17,17 @@ const ThemeScript = ({ themeClassNames, themeStorageKey }: ThemeScriptProps) =>
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames));
// turn the raw function into an iife
const unminified = `(${functionString})()`;
// skip minification if running locally to save a few ms
if (process.env.IS_DEV_SERVER === "true") {
return unminified;
}
// 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 result = minify(`(${functionString})()`, {
const minified = minify(unminified, {
toplevel: true,
compress: {
negate_iife: false,
@@ -29,13 +37,13 @@ const ThemeScript = ({ themeClassNames, themeStorageKey }: ThemeScriptProps) =>
},
});
// fail somewhat silenty
if (result.error) {
console.error(result.error);
return;
// fail somewhat silenty by returning the unminified version
if (!minified || minified.error) {
console.warn("Failed to minify inline theme script:", minified.error);
return unminified;
}
return result.code;
return minified.code;
}, [themeClassNames, themeStorageKey]);
// the script tag injected manually into `<head>` in _document.tsx to prevent FARTing:

9
components/ThemeScript/client.js
View File

@@ -1,4 +1,5 @@
/* eslint-disable no-empty, no-var, prefer-destructuring */
// @ts-check
/* eslint-disable no-var, no-empty */
// 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 _document.tsx to use.
@@ -10,13 +11,14 @@ export const clientScript = () => {
var dark = "dark";
var newTheme;
// the list of <html>'s current class(es)...
// eslint-disable-next-line prefer-destructuring
var classList = document.documentElement.classList;
// map of theme -> classname
var classNames = "__CLASS_NAMES__";
// user's saved preference
var pref = window.localStorage.getItem("__STORAGE_KEY__");
if (pref === light || pref === dark) {
if (pref && (pref === light || pref === dark)) {
// simply restore the local storage preference
newTheme = pref;
} else {
@@ -26,8 +28,11 @@ export const clientScript = () => {
}
// remove both `classNames` to start fresh...
// @ts-ignore
classList.remove(classNames[light], classNames[dark]);
// ...and then FINALLY set the root class
// @ts-ignore
classList.add(classNames[newTheme]);
} catch (error) {}
};