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

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 (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