react-native-unistyles 3.0.0-alpha.9 → 3.0.0-beta.1

package/plugin/index.js

@@ -1,9 +1,29 @@
-const addShadowRegistryImport = require('./import')
-const { getStyleMetadata, getStyleAttribute } = require('./style')
+const addUnistylesImport = require('./import')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = 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',
@@ -12,15 +32,51 @@ module.exports = function ({ types: t }) {
                 enter(path, state) {
                     state.file.hasAnyUnistyle = false
                     state.file.hasUnistylesImport = false
+                    state.file.shouldIncludePressable = false
+                    state.file.hasVariants = false
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
+                    state.file.isClassComponent = false
+                    state.reactNativeImports = {}
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
-                        addShadowRegistryImport(t, path)
+                        addUnistylesImport(t, path, state)
                     }
                 }
             },
+            FunctionDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                }
+            },
+            ClassDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                    state.file.isClassComponent = true
+                }
+            },
+            VariableDeclaration(path, state) {
+                path.node.declarations.forEach((declaration) => {
+                    if (t.isArrowFunctionExpression(declaration.init) || t.isFunctionExpression(declaration.init)) {
+                        const componentName = declaration.id
+                            ? declaration.id.name
+                            : null
+
+                        if (componentName) {
+                            state.file.hasVariants = false
+                        }
+                    }
+                })
+            },
             ImportDeclaration(path, state) {
                 const importSource = path.node.source.value
 
@@ -33,9 +89,38 @@ module.exports = function ({ types: t }) {
                         }
                     })
                 }
+
+                if (importSource.includes('react-native')) {
+                    path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && specifier.imported.name === 'Pressable' && specifier.local.name !== 'NativePressableReactNative') {
+                            state.file.shouldIncludePressable = true
+                        }
+
+                        if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
+                            state.reactNativeImports[specifier.local.name] = true
+                        }
+                    })
+                }
+
+                if (importSource.includes('react-native-web/dist/exports/Pressable')) {
+                    state.file.shouldIncludePressable = true
+                }
             },
             JSXElement(path, state) {
-                if (!state.file.hasUnistylesImport) {
+                if (state.file.isClassComponent) {
+                    return
+                }
+
+                const openingElement = path.node.openingElement
+                const openingElementName = openingElement.name.name
+                const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
+                const isAnimatedComponent = (
+                    !isReactNativeComponent &&
+                    openingElement.name.object &&
+                    openingElement.name.object.name === 'Animated'
+                )
+
+                if (!isReactNativeComponent && !isAnimatedComponent) {
                     return
                 }
 
@@ -46,27 +131,31 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const metadata = getStyleMetadata(t, styleAttr.value.expression)
+                const metadata = getStyleMetadata(t, styleAttr.value.expression, null, state)
+
+                if (openingElementName === 'Pressable') {
+                    return handlePressable(t, path, styleAttr, metadata, state)
+                }
 
-                // 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
 
-                metadata.forEach(meta => {
-                    const refProp = getRefProp(t, path)
+                const refProp = getRefProp(t, path)
 
-                    if (!refProp && hasStringRef(t, path)) {
-                        throw new Error("Detected string based ref which is not supported by Unistyles.")
-                    }
+                if (!refProp && hasStringRef(t, path)) {
+                    throw new Error("Detected string based ref which is not supported by Unistyles.")
+                }
 
-                    refProp
-                        ? overrideRef(t, path, refProp, meta, state)
-                        : addRef(t, path, meta, state)
-                })
+                refProp
+                    ? overrideRef(t, path, refProp, metadata, state)
+                    : addRef(t, path, metadata, state)
             },
             CallExpression(path, state) {
                 if (isUsingVariants(t, path)) {

package/plugin/ref.js

@@ -14,6 +14,32 @@ function hasStringRef(t, path) {
     )
 }
 
+function arrayExpressionFromMetadata(t, metadata) {
+    const memberExpressions = metadata
+        .map(meta => {
+            // possible for inline styles
+            if (meta.members.length === 0) {
+                return meta.inlineStyle || meta.conditionalExpression || meta.logicalExpression
+            }
+
+            const [base, ...members] = meta.members
+
+            return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+        })
+
+    return t.arrayExpression(memberExpressions)
+}
+
+function arrayFromDynamicFunctionArgs(t, metadata, path) {
+    const memberExpressions = metadata
+        .map(meta => meta.dynamicFunction
+            ? t.arrayExpression(meta.dynamicFunction.arguments)
+            : t.arrayExpression([]))
+        .filter(Boolean)
+
+    return t.arrayExpression(memberExpressions)
+}
+
 function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
@@ -25,9 +51,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)),
+                        arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
                     ]
                 )
             ),
@@ -35,7 +61,7 @@ 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')]
                     )
                 )
             )
@@ -72,12 +98,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)),
+                            arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
                         ]
                     )
                 ),
@@ -85,7 +110,9 @@ 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)
+                            ]
                         )
                     )
                 )
@@ -105,19 +132,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),
+                            arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
                         ]
                     )
                 ),
@@ -132,7 +162,9 @@ 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)
+                                ]
                             )
                         )
                     ]))
@@ -175,9 +207,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)),
+                        arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
                     ]
                 )
             ),
@@ -191,10 +223,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)
+                            ]
                         )
                     )
-                ]))
+                ].filter(Boolean)))
             )
         ])
     )