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

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
                 }
 
+                if (openingElementName === 'Pressable') {
+                    handlePressable(t, path, styleAttr, metadata)
+                }
+
+                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)
+                    : addRef(t, path, metadata, state)
             },
             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,5 @@
+const { PRESSABLE_STATE_NAME } = require('./common')
+
 function getRefProp(t, path) {
     return path.node.openingElement.attributes.find(attr =>
         t.isJSXAttribute(attr) &&
@@ -14,21 +16,102 @@ 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) {
+    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)
+                    ]
                 )
             ),
             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 +126,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) {
+    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 +139,30 @@ 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)
+                        ]
                     )
                 ),
                 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 +182,23 @@ 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)
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -109,7 +212,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 +227,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 +255,12 @@ 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)
+                    ]
                 )
             ),
             t.returnStatement(
@@ -159,10 +273,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)))
             )
         ])
     )

package/plugin/style.js

@@ -1,44 +1,78 @@
-function getStyleObjectPath(t, node, state) {
+const { PRESSABLE_STATE_NAME } = require('./common')
+
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
+        return [
+            {
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
+                dynamicFunction,
+                conditionalExpression: undefined
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
+        return node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    return [{
+                        members: [],
+                        inlineStyle: t.objectExpression([prop]),
+                        dynamicFunction: undefined,
+                        conditionalExpression: undefined
+                    }]
+                }
+
+                return getStyleMetadata(t, prop.argument)
+            })
+            .filter(Boolean)
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
-
-        if (!lastPart) {
-            return path
-        }
-
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
+        return getStyleMetadata(t, node.callee, node)
+    }
 
-            return path
-        }
+    if (t.isIdentifier(node)) {
+        return [{
+            members: [node.name],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined
+        }]
+    }
 
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
+    if (t.isConditionalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: node
+        }]
+    }
 
-        return path
+    // pressable
+    if (t.isArrowFunctionExpression(node)) {
+        return getStyleMetadata(t, node.body, node)
     }
 
     return []
@@ -52,7 +86,140 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // special case for pressable
+    // {state => styles.pressable(state)}
+    if (t.isArrowFunctionExpression(styleAttribute.value.expression)) {
+        return
+    }
+
+    // {{...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])
+}
+
+function handlePressable(t, path, styleAttr, metadata) {
+    const styleExpression = styleAttr.value.expression
+
+    // {style.pressable}
+    // the worst case, we don't know if user rely on state
+    if (t.isMemberExpression(styleExpression)) {
+        const members = metadata.at(0).members
+
+        if (members.length === 0) {
+            return
+        }
+
+        const stylePath = members.slice(1).reduce(
+            (acc, property) => t.memberExpression(acc, t.identifier(property)),
+            t.identifier(members[0])
+        )
+
+        // state => typeof style.pressable === 'function' ? style.pressable(state) : style.pressable
+        styleAttr.value.expression = t.arrowFunctionExpression(
+            [t.identifier("state")],
+            t.conditionalExpression(
+                t.binaryExpression(
+                    "===",
+                    t.unaryExpression(
+                        "typeof",
+                        stylePath
+                    ),
+                    t.stringLiteral("function")
+                ),
+                t.callExpression(
+                    stylePath,
+                    [t.identifier("state")]
+                ),
+                stylePath
+            )
+        )
+
+        return
+    }
+
+    // {style.pressable(1, 2)}
+    if (t.isCallExpression(styleExpression)) {
+        // user already called dynamic function
+        // there is no work to do
+        return
+    }
+
+    // {() => style.pressable(1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
+        // user doesn't care about the state
+        // we can safely unwrap the function
+        styleAttr.value.expression = styleExpression.body
+
+        return
+    }
+
+    // {state => style.pressable(state, 1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
+        // already a function, we need to set state to false
+        // and pass it to C++ as in background it will never be true
+        const args = metadata.at(0).dynamicFunction
+
+        if (!t.isCallExpression(args) || args.arguments.length === 0) {
+            return
+        }
+
+        // get state local name
+        const stateIdentifier = styleExpression.params[0]
+
+        if (!stateIdentifier || !t.isIdentifier(stateIdentifier)) {
+            return
+        }
+
+        // replace state name with matching identifier
+        args.arguments.map(arg => {
+            if (t.isIdentifier(arg) && arg.name === stateIdentifier.name) {
+                arg.name = PRESSABLE_STATE_NAME
+            }
+
+            if (t.isMemberExpression(arg) && arg.object.name === stateIdentifier.name) {
+                arg.object.name = PRESSABLE_STATE_NAME
+            }
+
+            return arg
+        })
+
+        // update arrow function arg name
+        styleExpression.params[0].name = PRESSABLE_STATE_NAME
+    }
+}
+
 module.exports = {
-    getStyleObjectPath,
-    getStyleAttribute
+    getStyleMetadata,
+    getStyleAttribute,
+    styleAttributeToArray,
+    handlePressable
 }