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.
Files changed (103) hide show
  1. package/README.md +22 -35
  2. package/lib/commonjs/core/UnistyleRegistry.js +15 -25
  3. package/lib/commonjs/core/UnistyleRegistry.js.map +1 -1
  4. package/lib/commonjs/core/UnistylesModule.js +187 -2
  5. package/lib/commonjs/core/UnistylesModule.js.map +1 -1
  6. package/lib/commonjs/core/UnistylesModule.native.js +9 -0
  7. package/lib/commonjs/core/UnistylesModule.native.js.map +1 -0
  8. package/lib/commonjs/core/UnistylesRuntime.js +64 -0
  9. package/lib/commonjs/core/UnistylesRuntime.js.map +1 -1
  10. package/lib/commonjs/createStyleSheet.js +5 -0
  11. package/lib/commonjs/createStyleSheet.js.map +1 -1
  12. package/lib/commonjs/hooks/useCSS.js +36 -1
  13. package/lib/commonjs/hooks/useCSS.js.map +1 -1
  14. package/lib/commonjs/hooks/useCSS.native.js +9 -0
  15. package/lib/commonjs/hooks/useCSS.native.js.map +1 -0
  16. package/lib/commonjs/index.js +16 -0
  17. package/lib/commonjs/index.js.map +1 -1
  18. package/lib/commonjs/normalizer/normalizer.js +1 -2
  19. package/lib/commonjs/normalizer/normalizer.js.map +1 -1
  20. package/lib/commonjs/useStyles.js +7 -2
  21. package/lib/commonjs/useStyles.js.map +1 -1
  22. package/lib/commonjs/utils/breakpoints.js +2 -11
  23. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  24. package/lib/commonjs/utils/cssMediaQuery.js +3 -9
  25. package/lib/commonjs/utils/cssMediaQuery.js.map +1 -1
  26. package/lib/commonjs/utils/mq.js +17 -36
  27. package/lib/commonjs/utils/mq.js.map +1 -1
  28. package/lib/commonjs/utils/mqParser.js +1 -2
  29. package/lib/commonjs/utils/mqParser.js.map +1 -1
  30. package/lib/commonjs/utils/styles.js +34 -39
  31. package/lib/commonjs/utils/styles.js.map +1 -1
  32. package/lib/module/core/UnistyleRegistry.js +15 -25
  33. package/lib/module/core/UnistyleRegistry.js.map +1 -1
  34. package/lib/module/core/UnistylesModule.js +186 -2
  35. package/lib/module/core/UnistylesModule.js.map +1 -1
  36. package/lib/module/core/UnistylesModule.native.js +3 -0
  37. package/lib/module/core/UnistylesModule.native.js.map +1 -0
  38. package/lib/module/core/UnistylesRuntime.js +64 -0
  39. package/lib/module/core/UnistylesRuntime.js.map +1 -1
  40. package/lib/module/createStyleSheet.js +5 -0
  41. package/lib/module/createStyleSheet.js.map +1 -1
  42. package/lib/module/hooks/useCSS.js +36 -1
  43. package/lib/module/hooks/useCSS.js.map +1 -1
  44. package/lib/module/hooks/useCSS.native.js +2 -0
  45. package/lib/module/hooks/useCSS.native.js.map +1 -0
  46. package/lib/module/index.js +17 -0
  47. package/lib/module/index.js.map +1 -1
  48. package/lib/module/normalizer/normalizer.js +1 -2
  49. package/lib/module/normalizer/normalizer.js.map +1 -1
  50. package/lib/module/useStyles.js +7 -2
  51. package/lib/module/useStyles.js.map +1 -1
  52. package/lib/module/utils/breakpoints.js +2 -11
  53. package/lib/module/utils/breakpoints.js.map +1 -1
  54. package/lib/module/utils/cssMediaQuery.js +3 -9
  55. package/lib/module/utils/cssMediaQuery.js.map +1 -1
  56. package/lib/module/utils/mq.js +17 -36
  57. package/lib/module/utils/mq.js.map +1 -1
  58. package/lib/module/utils/mqParser.js +1 -2
  59. package/lib/module/utils/mqParser.js.map +1 -1
  60. package/lib/module/utils/styles.js +34 -39
  61. package/lib/module/utils/styles.js.map +1 -1
  62. package/lib/typescript/src/core/UnistylesModule.d.ts +17 -4
  63. package/lib/typescript/src/core/UnistylesModule.d.ts.map +1 -1
  64. package/lib/typescript/src/core/UnistylesModule.native.d.ts +6 -0
  65. package/lib/typescript/src/core/UnistylesModule.native.d.ts.map +1 -0
  66. package/lib/typescript/src/core/UnistylesRuntime.d.ts +52 -0
  67. package/lib/typescript/src/core/UnistylesRuntime.d.ts.map +1 -1
  68. package/lib/typescript/src/createStyleSheet.d.ts +5 -0
  69. package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
  70. package/lib/typescript/src/hooks/useCSS.d.ts +1 -1
  71. package/lib/typescript/src/hooks/useCSS.d.ts.map +1 -1
  72. package/lib/typescript/src/hooks/useCSS.native.d.ts +3 -0
  73. package/lib/typescript/src/hooks/useCSS.native.d.ts.map +1 -0
  74. package/lib/typescript/src/index.d.ts +16 -0
  75. package/lib/typescript/src/index.d.ts.map +1 -1
  76. package/lib/typescript/src/useStyles.d.ts +6 -0
  77. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  78. package/lib/typescript/src/utils/mq.d.ts +4 -0
  79. package/lib/typescript/src/utils/mq.d.ts.map +1 -1
  80. package/package.json +14 -16
  81. package/src/core/UnistylesModule.native.ts +7 -0
  82. package/src/core/UnistylesModule.ts +224 -4
  83. package/src/core/UnistylesRuntime.ts +52 -0
  84. package/src/createStyleSheet.ts +5 -0
  85. package/src/hooks/useCSS.native.ts +3 -0
  86. package/src/hooks/useCSS.ts +49 -1
  87. package/src/index.ts +16 -0
  88. package/src/useStyles.ts +6 -0
  89. package/src/utils/mq.ts +4 -0
  90. package/lib/commonjs/core/UnistylesModule.web.js +0 -199
  91. package/lib/commonjs/core/UnistylesModule.web.js.map +0 -1
  92. package/lib/commonjs/hooks/useCSS.web.js +0 -46
  93. package/lib/commonjs/hooks/useCSS.web.js.map +0 -1
  94. package/lib/module/core/UnistylesModule.web.js +0 -192
  95. package/lib/module/core/UnistylesModule.web.js.map +0 -1
  96. package/lib/module/hooks/useCSS.web.js +0 -39
  97. package/lib/module/hooks/useCSS.web.js.map +0 -1
  98. package/lib/typescript/src/core/UnistylesModule.web.d.ts +0 -19
  99. package/lib/typescript/src/core/UnistylesModule.web.d.ts.map +0 -1
  100. package/lib/typescript/src/hooks/useCSS.web.d.ts +0 -3
  101. package/lib/typescript/src/hooks/useCSS.web.d.ts.map +0 -1
  102. package/src/core/UnistylesModule.web.ts +0 -227
  103. 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
