@tooee/themes 0.1.15 → 0.1.16
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/dist/context.d.ts.map +1 -1
- package/dist/context.js +18 -16
- package/dist/context.js.map +1 -1
- package/package.json +7 -7
- package/src/context.tsx +30 -24
package/dist/context.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EACL,KAAK,KAAK,EAMX,MAAM,aAAa,CAAA;AAMpB,UAAU,iBAAiB;IACzB,KAAK,EAAE,aAAa,CAAA;IACpB,MAAM,EAAE,WAAW,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AASD,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,aAgB3F;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAE5C;AAMD,UAAU,yBAA0B,SAAQ,iBAAiB;IAC3D,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC9D,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAID,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,WAAW,EACX,QAAQ,GACT,EAAE,0BAA0B,aAuD5B;AAED,wBAAgB,gBAAgB,IAAI,yBAAyB,CAI5D"}
|
package/dist/context.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@opentui/react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useState, useCallback } from "react";
|
|
2
|
+
import { createContext, useContext, useState, useCallback, useMemo } from "react";
|
|
3
3
|
import { writeGlobalConfig } from "@tooee/config";
|
|
4
4
|
import { buildTheme, getThemeNames, defaultTheme, DEFAULT_THEME_NAME, DEFAULT_MODE, } from "./loader.js";
|
|
5
5
|
const ThemeContext = createContext({
|
|
@@ -9,17 +9,18 @@ const ThemeContext = createContext({
|
|
|
9
9
|
mode: defaultTheme.mode,
|
|
10
10
|
});
|
|
11
11
|
export function ThemeProvider({ name, mode, theme: themeProp, children }) {
|
|
12
|
-
const resolved =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
const resolved = useMemo(() => {
|
|
13
|
+
if (themeProp) {
|
|
14
|
+
return {
|
|
15
|
+
theme: themeProp.colors,
|
|
16
|
+
syntax: themeProp.syntax,
|
|
17
|
+
name: themeProp.name,
|
|
18
|
+
mode: themeProp.mode,
|
|
19
|
+
};
|
|
18
20
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
})();
|
|
21
|
+
const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE);
|
|
22
|
+
return { theme: t.colors, syntax: t.syntax, name: t.name, mode: t.mode };
|
|
23
|
+
}, [themeProp, name, mode]);
|
|
23
24
|
return _jsx(ThemeContext.Provider, { value: resolved, children: children });
|
|
24
25
|
}
|
|
25
26
|
export function useTheme() {
|
|
@@ -27,10 +28,10 @@ export function useTheme() {
|
|
|
27
28
|
}
|
|
28
29
|
const ThemeSwitcherContext = createContext(null);
|
|
29
30
|
export function ThemeSwitcherProvider({ initialTheme, initialMode, children, }) {
|
|
30
|
-
const allThemes = getThemeNames();
|
|
31
|
+
const allThemes = useMemo(() => getThemeNames(), []);
|
|
31
32
|
const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME);
|
|
32
33
|
const [mode, _setMode] = useState(initialMode ?? DEFAULT_MODE);
|
|
33
|
-
const theme = buildTheme(themeName, mode);
|
|
34
|
+
const theme = useMemo(() => buildTheme(themeName, mode), [themeName, mode]);
|
|
34
35
|
const nextTheme = useCallback(() => {
|
|
35
36
|
const idx = allThemes.indexOf(themeName);
|
|
36
37
|
const next = allThemes[(idx + 1) % allThemes.length];
|
|
@@ -49,7 +50,7 @@ export function ThemeSwitcherProvider({ initialTheme, initialMode, children, })
|
|
|
49
50
|
writeGlobalConfig({ theme: { name, mode } });
|
|
50
51
|
}
|
|
51
52
|
}, [mode]);
|
|
52
|
-
const value = {
|
|
53
|
+
const value = useMemo(() => ({
|
|
53
54
|
theme: theme.colors,
|
|
54
55
|
syntax: theme.syntax,
|
|
55
56
|
name: theme.name,
|
|
@@ -58,8 +59,9 @@ export function ThemeSwitcherProvider({ initialTheme, initialMode, children, })
|
|
|
58
59
|
prevTheme,
|
|
59
60
|
setTheme: setThemeByName,
|
|
60
61
|
allThemes,
|
|
61
|
-
};
|
|
62
|
-
|
|
62
|
+
}), [theme, mode, nextTheme, prevTheme, setThemeByName, allThemes]);
|
|
63
|
+
const themeValue = useMemo(() => ({ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }), [theme, mode]);
|
|
64
|
+
return (_jsx(ThemeSwitcherContext.Provider, { value: value, children: _jsx(ThemeContext.Provider, { value: themeValue, children: children }) }));
|
|
63
65
|
}
|
|
64
66
|
export function useThemeSwitcher() {
|
|
65
67
|
const ctx = useContext(ThemeSwitcherContext);
|
package/dist/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tooee/themes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"description": "Theme management with 34 bundled themes for Tooee",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cli",
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"typecheck": "tsc --noEmit"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tooee/config": "0.1.
|
|
41
|
-
"@tooee/fuzzy": "0.1.
|
|
40
|
+
"@tooee/config": "0.1.16",
|
|
41
|
+
"@tooee/fuzzy": "0.1.16"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@opentui/core": "^0.
|
|
45
|
-
"@opentui/react": "^0.
|
|
44
|
+
"@opentui/core": "^0.2.15",
|
|
45
|
+
"@opentui/react": "^0.2.15",
|
|
46
46
|
"@types/bun": "^1.3.10",
|
|
47
47
|
"@types/react": "^19.2.14",
|
|
48
48
|
"typescript": "^5.9.3"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@opentui/core": "^0.
|
|
52
|
-
"@opentui/react": "^0.
|
|
51
|
+
"@opentui/core": "^0.2.15",
|
|
52
|
+
"@opentui/react": "^0.2.15",
|
|
53
53
|
"react": "^18.0.0 || ^19.0.0"
|
|
54
54
|
}
|
|
55
55
|
}
|
package/src/context.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext, useContext, useState, useCallback, type ReactNode } from "react"
|
|
1
|
+
import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react"
|
|
2
2
|
import { type SyntaxStyle } from "@opentui/core"
|
|
3
3
|
import { writeGlobalConfig } from "@tooee/config"
|
|
4
4
|
import type { ResolvedTheme } from "./types.js"
|
|
@@ -40,17 +40,19 @@ export interface ThemeProviderProps {
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
export function ThemeProvider({ name, mode, theme: themeProp, children }: ThemeProviderProps) {
|
|
43
|
-
const resolved =
|
|
44
|
-
|
|
43
|
+
const resolved = useMemo<ThemeContextValue>(() => {
|
|
44
|
+
if (themeProp) {
|
|
45
|
+
return {
|
|
45
46
|
theme: themeProp.colors,
|
|
46
47
|
syntax: themeProp.syntax,
|
|
47
48
|
name: themeProp.name,
|
|
48
49
|
mode: themeProp.mode,
|
|
49
50
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE)
|
|
54
|
+
return { theme: t.colors, syntax: t.syntax, name: t.name, mode: t.mode }
|
|
55
|
+
}, [themeProp, name, mode])
|
|
54
56
|
|
|
55
57
|
return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>
|
|
56
58
|
}
|
|
@@ -83,11 +85,11 @@ export function ThemeSwitcherProvider({
|
|
|
83
85
|
initialMode,
|
|
84
86
|
children,
|
|
85
87
|
}: ThemeSwitcherProviderProps) {
|
|
86
|
-
const allThemes = getThemeNames()
|
|
88
|
+
const allThemes = useMemo(() => getThemeNames(), [])
|
|
87
89
|
const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME)
|
|
88
90
|
const [mode, _setMode] = useState<"dark" | "light">(initialMode ?? DEFAULT_MODE)
|
|
89
91
|
|
|
90
|
-
const theme = buildTheme(themeName, mode)
|
|
92
|
+
const theme = useMemo(() => buildTheme(themeName, mode), [themeName, mode])
|
|
91
93
|
|
|
92
94
|
const nextTheme = useCallback(() => {
|
|
93
95
|
const idx = allThemes.indexOf(themeName)
|
|
@@ -113,24 +115,28 @@ export function ThemeSwitcherProvider({
|
|
|
113
115
|
[mode],
|
|
114
116
|
)
|
|
115
117
|
|
|
116
|
-
const value
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
const value = useMemo<ThemeSwitcherContextValue>(
|
|
119
|
+
() => ({
|
|
120
|
+
theme: theme.colors,
|
|
121
|
+
syntax: theme.syntax,
|
|
122
|
+
name: theme.name,
|
|
123
|
+
mode,
|
|
124
|
+
nextTheme,
|
|
125
|
+
prevTheme,
|
|
126
|
+
setTheme: setThemeByName,
|
|
127
|
+
allThemes,
|
|
128
|
+
}),
|
|
129
|
+
[theme, mode, nextTheme, prevTheme, setThemeByName, allThemes],
|
|
130
|
+
)
|
|
131
|
+
|
|
132
|
+
const themeValue = useMemo<ThemeContextValue>(
|
|
133
|
+
() => ({ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }),
|
|
134
|
+
[theme, mode],
|
|
135
|
+
)
|
|
126
136
|
|
|
127
137
|
return (
|
|
128
138
|
<ThemeSwitcherContext.Provider value={value}>
|
|
129
|
-
<ThemeContext.Provider
|
|
130
|
-
value={{ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }}
|
|
131
|
-
>
|
|
132
|
-
{children}
|
|
133
|
-
</ThemeContext.Provider>
|
|
139
|
+
<ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
|
|
134
140
|
</ThemeSwitcherContext.Provider>
|
|
135
141
|
)
|
|
136
142
|
}
|