react-native-unistyles 2.10.0 → 3.0.0-alpha.1

package/plugin/__tests__/stylesheet.spec.js

@@ -0,0 +1,396 @@
+import { pluginTester } from 'babel-plugin-tester'
+import plugin from '../'
+
+pluginTester({
+    plugin,
+    pluginOptions: {
+        debug: false
+    },
+    babelOptions: {
+        plugins: ['@babel/plugin-syntax-jsx'],
+        generatorOpts: {
+            retainLines: true
+        }
+    },
+    tests: [
+        {
+            title: 'Should not add dependencies to StyleSheet if user is not using theme or miniRuntime',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red'
+                    }
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red'
+                    }
+                })
+            `
+        },
+        {
+            title: 'Should add dependencies to StyleSheet if user is using theme',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({
+                    container: {
+                        backgroundColor: theme.colors.background
+                    }
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({
+                    container: {
+                        backgroundColor: theme.colors.background,
+                        uni__dependencies: [0]
+                    }
+                }))
+            `
+        },
+        {
+            title: 'Should add dependencies to StyleSheet even if user did rename import',
+            code: `
+                import { StyleSheet as ST } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = ST.create(theme => ({
+                    container: {
+                        backgroundColor: theme.colors.background
+                    }
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet as ST } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = ST.create(theme => ({
+                    container: {
+                        backgroundColor: theme.colors.background,
+                        uni__dependencies: [0]
+                    }
+                }))
+            `
+        },
+        {
+            title: 'Should detect variants for object StyleSheet',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red',
+                        variants: {}
+                    }
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red',
+                        variants: {},
+                        uni__dependencies: [4]
+                    }
+                })
+            `
+        },
+        {
+            title: 'Should detect variants for object StyleSheet and dynamic function',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: () => ({
+                        backgroundColor: 'red',
+                        variants: {}
+                    })
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: () => ({
+                        backgroundColor: 'red',
+                        variants: {},
+                        uni__dependencies: [4]
+                    })
+                })
+            `
+        },
+        {
+            title: 'Should detect miniRuntime dependency',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((_, rt) => ({
+                    container: () => ({
+                        backgroundColor: 'red',
+                        variants: {},
+                        paddingTop: rt.insets.top
+                    })
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((_, rt) => ({
+                    container: () => ({
+                        backgroundColor: 'red',
+                        variants: {},
+                        paddingTop: rt.insets.top,
+                        uni__dependencies: [4, 9]
+                    })
+                }))
+            `
+        },
+        {
+            title: 'Should detect miniRuntime and theme dependencies even if user renamed it\'s names',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((hhsa, dee) => ({
+                    container: () => ({
+                        backgroundColor: hhsa.colors.background,
+                        variants: {},
+                        paddingTop: dee.colorScheme === 'dark' ? 0 : 10
+                    })
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((hhsa, dee) => ({
+                    container: () => ({
+                        backgroundColor: hhsa.colors.background,
+                        variants: {},
+                        paddingTop: dee.colorScheme === 'dark' ? 0 : 10,
+                        uni__dependencies: [0, 4, 5]
+                    })
+                }))
+            `
+        },
+        {
+            title: 'Should detect dependencies in function',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top
+                        })
+                    }
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top,
+                            uni__dependencies: [0, 4, 9]
+                        })
+                    }
+                })
+            `
+        },
+    ]
+})

package/plugin/common.js

@@ -0,0 +1,119 @@
+function getIdentifierNameFromExpression(t, memberExpression) {
+    if (t.isMemberExpression(memberExpression)) {
+        const object = memberExpression.object
+
+        // If the object is an Identifier, return its name
+        if (t.isIdentifier(object)) {
+            return [object.name]
+        }
+
+        // If the object is another MemberExpression, recursively get the identifier
+        if (t.isMemberExpression(object)) {
+            return getIdentifierNameFromExpression(t, object).flat()
+        }
+
+        // If the object is a computed property, it may also be an Identifier
+        if (t.isMemberExpression(object) && t.isIdentifier(object.property)) {
+            return [object.object.name]
+        }
+    }
+
+    if (t.isBinaryExpression(memberExpression)) {
+        return [
+            getIdentifierNameFromExpression(t, memberExpression.left),
+            getIdentifierNameFromExpression(t, memberExpression.right)
+        ].flat()
+    }
+
+    if (t.isCallExpression(memberExpression)) {
+        return getIdentifierNameFromExpression(t, memberExpression.callee)
+    }
+
+    if (t.isConditionalExpression(memberExpression)) {
+        return [
+            getIdentifierNameFromExpression(t, memberExpression.test.left),
+            getIdentifierNameFromExpression(t, memberExpression.test.right),
+            getIdentifierNameFromExpression(t, memberExpression.alternate),
+            getIdentifierNameFromExpression(t,memberExpression.consequent),
+        ].flat()
+    }
+
+    if (t.isArrayExpression(memberExpression)) {
+        return memberExpression.elements.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
+    }
+
+    if (t.isArrowFunctionExpression(memberExpression)) {
+        return memberExpression.body.properties.map(prop => getIdentifierNameFromExpression(t, prop.value)).flat()
+    }
+
+    if (t.isTemplateLiteral(memberExpression)) {
+        return memberExpression.expressions.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
+    }
+
+    if (t.isObjectExpression(memberExpression)) {
+        return memberExpression.properties
+            .filter(property => t.isObjectProperty(property))
+            .flatMap(property => getIdentifierNameFromExpression(t, property.value))
+    }
+
+    return []
+}
+
+function getSecondPropertyName(t, memberExpression) {
+    if (t.isConditionalExpression(memberExpression)) {
+        return [
+            getSecondPropertyName(t, memberExpression.test.left),
+            getSecondPropertyName(t, memberExpression.test.right),
+            getSecondPropertyName(t, memberExpression.alternate),
+            getSecondPropertyName(t, memberExpression.consequent),
+        ].flat()
+    }
+
+    if (t.isTemplateLiteral(memberExpression)) {
+        return memberExpression.expressions.map(expression => getSecondPropertyName(t, expression)).flat()
+    }
+
+    if (t.isBinaryExpression(memberExpression)) {
+        return [
+            getSecondPropertyName(t, memberExpression.left),
+            getSecondPropertyName(t, memberExpression.right)
+        ].flat()
+    }
+
+    if (t.isObjectExpression(memberExpression)) {
+        return memberExpression.properties
+            .filter(property => t.isObjectProperty(property))
+            .flatMap(property => getSecondPropertyName(t, property.value))
+    }
+
+    if (t.isArrayExpression(memberExpression)) {
+        return memberExpression.elements.map(expression => getSecondPropertyName(t, expression)).flat()
+    }
+
+    if (!t.isMemberExpression(memberExpression)) {
+        return []
+    }
+
+    let current = memberExpression
+    let propertyName = null
+
+    while (t.isMemberExpression(current)) {
+        propertyName = current.property
+        current = current.object
+    }
+
+    if (propertyName && t.isIdentifier(propertyName)) {
+        return [propertyName.name]
+    }
+
+    if (propertyName) {
+        return [propertyName.value]
+    }
+
+    return []
+}
+
+module.exports = {
+    getIdentifierNameFromExpression,
+    getSecondPropertyName
+}

package/plugin/import.js

@@ -0,0 +1,8 @@
+module.exports = function addShadowRegistryImport(t, path) {
+    const newImport = t.importDeclaration(
+        [t.importSpecifier(t.identifier('UnistylesShadowRegistry'), t.identifier('UnistylesShadowRegistry'))],
+        t.stringLiteral('react-native-unistyles')
+    )
+
+    path.unshiftContainer('body', newImport)
+}

package/plugin/index.js

@@ -0,0 +1,122 @@
+const addShadowRegistryImport = require('./import')
+const { getStyleObjectPath, getStyleAttribute } = require('./style')
+const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
+const { isUnistylesStyleSheet, analyzeDependencies } = require('./stylesheet')
+
+module.exports = function ({ types: t }) {
+    return {
+        name: 'babel-react-native-unistyles',
+        visitor: {
+            Program: {
+                enter(path, state) {
+                    state.file.hasAnyUnistyle = false
+                    state.file.hasUnistylesImport = false
+                    state.file.styleSheetLocalName = ''
+                    state.file.webDynamicFunctions = {}
+                },
+                exit(path, state) {
+                    if (state.file.hasAnyUnistyle) {
+                        addShadowRegistryImport(t, path)
+                    }
+                }
+            },
+            ImportDeclaration(path, state) {
+                const importSource = path.node.source.value
+
+                if (importSource.includes('react-native-unistyles')) {
+                    state.file.hasUnistylesImport = true
+
+                    path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && specifier.imported.name === 'StyleSheet') {
+                            state.file.styleSheetLocalName = specifier.local.name
+                        }
+                    })
+                }
+            },
+            JSXElement(path, state) {
+                if (!state.file.hasUnistylesImport) {
+                    return
+                }
+
+                const styleAttr = getStyleAttribute(t, path)
+
+                // component has no style prop
+                if (!styleAttr) {
+                    return
+                }
+
+                const stylePath = getStyleObjectPath(t, styleAttr.value.expression, state)
+
+                // style prop is not using object expression
+                if (stylePath.length !== 2) {
+                    return
+                }
+
+                // to add import
+                state.file.hasAnyUnistyle = true
+
+                const refProp = getRefProp(t, path)
+
+                if (!refProp && hasStringRef(t, path)) {
+                    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)
+            },
+            CallExpression(path, state) {
+                if (!isUnistylesStyleSheet(t, path, state)) {
+                    return
+                }
+
+                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
+
+                            analyzeDependencies(t, state, property.key.name, propertyValue)
+                        }
+                    })
+                }
+
+                // Function passed to StyleSheet.create (e.g., theme => ({ container: {} }))
+                if (t.isArrowFunctionExpression(arg) || t.isFunctionExpression(arg)) {
+                    const params = arg.params
+                    const hasTheme = params.length >= 1
+                    const hasMiniRuntime = params.length === 2
+                    const themeLocalName = hasTheme
+                        ? params[0].name
+                        : undefined
+                    const miniRuntimeLocalName = hasMiniRuntime
+                        ? params[1].name
+                        : undefined
+                    const body = t.isBlockStatement(arg.body)
+                        ? arg.body.body.find(statement => t.isReturnStatement(statement)).argument
+                        : arg.body
+
+                    // Ensure the function body returns an object
+                    if (t.isObjectExpression(body)) {
+                        body.properties.forEach(property => {
+                            if (t.isObjectProperty(property)) {
+                                const propertyValue = t.isArrowFunctionExpression(property.value)
+                                    ? property.value.body
+                                    : property.value
+
+                                analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
+                            }
+                        })
+                    }
+                }
+            }
+        }
+    }
+}