@molecule/app-react 1.4.2 → 1.4.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAUhD;AAuBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,IAAI,cAAc,
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAUhD;AAuBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAoFzC;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,KAAK,CAGvC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,OAAO,GAAG,MAAM,CAG/C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,KAAK,CAAC,QAAQ,CAAC,CAGhD"}
|
package/dist/hooks/useTheme.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @module
|
|
5
5
|
*/
|
|
6
|
-
import { useCallback, useContext,
|
|
6
|
+
import { useCallback, useContext, useMemo, useSyncExternalStore } from 'react';
|
|
7
7
|
import { t } from '@molecule/app-i18n';
|
|
8
8
|
import { ThemeContext } from '../contexts.js';
|
|
9
9
|
/**
|
|
@@ -55,23 +55,41 @@ function subscribeToThemeProvider(provider, callback) {
|
|
|
55
55
|
*/
|
|
56
56
|
export function useTheme() {
|
|
57
57
|
const provider = useThemeProvider();
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
// The provider as an external store: the theme and its name, re-read only
|
|
59
|
+
// when the provider announces a change. Reading through a cache (rather than
|
|
60
|
+
// calling `getTheme()` on every render) keeps the snapshot stable for a
|
|
61
|
+
// provider that builds a fresh theme object per call — React treats a
|
|
62
|
+
// snapshot that changes between two reads with no change in between as a
|
|
63
|
+
// bug and re-renders without end.
|
|
64
|
+
const store = useMemo(() => {
|
|
65
|
+
const readName = () => typeof provider
|
|
61
66
|
.getThemeName === 'function'
|
|
62
67
|
? provider.getThemeName()
|
|
63
68
|
: provider.getTheme().name;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
let theme = provider.getTheme();
|
|
70
|
+
let name = readName();
|
|
71
|
+
return {
|
|
72
|
+
subscribe: (onChange) => {
|
|
73
|
+
theme = provider.getTheme();
|
|
74
|
+
name = readName();
|
|
75
|
+
return subscribeToThemeProvider(provider, () => {
|
|
76
|
+
theme = provider.getTheme();
|
|
77
|
+
name = readName();
|
|
78
|
+
onChange();
|
|
79
|
+
});
|
|
80
|
+
},
|
|
81
|
+
getTheme: () => theme,
|
|
82
|
+
getName: () => name,
|
|
83
|
+
};
|
|
74
84
|
}, [provider]);
|
|
85
|
+
// On the server, and on the client WHILE HYDRATING, React reads the server
|
|
86
|
+
// snapshot instead of the live one — the theme the markup was rendered with
|
|
87
|
+
// (`getServerTheme()`, when the provider has one) — and re-renders with the
|
|
88
|
+
// live theme right after. A client that restored a persisted choice or
|
|
89
|
+
// follows the OS preference therefore renders the HTML it was sent first,
|
|
90
|
+
// instead of a mismatch React resolves by throwing that HTML away.
|
|
91
|
+
const theme = useSyncExternalStore(store.subscribe, store.getTheme, () => provider.getServerTheme?.() ?? store.getTheme());
|
|
92
|
+
const themeName = useSyncExternalStore(store.subscribe, store.getName, () => provider.getServerTheme?.().name ?? store.getName());
|
|
75
93
|
// Memoized action wrappers
|
|
76
94
|
const setTheme = useCallback((name) => provider.setTheme(name), [provider]);
|
|
77
95
|
const toggleTheme = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-react",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"description": "React framework bindings for molecule.dev",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"react": "19.2.8",
|
|
68
68
|
"react-dom": "19.2.8",
|
|
69
69
|
"typescript": "6.0.3",
|
|
70
|
-
"vitest": "4.1.
|
|
70
|
+
"vitest": "4.1.11"
|
|
71
71
|
},
|
|
72
72
|
"repository": {
|
|
73
73
|
"type": "git",
|