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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) 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 +41 -57
  14. package/cxx/parser/Parser.h +8 -13
  15. package/lib/commonjs/specs/ShadowRegistry/index.js +2 -2
  16. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  17. package/lib/commonjs/specs/StyleSheet/index.js.map +1 -1
  18. package/lib/module/specs/ShadowRegistry/index.js +2 -2
  19. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  20. package/lib/module/specs/StyleSheet/index.js.map +1 -1
  21. package/lib/typescript/example/App.d.ts.map +1 -1
  22. package/lib/typescript/example/Typography.d.ts +11 -0
  23. package/lib/typescript/example/Typography.d.ts.map +1 -0
  24. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +2 -2
  25. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  26. package/lib/typescript/src/specs/StyleSheet/index.d.ts +2 -1
  27. package/lib/typescript/src/specs/StyleSheet/index.d.ts.map +1 -1
  28. package/package.json +1 -1
  29. package/plugin/__tests__/dependencies.spec.js +181 -103
  30. package/plugin/__tests__/ref.spec.js +222 -158
  31. package/plugin/__tests__/stylesheet.spec.js +148 -55
  32. package/plugin/index.js +22 -11
  33. package/plugin/ref.js +35 -7
  34. package/plugin/style.js +5 -22
  35. package/plugin/stylesheet.js +44 -1
  36. package/plugin/variants.js +33 -0
  37. package/src/specs/ShadowRegistry/index.ts +4 -4
  38. package/src/specs/StyleSheet/index.ts +3 -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
  ]