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

package/plugin/__tests__/stylesheet.spec.js

@@ -16,6 +16,7 @@ pluginTester({
         {
             title: 'Should not add dependencies to StyleSheet if user is not using theme or miniRuntime',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -34,12 +35,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -63,6 +65,7 @@ pluginTester({
         {
             title: 'Should add dependencies to StyleSheet if user is using theme',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -81,12 +84,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -111,6 +115,7 @@ pluginTester({
         {
             title: 'Should add dependencies to StyleSheet even if user did rename import',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet as ST } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -129,12 +134,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet as ST } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -159,6 +165,7 @@ pluginTester({
         {
             title: 'Should detect variants for object StyleSheet',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -178,12 +185,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -209,6 +217,7 @@ pluginTester({
         {
             title: 'Should detect variants for object StyleSheet and dynamic function',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -228,12 +237,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -259,6 +269,7 @@ pluginTester({
         {
             title: 'Should detect miniRuntime dependency',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -279,12 +290,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -311,6 +323,7 @@ pluginTester({
         {
             title: 'Should detect miniRuntime and theme dependencies even if user renamed it\'s names',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -331,12 +344,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -363,6 +377,7 @@ pluginTester({
         {
             title: 'Should detect dependencies in function',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -385,12 +400,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -416,6 +432,7 @@ pluginTester({
         {
             title: 'Should generates two different ids for 2 stylesheets in the same file',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -447,12 +464,13 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)

package/plugin/index.js

@@ -1,9 +1,29 @@
 const addShadowRegistryImport = require('./import')
-const { getStyleMetadata, getStyleAttribute } = require('./style')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
 const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
 const { isUsingVariants, extractVariants } = require('./variants')
 
+const reactNativeComponentNames = [
+    'View',
+    'Text',
+    'Image',
+    'ImageBackground',
+    'KeyboardAvoidingView',
+    'Modal',
+    'Pressable',
+    'ScrollView',
+    'FlatList',
+    'SectionList',
+    'Switch',
+    'Text',
+    'TextInput',
+    'TouchableHighlight',
+    'TouchableOpacity',
+    'TouchableWithoutFeedback',
+    'VirtualizedList'
+]
+
 module.exports = function ({ types: t }) {
     return {
         name: 'babel-react-native-unistyles',
@@ -14,6 +34,7 @@ module.exports = function ({ types: t }) {
                     state.file.hasUnistylesImport = false
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
+                    state.reactNativeImports = {}
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
@@ -33,9 +54,21 @@ module.exports = function ({ types: t }) {
                         }
                     })
                 }
+
+                if (importSource.includes('react-native')) {
+                    path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
+                            state.reactNativeImports[specifier.local.name] = true
+                        }
+                    })
+                }
             },
             JSXElement(path, state) {
-                if (!state.file.hasUnistylesImport) {
+                const openingElement = path.node.openingElement
+                const openingElementName = openingElement.name.name
+                const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
+
+                if (!isReactNativeComponent) {
                     return
                 }
 
@@ -48,11 +81,13 @@ module.exports = function ({ types: t }) {
 
                 const metadata = getStyleMetadata(t, styleAttr.value.expression)
 
-                // style prop is not using object expression
+                // style prop is using unexpected expression
                 if (metadata.length === 0) {
                     return
                 }
 
+                styleAttributeToArray(t, path)
+
                 // to add import
                 state.file.hasAnyUnistyle = true
 

package/plugin/ref.js

@@ -25,7 +25,9 @@ function addRef(t, path, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier('ref'),
-                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        metadata.styleProp
+                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                            : t.identifier(metadata.styleObj),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                         metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
@@ -35,7 +37,12 @@ function addRef(t, path, metadata, state) {
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
+                        [
+                            t.identifier('ref'),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj)
+                        ]
                     )
                 )
             )
@@ -72,10 +79,11 @@ function overrideRef(t, path, refProp, metadata, state) {
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-
                         [
                             t.identifier(uniqueRefName),
-                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                             metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
@@ -85,7 +93,12 @@ function overrideRef(t, path, refProp, metadata, state) {
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
+                            [
+                                t.identifier(uniqueRefName),
+                                metadata.styleProp
+                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                    : t.identifier(metadata.styleObj)
+                            ]
                         )
                     )
                 )
@@ -105,17 +118,22 @@ function overrideRef(t, path, refProp, metadata, state) {
         const userCleanupFunction = userReturnStatement
             ? userReturnStatement.argument
             : null
+        const userRefName = refProp.value.expression.params.length >= 1
+            ? refProp.value.expression.params.at(0).name
+            : 'ref'
 
         const newRefFunction = t.arrowFunctionExpression(
-            [t.identifier('ref')],
+            [t.identifier(userRefName)],
             t.blockStatement([
                 ...userStatements.filter(statement => !t.isReturnStatement(statement)),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
-                            t.identifier('ref'),
-                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            t.identifier(userRefName),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                             metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
@@ -132,7 +150,12 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
+                                [
+                                    t.identifier(userRefName),
+                                    metadata.styleProp
+                                        ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                        : t.identifier(metadata.styleObj)
+                                ]
                             )
                         )
                     ]))
@@ -175,7 +198,9 @@ function overrideRef(t, path, refProp, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier(uniqueRefName),
-                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        metadata.styleProp
+                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                            : t.identifier(metadata.styleObj),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                         metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
@@ -191,7 +216,12 @@ function overrideRef(t, path, refProp, metadata, state) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
+                            [
+                                t.identifier(uniqueRefName),
+                                metadata.styleProp
+                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                    : t.identifier(metadata.styleObj)
+                            ]
                         )
                     )
                 ]))

package/plugin/style.js

@@ -30,6 +30,15 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
         return getStyleMetadata(t, node.callee, node)
     }
 
+    // {styles}
+    if (t.isIdentifier(node)) {
+        return [{
+            styleObj: node.name,
+            styleProp: undefined,
+            dynamicFunction: undefined
+        }]
+    }
+
     return []
 }
 
@@ -41,7 +50,42 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // {{...style.container, ...style.container}}
+    if (t.isObjectExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.properties
+            .map(property => t.isSpreadElement(property)
+                ? property.argument
+                : t.objectExpression([property])
+            )
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    // [{...style.container, ...style.container}]
+    if (t.isArrayExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.elements
+            .flatMap(property => {
+                if (t.isSpreadElement(property)) {
+                    return property.argument
+                }
+                return property
+            })
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
+}
+
 module.exports = {
     getStyleMetadata,
-    getStyleAttribute
+    getStyleAttribute,
+    styleAttributeToArray
 }

package/src/specs/ShadowRegistry/index.ts

@@ -7,7 +7,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
+    link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     unlink(node: ShadowNode, style: Unistyle): void
 }
 
@@ -27,7 +27,7 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
 }
 
 HybridShadowRegistry.add = (handle, style, variants, args) => {
-    if (!handle || !style?.__unid) {
+    if (!handle) {
         return
     }