react-native-unistyles 2.0.0-alpha.15 → 2.0.0-alpha.17

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 (56) hide show
  1. package/lib/commonjs/common.js +10 -9
  2. package/lib/commonjs/common.js.map +1 -1
  3. package/lib/commonjs/core/UnistyleRegistry.js +17 -4
  4. package/lib/commonjs/core/UnistyleRegistry.js.map +1 -1
  5. package/lib/commonjs/useStyles.js +1 -8
  6. package/lib/commonjs/useStyles.js.map +1 -1
  7. package/lib/commonjs/utils/index.js +0 -30
  8. package/lib/commonjs/utils/index.js.map +1 -1
  9. package/lib/commonjs/utils/mq.js +37 -83
  10. package/lib/commonjs/utils/mq.js.map +1 -1
  11. package/lib/module/common.js +10 -9
  12. package/lib/module/common.js.map +1 -1
  13. package/lib/module/core/UnistyleRegistry.js +17 -4
  14. package/lib/module/core/UnistyleRegistry.js.map +1 -1
  15. package/lib/module/useStyles.js +1 -8
  16. package/lib/module/useStyles.js.map +1 -1
  17. package/lib/module/utils/index.js +1 -1
  18. package/lib/module/utils/index.js.map +1 -1
  19. package/lib/module/utils/mq.js +36 -82
  20. package/lib/module/utils/mq.js.map +1 -1
  21. package/lib/typescript/src/common.d.ts +10 -9
  22. package/lib/typescript/src/common.d.ts.map +1 -1
  23. package/lib/typescript/src/core/UnistyleRegistry.d.ts +39 -3
  24. package/lib/typescript/src/core/UnistyleRegistry.d.ts.map +1 -1
  25. package/lib/typescript/src/index.d.ts +48 -3
  26. package/lib/typescript/src/index.d.ts.map +1 -1
  27. package/lib/typescript/src/types/breakpoints.d.ts +10 -7
  28. package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
  29. package/lib/typescript/src/types/core.d.ts +2 -3
  30. package/lib/typescript/src/types/core.d.ts.map +1 -1
  31. package/lib/typescript/src/types/index.d.ts +0 -1
  32. package/lib/typescript/src/types/index.d.ts.map +1 -1
  33. package/lib/typescript/src/types/stylesheet.d.ts +3 -10
  34. package/lib/typescript/src/types/stylesheet.d.ts.map +1 -1
  35. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  36. package/lib/typescript/src/utils/index.d.ts +1 -1
  37. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  38. package/lib/typescript/src/utils/mq.d.ts +4 -9
  39. package/lib/typescript/src/utils/mq.d.ts.map +1 -1
  40. package/package.json +2 -2
  41. package/src/common.ts +10 -9
  42. package/src/core/UnistyleRegistry.ts +19 -4
  43. package/src/types/breakpoints.ts +17 -14
  44. package/src/types/core.ts +3 -4
  45. package/src/types/index.ts +0 -1
  46. package/src/types/stylesheet.ts +3 -10
  47. package/src/useStyles.ts +4 -14
  48. package/src/utils/index.ts +1 -1
  49. package/src/utils/mq.ts +20 -88
  50. package/lib/commonjs/types/mq.js +0 -6
  51. package/lib/commonjs/types/mq.js.map +0 -1
  52. package/lib/module/types/mq.js +0 -2
  53. package/lib/module/types/mq.js.map +0 -1
  54. package/lib/typescript/src/types/mq.d.ts +0 -3
  55. package/lib/typescript/src/types/mq.d.ts.map +0 -1
  56. package/src/types/mq.ts +0 -3
@@ -1,24 +1,26 @@
1
1
  import type { ColorValue, OpaqueColorValue } from 'react-native'
2
2
  import type { UnistylesTheme } from '../types'
3
- import type { AllAvailableKeys, BreakpointsOrMediaQueries } from './stylesheet'
3
+ import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
4
+ import type { TransformStyles } from './core'
4
5
 
5
- type WithEmptyObject<V> = keyof V extends never ? {} : V
6
+ type ExtractTransformArray<T> = T extends object
7
+ ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
8
+ : never
6
9
 
7
- type ExtractBreakpoints<T> = T extends Partial<Record<BreakpointsOrMediaQueries, infer R>>
8
- ? WithEmptyObject<R>
9
- : {
10
- [K in keyof T]: T[K] extends object
11
- ? T[K] extends OpaqueColorValue
12
- ? ColorValue
13
- : ExtractBreakpoints<T[K]>
14
- : T[K]
15
- }
10
+ type ExtractBreakpoints<T> = T extends object
11
+ ? keyof T extends BreakpointsOrMediaQueries
12
+ ? T[keyof T]
13
+ : T extends Array<ToDeepUnistyles<TransformStyles>>
14
+ ? Array<ExtractTransformArray<T[number]>>
15
+ : {
16
+ [K in keyof T]: ExtractBreakpoints<T[K]>
17
+ }
18
+ : T
16
19
 
