react-native-unistyles 3.0.0-alpha.5 → 3.0.0-alpha.7

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 (53) hide show
  1. package/cxx/common/Helpers.h +24 -0
  2. package/cxx/core/HostStyle.cpp +4 -5
  3. package/cxx/core/HostStyle.h +4 -0
  4. package/cxx/core/StyleSheet.h +0 -1
  5. package/cxx/core/StyleSheetRegistry.cpp +9 -17
  6. package/cxx/core/StyleSheetRegistry.h +3 -4
  7. package/cxx/core/UnistyleData.h +22 -0
  8. package/cxx/core/UnistylesCommitHook.cpp +4 -1
  9. package/cxx/core/UnistylesRegistry.cpp +33 -49
  10. package/cxx/core/UnistylesRegistry.h +8 -8
  11. package/cxx/hybridObjects/HybridShadowRegistry.cpp +4 -3
  12. package/cxx/hybridObjects/HybridStyleSheet.cpp +8 -11
  13. package/cxx/parser/Parser.cpp +42 -68
  14. package/cxx/parser/Parser.h +8 -13
  15. package/lib/commonjs/specs/NavigtionBar/index.js +1 -1
  16. package/lib/commonjs/specs/NavigtionBar/index.js.map +1 -1
  17. package/lib/commonjs/specs/ShadowRegistry/index.js +2 -2
  18. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  19. package/lib/commonjs/specs/StatusBar/index.js +1 -1
  20. package/lib/commonjs/specs/StatusBar/index.js.map +1 -1
  21. package/lib/commonjs/specs/StyleSheet/index.js.map +1 -1
  22. package/lib/commonjs/specs/UnistylesRuntime/index.js +1 -1
  23. package/lib/commonjs/specs/UnistylesRuntime/index.js.map +1 -1
  24. package/lib/module/specs/NavigtionBar/index.js +1 -1
  25. package/lib/module/specs/NavigtionBar/index.js.map +1 -1
  26. package/lib/module/specs/ShadowRegistry/index.js +2 -2
  27. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  28. package/lib/module/specs/StatusBar/index.js +1 -1
  29. package/lib/module/specs/StatusBar/index.js.map +1 -1
  30. package/lib/module/specs/StyleSheet/index.js.map +1 -1
  31. package/lib/module/specs/UnistylesRuntime/index.js +1 -1
  32. package/lib/module/specs/UnistylesRuntime/index.js.map +1 -1
  33. package/lib/typescript/example/App.d.ts.map +1 -1
  34. package/lib/typescript/example/Typography.d.ts +11 -0
  35. package/lib/typescript/example/Typography.d.ts.map +1 -0
  36. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +2 -2
  37. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  38. package/lib/typescript/src/specs/StyleSheet/index.d.ts +2 -1
  39. package/lib/typescript/src/specs/StyleSheet/index.d.ts.map +1 -1
  40. package/package.json +1 -1
  41. package/plugin/__tests__/dependencies.spec.js +181 -103
  42. package/plugin/__tests__/ref.spec.js +222 -158
  43. package/plugin/__tests__/stylesheet.spec.js +148 -55
  44. package/plugin/index.js +22 -11
  45. package/plugin/ref.js +35 -7
  46. package/plugin/style.js +5 -22
  47. package/plugin/stylesheet.js +44 -1
  48. package/plugin/variants.js +33 -0
  49. package/src/specs/NavigtionBar/index.ts +1 -1
  50. package/src/specs/ShadowRegistry/index.ts +4 -4
  51. package/src/specs/StatusBar/index.ts +1 -1
  52. package/src/specs/StyleSheet/index.ts +3 -1
  53. package/src/specs/UnistylesRuntime/index.ts +1 -1
