react-native-unistyles 3.0.0-beta.1 → 3.0.0-beta.3

package/plugin/ref.js

@@ -1,11 +1,3 @@
-function getRefProp(t, path) {
-    return path.node.openingElement.attributes.find(attr =>
-        t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
-        t.isJSXExpressionContainer(attr.value)
-    )
-}
-
 function hasStringRef(t, path) {
     return path.node.openingElement.attributes.find(attr =>
         t.isJSXAttribute(attr) &&
@@ -14,232 +6,6 @@ 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
-
-    const newRefFunction = t.arrowFunctionExpression(
-        [t.identifier('ref')],
-        t.blockStatement([
-            t.expressionStatement(
-                t.callExpression(
-                    t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [
-                        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')]
-                    )
-                )
-            )
-        ])
-    )
-
-    const newRefProp = t.jsxAttribute(
-        t.jsxIdentifier('ref'),
-        t.jsxExpressionContainer(newRefFunction)
-    )
-
-    path.node.openingElement.attributes.push(newRefProp)
-}
-
-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)
-
-    // ref={ref}
-    if (isIdentifier && binding && t.isCallExpression(binding.path.node.init)) {
-        const userVariableName = refProp.value.expression.name
-        const newRefFunction = t.arrowFunctionExpression(
-            [t.identifier(uniqueRefName)],
-            t.blockStatement([
-                t.expressionStatement(
-                    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),
-                            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)
-                            ]
-                        )
-                    )
-                )
-            ])
-        )
-
-        refProp.value = t.jsxExpressionContainer(newRefFunction)
-
-        return
-    }
-
-    // ref={ref => { }}
-    if (t.isArrowFunctionExpression(refProp.value.expression)) {
-        const userArrowFunction = refProp.value.expression
-        const userStatements = userArrowFunction.body.body
-        const userReturnStatement = userStatements.find(statement => t.isReturnStatement(statement))
-        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(userRefName)],
-            t.blockStatement([
-                ...userStatements.filter(statement => !t.isReturnStatement(statement)),
-                t.expressionStatement(
-                    t.callExpression(
-                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [
-                            t.identifier(userRefName),
-                            arrayExpressionFromMetadata(t, metadata),
-                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            arrayFromDynamicFunctionArgs(t, metadata, path)
-                        ]
-                    )
-                ),
-                // Merged cleanup function
-                t.returnStatement(
-                    t.arrowFunctionExpression([], t.blockStatement([
-                        ...(userCleanupFunction ? [
-                            t.expressionStatement(
-                                t.callExpression(userCleanupFunction, [])
-                            )
-                        ] : []),
-                        t.expressionStatement(
-                            t.callExpression(
-                                t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [
-                                    t.identifier(userRefName)
-                                ]
-                            )
-                        )
-                    ]))
-                )
-            ])
-        )
-
-        refProp.value = t.jsxExpressionContainer(newRefFunction)
-
-        return
-    }
-
-    if (!binding) {
-        return
-    }
-
-    // ref={scopedFunction}
-    const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
-    const isFunction = t.isFunctionDeclaration(binding.path.node)
-
-    if (!isArrowFunction && !isFunction) {
-        return
-    }
-
-    const userFunctionName = refProp.value.expression
-    const userFunction = isArrowFunction
-        ? binding.path.node.init
-        : binding.path.node
-    const returnStatement = userFunction.body.body.find(statement => t.isReturnStatement(statement));
-    const userCleanupFunction = returnStatement ? returnStatement.argument : null;
-
-    const newRefFunction = t.arrowFunctionExpression(
-        [t.identifier(uniqueRefName)],
-        t.blockStatement([
-            t.expressionStatement(
-                t.callExpression(userFunctionName, [t.identifier(uniqueRefName)])
-            ),
-            t.expressionStatement(
-                t.callExpression(
-                    t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [
-                        t.identifier(uniqueRefName),
-                        arrayExpressionFromMetadata(t, metadata),
-                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        arrayFromDynamicFunctionArgs(t, metadata, path)
-                    ]
-                )
-            ),
-            t.returnStatement(
-                t.arrowFunctionExpression([], t.blockStatement([
-                    ...(userCleanupFunction ? [
-                        t.expressionStatement(
-                            t.callExpression(userCleanupFunction, [])
-                        )
-                    ] : []),
-                    t.expressionStatement(
-                        t.callExpression(
-                            t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [
-                                t.identifier(uniqueRefName)
-                            ]
-                        )
-                    )
-                ].filter(Boolean)))
-            )
-        ])
-    )
-
-    refProp.value = t.jsxExpressionContainer(newRefFunction)
-    userFunction.body.body = userFunction.body.body.filter(statement => !t.isReturnStatement(statement))
-}
-
 module.exports = {
-    getRefProp,
-    addRef,
-    overrideRef,
     hasStringRef
 }

