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

package/plugin/__tests__/stylesheet.spec.js

@@ -0,0 +1,489 @@
+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, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    theme => ({
+                        container: {
+                            backgroundColor: theme.colors.background,
+                            uni__dependencies: [0]
+                        }
+                    }),
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = ST.create(
+                    theme => ({
+                        container: {
+                            backgroundColor: theme.colors.background,
+                            uni__dependencies: [0]
+                        }
+                    }),
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        }
+                    },
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: () => ({
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        })
+                    },
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                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]
+                        })
+                    }),
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                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]
+                        })
+                    }),
+                    793953373
+                )
+            `
+        },
+        {
+            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, undefined, undefined)
+                                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]
+                        })
+                    }
+                }, 793953373)
+            `
+        },
+        {
+            title: 'Should generates two different ids for 2 stylesheets in the same file',
+            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
+                        })
+                    }
+                })
+                const styles2 = 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, undefined, undefined)
+                                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]
+                        })
+                    }
+                }, 793953373)
+                const styles2 = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top,
+                            uni__dependencies: [0, 4, 9]
+                        })
+                    }
+                }, 793953374)
+            `
+        },
+    ]
+})

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)
+}