package/plugin/__tests__/dependencies.spec.js CHANGED
@@ -51,7 +51,7 @@ pluginTester({
51
51
  <View
52
52
  style={styles.container}
53
53
  ref={ref => {
54
- UnistylesShadowRegistry.add(ref, styles.container)
54
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
55
55
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
56
56
  }}
57
57
  >
@@ -60,20 +60,23 @@ pluginTester({
60
60
  )
61
61
  }
62
62
 
63
- const styles = StyleSheet.create((theme, rt) => ({
64
- container: {
65
- variants: {
66
- size: {
67
- small: {
68
- backgroundColor: theme.colors.blue,
69
- paddingTop: theme.gap(10),
70
- marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
63
+ const styles = StyleSheet.create(
64
+ (theme, rt) => ({
65
+ container: {
66
+ variants: {
67
+ size: {
68
+ small: {
69
+ backgroundColor: theme.colors.blue,
70
+ paddingTop: theme.gap(10),
71
+ marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
72
+ }
71
73
  }
72
- }
73
- },
74
- uni__dependencies: [0, 9, 4]
75
- }
76
- }))
74
+ },
75
+ uni__dependencies: [0, 9, 4]
76
+ }
77
+ }),
78
+ 276736056
79
+ )
77
80
  `
78
81
  },
79
82
  {
@@ -109,7 +112,7 @@ pluginTester({
109
112
  <View
110
113
  style={styles.container}
111
114
  ref={ref => {
112
- UnistylesShadowRegistry.add(ref, styles.container)
115
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
113
116
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
114
117
  }}
115
118
  >
@@ -118,17 +121,20 @@ pluginTester({
118
121
  )
119
122
  }
120
123
 
121
- const styles = StyleSheet.create((theme, rt) => ({
122
- container: {
123
- backgroundColor: {
124
- sm: theme.colors.blue
125
- },
126
- padding: {
127
- xs: rt.insets.top
128
- },
129
- uni__dependencies: [0, 9]
130
- }
131
- }))
124
+ const styles = StyleSheet.create(
125
+ (theme, rt) => ({
126
+ container: {
127
+ backgroundColor: {
128
+ sm: theme.colors.blue
129
+ },
130
+ padding: {
131
+ xs: rt.insets.top
132
+ },
133
+ uni__dependencies: [0, 9]
134
+ }
135
+ }),
136
+ 276736056
137
+ )
132
138
  `
133
139
  },
134
140
  {
@@ -161,7 +167,7 @@ pluginTester({
161
167
  <View
162
168
  style={styles.container}
163
169
  ref={ref => {
164
- UnistylesShadowRegistry.add(ref, styles.container)
170
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
165
171
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
166
172
  }}
167
173
  >
@@ -170,14 +176,17 @@ pluginTester({
170
176
  )
171
177
  }
172
178
 
173
- const styles = StyleSheet.create((theme, rt) => ({
174
- container: {
175
- marginTop: theme.gap(2) + rt.insets.bottom,
176
- marginBottom: theme.gap(2) * rt.statusBar.height,
177
- paddingTop: theme.gap(2) - rt.navigationBar.height,
178
- uni__dependencies: [0, 9, 12, 13]
179
- }
180
- }))
179
+ const styles = StyleSheet.create(
180
+ (theme, rt) => ({
181
+ container: {
182
+ marginTop: theme.gap(2) + rt.insets.bottom,
183
+ marginBottom: theme.gap(2) * rt.statusBar.height,
184
+ paddingTop: theme.gap(2) - rt.navigationBar.height,
185
+ uni__dependencies: [0, 9, 12, 13]
186
+ }
187
+ }),
188
+ 276736056
189
+ )
181
190
  `
182
191
  },
183
192
  {
@@ -271,7 +280,7 @@ pluginTester({
271
280
  <View
272
281
  style={styles.container}
273
282
  ref={ref => {
274
- UnistylesShadowRegistry.add(ref, styles.container)
283
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
275
284
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
276
285
  }}
277
286
  >
@@ -280,80 +289,149 @@ pluginTester({
280
289
  )
281
290
  }
282
291
 
283
- const styles = StyleSheet.create((theme, rt) => ({
284
- container: {
285
- flex: 1,
286
- display: 'flex'
287
- },
288
- static: {
289
- backgroundColor: 'pink'
290
- },
291
- staticText: {
292
- color: 'red'
293
- },
294
- theme: {
295
- backgroundColor: theme.colors.backgroundColor,
296
- uni__dependencies: [0]
297
- },
298
- themeText: {
299
- color: theme.colors.typography,
300
- uni__dependencies: [0]
301
- },
302
- themeButtonsContainer: {
303
- marginTop: 20,
304
- flexDirection: 'row',
305
- gap: 10
306
- },
307
- dynamic: state => ({
308
- backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
309
- uni__dependencies: [0]
310
- }),
311
- whiteText: {
312
- color: 'white',
313
- textAlign: 'center'
314
- },
315
- hover: {
316
- backgroundColor: theme.colors.blood,
317
- cursor: 'pointer',
318
- _web: {
319
- _hover: {
320
- backgroundColor: theme.colors.sky,
321
- paddingTop: rt.insets.top
322
- }
292
+ const styles = StyleSheet.create(
293
+ (theme, rt) => ({
294
+ container: {
295
+ flex: 1,
296
+ display: 'flex'
323
297
  },
324
- uni__dependencies: [0, 9]
325
- },
326
- breakpoint: {
327
- backgroundColor: {
328
- xs: theme.colors.blood,
329
- md: theme.colors.sky,
330
- xl: theme.colors.aloes
298
+ static: {
299
+ backgroundColor: 'pink'
331
300
  },
332
- transform: [
333
- {
334
- translateX: {
335
- xs: rt.fontScale * 10,
336
- md: rt.pixelRatio * 10
301
+ staticText: {
302
+ color: 'red'
303
+ },
304
+ theme: {
305
+ backgroundColor: theme.colors.backgroundColor,
306
+ uni__dependencies: [0]
307
+ },
308
+ themeText: {
309
+ color: theme.colors.typography,
310
+ uni__dependencies: [0]
311
+ },
312
+ themeButtonsContainer: {
313
+ marginTop: 20,
314
+ flexDirection: 'row',
315
+ gap: 10
316
+ },
317
+ dynamic: state => ({
318
+ backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
319
+ uni__dependencies: [0]
320
+ }),
321
+ whiteText: {
322
+ color: 'white',
323
+ textAlign: 'center'
324
+ },
325
+ hover: {
326
+ backgroundColor: theme.colors.blood,
327
+ cursor: 'pointer',
328
+ _web: {
329
+ _hover: {
330
+ backgroundColor: theme.colors.sky,
331
+ paddingTop: rt.insets.top
337
332
  }
338
- }
339
- ],
333
+ },
334
+ uni__dependencies: [0, 9]
335
+ },
336
+ breakpoint: {
337
+ backgroundColor: {
338
+ xs: theme.colors.blood,
339
+ md: theme.colors.sky,
340
+ xl: theme.colors.aloes
341
+ },
342
+ transform: [
343
+ {
344
+ translateX: {
345
+ xs: rt.fontScale * 10,
346
+ md: rt.pixelRatio * 10
347
+ }
348
+ }
349
+ ],
340
350
 
341
- position: 'relative',
342
- _web: {
343
- _after: {
344
- fontWeight: 'bold',
345
- content: rt.breakpoint,
346
- color: 'white',
347
- position: 'absolute',
348
- top: '60%',
349
- left: '50%',
350
- transform: 'translate(-50%, -50%)',
351
- backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
351
+ position: 'relative',
352
+ _web: {
353
+ _after: {
354
+ fontWeight: 'bold',
355
+ content: rt.breakpoint,
356
+ color: 'white',
357
+ position: 'absolute',
358
+ top: '60%',
359
+ left: '50%',
360
+ transform: 'translate(-50%, -50%)',
361
+ backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
362
+ }
363
+ },
364
+ uni__dependencies: [0, 11, 10, 3, 5]
365
+ }
366
+ }),
367
+ 276736056
368
+ )
369
+ `
370
+ },
371
+ {
372
+ title: 'Should allow user to use arrow functions with body for dynamic functions',
373
+ code: `
374
+ import { StyleSheet } from 'react-native-unistyles'
375
+
376
+ export const Example = () => {
377
+ return (
378
+ <View style={styles.container}>
379
+ <Text>Hello world</Text>
380
+ </View>
381
+ )
382
+ }
383
+
384
+ const styles = StyleSheet.create((theme, rt) => ({
385
+ container: () => {
386
+ const b = 2 + 2
387
+
388
+ return {
389
+ backgroundColor: {
390
+ sm: theme.colors.blue
391
+ },
392
+ padding: {
393
+ xs: rt.insets.top + b
352
394
  }
353
- },
354
- uni__dependencies: [0, 11, 10, 3, 5]
395
+ }
355
396
  }
356
397
  }))
398
+ `,
399
+ output: `
400
+ import { UnistylesShadowRegistry } from 'react-native-unistyles'
401
+ import { StyleSheet } from 'react-native-unistyles'
402
+
403
+ export const Example = () => {
404
+ return (
405
+ <View
406
+ style={styles.container}
407
+ ref={ref => {
408
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
409
+ return () => UnistylesShadowRegistry.remove(ref, styles.container)
410
+ }}
411
+ >
412
+ <Text>Hello world</Text>
413
+ </View>
414
+ )
415
+ }
416
+
417
+ const styles = StyleSheet.create(
418
+ (theme, rt) => ({
419
+ container: () => {
420
+ const b = 2 + 2
421
+
422
+ return {
423
+ backgroundColor: {
424
+ sm: theme.colors.blue
425
+ },
426
+ padding: {
427
+ xs: rt.insets.top + b
428
+ },
429
+ uni__dependencies: [0, 9]
430
+ }
431
+ }
432
+ }),
433
+ 276736056
434
+ )
357
435
  `
358
436
  },
359
437
  ]