@koine/next 1.0.59 → 1.0.60

package/useTheme.js

@@ -1,258 +1,7 @@
-import { __assign, __spreadArray } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @file
- *
- * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
- *
- * Differences:
- *
- * - enableColorScheme: `false` by default (instead of `true`), this plays more
- * nicely with tailwind `dark` class mode as dark theme is supposed to be only
- * controlled by tailwind modifiers
- */
-import { createContext, useCallback, useContext, useEffect, useState, memo, } from "react";
-import NextScript from "next/script";
-import { isServer } from "@koine/utils";
-var THEME_STORAGE_KEY = "theme";
-var colorSchemes = ["light", "dark"];
-var MEDIA = "(prefers-color-scheme: dark)";
-var ThemeContext = createContext({
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setTheme: function (_) { },
-    themes: [],
-});
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext";
 /**
  * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
  */
 export var useTheme = function () { return useContext(ThemeContext); };
-/**
- * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
- */
-export var ThemeProvider = function (_a) {
-    var forcedTheme = _a.forcedTheme, _b = _a.disableTransitionOnChange, disableTransitionOnChange = _b === void 0 ? false : _b, _c = _a.enableSystem, enableSystem = _c === void 0 ? true : _c, enableColorScheme = _a.enableColorScheme, _d = _a.themes, themes = _d === void 0 ? ["light", "dark"] : _d, _e = _a.defaultTheme, defaultTheme = _e === void 0 ? enableSystem ? "system" : "light" : _e, _f = _a.attribute, attribute = _f === void 0 ? "data-theme" : _f, value = _a.value, children = _a.children, nonce = _a.nonce;
-    var _g = useState(function () {
-        return getTheme(THEME_STORAGE_KEY, defaultTheme);
-    }), theme = _g[0], setThemeState = _g[1];
-    var _h = useState(function () {
-        return getTheme(THEME_STORAGE_KEY);
-    }), resolvedTheme = _h[0], setResolvedTheme = _h[1];
-    var attrs = !value ? themes : Object.values(value);
-    var applyTheme = useCallback(function (theme) {
-        var _a;
-        var resolved = theme;
-        if (isServer || !resolved)
-            return;
-        // If theme is system, resolve it before setting theme
-        if (theme === "system" && enableSystem) {
-            resolved = getSystemTheme();
-        }
-        var name = value ? value[resolved] : resolved;
-        var enable = disableTransitionOnChange ? disableAnimation() : null;
-        var d = document.documentElement;
-        if (attribute === "class") {
-            (_a = d.classList).remove.apply(_a, attrs);
-            if (name)
-                d.classList.add(name);
-        }
-        else {
-            if (name) {
-                d.setAttribute(attribute, name);
-            }
-            else {
-                d.removeAttribute(attribute);
-            }
-        }
-        if (enableColorScheme) {
-            var fallback = colorSchemes.includes(defaultTheme)
-                ? defaultTheme
-                : "";
-            var colorScheme = colorSchemes.includes(resolved)
-                ? resolved
-                : fallback;
-            d.style.colorScheme = colorScheme;
-        }
-        enable === null || enable === void 0 ? void 0 : enable();
-    }, [
-        attribute,
-        attrs,
-        defaultTheme,
-        disableTransitionOnChange,
-        enableColorScheme,
-        enableSystem,
-        value,
-    ]);
-    var setTheme = useCallback(function (theme) {
-        setThemeState(theme);
-        // Save to storage
-        try {
-            localStorage.setItem(THEME_STORAGE_KEY, theme);
-        }
-        catch (e) {
-            // Unsupported
-        }
-    }, []);
-    var handleMediaQuery = useCallback(function (e) {
-        var resolved = getSystemTheme(e);
-        setResolvedTheme(resolved);
-        if (theme === "system" && enableSystem && !forcedTheme) {
-            applyTheme("system");
-        }
-    }, [theme, enableSystem, forcedTheme, applyTheme]);
-    // Always listen to System preference
-    useEffect(function () {
-        var media = window.matchMedia(MEDIA);
-        // Intentionally use deprecated listener methods to support iOS & old browsers
-        media.addListener(handleMediaQuery);
-        handleMediaQuery(media);
-        return function () { return media.removeListener(handleMediaQuery); };
-    }, [handleMediaQuery]);
-    // localStorage event handling
-    useEffect(function () {
-        var handleStorage = function (e) {
-            if (e.key !== THEME_STORAGE_KEY) {
-                return;
-            }
-            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
-            var theme = e.newValue || defaultTheme;
-            setTheme(theme);
-        };
-        window.addEventListener("storage", handleStorage);
-        return function () { return window.removeEventListener("storage", handleStorage); };
-    }, [defaultTheme, setTheme]);
-    // Whenever theme or forcedTheme changes, apply it
-    useEffect(function () {
-        applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
-    }, [applyTheme, forcedTheme, theme]);
-    return (_jsxs(ThemeContext.Provider, __assign({ value: {
-            theme: theme,
-            setTheme: setTheme,
-            forcedTheme: forcedTheme,
-            resolvedTheme: theme === "system" ? resolvedTheme : theme,
-            themes: enableSystem ? __spreadArray(__spreadArray([], themes, true), ["system"], false) : themes,
-            systemTheme: (enableSystem ? resolvedTheme : undefined),
-        } }, { children: [_jsx(ThemeScript, __assign({}, {
-                forcedTheme: forcedTheme,
-                disableTransitionOnChange: disableTransitionOnChange,
-                enableSystem: enableSystem,
-                enableColorScheme: enableColorScheme,
-                themes: themes,
-                defaultTheme: defaultTheme,
-                attribute: attribute,
-                value: value,
-                children: children,
-                attrs: attrs,
-                nonce: nonce,
-            })), children] })));
-};
-var ThemeScript = memo(function (_a) {
-    var forcedTheme = _a.forcedTheme, attribute = _a.attribute, enableSystem = _a.enableSystem, enableColorScheme = _a.enableColorScheme, defaultTheme = _a.defaultTheme, value = _a.value, attrs = _a.attrs, nonce = _a.nonce;
-    var defaultSystem = defaultTheme === "system";
-    // Code-golfing the amount of characters in the script
-    var optimization = (function () {
-        var removeClasses = "d.remove(".concat(attrs
-            .map(function (t) { return "'".concat(t, "'"); })
-            .join(","), ")");
-        return "var d=document.documentElement.classList;".concat(removeClasses, ";");
-    })();
-    var fallbackColorScheme = (function () {
-        if (!enableColorScheme) {
-            return "";
-        }
-        var fallback = colorSchemes.includes(defaultTheme)
-            ? defaultTheme
-            : null;
-        if (fallback) {
-            return "if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'".concat(defaultTheme, "'");
-        }
-        else {
-            return "if(e==='light'||e==='dark')d.style.colorScheme=e";
-        }
-    })();
-    var updateDOM = function (name, literal, setColorScheme) {
-        if (literal === void 0) { literal = false; }
-        if (setColorScheme === void 0) { setColorScheme = true; }
-        var resolvedName = value ? value[name] : name;
-        var val = literal ? name + "|| ''" : "'".concat(resolvedName, "'");
-        var text = "";
-        // MUCH faster to set colorScheme alongside HTML attribute/class
-        // as it only incurs 1 style recalculation rather than 2
-        // This can save over 250ms of work for pages with big DOM
-        if (enableColorScheme &&
-            setColorScheme &&
-            !literal &&
-            colorSchemes.includes(name)) {
-            text += "d.style.colorScheme = '".concat(name, "';");
-        }
-        if (attribute === "class") {
-            if (literal || resolvedName) {
-                text += "d.add(".concat(val, ")");
-            }
-            else {
-                text += "null";
-            }
-        }
-        else {
-            if (resolvedName) {
-                text += "d[s](n, ".concat(val, ")");
-            }
-        }
-        return text;
-    };
-    var scriptSrc = (function () {
-        if (forcedTheme) {
-            return "!function(){".concat(optimization).concat(updateDOM(forcedTheme), "}()");
-        }
-        if (enableSystem) {
-            return "!function(){try {".concat(optimization, "var e=localStorage.getItem('").concat(THEME_STORAGE_KEY, "');if(\"system\"===e||(!e&&").concat(defaultSystem, ")){var t=\"").concat(MEDIA, "\",m=window.matchMedia(t);if(m.media!==t||m.matches){").concat(updateDOM("dark"), "}else{").concat(updateDOM("light"), "}}else if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}").concat(!defaultSystem
-                ? "else{" + updateDOM(defaultTheme, false, false) + "}"
-                : "").concat(fallbackColorScheme, "}catch(e){}}()");
-        }
-        return "!function(){try{".concat(optimization, "var e=localStorage.getItem(\"").concat(THEME_STORAGE_KEY, "\");if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}else{").concat(updateDOM(defaultTheme, false, false), ";}").concat(fallbackColorScheme, "}catch(t){}}();");
-    })();
-    // We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
-    // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
-    // But our script cannot be external because it changes at runtime based on React props
-    // so we trick next/script by passing `src` as a base64 JS script
-    var encodedScript = "data:text/javascript;base64,".concat(encodeBase64(scriptSrc));
-    return (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
-}, 
-// Never re-render this component
-function () { return true; });
-// Helpers
-var getTheme = function (key, fallback) {
-    if (isServer)
-        return undefined;
-    var theme;
-    try {
-        theme = localStorage.getItem(key) || undefined;
-    }
-    catch (e) {
-        // Unsupported
-    }
-    return theme || fallback;
-};
-var disableAnimation = function () {
-    var css = document.createElement("style");
-    css.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
-    document.head.appendChild(css);
-    return function () {
-        // Force restyle
-        (function () { return window.getComputedStyle(document.body); })();
-        // Wait for next tick before removing
-        setTimeout(function () {
-            document.head.removeChild(css);
-        }, 1);
-    };
-};
-var getSystemTheme = function (e) {
-    if (!e)
-        e = window.matchMedia(MEDIA);
-    var isDark = e.matches;
-    var systemTheme = isDark ? "dark" : "light";
-    return systemTheme;
-};
-var encodeBase64 = function (str) {
-    return isServer ? Buffer.from(str).toString("base64") : btoa(str);
-};
 export default useTheme;