react-native-unistyles 2.0.0-beta.7 → 2.0.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- 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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"}
|