- type UnistylesNativeModule = {
4
- install(): boolean
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 = NativeModules?.Unistyles as UnistylesNativeModule
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
  }
@@ -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
@@ -0,0 +1,3 @@
1
+ import type { ReactNativeStyleSheet } from '../types'
2
+
3
+ export const useCSS = <T>(_stylesheet: ReactNativeStyleSheet<T>): void => {}
@@ -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>(_stylesheet: ReactNativeStyleSheet<T>): void => {}
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":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAEO,MAAMG,kBAAkB,CAAC;EAC5B,CAACC,QAAQ,GAAmCC,SAAS;EACrD,CAACC,iBAAiB,GAAY,KAAK;EACnC,CAACC,4BAA4B,GAAG,KAAK;EACrC,CAACC,WAAW,GAAGC,gBAAQ,GAAGJ,SAAS,GAAGK,MAAM,CAACC,UAAU;EACvD,CAACC,YAAY,GAAGH,gBAAQ,GAAGJ,SAAS,GAAGK,MAAM,CAACG,WAAW;EACzD,CAACC,MAAM,GAAiC,EAAE;EAC1C,CAACC,WAAW,GAAyB,CAAC,CAAC;EACvC,CAACC,WAAW,GAAoB,IAAI,CAACC,uBAAuB,CAAC,CAAC;EAC9D,CAACC,SAAS,GAA0B,EAAE;EACtC,CAACC,cAAc,GAAkB,CAACC,iCAAwB,CAACC,IAAI,CAAC;EAChE,CAACC,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;EAClE,CAACC,qBAAqB,GAAgD,EAAE;EACxE,CAACC,UAAU,GAA+B,EAAE;EAE5CC,WAAWA,CAAA,EAAG;IACV,IAAI,CAACnB,gBAAQ,EAAE;MACX,IAAI,CAACoB,cAAc,CAAC,CAAC;MACrB,IAAI,CAAC,CAACrB,WAAW,GAAGE,MAAM,CAACC,UAAU;MACrC,IAAI,CAAC,CAACC,YAAY,GAAGF,MAAM,CAACG,WAAW;IAC3C;EACJ;EAEOiB,OAAOA,CAAA,EAAG;IACb;IACA;IACAC,UAAU,CAACC,aAAa,GAAG,IAAIC,KAAK,CAAC,CAAC,CAAC,EAAE;MACrCC,GAAG,EAAEA,CAACC,OAAO,EAAEC,IAAI,KAAK;QACpB,QAAQA,IAAI;UACR,KAAK,WAAW;YACZ,OAAO,IAAI,CAACC,QAAQ,CAAC,CAAC;UAC1B,KAAK,aAAa;YACd,OAAO,IAAI,CAAC,CAAC7B,WAAW;UAC5B,KAAK,cAAc;YACf,OAAO,IAAI,CAAC,CAACI,YAAY;UAC7B,KAAK,YAAY;YACb,OAAO,IAAI,CAAC,CAACe,UAAU,IAAItB,SAAS;UACxC,KAAK,aAAa;YACd,OAAO,IAAI,CAAC,CAACU,WAAW;UAC5B,KAAK,mBAAmB;YACpB,OAAO,IAAI,CAAC,CAACT,iBAAiB;UAClC,KAAK,uBAAuB;YACxB,OAAO,IAAI,CAAC,CAACoB,qBAAqB;UACtC,KAAK,gBAAgB;YACjB,OAAO,IAAI,CAAC,CAACP,cAAc;UAC/B,KAAK,aAAa;YACd,OAAO,IAAI,CAAC,CAACH,WAAW;UAC5B,KAAK,UAAU;YACX,OAAQE,SAAgC,IAAK,IAAI,CAACoB,QAAQ,CAACpB,SAAS,CAAC;UACzE,KAAK,gBAAgB;YACjB,OAAQH,WAAiC,IAAK,IAAI,CAACwB,cAAc,CAACxB,WAAW,CAAC;UAClF,KAAK,mBAAmB;YACpB,OAAQyB,MAAe,IAAK,IAAI,CAACC,iBAAiB,CAACD,MAAM,CAAC;UAC9D,KAAK,WAAW;YACZ,OAAO,CAACE,UAAkB,EAAEC,MAAe,KAAK,IAAI,CAACC,SAAS,CAACF,UAAU,EAAEC,MAAM,CAAC;UACtF,KAAK,cAAc;YACf,OAAQD,UAAkB,IAAK,IAAI,CAACG,YAAY,CAACH,UAAU,CAAC;UAChE;YACI,OAAOI,OAAO,CAACZ,GAAG,CAAC,IAAI,EAAEE,IAAI,CAAC;QACtC;MACJ,CAAC;MACDW,GAAG,EAAEA,CAACC,MAAM,EAAEZ,IAAI,EAAEa,QAAQ,EAAEC,QAAQ,KAAK;QACvC,QAAQd,IAAI;UACR,KAAK,QAAQ;YAAE;cACX,IAAI,CAAC,CAACtB,MAAM,GAAGmC,QAAQ;cACvB,IAAI,CAAC,CAAC1C,4BAA4B,GAAG0C,QAAQ,CAACE,QAAQ,CAAC,OAAO,CAAC,IAAIF,QAAQ,CAACE,QAAQ,CAAC,MAAM,CAAC;cAE5F,OAAO,IAAI;YACf;UACA,KAAK,WAAW;YAAE;cACd,IAAI,CAAC,CAACjC,SAAS,GAAG+B,QAAiC;cACnD,IAAI,CAACG,eAAe,CAAC,CAAC;cAEtB,OAAO,IAAI;YACf;UACA;YACI,OAAON,OAAO,CAACC,GAAG,CAACC,MAAM,EAAEZ,IAAI,EAAEa,QAAQ,EAAEC,QAAQ,CAAC;QAC5D;MACJ;IACJ,CAAC,CAAC;IAEF,OAAO,IAAI;EACf;EAEQZ,QAAQA,CAACpB,SAAgC,EAAE;IAC/C,IAAI,CAAC,CAACA,SAAS,GAAGA,SAAS;IAC3B,IAAI,CAACkC,eAAe,CAAC,CAAC;EAC1B;EAEQb,cAAcA,CAACxB,WAAiC,EAAE;IACtD,IAAI,CAAC,CAACA,WAAW,GAAGA,WAAW;IAC/B,IAAI,CAAC,CAACW,qBAAqB,GAAG2B,MAAM,CAC/BC,OAAO,CAACvC,WAAW,CAAC,CACpBwC,IAAI,CAAC,CAAAC,IAAA,EAAAC,KAAA;MAAA,IAAC,GAAGC,CAAC,CAAC,GAAAF,IAAA;MAAA,IAAE,GAAGG,CAAC,CAAC,GAAAF,KAAA;MAAA,OAAK,CAACC,CAAC,IAAI,CAAC,KAAKC,CAAC,IAAI,CAAC,CAAC;IAAA,EAAgD;IAE/F,IAAI,CAAClD,gBAAQ,EAAE;MACX,IAAI,CAAC,CAACkB,UAAU,GAAG,IAAI,CAACiC,4BAA4B,CAAC,IAAI,CAAC,CAACpD,WAAqB,CAAC;IACrF;EACJ;EAEQiC,iBAAiBA,CAACD,MAAe,EAAE;IACvC,IAAI,CAAC,CAAClC,iBAAiB,GAAGkC,MAAM;IAEhC,IAAI,CAAC,IAAI,CAAC,CAAClC,iBAAiB,IAAI,CAAC,IAAI,CAAC,CAACC,4BAA4B,EAAE;MACjE;IACJ;IAEA,IAAI,IAAI,CAAC,CAACW,SAAS,KAAK,IAAI,CAAC,CAACF,WAAW,EAAE;MACvC,IAAI,CAAC,CAACE,SAAS,GAAG,IAAI,CAAC,CAACF,WAAoC;MAC5D,IAAI,CAACoC,eAAe,CAAC,CAAC;IAC1B;EACJ;EAEQR,SAASA,CAACF,UAAkB,EAAEC,MAAe,EAAE;IACnD,IAAI,CAAC,CAACxB,cAAc,GAAG,CAACuB,UAAU,CAAC,CAACmB,MAAM,CAAC,IAAI,CAAC,CAAC1C,cAAc,CAAC;IAEhE,IAAIwB,MAAM,EAAE;MACR,IAAI,CAACmB,gBAAgB,CAAC,CAAC;IAC3B;EACJ;EAEQjB,YAAYA,CAACH,UAAkB,EAAE;IACrC,IAAI,CAAC,CAACvB,cAAc,GAAG,IAAI,CAAC,CAACA,cAAc,CAAC4C,MAAM,CAAC1C,IAAI,IAAIA,IAAI,KAAKqB,UAAU,CAAC;IAC/E,IAAI,CAACoB,gBAAgB,CAAC,CAAC;EAC3B;EAEQzB,QAAQA,CAAA,EAA0B;IAEtC,IAAI,IAAI,CAAC,CAACvB,MAAM,CAACkD,MAAM,KAAK,CAAC,EAAE;MAC3B,OAAO,IAAI,CAAC,CAAClD,MAAM,CAACmD,EAAE,CAAC,CAAC,CAAC;IAC7B;IAEA,OAAO,IAAI,CAAC,CAAC/C,SAAS;EAC1B;EAEQW,cAAcA,CAAA,EAAG;IACrBnB,MAAM,CAACwD,gBAAgB,CAAC,QAAQ,EAAE,MAAM;MACpCC,YAAY,CAAC,IAAI,CAAC,CAAC/D,QAAQ,CAAC;MAE5B,IAAI,CAAC,CAACA,QAAQ,GAAGgE,UAAU,CAAC,MAAM;QAC9B,IAAI,CAAC,CAAC5D,WAAW,GAAGE,MAAM,CAACC,UAAU;QACrC,IAAI,CAAC,CAACC,YAAY,GAAGF,MAAM,CAACG,WAAW;QACvC,IAAI,CAAC,CAACc,UAAU,GAAG,IAAI,CAACiC,4BAA4B,CAAC,IAAI,CAAC,CAACpD,WAAW,CAAC;QAEvE,IAAI,CAAC6D,gBAAgB,CAAC,CAAC;MAC3B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,CAAC;IAEF3D,MAAM,CAAC4D,UAAU,CAAC,8BAA8B,CAAC,CAACJ,gBAAgB,CAAC,QAAQ,EAAEK,KAAK,IAAI;MAClF,IAAI,CAAC,CAACvD,WAAW,GAAGuD,KAAK,CAACC,OAAO,GAC3B,MAAM,GACN,OAAO;MAEb,IAAI,CAAC,IAAI,CAAC,CAACjE,4BAA4B,IAAI,CAAC,IAAI,CAAC,CAACD,iBAAiB,EAAE;QACjE;MACJ;MAEA,IAAI,IAAI,CAAC,CAACU,WAAW,KAAK,IAAI,CAAC,CAACE,SAAS,EAAE;QACvC,IAAI,CAAC,CAACA,SAAS,GAAG,IAAI,CAAC,CAACF,WAAoC;QAC5D,IAAI,CAACoC,eAAe,CAAC,CAAC;MAC1B;IACJ,CAAC,CAAC;EACN;EAEQQ,4BAA4BA,CAACa,KAAa,EAA8B;IAC5E,MAAM9C,UAAU,GAAG,IAAI,CAAC,CAACD,qBAAqB,CACzCgD,IAAI,CAAC,CAAAC,KAAA,EAAYC,KAAK,EAAEC,gBAAgB,KAAK;MAAA,IAAvC,GAAGC,KAAK,CAAC,GAAAH,KAAA;MACZ,MAAMI,MAAM,GAAGD,KAAK;MACpB,MAAME,MAAM,GAAGH,gBAAgB,CAACD,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;MAE/C,IAAI,CAACI,MAAM,EAAE;QACT,OAAO,IAAI;MACf;MAEA,OAAOP,KAAK,IAAIM,MAAM,IAAIN,KAAK,GAAGO,MAAM;IAC5C,CAAC,CAAC;IAEN,OAAOrD,UAAU,EAAEsC,EAAE,CAAC,CAAC,CAAC;EAC5B;EAEQhD,uBAAuBA,CAAA,EAAG;IAC9B,IAAI,CAACR,gBAAQ,IAAIC,MAAM,CAAC4D,UAAU,IAAI5D,MAAM,CAAC4D,UAAU,CAAC,8BAA8B,CAAC,CAACE,OAAO,EAAE;MAC7F,OAAO,MAAM;IACjB;IAEA,OAAO,OAAO;EAClB;EAEQV,gBAAgBA,CAAA,EAAG;IACvB,IAAI,CAAC,CAACxC,eAAe,CAAC2D,IAAI,CAAC,qBAAqB,EAAE;MAC9CC,IAAI,EAAE;IACV,CAAC,CAAC;EACN;EAEQ9B,eAAeA,CAAA,EAAG;IACtB,IAAI,CAAC,CAAC9B,eAAe,CAAC2D,IAAI,CAAC,qBAAqB,EAAE;MAC9CC,IAAI,EAAE,OAAO;MACbC,OAAO,EAAE;QACLjE,SAAS,EAAE,IAAI,CAAC,CAACA;MACrB;IACJ,CAAC,CAAC;EACN;EAEQmD,gBAAgBA,CAAA,EAAG;IACvB,IAAI,CAAC,CAAC/C,eAAe,CAAC2D,IAAI,CAAC,qBAAqB,EAAE;MAC9CC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAE;QACLxD,UAAU,EAAE,IAAI,CAAC,CAACA,UAAU;QAC5ByD,WAAW,EAAG,IAAI,CAAC,CAAC5E,WAAW,GAAe,IAAI,CAAC,CAACI,YAAuB,GACrE,WAAW,GACX,UAAU;QAChByE,MAAM,EAAE;UACJZ,KAAK,EAAE,IAAI,CAAC,CAACjE,WAAW;UACxB8E,MAAM,EAAE,IAAI,CAAC,CAAC1E;QAClB;MACJ;IACJ,CAAC,CAAC;EACN;AACJ;AAAC2E,OAAA,CAAApF,kBAAA,GAAAA,kBAAA;AAEM,MAAMqF,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,IAAIrF,kBAAkB,CAAC,CAAC"}