17
20
  type ParseNestedObject<T> = T extends (...args: infer A) => infer R
18
21
  ? (...args: A) => ParseNestedObject<R>
19
- : keyof T extends AllAvailableKeys
20
- ? ExtractBreakpoints<T>
21
- : T extends { variants: infer R }
22
+ : T extends object
23
+ ? T extends { variants: infer R }
22
24
  ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
23
25
  : {
24
26
  [K in keyof T]: T[K] extends object
@@ -27,6 +29,7 @@ type ParseNestedObject<T> = T extends (...args: infer A) => infer R
27
29
  : ExtractBreakpoints<T[K]>
28
30
  : T[K]
29
31
  }
32
+ : T
30
33
 
31
34
  type FlattenVariants<T> = T extends object
32
35
  ? {
package/src/types/core.ts CHANGED
@@ -15,7 +15,6 @@ import type {
15
15
  } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
16
16
  import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
17
17
  import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
18
- import type { MediaQuery } from './mq'
19
18
 
20
19
  export type ShadowOffset = {
21
20
  width: number,
@@ -44,7 +43,7 @@ export type ScreenSize = {
44
43
 
45
44
  export type RNStyle = ViewStyle | TextStyle | ImageStyle
46
45
  export type RNValue = number | string | undefined
47
- export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery, RNValue>
48
- export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery, RNValue]>
46
+ export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
47
+ export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
49
48
  export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
50
- export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST
49
+ export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST
@@ -1,7 +1,6 @@
1
1
  export * from './normalizer'
2
2
  export * from './unistyles'
3
3
  export type { Optional, Nullable } from './common'
4
- export type { MediaQuery } from './mq'
5
4
  export type {
6
5
  NestedStylePairs,
7
6
  UnistylesTheme,
@@ -1,7 +1,6 @@
1
1
  import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
2
2
  import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
3
3
  import type { UnistylesBreakpoints } from '../global'
4
- import type { MediaQuery } from './mq'
5
4
 
6
5
  // these props are treated differently to nest breakpoints and media queries
7
6
  type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
@@ -19,18 +18,12 @@ type UnistyleNestedStyles = {
19
18
  type Variants = {
20
19
  variants?: {
21
20
  [variantName: string]: {
22
- [variant: string]: {
23
- [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
24
- [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
25
- } & {
26
- [propName in NestedTypes]?: UnistyleNestedStyles[propName]
27
- }
28
- }
21
+ [variant: string]: Omit<UnistylesValues, 'variants'>
29
22
  }
30
23
  }
31
24
  }
32
25
 
33
- type ToDeepUnistyles<T> = {
26
+ export type ToDeepUnistyles<T> = {
34
27
  [K in keyof T]?: T[K] | {
35
28
  [key in BreakpointsOrMediaQueries]?: T[K]
36
29
  }
@@ -39,7 +32,7 @@ type ToDeepUnistyles<T> = {
39
32
  type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
40
33
 
41
34
  export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
42
- export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | MediaQuery
35
+ export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
43
36
 
44
37
  export type UnistylesValues = {
45
38
  [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
package/src/useStyles.ts CHANGED
@@ -22,22 +22,13 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
22
22
  variantsMap?: ExtractVariantNames<typeof stylesheet>
23
23
  ): ParsedStylesheet<ST> => {
24
24
  const { theme, layout, plugins } = useUnistyles()
25
-
26
- if (!stylesheet) {
27
- return {
28
- theme,
29
- breakpoint: layout.breakpoint,
30
- styles: {} as ReactNativeStyleSheet<ST>
31
- }
32
- }
33
-
34
25
  const variants = useVariants(variantsMap)
35
26
  const parsedStyles = useMemo(() => typeof stylesheet === 'function'
36
27
  ? stylesheet(theme)
37
28
  : stylesheet, [theme, stylesheet, layout])
38
29
 
39
30
  const dynamicStyleSheet = useMemo(() => Object
40
- .entries(parsedStyles)
31
+ .entries(parsedStyles || {})
41
32
  .reduce((acc, [key, value]) => {
42
33
  if (typeof value === 'function') {
43
34
  return {
@@ -56,13 +47,12 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
56
47
  variants
57
48
  )
58
49
  })
59
- }, {}),
60
- [layout, parsedStyles, variants, plugins]
61
- ) as ReactNativeStyleSheet<ST>
50
+ }, {}), [layout, parsedStyles, variants, plugins]
51
+ )
62
52
 
63
53
  return {
64
54
  theme,
65
55
  breakpoint: layout.breakpoint,
66
- styles: dynamicStyleSheet
56
+ styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
67
57
  }
68
58
  }
@@ -1,4 +1,4 @@
1
- export { mq, MQSymbol, MQHeight, MQWidth, MQHeightAndWidth, MQWidthAndHeight } from './mq'
1
+ export { mq } from './mq'
2
2
  export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
3
3
  export { getValueForBreakpoint } from './breakpoints'
4
4
  export { proxifyFunction, parseStyle } from './styles'
package/src/utils/mq.ts CHANGED
@@ -2,43 +2,25 @@ import type { Nullable } from '../types'
2
2
  import type { UnistylesBreakpoints } from '../global'
3
3
  import { unistyles } from '../core'
4
4
 
5
- export const MQSymbol = Symbol('unistyles-mq')
6
- export const MQWidth = Symbol('unistyles-mq-width')
7
- export const MQHeight = Symbol('unistyles-mq-height')
8
- export const MQWidthAndHeight = Symbol('unistyles-mq-width-and-height')
9
- export const MQHeightAndWidth = Symbol('unistyles-mq-height-and-width')
10
-
11
5
  type MQValue = keyof UnistylesBreakpoints | number
12
6
 
13
7
  type MQHandler = {
14
8
  only: {
15
- width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQWidth,
16
- height(hMin?: Nullable<MQValue>, hMax?: MQValue): typeof MQHeight,
9
+ width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
10
+ height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
17
11
  },
18
12
  width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
19
13
  and: {
20
- height(hMin?: Nullable<MQValue>, hMax?: MQValue): typeof MQWidthAndHeight
14
+ height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
21
15
  }
22
16
  },
23
17
  height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
24
18
  and: {
25
- width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQHeightAndWidth
19
+ width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
26
20
  }
27
21
  }
28
22
  }
29
23
 
30
- type FinalHandler = {
31
- [MQSymbol]: true
32
- }
33
-
34
- enum MQProp {
35
- toString = 'toString',
36
- width = 'width',
37
- height = 'height',
38
- only = 'only',
39
- and = 'and'
40
- }
41
-
42
24
  const getMQValue = (value: Nullable<MQValue>) => {
43
25
  if (typeof value === 'number') {
44
26
  return value
@@ -51,71 +33,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
51
33
  return unistyles.registry.breakpoints[value] ?? 0
52
34
  }
53
35
 
54
- const widthHandler = (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => new Proxy({} as MQHandler, {
55
- get: (target, prop, receiver) => {
56
- if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
57
- return () => `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
58
- }
59
-
60
- if (prop === MQProp.and) {
61
- return {
62
- width: (wMin: MQValue = 0, wMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
63
- get: (target, prop, receiver) => {
64
- if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
65
- return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
66
- }
67
-
68
- return Reflect.get(target, prop, receiver)
69
- }
70
- })
71
- }
72
- }
73
-
74
- return Reflect.get(target, prop, receiver)
75
- }
76
- })
77
-
78
- const heightHandler = (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => new Proxy({} as MQHandler, {
79
- get: (target, prop, receiver) => {
80
- if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
81
- return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`
82
- }
83
-
84
- if (prop === MQProp.and) {
85
- return {
86
- height: (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
87
- get: (target, prop, receiver) => {
88
- if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
89
- return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
90
- }
91
-
92
- return Reflect.get(target, prop, receiver)
93
- }
94
- })
95
- }
96
- }
97
-
98
- return Reflect.get(target, prop, receiver)
99
- }
100
- })
101
-
102
- export const mq = new Proxy<MQHandler>({} as MQHandler, {
103
- get: (target, prop, receiver) => {
104
- if (prop === MQProp.only) {
105
- return {
106
- width: heightHandler,
107
- height: widthHandler
108
- }
109
- }
110
-
111
- if (prop === MQProp.height) {
112
- return widthHandler
36
+ export const mq: MQHandler = {
37
+ only: {
38
+ width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
39
+ height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
40
+ },
41
+ width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
42
+ and: {
43
+ height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
44
+ (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
113
45
  }
114
-
115
- if (prop === MQProp.width) {
116
- return heightHandler
46
+ }),
47
+ height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
48
+ and: {
49
+ width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
50
+ (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
117
51
  }
118
-
119
- return Reflect.get(target, prop, receiver)
120
- }
121
- })
52
+ })
53
+ }
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=mq.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=mq.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}
@@ -1,3 +0,0 @@
1
- import { MQSymbol, MQHeight, MQHeightAndWidth, MQWidth, MQWidthAndHeight } from '../utils';
2
- export type MediaQuery = typeof MQSymbol | typeof MQHeight | typeof MQWidth | typeof MQHeightAndWidth | typeof MQWidthAndHeight;
3
- //# sourceMappingURL=mq.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/types/mq.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE1F,MAAM,MAAM,UAAU,GAAG,OAAO,QAAQ,GAAG,OAAO,QAAQ,GAAG,OAAO,OAAO,GAAG,OAAO,gBAAgB,GAAG,OAAO,gBAAgB,CAAA"}
package/src/types/mq.ts DELETED
@@ -1,3 +0,0 @@
1
- import { MQSymbol, MQHeight, MQHeightAndWidth, MQWidth, MQWidthAndHeight } from '../utils'
2
-
3
- export type MediaQuery = typeof MQSymbol | typeof MQHeight | typeof MQWidth | typeof MQHeightAndWidth | typeof MQWidthAndHeight