@gusnips/react 0.9.7 → 0.9.8
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/README.md +3 -0
- package/dist/theme.d.ts +5 -0
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +7 -1
- package/dist/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/theme.test.ts +20 -0
- package/src/theme.ts +6 -1
package/README.md
CHANGED
|
@@ -378,6 +378,9 @@ What it does that the copies it replaced each missed at least once:
|
|
|
378
378
|
An inline one under that policy never runs, and nothing tells you.
|
|
379
379
|
- `"system"` follows the OS live, even when the person switched to it mid-page. A laptop that
|
|
380
380
|
turns dark at sunset takes the page with it.
|
|
381
|
+
- It writes to the page only when the theme changes. A page that removes `dark` for as long as
|
|
382
|
+
it is open, like a booking page that is always light, stays light until the theme really
|
|
383
|
+
changes.
|
|
381
384
|
- `themeColor: { light: "#fff", dark: "#111" }` moves `<meta name="theme-color">` too, so the
|
|
382
385
|
browser toolbar matches the page instead of the OS.
|
|
383
386
|
- `attribute: "data-theme"` writes `data-theme="dark"` instead of the `dark` class, and
|
package/dist/theme.d.ts
CHANGED
|
@@ -64,6 +64,11 @@ declare global {
|
|
|
64
64
|
*
|
|
65
65
|
* "system" is stored as the word, not as an empty key. An empty key means the default, and the
|
|
66
66
|
* default is not always "system".
|
|
67
|
+
*
|
|
68
|
+
* **It writes to the page when the theme changes, and at no other time.** A page may override
|
|
69
|
+
* the class for its own lifetime — a public booking page that is always light — and keeps that
|
|
70
|
+
* override until the theme really changes. Repainting on every resync would undo it a moment
|
|
71
|
+
* later, because `pageshow` fires on every load, not only on a back-forward restore.
|
|
67
72
|
*/
|
|
68
73
|
export declare function startTheme(options: ThemeOptions): ThemeController;
|
|
69
74
|
export interface Theme {
|
package/dist/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAsCA,kFAAkF;AAClF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,mCAAmC;AACnC,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACnC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,aAAa,CAAC;IAC7B,iEAAiE;IACjE,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAC7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,+DAA+D;QAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;KACnC;CACF;AAED
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAsCA,kFAAkF;AAClF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,mCAAmC;AACnC,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACnC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,aAAa,CAAC;IAC7B,iEAAiE;IACjE,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAC7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,+DAA+D;QAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;KACnC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,eAAe,CAsEjE;AAED,MAAM,WAAW,KAAK;IACpB,4EAA4E;IAC5E,QAAQ,IAAI,aAAa,GAAG;QAAE,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAA;KAAE,CAAC;IAC/D,oFAAoF;IACpF,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,uFAAuF;IACvF,WAAW,IAAI,aAAa,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,KAAK,CAiBxD"}
|
package/dist/theme.js
CHANGED
|
@@ -57,6 +57,11 @@ import { useSyncExternalStore } from "react";
|
|
|
57
57
|
*
|
|
58
58
|
* "system" is stored as the word, not as an empty key. An empty key means the default, and the
|
|
59
59
|
* default is not always "system".
|
|
60
|
+
*
|
|
61
|
+
* **It writes to the page when the theme changes, and at no other time.** A page may override
|
|
62
|
+
* the class for its own lifetime — a public booking page that is always light — and keeps that
|
|
63
|
+
* override until the theme really changes. Repainting on every resync would undo it a moment
|
|
64
|
+
* later, because `pageshow` fires on every load, not only on a back-forward restore.
|
|
60
65
|
*/
|
|
61
66
|
export function startTheme(options) {
|
|
62
67
|
const running = window.__frontkitTheme;
|
|
@@ -91,7 +96,8 @@ export function startTheme(options) {
|
|
|
91
96
|
let snapshot = { mode: initial, resolved: resolve(initial) };
|
|
92
97
|
const apply = (mode) => {
|
|
93
98
|
const resolved = resolve(mode);
|
|
94
|
-
|
|
99
|
+
if (resolved !== snapshot.resolved)
|
|
100
|
+
paint(resolved);
|
|
95
101
|
if (mode === snapshot.mode && resolved === snapshot.resolved)
|
|
96
102
|
return;
|
|
97
103
|
snapshot = { mode, resolved };
|
package/dist/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAoD7C
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gusnips/react",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.8",
|
|
4
4
|
"description": "The headless runtime under a Vite + React SPA: typed fetch client with single-flight refresh, auth store, query defaults, route guards, error boundary, stale-tab recovery, i18n bootstrap.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
package/src/theme.test.ts
CHANGED
|
@@ -78,6 +78,8 @@ function browser({
|
|
|
78
78
|
storageEvent: (key: string | null) => fire("storage", { key }),
|
|
79
79
|
backForwardRestore: () => fire("pageshow"),
|
|
80
80
|
block: () => (state.blocked = true),
|
|
81
|
+
/** A page that forces light for its own lifetime, the way a public booking page does. */
|
|
82
|
+
forceLight: () => classes.delete("dark"),
|
|
81
83
|
};
|
|
82
84
|
}
|
|
83
85
|
|
|
@@ -213,6 +215,24 @@ describe("startTheme", () => {
|
|
|
213
215
|
expect(listener).not.toHaveBeenCalled();
|
|
214
216
|
});
|
|
215
217
|
|
|
218
|
+
// `pageshow` fires on every load, not only on a back-forward restore, so a controller that
|
|
219
|
+
// repainted on every resync would undo a page's override a moment after the page set it.
|
|
220
|
+
it("writes to the page only when the theme changes, so a page can override it", () => {
|
|
221
|
+
const page = browser({ stored: "dark" });
|
|
222
|
+
const theme = startTheme(options);
|
|
223
|
+
page.forceLight();
|
|
224
|
+
|
|
225
|
+
page.backForwardRestore();
|
|
226
|
+
page.storageEvent(KEY);
|
|
227
|
+
page.osSwitches(true);
|
|
228
|
+
theme.setMode("dark");
|
|
229
|
+
expect(page.dark()).toBe(false);
|
|
230
|
+
|
|
231
|
+
page.otherTabPicks("light");
|
|
232
|
+
page.otherTabPicks("dark");
|
|
233
|
+
expect(page.dark()).toBe(true);
|
|
234
|
+
});
|
|
235
|
+
|
|
216
236
|
it("writes data-theme both ways when asked to", () => {
|
|
217
237
|
const page = browser({ stored: "dark" });
|
|
218
238
|
const theme = startTheme({ key: KEY, attribute: "data-theme" });
|
package/src/theme.ts
CHANGED
|
@@ -108,6 +108,11 @@ declare global {
|
|
|
108
108
|
*
|
|
109
109
|
* "system" is stored as the word, not as an empty key. An empty key means the default, and the
|
|
110
110
|
* default is not always "system".
|
|
111
|
+
*
|
|
112
|
+
* **It writes to the page when the theme changes, and at no other time.** A page may override
|
|
113
|
+
* the class for its own lifetime — a public booking page that is always light — and keeps that
|
|
114
|
+
* override until the theme really changes. Repainting on every resync would undo it a moment
|
|
115
|
+
* later, because `pageshow` fires on every load, not only on a back-forward restore.
|
|
111
116
|
*/
|
|
112
117
|
export function startTheme(options: ThemeOptions): ThemeController {
|
|
113
118
|
const running = window.__frontkitTheme;
|
|
@@ -142,7 +147,7 @@ export function startTheme(options: ThemeOptions): ThemeController {
|
|
|
142
147
|
let snapshot: ThemeSnapshot = { mode: initial, resolved: resolve(initial) };
|
|
143
148
|
const apply = (mode: ThemeMode) => {
|
|
144
149
|
const resolved = resolve(mode);
|
|
145
|
-
paint(resolved);
|
|
150
|
+
if (resolved !== snapshot.resolved) paint(resolved);
|
|
146
151
|
if (mode === snapshot.mode && resolved === snapshot.resolved) return;
|
|
147
152
|
snapshot = { mode, resolved };
|
|
148
153
|
listeners.forEach((listener) => listener());
|