package/plugin/style.js

@@ -141,224 +141,6 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
 }
 
-function metadataToRawStyle(t, metadata, styleExpression) {
-    const expressions = []
-
-    metadata.forEach(meta => {
-        if (meta.inlineStyle) {
-            return meta.inlineStyle.properties.forEach(prop => {
-                if (t.isObjectProperty(prop)) {
-                    expressions.push(t.objectExpression([prop]))
-                }
-            })
-        }
-
-        if (meta.members.length > 0) {
-            return expressions.push(t.memberExpression(...meta.members.map(member => t.identifier(member))))
-        }
-
-        if (meta.logicalExpression) {
-            const expression = t.cloneNode(meta.logicalExpression)
-
-            if (t.isIdentifier(expression.left)) {
-                if (t.isCallExpression(expression.right)) {
-                    expression.right = expression.right.callee
-                }
-
-                expressions.push(expression)
-            }
-        }
-
-        if (meta.conditionalExpression) {
-            const expression = t.cloneNode(meta.conditionalExpression)
-
-            if (t.isCallExpression(expression.alternate)) {
-                expression.alternate = expression.alternate.callee
-            }
-
-            if (t.isCallExpression(expression.consequent)) {
-                expression.consequent = expression.consequent.callee
-            }
-
-            expressions.push(expression)
-        }
-    })
-
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 1) {
-        return t.jsxAttribute(
-            t.jsxIdentifier('rawStyle'),
-            t.jsxExpressionContainer(
-                t.arrowFunctionExpression(styleExpression.params, t.arrayExpression([
-                ...expressions
-                ])
-            ))
-        )
-    }
-
-    return t.jsxAttribute(
-        t.jsxIdentifier('rawStyle'),
-        t.jsxExpressionContainer(t.arrayExpression([
-            ...expressions
-        ]))
-    )
-}
-
-function wrapInGetBoundArgs(t, toWrap, extraArgs) {
-    const expression = t.callExpression(
-        t.identifier('getBoundArgs'),
-        [toWrap]
-    )
-
-    return  t.callExpression(
-        t.memberExpression(expression, t.identifier('bind')),
-        [t.identifier('undefined'), ...extraArgs].filter(Boolean)
-    )
-}
-
-function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunction) {
-    let expression = undefined
-    let args = []
-
-    const members = metadata.at(0).members
-
-    if (members) {
-        expression = members.slice(1).reduce(
-            (acc, property) => t.memberExpression(acc, t.identifier(property)),
-            t.identifier(members[0]))
-    }
-
-    if (t.isMemberExpression(metadata.at(0))) {
-        expression = metadata.at(0)
-    }
-
-    if (t.isCallExpression(metadata.at(0))) {
-        expression = metadata.at(0).callee
-        args = metadata.at(0).arguments
-    }
-
-    if (!expression) {
-        return
-    }
-
-    const bindCall = wrapInGetBoundArgs(t , expression, wrapInArrowFunction ? [t.identifier("state")] : args)
-
-    if (t.isCallExpression(metadata.at(0))) {
-        return bindCall
-    }
-
-    if (!wrapInArrowFunction) {
-        return t.conditionalExpression(
-            t.binaryExpression(
-                "===",
-                t.unaryExpression(
-                    "typeof",
-                    expression
-                ),
-                t.stringLiteral("function")
-            ),
-            bindCall,
-            expression
-        )
-    }
-
-    // state => typeof style.pressable === 'function'
-    // ? getBoundArgs(style.pressable).bind(undefined, state)
-    // : style.pressable
-    return t.arrowFunctionExpression(
-        [t.identifier("state")],
-        t.conditionalExpression(
-            t.binaryExpression(
-                "===",
-                t.unaryExpression(
-                    "typeof",
-                    expression
-                ),
-                t.stringLiteral("function")
-            ),
-            bindCall,
-            expression
-        )
-    )
-}
-
-function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index) {
-    if (t.isObjectExpression(wrapper)) {
-        return
-    }
-
-    if (t.isMemberExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
-        parentWrapper.elements[index] = handlePressableFromMemberExpression(t, path, [metadata[index]])
-
-        return
-    }
-
-    if (t.isMemberExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
-        parentWrapper = handlePressableFromMemberExpression(t, path, metadata)
-
-        return
-    }
-
-    if (t.isLogicalExpression(wrapper)) {
-        if (t.isIdentifier(wrapper.left) && t.isMemberExpression(wrapper.right)) {
-            parentWrapper.elements[index].right = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].right])
-
-            return
-        }
-
-        return
-    }
-
-    if (t.isConditionalExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
-        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
-            parentWrapper.elements[index].alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].alternate])
-        }
-
-        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
-            parentWrapper.elements[index].consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].consequent])
-        }
-
-        return
-    }
-
-    if (t.isConditionalExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
-        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
-            parentWrapper.alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.alternate])
-        }
-
-        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
-            parentWrapper.consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.consequent])
-        }
-
-        return
-    }
-
-    const pressableArgs = t.isCallExpression(wrapper)
-        ? wrapper.arguments
-        : wrapper.argument.arguments
-    const callee = t.isCallExpression(wrapper)
-        ? wrapper.callee
-        : wrapper.argument.callee
-
-    const getBoundArgsCall = t.callExpression(
-        t.identifier('getBoundArgs'),
-        [callee]
-    )
-    const bindCall = t.callExpression(
-        t.memberExpression(getBoundArgsCall, t.identifier('bind')),
-        [t.identifier('undefined'), ...pressableArgs]
-    )
-
-    if (t.isCallExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
-        parentWrapper.elements[index] = bindCall
-
-        return
-    }
-
-    if (t.isCallExpression(wrapper)) {
-        styleExpression.body = bindCall
-    }
-}
-
 function handlePressable(t, path, styleAttr, metadata, state) {
     // add variants
     if (state.file.hasVariants) {
@@ -370,106 +152,11 @@ function handlePressable(t, path, styleAttr, metadata, state) {
         path.node.openingElement.attributes.push(variants)
     }
 
-    // add raw C++ style as prop to be bound
-    path.node.openingElement.attributes.push(metadataToRawStyle(t, metadata, styleAttr.value.expression))
-
-    const styleExpression = styleAttr.value.expression
-
-    // {style.pressable}
-    if (t.isMemberExpression(styleExpression)) {
-        styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true)
-
-        return
-    }
-
-    // {style.pressable(1, 2)}
-    if (t.isCallExpression(styleExpression)) {
-        // user already called dynamic function
-        const expression = t.callExpression(
-            t.identifier('getBoundArgs'),
-            [styleExpression.callee]
-        )
-        const bindCall = t.callExpression(
-            t.memberExpression(expression, t.identifier('bind')),
-            [t.identifier('undefined'), ...styleExpression.arguments]
-        )
-
-        path.node.openingElement.attributes = path.node.openingElement.attributes.map(attribute => {
-            if (attribute.name.name === "style") {
-                attribute.value.expression = t.arrowFunctionExpression([], bindCall)
-            }
-
-            return attribute
-        })
-
-        return
-    }
-
-    // {() => style.pressable(1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
-        let parentWrapper = t.isBlockStatement(styleExpression.body)
-            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
-            : styleExpression.body
-
-        if (t.isMemberExpression(parentWrapper)) {
-            return
-        }
-
-        if (t.isArrayExpression(parentWrapper)) {
-            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
-        }
-
-        if (t.isReturnStatement(parentWrapper)) {
-            parentWrapper = parentWrapper.argument
-
-            return handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
-        }
-
-        const pressableArgs = t.isCallExpression(parentWrapper)
-            ? parentWrapper.arguments
-            : parentWrapper.argument.arguments
-        const callee = t.isCallExpression(parentWrapper)
-            ? parentWrapper.callee
-            : parentWrapper.argument.callee
-        const getBoundArgsCall = t.callExpression(
-            t.identifier('getBoundArgs'),
-            [callee]
-        )
-        const bindCall = t.callExpression(
-            t.memberExpression(getBoundArgsCall, t.identifier('bind')),
-            [t.identifier('undefined'), ...pressableArgs]
-        )
-
-        if (t.isCallExpression(parentWrapper)) {
-            styleExpression.body = bindCall
-
-            return
-        }
-
-        if (parentWrapper) {
-            parentWrapper.argument = bindCall
-        }
-
-        return
-    }
-
-    // {state => style.pressable(state, 1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
-        // user used state with custom args we need to getBoundArgs
-        // detect between arrow function with body and arrow function
-        let parentWrapper = t.isBlockStatement(styleExpression.body)
-            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
-            : styleExpression.body
-
-        if (t.isArrayExpression(parentWrapper)) {
-            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
-        }
-
-        if (t.isReturnStatement(parentWrapper)) {
-            parentWrapper = parentWrapper.argument
-        }
+    // to add import
+    state.file.hasAnyUnistyle = true
 
