react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.41

package/plugin/index.js

@@ -1,7 +1,28 @@
 const addShadowRegistryImport = require('./import')
-const { getStyleObjectPath, getStyleAttribute } = require('./style')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
-const { isUnistylesStyleSheet, analyzeDependencies } = require('./stylesheet')
+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 {
@@ -12,7 +33,9 @@ module.exports = function ({ types: t }) {
                     state.file.hasAnyUnistyle = false
                     state.file.hasUnistylesImport = false
                     state.file.styleSheetLocalName = ''
-                    state.file.webDynamicFunctions = {}
+                    state.file.tagNumber = 0
+                    state.file.isClassComponent = false
+                    state.reactNativeImports = {}
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
@@ -20,6 +43,38 @@ module.exports = function ({ types: t }) {
                     }
                 }
             },
+            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
 
@@ -32,9 +87,30 @@ 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) {
+                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
                 }
 
@@ -45,13 +121,19 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const stylePath = getStyleObjectPath(t, styleAttr.value.expression, state)
+                const metadata = getStyleMetadata(t, styleAttr.value.expression)
 
-                // style prop is not using object expression
-                if (stylePath.length !== 2) {
+                // style prop is using unexpected expression
+                if (metadata.length === 0) {
                     return
                 }
 
+                const uniquePressableId = openingElementName === 'Pressable'
+                    ? handlePressable(t, path, styleAttr, metadata)
+                    : undefined
+
+                styleAttributeToArray(t, path)
+
                 // to add import
                 state.file.hasAnyUnistyle = true
 
@@ -61,27 +143,32 @@ module.exports = function ({ types: t }) {
                     throw new Error("Detected string based ref which is not supported by Unistyles.")
                 }
 
-                const styleObj = stylePath[0]
-                const styleProp = stylePath[1]
-
                 refProp
-                    ? overrideRef(t, path, refProp, styleObj, styleProp)
-                    : addRef(t, path, styleObj, styleProp)
+                    ? overrideRef(t, path, refProp, metadata, state, uniquePressableId)
+                    : addRef(t, path, metadata, state, uniquePressableId)
             },
             CallExpression(path, state) {
+                if (isUsingVariants(t, path)) {
+                    extractVariants(t, path, state)
+                }
+
                 if (!isUnistylesStyleSheet(t, path, state)) {
                     return
                 }
 
+                addStyleSheetTag(t, path, state)
+
                 const arg = path.node.arguments[0]
 
                 // Object passed to StyleSheet.create
                 if (t.isObjectExpression(arg)) {
                     arg.properties.forEach(property => {
                         if (t.isObjectProperty(property)) {
-                            const propertyValue = t.isArrowFunctionExpression(property.value)
-                                ? property.value.body
-                                : property.value
+                            const propertyValue = getUnistyle(t, property)
+
+                            if (!propertyValue) {
+                                return
+                            }
 
                             analyzeDependencies(t, state, property.key.name, propertyValue)
                         }
@@ -107,9 +194,11 @@ module.exports = function ({ types: t }) {
                     if (t.isObjectExpression(body)) {
                         body.properties.forEach(property => {
                             if (t.isObjectProperty(property)) {
-                                const propertyValue = t.isArrowFunctionExpression(property.value)
-                                    ? property.value.body
-                                    : property.value
+                                const propertyValue = getUnistyle(t, property)
+
+                                if (!propertyValue) {
+                                    return
+                                }
 
                                 analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
                             }

package/plugin/ref.js

@@ -1,3 +1,9 @@
+const { PRESSABLE_STATE_NAME } = require('./common')
+
+function generateUniqueId() {
+    return `${Math.random().toString(36).substring(2, 9)}`
+}
+
 function getRefProp(t, path) {
     return path.node.openingElement.attributes.find(attr =>
         t.isJSXAttribute(attr) &&
@@ -14,21 +20,104 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp) {
+function arrayExpressionFromMetadata(t, metadata) {
+    const memberExpressions = metadata
+        .map(meta => {
+            // possible for inline styles
+            if (meta.members.length === 0) {
+                return meta.inlineStyle || meta.conditionalExpression
+            }
+
+            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 hasPressableDynamicFunction = path.node.openingElement.attributes
+        .find(attr => t.isJSXIdentifier(attr.name) && attr.name.name === "style" && t.isArrowFunctionExpression(attr.value.expression))
+
+    const memberExpressions = metadata
+        .map(meta => {
+            if (meta.dynamicFunction && meta.dynamicFunction.arguments) {
+                const args = meta.dynamicFunction.arguments.map(arg => {
+                    // special case for pressable
+                    if (t.isIdentifier(arg) && arg.name === PRESSABLE_STATE_NAME) {
+                        // replace with { pressed: false }
+                        return t.objectExpression([
+                            t.objectProperty(
+                                t.identifier("pressed"),
+                                t.booleanLiteral(false)
+                            )
+                        ])
+                    }
+
+                    if (t.isMemberExpression(arg) && arg.object.name === PRESSABLE_STATE_NAME) {
+                        return t.identifier('false')
+                    }
+
+                    return arg
+                })
+
+                return t.arrayExpression(args)
+            }
+
+            // typeof styles.pressable === "function" ? { pressed: false } : []
+            if (hasPressableDynamicFunction) {
+                return t.arrayExpression([
+                    t.conditionalExpression(
+                        t.binaryExpression(
+                            "===",
+                            t.unaryExpression(
+                                "typeof",
+                                t.identifier("styles.pressable")
+                            ),
+                            t.stringLiteral("function")
+                        ),
+                        t.objectExpression([
+                            t.objectProperty(
+                                t.identifier("pressed"),
+                                t.booleanLiteral(false)
+                            )
+                        ]),
+                        t.arrayExpression([])
+                    )
+                ])
+            }
+
+            return t.arrayExpression([])
+        })
+        .filter(Boolean)
+
+    return t.arrayExpression(memberExpressions)
+}
+
+function addRef(t, path, metadata, state, uniquePressableId) {
+    const hasVariants = state.file.hasVariants
+
     const newRefFunction = t.arrowFunctionExpression(
         [t.identifier('ref')],
         t.blockStatement([
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier('ref'),
+                        arrayExpressionFromMetadata(t, metadata),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        arrayFromDynamicFunctionArgs(t, metadata, path),
+                        uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
+                    ].filter(Boolean)
                 )
             ),
             t.returnStatement(
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [t.identifier('ref')]
                     )
                 )
             )
@@ -43,7 +132,8 @@ function addRef(t, path, styleObj, styleProp) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp) {
+function overrideRef(t, path, refProp, metadata, state, uniquePressableId) {
+    const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
     const binding = path.scope.getBinding(refProp.value.expression.name)
@@ -55,19 +145,31 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             [t.identifier(uniqueRefName)],
             t.blockStatement([
                 t.expressionStatement(
-                    t.assignmentExpression('=', t.identifier(userVariableName), t.identifier(uniqueRefName))
+                    t.assignmentExpression(
+                        '=',
+                        t.memberExpression(t.identifier(userVariableName), t.identifier('current')),
+                        t.identifier(uniqueRefName)
+                    )
                 ),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(uniqueRefName),
+                            arrayExpressionFromMetadata(t, metadata),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            arrayFromDynamicFunctionArgs(t, metadata, path),
+                            uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
+                        ].filter(Boolean)
                     )
                 ),
                 t.returnStatement(
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName)
+                            ]
                         )
                     )
                 )
@@ -87,15 +189,24 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         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(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(userRefName),
+                            arrayExpressionFromMetadata(t, metadata),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            arrayFromDynamicFunctionArgs(t, metadata, path),
+                            uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
+                        ].filter(Boolean)
                     )
                 ),
                 // Merged cleanup function
@@ -109,7 +220,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                                [
+                                    t.identifier(userRefName)
+                                ]
                             )
                         )
                     ]))
@@ -122,6 +235,10 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         return
     }
 
+    if (!binding) {
+        return
+    }
+
     // ref={scopedFunction}
     const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
     const isFunction = t.isFunctionDeclaration(binding.path.node)
@@ -146,7 +263,13 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier(uniqueRefName),
+                        arrayExpressionFromMetadata(t, metadata),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        arrayFromDynamicFunctionArgs(t, metadata, path),
+                        uniquePressableId ? t.stringLiteral(uniquePressableId) : undefined
+                    ].filter(Boolean)
                 )
             ),
             t.returnStatement(
@@ -159,10 +282,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName)
+                            ]
                         )
                     )
-                ]))
+                ].filter(Boolean)))
             )
         ])
     )
@@ -175,5 +300,6 @@ module.exports = {
     getRefProp,
     addRef,
     overrideRef,
-    hasStringRef
+    hasStringRef,
+    generateUniqueId
 }