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

package/plugin/import.js

@@ -1,8 +1,71 @@
-module.exports = function addShadowRegistryImport(t, path) {
-    const newImport = t.importDeclaration(
-        [t.importSpecifier(t.identifier('UnistylesShadowRegistry'), t.identifier('UnistylesShadowRegistry'))],
-        t.stringLiteral('react-native-unistyles')
-    )
+function addUnistylesImport(t, path, state) {
+    const localNames = Object.keys(state.reactNativeImports)
+    const names = Object.values(state.reactNativeImports)
+    const pairs = Object.entries(state.reactNativeImports)
+    const nodesToRemove = []
 
-    path.unshiftContainer('body', newImport)
+    // remove rn-imports
+    path.node.body.forEach(node => {
+        // user might have multiple imports like import type, import
+        if (t.isImportDeclaration(node) && node.source.value === 'react-native') {
+            node.specifiers = node.specifiers.filter(specifier => !localNames.some(name => name === specifier.local.name))
+
+            if (node.specifiers.length === 0) {
+                nodesToRemove.push(node)
+            }
+        }
+    })
+
+    // remove RNWeb imports
+    names.forEach(name => {
+        const rnWebImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`)
+
+        if (rnWebImport) {
+            rnWebImport.specifiers = []
+        }
+    })
+
+    // import components from react-native-unistyles
+    pairs.forEach(([localName, name]) => {
+        const newImport = t.importDeclaration(
+            [t.importSpecifier(t.identifier(localName), t.identifier(name))],
+            t.stringLiteral(state.opts.isLocal
+                ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/src/components/native/${name}`)
+                : `react-native-unistyles/src/components/native/${name}`
+            )
+        )
+
+        path.node.body.unshift(newImport)
+    })
+
+    // import variants
+    if (state.file.hasVariants) {
+        const unistylesImport = path.node.body
+            .find(node => t.isImportDeclaration(node) && node.source.value === 'react-native-unistyles')
+
+        if (unistylesImport) {
+            // prevent duplications
+            if (!unistylesImport.specifiers.some(specifier => specifier.local.name === 'Variants')) {
+                unistylesImport.specifiers.push(t.importSpecifier(t.identifier('Variants'), t.identifier('Variants')))
+            }
+        } else {
+            // Add a new import declaration for "Variants" from "react-native-unistyles"
+            const newImport = t.importDeclaration(
+                [t.importSpecifier(t.identifier('Variants'), t.identifier('Variants'))],
+                t.stringLiteral('react-native-unistyles')
+            )
+
+            path.node.body.unshift(newImport)
+        }
+    }
+
+    // cleanup
+    nodesToRemove.forEach(node => path.node.body.splice(path.node.body.indexOf(node), 1))
+}
+
+const isInsideNodeModules = state => state.file.opts.filename.includes('node_modules')
+
+module.exports = {
+    isInsideNodeModules,
+    addUnistylesImport
 }

package/plugin/index.js

