react-native-unistyles 3.0.0-alpha.10 → 3.0.0-alpha.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. package/cxx/core/Unistyle.h +7 -4
  2. package/cxx/core/UnistyleWrapper.h +19 -1
  3. package/cxx/core/UnistylesRegistry.cpp +18 -35
  4. package/cxx/core/UnistylesRegistry.h +1 -4
  5. package/cxx/hybridObjects/HybridShadowRegistry.cpp +7 -7
  6. package/cxx/parser/Parser.cpp +33 -39
  7. package/cxx/parser/Parser.h +1 -1
  8. package/cxx/shadowTree/ShadowLeafUpdate.h +1 -1
  9. package/cxx/shadowTree/ShadowTreeManager.cpp +3 -8
  10. package/lib/commonjs/specs/ShadowRegistry/index.js +1 -1
  11. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  12. package/lib/module/specs/ShadowRegistry/index.js +1 -1
  13. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  14. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +1 -1
  15. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  16. package/package.json +1 -1
  17. package/plugin/__tests__/dependencies.spec.js +15 -5
  18. package/plugin/__tests__/ref.spec.js +209 -30
  19. package/plugin/__tests__/stylesheet.spec.js +27 -9
  20. package/plugin/index.js +38 -3
  21. package/plugin/ref.js +41 -11
  22. package/plugin/style.js +45 -1
  23. package/src/specs/ShadowRegistry/index.ts +2 -2
