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.
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":"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"}