react-native-unistyles 2.0.0-beta.7 → 2.0.0-rc.2
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 +22 -35
- package/lib/commonjs/core/UnistyleRegistry.js +15 -25
- package/lib/commonjs/core/UnistyleRegistry.js.map +1 -1
- package/lib/commonjs/core/UnistylesModule.js +187 -2
- package/lib/commonjs/core/UnistylesModule.js.map +1 -1
- package/lib/commonjs/core/UnistylesModule.native.js +9 -0
- package/lib/commonjs/core/UnistylesModule.native.js.map +1 -0
- package/lib/commonjs/core/UnistylesRuntime.js +64 -0
- package/lib/commonjs/core/UnistylesRuntime.js.map +1 -1
- package/lib/commonjs/createStyleSheet.js +5 -0
- package/lib/commonjs/createStyleSheet.js.map +1 -1
- package/lib/commonjs/hooks/useCSS.js +36 -1
- package/lib/commonjs/hooks/useCSS.js.map +1 -1
- package/lib/commonjs/hooks/useCSS.native.js +9 -0
- package/lib/commonjs/hooks/useCSS.native.js.map +1 -0
- package/lib/commonjs/index.js +16 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/normalizer/normalizer.js +1 -2
- package/lib/commonjs/normalizer/normalizer.js.map +1 -1
- package/lib/commonjs/useStyles.js +7 -2
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +2 -11
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/cssMediaQuery.js +3 -9
- package/lib/commonjs/utils/cssMediaQuery.js.map +1 -1
- package/lib/commonjs/utils/mq.js +17 -36
- package/lib/commonjs/utils/mq.js.map +1 -1
- package/lib/commonjs/utils/mqParser.js +1 -2
- package/lib/commonjs/utils/mqParser.js.map +1 -1
- package/lib/commonjs/utils/styles.js +34 -39
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/module/core/UnistyleRegistry.js +15 -25
- package/lib/module/core/UnistyleRegistry.js.map +1 -1
- package/lib/module/core/UnistylesModule.js +186 -2
- package/lib/module/core/UnistylesModule.js.map +1 -1
- package/lib/module/core/UnistylesModule.native.js +3 -0
- package/lib/module/core/UnistylesModule.native.js.map +1 -0
- package/lib/module/core/UnistylesRuntime.js +64 -0
- package/lib/module/core/UnistylesRuntime.js.map +1 -1
- package/lib/module/createStyleSheet.js +5 -0
- package/lib/module/createStyleSheet.js.map +1 -1
- package/lib/module/hooks/useCSS.js +36 -1
- package/lib/module/hooks/useCSS.js.map +1 -1
- package/lib/module/hooks/useCSS.native.js +2 -0
- package/lib/module/hooks/useCSS.native.js.map +1 -0
- package/lib/module/index.js +17 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/normalizer/normalizer.js +1 -2
- package/lib/module/normalizer/normalizer.js.map +1 -1
- package/lib/module/useStyles.js +7 -2
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +2 -11
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/cssMediaQuery.js +3 -9
- package/lib/module/utils/cssMediaQuery.js.map +1 -1
- package/lib/module/utils/mq.js +17 -36
- package/lib/module/utils/mq.js.map +1 -1
- package/lib/module/utils/mqParser.js +1 -2
- package/lib/module/utils/mqParser.js.map +1 -1
- package/lib/module/utils/styles.js +34 -39
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/typescript/src/core/UnistylesModule.d.ts +17 -4
- package/lib/typescript/src/core/UnistylesModule.d.ts.map +1 -1
- package/lib/typescript/src/core/UnistylesModule.native.d.ts +6 -0
- package/lib/typescript/src/core/UnistylesModule.native.d.ts.map +1 -0
- package/lib/typescript/src/core/UnistylesRuntime.d.ts +52 -0
- package/lib/typescript/src/core/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/createStyleSheet.d.ts +5 -0
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useCSS.d.ts +1 -1
- package/lib/typescript/src/hooks/useCSS.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useCSS.native.d.ts +3 -0
- package/lib/typescript/src/hooks/useCSS.native.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +16 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +6 -0
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/mq.d.ts +4 -0
- package/lib/typescript/src/utils/mq.d.ts.map +1 -1
- package/package.json +14 -16
- package/src/core/UnistylesModule.native.ts +7 -0
- package/src/core/UnistylesModule.ts +224 -4
- package/src/core/UnistylesRuntime.ts +52 -0
- package/src/createStyleSheet.ts +5 -0
- package/src/hooks/useCSS.native.ts +3 -0
- package/src/hooks/useCSS.ts +49 -1
- package/src/index.ts +16 -0
- package/src/useStyles.ts +6 -0
- package/src/utils/mq.ts +4 -0
- package/lib/commonjs/core/UnistylesModule.web.js +0 -199
- package/lib/commonjs/core/UnistylesModule.web.js.map +0 -1
- package/lib/commonjs/hooks/useCSS.web.js +0 -46
- package/lib/commonjs/hooks/useCSS.web.js.map +0 -1
- package/lib/module/core/UnistylesModule.web.js +0 -192
- package/lib/module/core/UnistylesModule.web.js.map +0 -1
- package/lib/module/hooks/useCSS.web.js +0 -39
- package/lib/module/hooks/useCSS.web.js.map +0 -1
- package/lib/typescript/src/core/UnistylesModule.web.d.ts +0 -19
- package/lib/typescript/src/core/UnistylesModule.web.d.ts.map +0 -1
- package/lib/typescript/src/hooks/useCSS.web.d.ts +0 -3
- package/lib/typescript/src/hooks/useCSS.web.d.ts.map +0 -1
- package/src/core/UnistylesModule.web.ts +0 -227
- package/src/hooks/useCSS.web.ts +0 -51
|
@@ -1,7 +1,227 @@
|
|
|
1
|
-
import { NativeModules } from 'react-native'
|
|
1
|
+
import { NativeEventEmitter, NativeModules } from 'react-native'
|
|
2
|
+
import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
|
|
3
|
+
import type { ColorSchemeName } from '../types'
|
|
4
|
+
import { normalizeWebStylesPlugin } from '../plugins'
|
|
5
|
+
import { isServer } from '../common'
|
|
2
6
|
|
|
3
|
-
|
|
4
|
-
|
|
7
|
+
export class UnistylesBridgeWeb {
|
|
8
|
+
#timerRef?: ReturnType<typeof setTimeout> = undefined
|
|
9
|
+
#hasAdaptiveThemes: boolean = false
|
|
10
|
+
#supportsAutomaticColorScheme = false
|
|
11
|
+
#screenWidth = isServer ? undefined : window.innerWidth
|
|
12
|
+
#screenHeight = isServer ? undefined : window.innerHeight
|
|
13
|
+
#themes: Array<keyof UnistylesThemes> = []
|
|
14
|
+
#breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
|
|
15
|
+
#colorScheme: ColorSchemeName = this.getPreferredColorScheme()
|
|
16
|
+
#themeName: keyof UnistylesThemes = '' as keyof UnistylesThemes
|
|
17
|
+
#enabledPlugins: Array<string> = [normalizeWebStylesPlugin.name]
|
|
18
|
+
#unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
|
19
|
+
#sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = []
|
|
20
|
+
#breakpoint: keyof UnistylesBreakpoints = '' as keyof UnistylesBreakpoints
|
|
21
|
+
|
|
22
|
+
constructor() {
|
|
23
|
+
if (!isServer) {
|
|
24
|
+
this.setupListeners()
|
|
25
|
+
this.#screenWidth = window.innerWidth
|
|
26
|
+
this.#screenHeight = window.innerHeight
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
public install() {
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
// eslint-disable-next-line no-undef
|
|
33
|
+
globalThis.__UNISTYLES__ = new Proxy({}, {
|
|
34
|
+
get: (_target, prop) => {
|
|
35
|
+
switch (prop) {
|
|
36
|
+
case 'themeName':
|
|
37
|
+
return this.getTheme()
|
|
38
|
+
case 'screenWidth':
|
|
39
|
+
return this.#screenWidth
|
|
40
|
+
case 'screenHeight':
|
|
41
|
+
return this.#screenHeight
|
|
42
|
+
case 'breakpoint':
|
|
43
|
+
return this.#breakpoint || undefined
|
|
44
|
+
case 'breakpoints':
|
|
45
|
+
return this.#breakpoints
|
|
46
|
+
case 'hasAdaptiveThemes':
|
|
47
|
+
return this.#hasAdaptiveThemes
|
|
48
|
+
case 'sortedBreakpointPairs':
|
|
49
|
+
return this.#sortedBreakpointPairs
|
|
50
|
+
case 'enabledPlugins':
|
|
51
|
+
return this.#enabledPlugins
|
|
52
|
+
case 'colorScheme':
|
|
53
|
+
return this.#colorScheme
|
|
54
|
+
case 'useTheme':
|
|
55
|
+
return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
|
|
56
|
+
case 'useBreakpoints':
|
|
57
|
+
return (breakpoints: UnistylesBreakpoints) => this.useBreakpoints(breakpoints)
|
|
58
|
+
case 'useAdaptiveThemes':
|
|
59
|
+
return (enable: boolean) => this.useAdaptiveThemes(enable)
|
|
60
|
+
case 'addPlugin':
|
|
61
|
+
return (pluginName: string, notify: boolean) => this.addPlugin(pluginName, notify)
|
|
62
|
+
case 'removePlugin':
|
|
63
|
+
return (pluginName: string) => this.removePlugin(pluginName)
|
|
64
|
+
default:
|
|
65
|
+
return Reflect.get(this, prop)
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
set: (target, prop, newValue, receiver) => {
|
|
69
|
+
switch (prop) {
|
|
70
|
+
case 'themes': {
|
|
71
|
+
this.#themes = newValue
|
|
72
|
+
this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark')
|
|
73
|
+
|
|
74
|
+
return true
|
|
75
|
+
}
|
|
76
|
+
case 'themeName': {
|
|
77
|
+
this.#themeName = newValue as keyof UnistylesThemes
|
|
78
|
+
this.emitThemeChange()
|
|
79
|
+
|
|
80
|
+
return true
|
|
81
|
+
}
|
|
82
|
+
default:
|
|
83
|
+
return Reflect.set(target, prop, newValue, receiver)
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
})
|
|
87
|
+
|
|
88
|
+
return true
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
private useTheme(themeName: keyof UnistylesThemes) {
|
|
92
|
+
this.#themeName = themeName
|
|
93
|
+
this.emitThemeChange()
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
private useBreakpoints(breakpoints: UnistylesBreakpoints) {
|
|
97
|
+
this.#breakpoints = breakpoints
|
|
98
|
+
this.#sortedBreakpointPairs = Object
|
|
99
|
+
.entries(breakpoints)
|
|
100
|
+
.sort(([, a], [, b]) => (a ?? 0) - (b ?? 0)) as Array<[keyof UnistylesBreakpoints, number]>
|
|
101
|
+
|
|
102
|
+
if (!isServer) {
|
|
103
|
+
this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth as number)
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
private useAdaptiveThemes(enable: boolean) {
|
|
108
|
+
this.#hasAdaptiveThemes = enable
|
|
109
|
+
|
|
110
|
+
if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
|
|
111
|
+
return
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
if (this.#themeName !== this.#colorScheme) {
|
|
115
|
+
this.#themeName = this.#colorScheme as keyof UnistylesThemes
|
|
116
|
+
this.emitThemeChange()
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
private addPlugin(pluginName: string, notify: boolean) {
|
|
121
|
+
this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins)
|
|
122
|
+
|
|
123
|
+
if (notify) {
|
|
124
|
+
this.emitPluginChange()
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
private removePlugin(pluginName: string) {
|
|
129
|
+
this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName)
|
|
130
|
+
this.emitPluginChange()
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
private getTheme(): keyof UnistylesThemes {
|
|
134
|
+
|
|
135
|
+
if (this.#themes.length === 1) {
|
|
136
|
+
return this.#themes.at(0) as keyof UnistylesThemes
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
return this.#themeName
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
private setupListeners() {
|
|
143
|
+
window.addEventListener('resize', () => {
|
|
144
|
+
clearTimeout(this.#timerRef)
|
|
145
|
+
|
|
146
|
+
this.#timerRef = setTimeout(() => {
|
|
147
|
+
this.#screenWidth = window.innerWidth
|
|
148
|
+
this.#screenHeight = window.innerHeight
|
|
149
|
+
this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
|
|
150
|
+
|
|
151
|
+
this.emitLayoutChange()
|
|
152
|
+
}, 100)
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
|
156
|
+
this.#colorScheme = event.matches
|
|
157
|
+
? 'dark'
|
|
158
|
+
: 'light'
|
|
159
|
+
|
|
160
|
+
if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
|
|
161
|
+
return
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
if (this.#colorScheme !== this.#themeName) {
|
|
165
|
+
this.#themeName = this.#colorScheme as keyof UnistylesThemes
|
|
166
|
+
this.emitThemeChange()
|
|
167
|
+
}
|
|
168
|
+
})
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
|
|
172
|
+
const breakpoint = this.#sortedBreakpointPairs
|
|
173
|
+
.find(([, value], index, otherBreakpoints) => {
|
|
174
|
+
const minVal = value
|
|
175
|
+
const maxVal = otherBreakpoints[index + 1]?.[1]
|
|
176
|
+
|
|
177
|
+
if (!maxVal) {
|
|
178
|
+
return true
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
return width >= minVal && width < maxVal
|
|
182
|
+
})
|
|
183
|
+
|
|
184
|
+
return breakpoint?.at(0) as keyof UnistylesBreakpoints
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
private getPreferredColorScheme() {
|
|
188
|
+
if (!isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
189
|
+
return 'dark'
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
return 'light'
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
private emitPluginChange() {
|
|
196
|
+
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
197
|
+
type: 'plugin'
|
|
198
|
+
})
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
private emitThemeChange() {
|
|
202
|
+
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
203
|
+
type: 'theme',
|
|
204
|
+
payload: {
|
|
205
|
+
themeName: this.#themeName
|
|
206
|
+
}
|
|
207
|
+
})
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
private emitLayoutChange() {
|
|
211
|
+
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
212
|
+
type: 'layout',
|
|
213
|
+
payload: {
|
|
214
|
+
breakpoint: this.#breakpoint,
|
|
215
|
+
orientation: (this.#screenWidth as number) > (this.#screenHeight as number)
|
|
216
|
+
? 'landscape'
|
|
217
|
+
: 'portrait',
|
|
218
|
+
screen: {
|
|
219
|
+
width: this.#screenWidth,
|
|
220
|
+
height: this.#screenHeight
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
})
|
|
224
|
+
}
|
|
5
225
|
}
|
|
6
226
|
|
|
7
|
-
export const UnistylesModule =
|
|
227
|
+
export const UnistylesModule = new UnistylesBridgeWeb()
|
|
@@ -3,33 +3,64 @@ import type { UnistylesBridge, UnistylesPlugin } from '../types'
|
|
|
3
3
|
import type { UnistylesThemes } from '../global'
|
|
4
4
|
import type { UnistyleRegistry } from './UnistyleRegistry'
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Utility to interact with the Unistyles during runtime
|
|
8
|
+
*/
|
|
6
9
|
export class UnistylesRuntime {
|
|
7
10
|
constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
|
|
8
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Get the current color scheme
|
|
14
|
+
* @returns - The current color scheme
|
|
15
|
+
*/
|
|
9
16
|
public get colorScheme() {
|
|
10
17
|
return this.unistylesBridge.colorScheme
|
|
11
18
|
}
|
|
12
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Get info about adaptive themes
|
|
22
|
+
* @returns - boolean indicating if the adaptive themes are enabled
|
|
23
|
+
*/
|
|
13
24
|
public get hasAdaptiveThemes() {
|
|
14
25
|
return this.unistylesBridge.hasAdaptiveThemes
|
|
15
26
|
}
|
|
16
27
|
|
|
28
|
+
/**
|
|
29
|
+
* Get the current theme name
|
|
30
|
+
* @returns - The current theme name
|
|
31
|
+
*/
|
|
17
32
|
public get themeName() {
|
|
18
33
|
return this.unistylesBridge.themeName
|
|
19
34
|
}
|
|
20
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Get the current breakpoint based on device size
|
|
38
|
+
* @returns - The current breakpoint
|
|
39
|
+
*/
|
|
21
40
|
public get breakpoint() {
|
|
22
41
|
return this.unistylesBridge.breakpoint
|
|
23
42
|
}
|
|
24
43
|
|
|
44
|
+
/**
|
|
45
|
+
* Get registered breakpoints with UnitylesRegistry
|
|
46
|
+
* @returns - The registered breakpoints
|
|
47
|
+
*/
|
|
25
48
|
public get breakpoints() {
|
|
26
49
|
return this.unistylesRegistry.breakpoints
|
|
27
50
|
}
|
|
28
51
|
|
|
52
|
+
/**
|
|
53
|
+
* Get the names of currently enabled plugins
|
|
54
|
+
* @returns - The names of currently enabled plugins
|
|
55
|
+
*/
|
|
29
56
|
public get enabledPlugins() {
|
|
30
57
|
return this.unistylesBridge.enabledPlugins
|
|
31
58
|
}
|
|
32
59
|
|
|
60
|
+
/**
|
|
61
|
+
* Get the screen size
|
|
62
|
+
* @returns - The screen size { width, height }
|
|
63
|
+
*/
|
|
33
64
|
public get screen() {
|
|
34
65
|
return {
|
|
35
66
|
width: this.unistylesBridge.screenWidth,
|
|
@@ -37,6 +68,10 @@ export class UnistylesRuntime {
|
|
|
37
68
|
}
|
|
38
69
|
}
|
|
39
70
|
|
|
71
|
+
/**
|
|
72
|
+
* Get the screen orientation
|
|
73
|
+
* @returns - The screen orientation
|
|
74
|
+
*/
|
|
40
75
|
public get orientation() {
|
|
41
76
|
const { width, height } = this.screen
|
|
42
77
|
|
|
@@ -47,6 +82,11 @@ export class UnistylesRuntime {
|
|
|
47
82
|
return ScreenOrientation.Portrait
|
|
48
83
|
}
|
|
49
84
|
|
|
85
|
+
/**
|
|
86
|
+
* Switch to a different theme
|
|
87
|
+
* @param name - The name of the theme to switch to
|
|
88
|
+
* @returns - boolean indicating if the theme was switched
|
|
89
|
+
*/
|
|
50
90
|
public setTheme = (name: keyof UnistylesThemes) => {
|
|
51
91
|
if (name === this.themeName) {
|
|
52
92
|
return
|
|
@@ -61,14 +101,26 @@ export class UnistylesRuntime {
|
|
|
61
101
|
throw new Error(UnistylesError.ThemeNotRegistered)
|
|
62
102
|
}
|
|
63
103
|
|
|
104
|
+
/**
|
|
105
|
+
* Enable or disable adaptive themes
|
|
106
|
+
* @param enable - boolean indicating if adaptive themes should be enabled
|
|
107
|
+
*/
|
|
64
108
|
public setAdaptiveThemes = (enable: boolean) => {
|
|
65
109
|
this.unistylesBridge.useAdaptiveThemes(enable)
|
|
66
110
|
}
|
|
67
111
|
|
|
112
|
+
/**
|
|
113
|
+
* Enable a plugin
|
|
114
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
|
115
|
+
*/
|
|
68
116
|
public addPlugin = (plugin: UnistylesPlugin) => {
|
|
69
117
|
this.unistylesRegistry.addPlugin(plugin)
|
|
70
118
|
}
|
|
71
119
|
|
|
120
|
+
/**
|
|
121
|
+
* Disable a plugin
|
|
122
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
|
123
|
+
*/
|
|
72
124
|
public removePlugin = (plugin: UnistylesPlugin) => {
|
|
73
125
|
this.unistylesRegistry.removePlugin(plugin)
|
|
74
126
|
}
|
package/src/createStyleSheet.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
import type { StyleSheetWithSuperPowers } from './types'
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Utility to create a stylesheet with superpowers
|
|
5
|
+
* Compatible with React Native StyleSheet.create
|
|
6
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
|
7
|
+
*/
|
|
3
8
|
export const createStyleSheet = <S extends StyleSheetWithSuperPowers>(stylesheet: S): S => stylesheet
|
package/src/hooks/useCSS.ts
CHANGED
|
@@ -1,3 +1,51 @@
|
|
|
1
|
+
import { useInsertionEffect, useRef } from 'react'
|
|
2
|
+
import { unistyles } from '../core'
|
|
1
3
|
import type { ReactNativeStyleSheet } from '../types'
|
|
4
|
+
import { generateReactNativeWebId } from '../utils'
|
|
2
5
|
|
|
3
|
-
export const useCSS = <T>(
|
|
6
|
+
export const useCSS = <T>(stylesheet: ReactNativeStyleSheet<T>) => {
|
|
7
|
+
const insertedIds = useRef<Array<string>>([])
|
|
8
|
+
|
|
9
|
+
useInsertionEffect(() => {
|
|
10
|
+
if (!unistyles.registry.config.experimentalCSSMediaQueries) {
|
|
11
|
+
return
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
Object
|
|
15
|
+
.entries(stylesheet)
|
|
16
|
+
.forEach(([_key, value]) => {
|
|
17
|
+
Object.entries(value!)
|
|
18
|
+
.forEach(([prop, val]) => {
|
|
19
|
+
if (!val.toString().includes('@media')) {
|
|
20
|
+
return
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const id = generateReactNativeWebId(prop, '""')
|
|
24
|
+
|
|
25
|
+
if (insertedIds.current.includes(id)) {
|
|
26
|
+
return
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const style = document.createElement('style')
|
|
30
|
+
|
|
31
|
+
style.id = id
|
|
32
|
+
style.innerHTML = val
|
|
33
|
+
|
|
34
|
+
document.head.appendChild(style)
|
|
35
|
+
insertedIds.current = [...insertedIds.current, id]
|
|
36
|
+
})
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
return () => {
|
|
40
|
+
insertedIds.current.forEach(id => {
|
|
41
|
+
const style = document.getElementById(id)
|
|
42
|
+
|
|
43
|
+
if (style) {
|
|
44
|
+
style.remove()
|
|
45
|
+
}
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
insertedIds.current = []
|
|
49
|
+
}
|
|
50
|
+
}, [stylesheet])
|
|
51
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -7,9 +7,25 @@ import { ScreenOrientation } from './common'
|
|
|
7
7
|
import { useStyles } from './useStyles'
|
|
8
8
|
import { createStyleSheet } from './createStyleSheet'
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Utility to interact with the Unistyles
|
|
12
|
+
* (should be called only once)
|
|
13
|
+
*/
|
|
10
14
|
const UnistylesRegistry = {
|
|
15
|
+
/**
|
|
16
|
+
* Register themes to be used in the app
|
|
17
|
+
* @param themes - Key value pair of themes
|
|
18
|
+
*/
|
|
11
19
|
addThemes: unistyles.registry.addThemes,
|
|
20
|
+
/**
|
|
21
|
+
* Register breakpoints to be used in the app
|
|
22
|
+
* @param breakpoints - Key value pair of breakpoints
|
|
23
|
+
*/
|
|
12
24
|
addBreakpoints: unistyles.registry.addBreakpoints,
|
|
25
|
+
/**
|
|
26
|
+
* Register additional config to customize the Unistyles
|
|
27
|
+
* @param config - Key value pair of config
|
|
28
|
+
*/
|
|
13
29
|
addConfig: unistyles.registry.addConfig
|
|
14
30
|
}
|
|
15
31
|
|
package/src/useStyles.ts
CHANGED
|
@@ -13,6 +13,12 @@ type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
|
|
|
13
13
|
styles: ReactNativeStyleSheet<ST>
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* Hook that enables all the features of Unistyles
|
|
18
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
|
19
|
+
* @param variantsMap - The map of variants to be used
|
|
20
|
+
* @returns - The theme, current breakpoint and RN compatible styles
|
|
21
|
+
*/
|
|
16
22
|
export const useStyles = <ST extends StyleSheetWithSuperPowers>(
|
|
17
23
|
stylesheet?: ST,
|
|
18
24
|
variantsMap?: ExtractVariantNames<typeof stylesheet>
|
package/src/utils/mq.ts
CHANGED
|
@@ -33,6 +33,10 @@ const getMQValue = (value: Nullable<MQValue>) => {
|
|
|
33
33
|
return unistyles.registry.breakpoints[value] ?? 0
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Utility to create cross-platform media queries
|
|
38
|
+
* @returns - JavaScript symbol to be used in your stylesheet
|
|
39
|
+
*/
|
|
36
40
|
export const mq: MQHandler = {
|
|
37
41
|
only: {
|
|
38
42
|
width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.UnistylesModule = exports.UnistylesBridgeWeb = void 0;
|
|
7
|
-
var _reactNative = require("react-native");
|
|
8
|
-
var _plugins = require("../plugins");
|
|
9
|
-
var _common = require("../common");
|
|
10
|
-
class UnistylesBridgeWeb {
|
|
11
|
-
#timerRef = undefined;
|
|
12
|
-
#hasAdaptiveThemes = false;
|
|
13
|
-
#supportsAutomaticColorScheme = false;
|
|
14
|
-
#screenWidth = _common.isServer ? undefined : window.innerWidth;
|
|
15
|
-
#screenHeight = _common.isServer ? undefined : window.innerHeight;
|
|
16
|
-
#themes = [];
|
|
17
|
-
#breakpoints = {};
|
|
18
|
-
#colorScheme = this.getPreferredColorScheme();
|
|
19
|
-
#themeName = '';
|
|
20
|
-
#enabledPlugins = [_plugins.normalizeWebStylesPlugin.name];
|
|
21
|
-
#unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
|
|
22
|
-
#sortedBreakpointPairs = [];
|
|
23
|
-
#breakpoint = '';
|
|
24
|
-
constructor() {
|
|
25
|
-
if (!_common.isServer) {
|
|
26
|
-
this.setupListeners();
|
|
27
|
-
this.#screenWidth = window.innerWidth;
|
|
28
|
-
this.#screenHeight = window.innerHeight;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
install() {
|
|
32
|
-
// @ts-ignore
|
|
33
|
-
// eslint-disable-next-line no-undef
|
|
34
|
-
globalThis.__UNISTYLES__ = new Proxy({}, {
|
|
35
|
-
get: (_target, prop) => {
|
|
36
|
-
switch (prop) {
|
|
37
|
-
case 'themeName':
|
|
38
|
-
return this.getTheme();
|
|
39
|
-
case 'screenWidth':
|
|
40
|
-
return this.#screenWidth;
|
|
41
|
-
case 'screenHeight':
|
|
42
|
-
return this.#screenHeight;
|
|
43
|
-
case 'breakpoint':
|
|
44
|
-
return this.#breakpoint || undefined;
|
|
45
|
-
case 'breakpoints':
|
|
46
|
-
return this.#breakpoints;
|
|
47
|
-
case 'hasAdaptiveThemes':
|
|
48
|
-
return this.#hasAdaptiveThemes;
|
|
49
|
-
case 'sortedBreakpointPairs':
|
|
50
|
-
return this.#sortedBreakpointPairs;
|
|
51
|
-
case 'enabledPlugins':
|
|
52
|
-
return this.#enabledPlugins;
|
|
53
|
-
case 'colorScheme':
|
|
54
|
-
return this.#colorScheme;
|
|
55
|
-
case 'useTheme':
|
|
56
|
-
return themeName => this.useTheme(themeName);
|
|
57
|
-
case 'useBreakpoints':
|
|
58
|
-
return breakpoints => this.useBreakpoints(breakpoints);
|
|
59
|
-
case 'useAdaptiveThemes':
|
|
60
|
-
return enable => this.useAdaptiveThemes(enable);
|
|
61
|
-
case 'addPlugin':
|
|
62
|
-
return (pluginName, notify) => this.addPlugin(pluginName, notify);
|
|
63
|
-
case 'removePlugin':
|
|
64
|
-
return pluginName => this.removePlugin(pluginName);
|
|
65
|
-
default:
|
|
66
|
-
return Reflect.get(this, prop);
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
set: (target, prop, newValue, receiver) => {
|
|
70
|
-
switch (prop) {
|
|
71
|
-
case 'themes':
|
|
72
|
-
{
|
|
73
|
-
this.#themes = newValue;
|
|
74
|
-
this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark');
|
|
75
|
-
return true;
|
|
76
|
-
}
|
|
77
|
-
case 'themeName':
|
|
78
|
-
{
|
|
79
|
-
this.#themeName = newValue;
|
|
80
|
-
this.emitThemeChange();
|
|
81
|
-
return true;
|
|
82
|
-
}
|
|
83
|
-
default:
|
|
84
|
-
return Reflect.set(target, prop, newValue, receiver);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
return true;
|
|
89
|
-
}
|
|
90
|
-
useTheme(themeName) {
|
|
91
|
-
this.#themeName = themeName;
|
|
92
|
-
this.emitThemeChange();
|
|
93
|
-
}
|
|
94
|
-
useBreakpoints(breakpoints) {
|
|
95
|
-
this.#breakpoints = breakpoints;
|
|
96
|
-
this.#sortedBreakpointPairs = Object.entries(breakpoints).sort((_ref, _ref2) => {
|
|
97
|
-
let [, a] = _ref;
|
|
98
|
-
let [, b] = _ref2;
|
|
99
|
-
return (a ?? 0) - (b ?? 0);
|
|
100
|
-
});
|
|
101
|
-
if (!_common.isServer) {
|
|
102
|
-
this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
useAdaptiveThemes(enable) {
|
|
106
|
-
this.#hasAdaptiveThemes = enable;
|
|
107
|
-
if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
if (this.#themeName !== this.#colorScheme) {
|
|
111
|
-
this.#themeName = this.#colorScheme;
|
|
112
|
-
this.emitThemeChange();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
addPlugin(pluginName, notify) {
|
|
116
|
-
this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
|
|
117
|
-
if (notify) {
|
|
118
|
-
this.emitPluginChange();
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
removePlugin(pluginName) {
|
|
122
|
-
this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName);
|
|
123
|
-
this.emitPluginChange();
|
|
124
|
-
}
|
|
125
|
-
getTheme() {
|
|
126
|
-
if (this.#themes.length === 1) {
|
|
127
|
-
return this.#themes.at(0);
|
|
128
|
-
}
|
|
129
|
-
return this.#themeName;
|
|
130
|
-
}
|
|
131
|
-
setupListeners() {
|
|
132
|
-
window.addEventListener('resize', () => {
|
|
133
|
-
clearTimeout(this.#timerRef);
|
|
134
|
-
this.#timerRef = setTimeout(() => {
|
|
135
|
-
this.#screenWidth = window.innerWidth;
|
|
136
|
-
this.#screenHeight = window.innerHeight;
|
|
137
|
-
this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
|
|
138
|
-
this.emitLayoutChange();
|
|
139
|
-
}, 100);
|
|
140
|
-
});
|
|
141
|
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
|
142
|
-
this.#colorScheme = event.matches ? 'dark' : 'light';
|
|
143
|
-
if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
if (this.#colorScheme !== this.#themeName) {
|
|
147
|
-
this.#themeName = this.#colorScheme;
|
|
148
|
-
this.emitThemeChange();
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
getBreakpointFromScreenWidth(width) {
|
|
153
|
-
const breakpoint = this.#sortedBreakpointPairs.find((_ref3, index, otherBreakpoints) => {
|
|
154
|
-
let [, value] = _ref3;
|
|
155
|
-
const minVal = value;
|
|
156
|
-
const maxVal = otherBreakpoints[index + 1]?.[1];
|
|
157
|
-
if (!maxVal) {
|
|
158
|
-
return true;
|
|
159
|
-
}
|
|
160
|
-
return width >= minVal && width < maxVal;
|
|
161
|
-
});
|
|
162
|
-
return breakpoint?.at(0);
|
|
163
|
-
}
|
|
164
|
-
getPreferredColorScheme() {
|
|
165
|
-
if (!_common.isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
166
|
-
return 'dark';
|
|
167
|
-
}
|
|
168
|
-
return 'light';
|
|
169
|
-
}
|
|
170
|
-
emitPluginChange() {
|
|
171
|
-
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
172
|
-
type: 'plugin'
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
emitThemeChange() {
|
|
176
|
-
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
177
|
-
type: 'theme',
|
|
178
|
-
payload: {
|
|
179
|
-
themeName: this.#themeName
|
|
180
|
-
}
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
emitLayoutChange() {
|
|
184
|
-
this.#unistylesEvents.emit('__unistylesOnChange', {
|
|
185
|
-
type: 'layout',
|
|
186
|
-
payload: {
|
|
187
|
-
breakpoint: this.#breakpoint,
|
|
188
|
-
orientation: this.#screenWidth > this.#screenHeight ? 'landscape' : 'portrait',
|
|
189
|
-
screen: {
|
|
190
|
-
width: this.#screenWidth,
|
|
191
|
-
height: this.#screenHeight
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
exports.UnistylesBridgeWeb = UnistylesBridgeWeb;
|
|
198
|
-
const UnistylesModule = exports.UnistylesModule = new UnistylesBridgeWeb();
|
|
199
|
-
//# sourceMappingURL=UnistylesModule.web.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_plugins","_common","UnistylesBridgeWeb","timerRef","undefined","hasAdaptiveThemes","supportsAutomaticColorScheme","screenWidth","isServer","window","innerWidth","screenHeight","innerHeight","themes","breakpoints","colorScheme","getPreferredColorScheme","themeName","enabledPlugins","normalizeWebStylesPlugin","name","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","sortedBreakpointPairs","breakpoint","constructor","setupListeners","install","globalThis","__UNISTYLES__","Proxy","get","_target","prop","getTheme","useTheme","useBreakpoints","enable","useAdaptiveThemes","pluginName","notify","addPlugin","removePlugin","Reflect","set","target","newValue","receiver","includes","emitThemeChange","Object","entries","sort","_ref","_ref2","a","b","getBreakpointFromScreenWidth","concat","emitPluginChange","filter","length","at","addEventListener","clearTimeout","setTimeout","emitLayoutChange","matchMedia","event","matches","width","find","_ref3","index","otherBreakpoints","value","minVal","maxVal","emit","type","payload","orientation","screen","height","exports","UnistylesModule"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.web.ts"],"mappings":"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"}
|