package/plugin/__tests__/stylesheet.spec.js CHANGED
@@ -16,6 +16,7 @@ pluginTester({
16
16
  {
17
17
  title: 'Should not add dependencies to StyleSheet if user is not using theme or miniRuntime',
18
18
  code: `
19
+ import { View, Text } from 'react-native'
19
20
  import { StyleSheet } from 'react-native-unistyles'
20
21
 
21
22
  export const Example = () => {
@@ -34,12 +35,13 @@ pluginTester({
34
35
  `,
35
36
  output: `
36
37
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
38
+ import { View, Text } from 'react-native'
37
39
  import { StyleSheet } from 'react-native-unistyles'
38
40
 
39
41
  export const Example = () => {
40
42
  return (
41
43
  <View
42
- style={styles.container}
44
+ style={[styles.container]}
43
45
  ref={ref => {
44
46
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
45
47
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -63,6 +65,7 @@ pluginTester({
63
65
  {
64
66
  title: 'Should add dependencies to StyleSheet if user is using theme',
65
67
  code: `
68
+ import { View, Text } from 'react-native'
66
69
  import { StyleSheet } from 'react-native-unistyles'
67
70
 
68
71
  export const Example = () => {
@@ -81,12 +84,13 @@ pluginTester({
81
84
  `,
82
85
  output: `
83
86
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
87
+ import { View, Text } from 'react-native'
84
88
  import { StyleSheet } from 'react-native-unistyles'
85
89
 
86
90
  export const Example = () => {
87
91
  return (
88
92
  <View
89
- style={styles.container}
93
+ style={[styles.container]}
90
94
  ref={ref => {
91
95
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
92
96
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -111,6 +115,7 @@ pluginTester({
111
115
  {
112
116
  title: 'Should add dependencies to StyleSheet even if user did rename import',
113
117
  code: `
118
+ import { View, Text } from 'react-native'
114
119
  import { StyleSheet as ST } from 'react-native-unistyles'
115
120
 
116
121
  export const Example = () => {
@@ -129,12 +134,13 @@ pluginTester({
129
134
  `,
130
135
  output: `
131
136
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
137
+ import { View, Text } from 'react-native'
132
138
  import { StyleSheet as ST } from 'react-native-unistyles'
133
139
 
134
140
  export const Example = () => {
135
141
  return (
136
142
  <View
137
- style={styles.container}
143
+ style={[styles.container]}
138
144
  ref={ref => {
139
145
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
140
146
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -159,6 +165,7 @@ pluginTester({
159
165
  {
160
166
  title: 'Should detect variants for object StyleSheet',
161
167
  code: `
168
+ import { View, Text } from 'react-native'
162
169
  import { StyleSheet } from 'react-native-unistyles'
163
170
 
164
171
  export const Example = () => {
@@ -178,12 +185,13 @@ pluginTester({
178
185
  `,
179
186
  output: `
180
187
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
188
+ import { View, Text } from 'react-native'
181
189
  import { StyleSheet } from 'react-native-unistyles'
182
190
 
183
191
  export const Example = () => {
184
192
  return (
185
193
  <View
186
- style={styles.container}
194
+ style={[styles.container]}
187
195
  ref={ref => {
188
196
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
189
197
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -209,6 +217,7 @@ pluginTester({
209
217
  {
210
218
  title: 'Should detect variants for object StyleSheet and dynamic function',
211
219
  code: `
220
+ import { View, Text } from 'react-native'
212
221
  import { StyleSheet } from 'react-native-unistyles'
213
222
 
214
223
  export const Example = () => {
@@ -228,12 +237,13 @@ pluginTester({
228
237
  `,
229
238
  output: `
230
239
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
240
+ import { View, Text } from 'react-native'
231
241
  import { StyleSheet } from 'react-native-unistyles'
232
242
 
233
243
  export const Example = () => {
234
244
  return (
235
245
  <View
236
- style={styles.container}
246
+ style={[styles.container]}
237
247
  ref={ref => {
238
248
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
239
249
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -259,6 +269,7 @@ pluginTester({
259
269
  {
260
270
  title: 'Should detect miniRuntime dependency',
261
271
  code: `
272
+ import { View, Text } from 'react-native'
262
273
  import { StyleSheet } from 'react-native-unistyles'
263
274
 
264
275
  export const Example = () => {
@@ -279,12 +290,13 @@ pluginTester({
279
290
  `,
280
291
  output: `
281
292
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
293
+ import { View, Text } from 'react-native'
282
294
  import { StyleSheet } from 'react-native-unistyles'
283
295
 
284
296
  export const Example = () => {
285
297
  return (
286
298
  <View
287
- style={styles.container}
299
+ style={[styles.container]}
288
300
  ref={ref => {
289
301
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
290
302
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -311,6 +323,7 @@ pluginTester({
311
323
  {
312
324
  title: 'Should detect miniRuntime and theme dependencies even if user renamed it\'s names',
313
325
  code: `
326
+ import { View, Text } from 'react-native'
314
327
  import { StyleSheet } from 'react-native-unistyles'
315
328
 
316
329
  export const Example = () => {
@@ -331,12 +344,13 @@ pluginTester({
331
344
  `,
332
345
  output: `
333
346
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
347
+ import { View, Text } from 'react-native'
334
348
  import { StyleSheet } from 'react-native-unistyles'
335
349
 
336
350
  export const Example = () => {
337
351
  return (
338
352
  <View
339
- style={styles.container}
353
+ style={[styles.container]}
340
354
  ref={ref => {
341
355
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
342
356
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -363,6 +377,7 @@ pluginTester({
363
377
  {
364
378
  title: 'Should detect dependencies in function',
365
379
  code: `
380
+ import { View, Text } from 'react-native'
366
381
  import { StyleSheet } from 'react-native-unistyles'
367
382
 
368
383
  export const Example = () => {
@@ -385,12 +400,13 @@ pluginTester({
385
400
  `,
386
401
  output: `
387
402
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
403
+ import { View, Text } from 'react-native'
388
404
  import { StyleSheet } from 'react-native-unistyles'
389
405
 
390
406
  export const Example = () => {
391
407
  return (
392
408
  <View
393
- style={styles.container}
409
+ style={[styles.container]}
394
410
  ref={ref => {
395
411
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
396
412
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -416,6 +432,7 @@ pluginTester({
416
432
  {
417
433
  title: 'Should generates two different ids for 2 stylesheets in the same file',
418
434
  code: `
435
+ import { View, Text } from 'react-native'
419
436
  import { StyleSheet } from 'react-native-unistyles'
420
437
 
421
438
  export const Example = () => {
@@ -447,12 +464,13 @@ pluginTester({
447
464
  `,
448
465
  output: `
449
466
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
467
+ import { View, Text } from 'react-native'
450
468
  import { StyleSheet } from 'react-native-unistyles'
451
469
 
452
470
  export const Example = () => {
453
471
  return (
454
472
  <View
455
- style={styles.container}
473
+ style={[styles.container]}
456
474
  ref={ref => {
457
475
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
458
476
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
package/plugin/index.js CHANGED
@@ -1,9 +1,29 @@
1
1
  const addShadowRegistryImport = require('./import')
2
- const { getStyleMetadata, getStyleAttribute } = require('./style')
2
+ const { getStyleMetadata, getStyleAttribute, styleAttributeToArray } = require('./style')
3
3
  const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
4
4
  const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
5
5
  const { isUsingVariants, extractVariants } = require('./variants')
6
6
 
7
+ const reactNativeComponentNames = [
8
+ 'View',
9
+ 'Text',
10
+ 'Image',
11
+ 'ImageBackground',
12
+ 'KeyboardAvoidingView',
13
+ 'Modal',
14
+ 'Pressable',
15
+ 'ScrollView',
16
+ 'FlatList',
17
+ 'SectionList',
18
+ 'Switch',
19
+ 'Text',
20
+ 'TextInput',
21
+ 'TouchableHighlight',
22
+ 'TouchableOpacity',
23
+ 'TouchableWithoutFeedback',
24
+ 'VirtualizedList'
25
+ ]
26
+
7
27
  module.exports = function ({ types: t }) {
8
28
  return {
9
29
  name: 'babel-react-native-unistyles',
@@ -14,6 +34,7 @@ module.exports = function ({ types: t }) {
14
34
  state.file.hasUnistylesImport = false
15
35
  state.file.styleSheetLocalName = ''
16
36
  state.file.tagNumber = 0
37
+ state.reactNativeImports = {}
17
38
  },
18
39
  exit(path, state) {
19
40
  if (state.file.hasAnyUnistyle) {
@@ -33,9 +54,21 @@ module.exports = function ({ types: t }) {
33
54
  }
34
55
  })
35
56
  }
57
+
58
+ if (importSource.includes('react-native')) {
59
+ path.node.specifiers.forEach(specifier => {
60
+ if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
61
+ state.reactNativeImports[specifier.local.name] = true
62
+ }
63
+ })
64
+ }
36
65
  },
37
66
  JSXElement(path, state) {
38
- if (!state.file.hasUnistylesImport) {
67
+ const openingElement = path.node.openingElement
68
+ const openingElementName = openingElement.name.name
69
+ const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
70
+
71
+ if (!isReactNativeComponent) {
39
72
  return
40
73
  }
41
74
 
@@ -48,11 +81,13 @@ module.exports = function ({ types: t }) {
48
81
 
49
82
  const metadata = getStyleMetadata(t, styleAttr.value.expression)
50
83
 
51
- // style prop is not using object expression
84
+ // style prop is using unexpected expression
52
85
  if (metadata.length === 0) {
53
86
  return
54
87
  }
55
88
 
89
+ styleAttributeToArray(t, path)
90
+
56
91
  // to add import
57
92
  state.file.hasAnyUnistyle = true
58
93
 
package/plugin/ref.js CHANGED
@@ -25,7 +25,9 @@ function addRef(t, path, metadata, state) {
25
25
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
26
26
  [
27
27
  t.identifier('ref'),
28
- t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
28
+ metadata.styleProp
29
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
30
+ : t.identifier(metadata.styleObj),
29
31
  t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
30
32
  metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
31
33
  ]
@@ -35,7 +37,12 @@ function addRef(t, path, metadata, state) {
35
37
  t.arrowFunctionExpression([],
36
38
  t.callExpression(
37
39
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
38
- [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
40
+ [
41
+ t.identifier('ref'),
42
+ metadata.styleProp
43
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
44
+ : t.identifier(metadata.styleObj)
45
+ ]
39
46
  )
40
47
  )
41
48
  )
@@ -72,10 +79,11 @@ function overrideRef(t, path, refProp, metadata, state) {
72
79
  t.expressionStatement(
73
80
  t.callExpression(
74
81
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
75
-
76
82
  [
77
83
  t.identifier(uniqueRefName),
78
- t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
84
+ metadata.styleProp
85
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
86
+ : t.identifier(metadata.styleObj),
79
87
  t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
80
88
  metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
81
89
  ]
@@ -85,7 +93,12 @@ function overrideRef(t, path, refProp, metadata, state) {
85
93
  t.arrowFunctionExpression([],
86
94
  t.callExpression(
87
95
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
88
- [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
96
+ [
97
+ t.identifier(uniqueRefName),
98
+ metadata.styleProp
99
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
100
+ : t.identifier(metadata.styleObj)
101
+ ]
89
102
  )
90
103
  )
91
104
  )
@@ -105,17 +118,22 @@ function overrideRef(t, path, refProp, metadata, state) {
105
118
  const userCleanupFunction = userReturnStatement
106
119
  ? userReturnStatement.argument
107
120
  : null
121
+ const userRefName = refProp.value.expression.params.length >= 1
122
+ ? refProp.value.expression.params.at(0).name
123
+ : 'ref'
108
124
 
109
125
  const newRefFunction = t.arrowFunctionExpression(
110
- [t.identifier('ref')],
126
+ [t.identifier(userRefName)],
111
127
  t.blockStatement([
112
128
  ...userStatements.filter(statement => !t.isReturnStatement(statement)),
113
129
  t.expressionStatement(
114
130
  t.callExpression(
115
131
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
116
132
  [
117
- t.identifier('ref'),
118
- t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
133
+ t.identifier(userRefName),
134
+ metadata.styleProp
135
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
136
+ : t.identifier(metadata.styleObj),
119
137
  t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
120
138
  metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
121
139
  ]
@@ -132,7 +150,12 @@ function overrideRef(t, path, refProp, metadata, state) {
132
150
  t.expressionStatement(
133
151
  t.callExpression(
134
152
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
135
- [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
153
+ [
154
+ t.identifier(userRefName),
155
+ metadata.styleProp
156
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
157
+ : t.identifier(metadata.styleObj)
158
+ ]
136
159
  )
137
160
  )
138
161
  ]))
@@ -175,7 +198,9 @@ function overrideRef(t, path, refProp, metadata, state) {
175
198
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
176
199
  [
177
200
  t.identifier(uniqueRefName),
178
- t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
201
+ metadata.styleProp
202
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
203
+ : t.identifier(metadata.styleObj),
179
204
  t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
180
205
  metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
181
206
  ]
@@ -191,7 +216,12 @@ function overrideRef(t, path, refProp, metadata, state) {
191
216
  t.expressionStatement(
192
217
  t.callExpression(
193
218
  t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
194
- [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
219
+ [
220
+ t.identifier(uniqueRefName),
221
+ metadata.styleProp
222
+ ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
223
+ : t.identifier(metadata.styleObj)
224
+ ]
195
225
  )
196
226
  )
197
227
  ]))
package/plugin/style.js CHANGED
@@ -30,6 +30,15 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
30
30
  return getStyleMetadata(t, node.callee, node)
31
31
  }
32
32
 
33
+ // {styles}
34
+ if (t.isIdentifier(node)) {
35
+ return [{
36
+ styleObj: node.name,
37
+ styleProp: undefined,
38
+ dynamicFunction: undefined
39
+ }]
40
+ }
41
+
33
42
  return []
34
43
  }
35
44
 
@@ -41,7 +50,42 @@ function getStyleAttribute(t, path) {
41
50
  )
42
51
  }
43
52
 
53
+ function styleAttributeToArray(t, path) {
54
+ const styleAttribute = getStyleAttribute(t, path)
55
+
56
+ // {{...style.container, ...style.container}}
57
+ if (t.isObjectExpression(styleAttribute.value.expression)) {
58
+ const properties = styleAttribute.value.expression.properties
59
+ .map(property => t.isSpreadElement(property)
60
+ ? property.argument
61
+ : t.objectExpression([property])
62
+ )
63
+
64
+ styleAttribute.value.expression = t.arrayExpression(properties)
65
+
66
+ return
67
+ }
68
+
69
+ // [{...style.container, ...style.container}]
70
+ if (t.isArrayExpression(styleAttribute.value.expression)) {
71
+ const properties = styleAttribute.value.expression.elements
72
+ .flatMap(property => {
73
+ if (t.isSpreadElement(property)) {
74
+ return property.argument
75
+ }
76
+ return property
77
+ })
78
+
79
+ styleAttribute.value.expression = t.arrayExpression(properties)
80
+
81
+ return
82
+ }
83
+
84
+ styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
85
+ }
86
+
44
87
  module.exports = {
45
88
  getStyleMetadata,
46
- getStyleAttribute
89
+ getStyleAttribute,
90
+ styleAttributeToArray
47
91
  }
package/src/specs/ShadowRegistry/index.ts CHANGED
@@ -7,7 +7,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
7
7
  add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
8
8
  remove(handle?: ViewHandle, style?: Unistyle): void,
9
9
  // JSI
10
- link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
10
+ link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
11
11
  unlink(node: ShadowNode, style: Unistyle): void
12
12
  }
13
13
 
@@ -27,7 +27,7 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
27
27
  }
28
28
 
29
29
  HybridShadowRegistry.add = (handle, style, variants, args) => {
30
- if (!handle || !style?.__unid) {
30
+ if (!handle) {
31
31
  return
32
32
  }
33
33