@@ -1,8 +1,30 @@
-const addShadowRegistryImport = require('./import')
-const { getStyleMetadata, getStyleAttribute } = require('./style')
-const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
-const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
-const { isUsingVariants, extractVariants } = require('./variants')
+const { addUnistylesImport, isInsideNodeModules } = require('./import')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = require('./style')
+const { hasStringRef } = require('./ref')
+const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles } = require('./stylesheet')
+const { isUsingVariants, extractVariants, addJSXVariants } = require('./variants')
+
+const reactNativeComponentNames = [
+    'ActivityIndicator',
+    'View',
+    'Text',
+    'Image',
+    'ImageBackground',
+    'KeyboardAvoidingView',
+    'Pressable',
+    'ScrollView',
+    'FlatList',
+    'SectionList',
+    'Switch',
+    'TextInput',
+    'RefreshControl',
+    'TouchableHighlight',
+    'TouchableOpacity',
+    'VirtualizedList'
+]
+
+// Modal - there is no exposed native handle
+// TouchableWithoutFeedback - can't accept a ref
 
 module.exports = function ({ types: t }) {
     return {
@@ -10,18 +32,66 @@ module.exports = function ({ types: t }) {
         visitor: {
             Program: {
                 enter(path, state) {
+                    if (isInsideNodeModules(state)) {
+                        return
+                    }
+
                     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)
+                    if (state.file.hasAnyUnistyle || state.file.hasVariants) {
+                        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) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
+                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) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
                 const importSource = path.node.source.value
 
                 if (importSource.includes('react-native-unistyles')) {
@@ -33,9 +103,42 @@ 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] = specifier.imported.name
+                        }
+                    })
+                }
+
+                if (importSource.includes('react-native-web/dist/exports/Pressable')) {
+                    state.file.shouldIncludePressable = true
+                }
             },
             JSXElement(path, state) {
-                if (!state.file.hasUnistylesImport) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
+                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,29 +149,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)
-
-                    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)
-                })
+                if (hasStringRef(t, path)) {
+                    throw new Error("Detected string based ref which is not supported by Unistyles.")
+                }
             },
             CallExpression(path, state) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
                 if (isUsingVariants(t, path)) {
                     extractVariants(t, path, state)
                 }
@@ -85,13 +190,11 @@ module.exports = function ({ types: t }) {
                 if (t.isObjectExpression(arg)) {
                     arg.properties.forEach(property => {
                         if (t.isObjectProperty(property)) {
-                            const propertyValue = getUnistyle(t, property)
+                            const propertyValues = getUnistyles(t, property)
 
-                            if (!propertyValue) {
-                                return
-                            }
-
-                            analyzeDependencies(t, state, property.key.name, propertyValue)
+                            propertyValues.forEach(propertyValue => {
+                                analyzeDependencies(t, state, property.key.name, propertyValue)
+                            })
                         }
                     })
                 }
@@ -115,17 +218,23 @@ module.exports = function ({ types: t }) {
                     if (t.isObjectExpression(body)) {
                         body.properties.forEach(property => {
                             if (t.isObjectProperty(property)) {
-                                const propertyValue = getUnistyle(t, property)
-
-                                if (!propertyValue) {
-                                    return
-                                }
+                                const propertyValues = getUnistyles(t, property)
 
-                                analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
+                                propertyValues.forEach(propertyValue => {
+                                    analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
+                                })
                             }
                         })
                     }
                 }
+            },
+            ReturnStatement(path, state) {
+                // ignore nested returns in JSX elements
+                const hasJSXParent = path.findParent(p => p.isJSXElement())
+
+                if (!hasJSXParent && state.file.hasVariants) {
+                    addJSXVariants(t, path, state)
+                }
             }
         }
     }

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,198 +6,6 @@ function hasStringRef(t, path) {
     )
 }
 
-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(metadata.styleObj), t.identifier(metadata.styleProp)),
-                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
-                    ]
-                )
-            ),
-            t.returnStatement(
-                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))]
-                    )
-                )
-            )
-        ])
-    )
-
-    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),
-                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
-                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
-                        ]
-                    )
-                ),
-                t.returnStatement(
-                    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))]
-                        )
-                    )
-                )
-            ])
-        )
-
-        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 newRefFunction = t.arrowFunctionExpression(
-            [t.identifier('ref')],
-            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(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
-                        ]
-                    )
-                ),
-                // 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('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
-                            )
-                        )
-                    ]))
-                )
-            ])
-        )
-
-        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),
-                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
-                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
-                    ]
-                )
-            ),
-            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), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
-                        )
-                    )
-                ]))
-            )
-        ])
-    )
-
-    refProp.value = t.jsxExpressionContainer(newRefFunction)
-    userFunction.body.body = userFunction.body.body.filter(statement => !t.isReturnStatement(statement))
-}
-
 module.exports = {
-    getRefProp,
-    addRef,
-    overrideRef,
     hasStringRef
 }