-        handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
+    if (t.isMemberExpression(styleAttr.value.expression)) {
+        // styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true)
     }
 }
 

package/plugin/stylesheet.js

@@ -168,30 +168,45 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
-function getUnistyle(t, property) {
+function getUnistyles(t, property) {
     const propertyValue = t.isArrowFunctionExpression(property.value)
         ? property.value.body
         : property.value
 
     if (t.isObjectExpression(propertyValue)) {
-        return propertyValue
+        return [propertyValue]
     }
 
     if (t.isBlockStatement(propertyValue)) {
-        const returnStatement = propertyValue.body
-            .find(value => t.isReturnStatement(value))
-
-        return returnStatement
-            ? returnStatement.argument
-            : null
+        // here we might have single return statement
+        // or if-else statements with return statements
+        return propertyValue.body
+            .flatMap(value => {
+                if (t.isReturnStatement(value)) {
+                    return [value]
+                }
+
+                if (!t.isIfStatement(value)) {
+                    return []
+                }
+
+                return [value.consequent, value.alternate]
+                    .filter(Boolean)
+                    .flatMap(value => {
+                        if (t.isBlockStatement(value)) {
+                            return value.body.filter(t.isReturnStatement)
+                        }
+                    })
+            })
+            .map(value => value.argument)
     }
 
-    return null
+    return []
 }
 
 module.exports = {
     isUnistylesStyleSheet,
     analyzeDependencies,
     addStyleSheetTag,
-    getUnistyle
+    getUnistyles
 }

package/plugin/variants.js

@@ -27,7 +27,66 @@ function extractVariants(t, path, state) {
     state.file.hasVariants = true
 }
 
+function wrapVariants(t, path) {
+    const wrapperElement = t.jsxElement(
+        t.jsxOpeningElement(
+            t.jsxIdentifier('Variants'),
+            [
+                t.jsxAttribute(
+                    t.jsxIdentifier('variants'),
+                    t.jsxExpressionContainer(t.identifier('__uni__variants'))
+                ),
+            ],
+            false
+        ),
+        t.jsxClosingElement(t.jsxIdentifier('Variants')),
+        []
+    )
+
+    const element = path.openingElement && path.openingElement.name
+    const isWrappedInRegularFragment = t.isJSXFragment(path)
+    const isWrappedInFragment = (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') || (t.isJSXIdentifier(element) && element.name === 'Fragment')
+
+    wrapperElement.children = (isWrappedInRegularFragment || isWrappedInFragment)
+        ? path.children
+        : [path]
+
+    // copy Fragment props like key
+    if (isWrappedInFragment) {
+        wrapperElement.openingElement.attributes.push(...path.openingElement.attributes)
+    }
+
+    return wrapperElement
+}
+
+function addJSXVariants(t, path) {
+    if (!t.isReturnStatement(path.node)) {
+        return
+    }
+
+    const jsxElement = path.node.argument
+
+    if (t.isConditionalExpression(jsxElement)) {
+        const ifStatement = t.ifStatement(
+            jsxElement.test,
+            t.blockStatement([t.returnStatement(jsxElement.consequent)]),
+            t.blockStatement([t.returnStatement(jsxElement.alternate)])
+        )
+
+        path.replaceWith(ifStatement)
+
+        return
+    }
+
+    if (!t.isJSXElement(jsxElement) && !t.isJSXFragment(jsxElement)) {
+        return
+    }
+
+    path.get('argument').replaceWith(wrapVariants(t, jsxElement));
+}
+
 module.exports = {
     isUsingVariants,
-    extractVariants
+    extractVariants,
+    addJSXVariants
 }