@koine/next 1.0.58 → 1.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DisableErrorOverlay.d.ts +7 -0
- package/DisableErrorOverlay.js +13 -0
- package/Link.d.ts +1 -1
- package/ThemeContext.d.ts +17 -0
- package/ThemeContext.js +7 -0
- package/ThemeProvider.d.ts +35 -0
- package/ThemeProvider.js +246 -0
- package/app/css/AppTheme.d.ts +1 -1
- package/app/css/AppTheme.js +1 -1
- package/index.d.ts +3 -0
- package/index.js +3 -0
- package/node/DisableErrorOverlay.js +18 -0
- package/node/ThemeContext.js +10 -0
- package/node/ThemeProvider.js +250 -0
- package/node/app/css/AppTheme.js +2 -2
- package/node/index.js +3 -0
- package/node/useTheme.js +3 -255
- package/package.json +15 -15
- package/useTheme.d.ts +3 -43
- package/useTheme.js +2 -253
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import Head from "next/head";
|
|
3
|
+
/**
|
|
4
|
+
* Disable error overlay during `dev`
|
|
5
|
+
*
|
|
6
|
+
* @see https://github.com/vercel/next.js/discussions/13387#discussioncomment-101564
|
|
7
|
+
*/
|
|
8
|
+
export var DisableErrorOverlay = function () {
|
|
9
|
+
return (_jsx(Head, { children: process.env.NODE_ENV !== "production" && (_jsx("script", { dangerouslySetInnerHTML: {
|
|
10
|
+
__html: "window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});",
|
|
11
|
+
} })) }));
|
|
12
|
+
};
|
|
13
|
+
export default DisableErrorOverlay;
|
package/Link.d.ts
CHANGED
|
@@ -6,5 +6,5 @@ export declare type LinkProps = Omit<React.ComponentPropsWithRef<"a">, "href"> &
|
|
|
6
6
|
/**
|
|
7
7
|
* @see https://next.js.org/docs/api-reference/next/link
|
|
8
8
|
*/
|
|
9
|
-
export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | "title" | "replace" | "slot" | "style" | "children" | "hidden" | "type" | "locale" | "rel" | "href" | "hrefLang" | "property" | "id" | "prefetch" | "onLoad" | "color" | "download" | "media" | "ping" | "target" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "
|
|
9
|
+
export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | "title" | "replace" | "slot" | "style" | "children" | "hidden" | "type" | "locale" | "rel" | "href" | "hrefLang" | "property" | "id" | "prefetch" | "onLoad" | "dangerouslySetInnerHTML" | "color" | "download" | "media" | "ping" | "target" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "soft" | "scroll" | "shallow" | "legacyBehavior" | "Link"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
10
10
|
export default Link;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type ThemeContextProps = {
|
|
3
|
+
/** List of all available theme names */
|
|
4
|
+
themes: string[];
|
|
5
|
+
/** Forced theme name for the current page */
|
|
6
|
+
forcedTheme?: string;
|
|
7
|
+
/** Update the theme */
|
|
8
|
+
setTheme: (theme: string) => void;
|
|
9
|
+
/** Active theme name */
|
|
10
|
+
theme?: string;
|
|
11
|
+
/** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
|
|
12
|
+
resolvedTheme?: string;
|
|
13
|
+
/** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
|
|
14
|
+
systemTheme?: "dark" | "light";
|
|
15
|
+
};
|
|
16
|
+
export declare const ThemeContext: import("react").Context<ThemeContextProps>;
|
|
17
|
+
export default ThemeContext;
|
package/ThemeContext.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type ValueObject = {
|
|
3
|
+
[themeName: string]: string;
|
|
4
|
+
};
|
|
5
|
+
export declare type ThemeProviderProps = React.PropsWithChildren<{
|
|
6
|
+
/** List of all available theme names */
|
|
7
|
+
themes?: string[];
|
|
8
|
+
/** Forced theme name for the current page */
|
|
9
|
+
forcedTheme?: string;
|
|
10
|
+
/** Whether to switch between dark and light themes based on prefers-color-scheme */
|
|
11
|
+
enableSystem?: boolean;
|
|
12
|
+
/** Disable all CSS transitions when switching themes */
|
|
13
|
+
disableTransitionOnChange?: boolean;
|
|
14
|
+
/** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
|
|
15
|
+
enableColorScheme?: boolean;
|
|
16
|
+
/** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
|
|
17
|
+
defaultTheme?: string;
|
|
18
|
+
/** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
|
|
19
|
+
attribute?: string | "class";
|
|
20
|
+
/** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
|
|
21
|
+
value?: ValueObject;
|
|
22
|
+
/** Nonce string to pass to the inline script for CSP headers */
|
|
23
|
+
nonce?: string;
|
|
24
|
+
}>;
|
|
25
|
+
/**
|
|
26
|
+
* @borrows [next-themes](https://github.com/pacocoursey/next-themes)
|
|
27
|
+
*
|
|
28
|
+
* Differences:
|
|
29
|
+
*
|
|
30
|
+
* - enableColorScheme: `false` by default (instead of `true`), this plays more
|
|
31
|
+
* nicely with tailwind `dark` class mode as dark theme is supposed to be only
|
|
32
|
+
* controlled by tailwind modifiers
|
|
33
|
+
*/
|
|
34
|
+
export declare const ThemeProvider: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, themes, defaultTheme, attribute, value, children, nonce, }: ThemeProviderProps) => JSX.Element;
|
|
35
|
+
export default ThemeProvider;
|
package/ThemeProvider.js
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import { __assign, __spreadArray } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useEffect, useState, memo } from "react";
|
|
4
|
+
import NextScript from "next/script";
|
|
5
|
+
import { isServer } from "@koine/utils";
|
|
6
|
+
import { ThemeContext } from "./ThemeContext";
|
|
7
|
+
var colorSchemes = ["light", "dark"];
|
|
8
|
+
var MEDIA = "(prefers-color-scheme: dark)";
|
|
9
|
+
var THEME_STORAGE_KEY = "theme";
|
|
10
|
+
/**
|
|
11
|
+
* @borrows [next-themes](https://github.com/pacocoursey/next-themes)
|
|
12
|
+
*
|
|
13
|
+
* Differences:
|
|
14
|
+
*
|
|
15
|
+
* - enableColorScheme: `false` by default (instead of `true`), this plays more
|
|
16
|
+
* nicely with tailwind `dark` class mode as dark theme is supposed to be only
|
|
17
|
+
* controlled by tailwind modifiers
|
|
18
|
+
*/
|
|
19
|
+
export var ThemeProvider = function (_a) {
|
|
20
|
+
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;
|
|
21
|
+
var _g = useState(function () {
|
|
22
|
+
return getTheme(THEME_STORAGE_KEY, defaultTheme);
|
|
23
|
+
}), theme = _g[0], setThemeState = _g[1];
|
|
24
|
+
var _h = useState(function () {
|
|
25
|
+
return getTheme(THEME_STORAGE_KEY);
|
|
26
|
+
}), resolvedTheme = _h[0], setResolvedTheme = _h[1];
|
|
27
|
+
var attrs = !value ? themes : Object.values(value);
|
|
28
|
+
var applyTheme = useCallback(function (theme) {
|
|
29
|
+
var _a;
|
|
30
|
+
var resolved = theme;
|
|
31
|
+
if (isServer || !resolved)
|
|
32
|
+
return;
|
|
33
|
+
// If theme is system, resolve it before setting theme
|
|
34
|
+
if (theme === "system" && enableSystem) {
|
|
35
|
+
resolved = getSystemTheme();
|
|
36
|
+
}
|
|
37
|
+
var name = value ? value[resolved] : resolved;
|
|
38
|
+
var enable = disableTransitionOnChange ? disableAnimation() : null;
|
|
39
|
+
var d = document.documentElement;
|
|
40
|
+
if (attribute === "class") {
|
|
41
|
+
(_a = d.classList).remove.apply(_a, attrs);
|
|
42
|
+
if (name)
|
|
43
|
+
d.classList.add(name);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
if (name) {
|
|
47
|
+
d.setAttribute(attribute, name);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
d.removeAttribute(attribute);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (enableColorScheme) {
|
|
54
|
+
var fallback = colorSchemes.includes(defaultTheme)
|
|
55
|
+
? defaultTheme
|
|
56
|
+
: "";
|
|
57
|
+
var colorScheme = colorSchemes.includes(resolved)
|
|
58
|
+
? resolved
|
|
59
|
+
: fallback;
|
|
60
|
+
d.style.colorScheme = colorScheme;
|
|
61
|
+
}
|
|
62
|
+
enable === null || enable === void 0 ? void 0 : enable();
|
|
63
|
+
}, [
|
|
64
|
+
attribute,
|
|
65
|
+
attrs,
|
|
66
|
+
defaultTheme,
|
|
67
|
+
disableTransitionOnChange,
|
|
68
|
+
enableColorScheme,
|
|
69
|
+
enableSystem,
|
|
70
|
+
value,
|
|
71
|
+
]);
|
|
72
|
+
var setTheme = useCallback(function (theme) {
|
|
73
|
+
setThemeState(theme);
|
|
74
|
+
// Save to storage
|
|
75
|
+
try {
|
|
76
|
+
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
77
|
+
}
|
|
78
|
+
catch (e) {
|
|
79
|
+
// Unsupported
|
|
80
|
+
}
|
|
81
|
+
}, []);
|
|
82
|
+
var handleMediaQuery = useCallback(function (e) {
|
|
83
|
+
var resolved = getSystemTheme(e);
|
|
84
|
+
setResolvedTheme(resolved);
|
|
85
|
+
if (theme === "system" && enableSystem && !forcedTheme) {
|
|
86
|
+
applyTheme("system");
|
|
87
|
+
}
|
|
88
|
+
}, [theme, enableSystem, forcedTheme, applyTheme]);
|
|
89
|
+
// Always listen to System preference
|
|
90
|
+
useEffect(function () {
|
|
91
|
+
var media = window.matchMedia(MEDIA);
|
|
92
|
+
// Intentionally use deprecated listener methods to support iOS & old browsers
|
|
93
|
+
media.addListener(handleMediaQuery);
|
|
94
|
+
handleMediaQuery(media);
|
|
95
|
+
return function () { return media.removeListener(handleMediaQuery); };
|
|
96
|
+
}, [handleMediaQuery]);
|
|
97
|
+
// localStorage event handling
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
var handleStorage = function (e) {
|
|
100
|
+
if (e.key !== THEME_STORAGE_KEY) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
|
|
104
|
+
var theme = e.newValue || defaultTheme;
|
|
105
|
+
setTheme(theme);
|
|
106
|
+
};
|
|
107
|
+
window.addEventListener("storage", handleStorage);
|
|
108
|
+
return function () { return window.removeEventListener("storage", handleStorage); };
|
|
109
|
+
}, [defaultTheme, setTheme]);
|
|
110
|
+
// Whenever theme or forcedTheme changes, apply it
|
|
111
|
+
useEffect(function () {
|
|
112
|
+
applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
|
|
113
|
+
}, [applyTheme, forcedTheme, theme]);
|
|
114
|
+
return (_jsxs(ThemeContext.Provider, __assign({ value: {
|
|
115
|
+
theme: theme,
|
|
116
|
+
setTheme: setTheme,
|
|
117
|
+
forcedTheme: forcedTheme,
|
|
118
|
+
resolvedTheme: theme === "system" ? resolvedTheme : theme,
|
|
119
|
+
themes: enableSystem ? __spreadArray(__spreadArray([], themes, true), ["system"], false) : themes,
|
|
120
|
+
systemTheme: (enableSystem ? resolvedTheme : undefined),
|
|
121
|
+
} }, { children: [_jsx(ThemeScript, __assign({}, {
|
|
122
|
+
forcedTheme: forcedTheme,
|
|
123
|
+
disableTransitionOnChange: disableTransitionOnChange,
|
|
124
|
+
enableSystem: enableSystem,
|
|
125
|
+
enableColorScheme: enableColorScheme,
|
|
126
|
+
themes: themes,
|
|
127
|
+
defaultTheme: defaultTheme,
|
|
128
|
+
attribute: attribute,
|
|
129
|
+
value: value,
|
|
130
|
+
children: children,
|
|
131
|
+
attrs: attrs,
|
|
132
|
+
nonce: nonce,
|
|
133
|
+
})), children] })));
|
|
134
|
+
};
|
|
135
|
+
var ThemeScript = memo(function (_a) {
|
|
136
|
+
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;
|
|
137
|
+
var defaultSystem = defaultTheme === "system";
|
|
138
|
+
// Code-golfing the amount of characters in the script
|
|
139
|
+
var optimization = (function () {
|
|
140
|
+
var removeClasses = "d.remove(".concat(attrs
|
|
141
|
+
.map(function (t) { return "'".concat(t, "'"); })
|
|
142
|
+
.join(","), ")");
|
|
143
|
+
return "var d=document.documentElement.classList;".concat(removeClasses, ";");
|
|
144
|
+
})();
|
|
145
|
+
var fallbackColorScheme = (function () {
|
|
146
|
+
if (!enableColorScheme) {
|
|
147
|
+
return "";
|
|
148
|
+
}
|
|
149
|
+
var fallback = colorSchemes.includes(defaultTheme)
|
|
150
|
+
? defaultTheme
|
|
151
|
+
: null;
|
|
152
|
+
if (fallback) {
|
|
153
|
+
return "if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'".concat(defaultTheme, "'");
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
return "if(e==='light'||e==='dark')d.style.colorScheme=e";
|
|
157
|
+
}
|
|
158
|
+
})();
|
|
159
|
+
var updateDOM = function (name, literal, setColorScheme) {
|
|
160
|
+
if (literal === void 0) { literal = false; }
|
|
161
|
+
if (setColorScheme === void 0) { setColorScheme = true; }
|
|
162
|
+
var resolvedName = value ? value[name] : name;
|
|
163
|
+
var val = literal ? name + "|| ''" : "'".concat(resolvedName, "'");
|
|
164
|
+
var text = "";
|
|
165
|
+
// MUCH faster to set colorScheme alongside HTML attribute/class
|
|
166
|
+
// as it only incurs 1 style recalculation rather than 2
|
|
167
|
+
// This can save over 250ms of work for pages with big DOM
|
|
168
|
+
if (enableColorScheme &&
|
|
169
|
+
setColorScheme &&
|
|
170
|
+
!literal &&
|
|
171
|
+
colorSchemes.includes(name)) {
|
|
172
|
+
text += "d.style.colorScheme = '".concat(name, "';");
|
|
173
|
+
}
|
|
174
|
+
if (attribute === "class") {
|
|
175
|
+
if (literal || resolvedName) {
|
|
176
|
+
text += "d.add(".concat(val, ")");
|
|
177
|
+
}
|
|
178
|
+
else {
|
|
179
|
+
text += "null";
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
else {
|
|
183
|
+
if (resolvedName) {
|
|
184
|
+
text += "d[s](n, ".concat(val, ")");
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
return text;
|
|
188
|
+
};
|
|
189
|
+
var scriptSrc = (function () {
|
|
190
|
+
if (forcedTheme) {
|
|
191
|
+
return "!function(){".concat(optimization).concat(updateDOM(forcedTheme), "}()");
|
|
192
|
+
}
|
|
193
|
+
if (enableSystem) {
|
|
194
|
+
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
|
|
195
|
+
? "else{" + updateDOM(defaultTheme, false, false) + "}"
|
|
196
|
+
: "").concat(fallbackColorScheme, "}catch(e){}}()");
|
|
197
|
+
}
|
|
198
|
+
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){}}();");
|
|
199
|
+
})();
|
|
200
|
+
// We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
|
|
201
|
+
// However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
|
|
202
|
+
// But our script cannot be external because it changes at runtime based on React props
|
|
203
|
+
// so we trick next/script by passing `src` as a base64 JS script
|
|
204
|
+
var encodedScript = "data:text/javascript;base64,".concat(encodeBase64(scriptSrc));
|
|
205
|
+
return (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
|
|
206
|
+
},
|
|
207
|
+
// Never re-render this component
|
|
208
|
+
function () { return true; });
|
|
209
|
+
// Helpers
|
|
210
|
+
var getTheme = function (key, fallback) {
|
|
211
|
+
if (isServer)
|
|
212
|
+
return undefined;
|
|
213
|
+
var theme;
|
|
214
|
+
try {
|
|
215
|
+
theme = localStorage.getItem(key) || undefined;
|
|
216
|
+
}
|
|
217
|
+
catch (e) {
|
|
218
|
+
// Unsupported
|
|
219
|
+
}
|
|
220
|
+
return theme || fallback;
|
|
221
|
+
};
|
|
222
|
+
var disableAnimation = function () {
|
|
223
|
+
var d = document;
|
|
224
|
+
var css = d.createElement("style");
|
|
225
|
+
css.appendChild(d.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
|
|
226
|
+
d.head.appendChild(css);
|
|
227
|
+
return function () {
|
|
228
|
+
// Force restyle
|
|
229
|
+
(function () { return window.getComputedStyle(d.body); })();
|
|
230
|
+
// Wait for next tick before removing
|
|
231
|
+
setTimeout(function () {
|
|
232
|
+
d.head.removeChild(css);
|
|
233
|
+
}, 1);
|
|
234
|
+
};
|
|
235
|
+
};
|
|
236
|
+
var getSystemTheme = function (e) {
|
|
237
|
+
if (!e)
|
|
238
|
+
e = window.matchMedia(MEDIA);
|
|
239
|
+
var isDark = e.matches;
|
|
240
|
+
var systemTheme = isDark ? "dark" : "light";
|
|
241
|
+
return systemTheme;
|
|
242
|
+
};
|
|
243
|
+
var encodeBase64 = function (str) {
|
|
244
|
+
return isServer ? Buffer.from(str).toString("base64") : btoa(str);
|
|
245
|
+
};
|
|
246
|
+
export default ThemeProvider;
|
package/app/css/AppTheme.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { AppProps as NextAppProps } from "next/app";
|
|
3
|
-
import { type ThemeProviderProps } from "../../
|
|
3
|
+
import { type ThemeProviderProps } from "../../ThemeProvider";
|
|
4
4
|
export declare type AppThemeProps = React.PropsWithChildren<NextAppProps & {
|
|
5
5
|
theme: ThemeProviderProps["defaultTheme"];
|
|
6
6
|
}>;
|
package/app/css/AppTheme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
// import { ThemeVanillaProvider, ThemeVanillaValue } from "@koine/react";
|
|
4
|
-
import { ThemeProvider } from "../../
|
|
4
|
+
import { ThemeProvider } from "../../ThemeProvider";
|
|
5
5
|
/**
|
|
6
6
|
* App theme with vanilla class based theme (good for `tailwindcss`)
|
|
7
7
|
*/
|
package/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from "./AnalyticsGoogle";
|
|
2
|
+
export * from "./DisableErrorOverlay";
|
|
2
3
|
export * from "./DynamicNamespaces";
|
|
3
4
|
export * from "./Favicon";
|
|
4
5
|
export * from "./getSiteUrl";
|
|
@@ -13,6 +14,8 @@ export * from "./revalidate";
|
|
|
13
14
|
export * from "./Seo";
|
|
14
15
|
export * from "./SeoDefaults";
|
|
15
16
|
export * from "./T";
|
|
17
|
+
export * from "./ThemeContext";
|
|
18
|
+
export * from "./ThemeProvider";
|
|
16
19
|
export * from "./to";
|
|
17
20
|
export * from "./translationAsOptions";
|
|
18
21
|
export * from "./types-i18n";
|
package/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from "./AnalyticsGoogle";
|
|
2
2
|
// export * from "./createEmotionCache";
|
|
3
|
+
export * from "./DisableErrorOverlay";
|
|
3
4
|
export * from "./DynamicNamespaces";
|
|
4
5
|
export * from "./Favicon";
|
|
5
6
|
export * from "./getSiteUrl";
|
|
@@ -15,6 +16,8 @@ export * from "./Seo";
|
|
|
15
16
|
// export * from "./seoBuildTags";
|
|
16
17
|
export * from "./SeoDefaults";
|
|
17
18
|
export * from "./T";
|
|
19
|
+
export * from "./ThemeContext";
|
|
20
|
+
export * from "./ThemeProvider";
|
|
18
21
|
export * from "./to";
|
|
19
22
|
export * from "./translationAsOptions";
|
|
20
23
|
export * from "./types-i18n";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DisableErrorOverlay = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var head_1 = tslib_1.__importDefault(require("next/head"));
|
|
7
|
+
/**
|
|
8
|
+
* Disable error overlay during `dev`
|
|
9
|
+
*
|
|
10
|
+
* @see https://github.com/vercel/next.js/discussions/13387#discussioncomment-101564
|
|
11
|
+
*/
|
|
12
|
+
var DisableErrorOverlay = function () {
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)(head_1.default, { children: process.env.NODE_ENV !== "production" && ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: {
|
|
14
|
+
__html: "window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});",
|
|
15
|
+
} })) }));
|
|
16
|
+
};
|
|
17
|
+
exports.DisableErrorOverlay = DisableErrorOverlay;
|
|
18
|
+
exports.default = exports.DisableErrorOverlay;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ThemeContext = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
exports.ThemeContext = (0, react_1.createContext)({
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
7
|
+
setTheme: function (_) { },
|
|
8
|
+
themes: [],
|
|
9
|
+
});
|
|
10
|
+
exports.default = exports.ThemeContext;
|