react-native-unistyles 3.0.0-alpha.6 → 3.0.0-alpha.8

package/plugin/__tests__/ref.spec.js

@@ -78,7 +78,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -130,8 +130,8 @@ pluginTester({
                     return (
                         <View
                             ref={_ref => {
-                                ref = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                ref.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={styles.container}
@@ -141,11 +141,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -155,13 +158,13 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
+                                myRef.current = ref
                             }}
                             style={styles.container}
                         >
@@ -182,14 +185,14 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                myRef.current = ref
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => {
                                     UnistylesShadowRegistry.remove(ref, styles.container)
                                 }
@@ -201,11 +204,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -215,13 +221,13 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
+                                myRef.current = ref
 
                                 return () => {
                                     customCleanup()
@@ -246,14 +252,14 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                myRef.current = ref
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup()
@@ -268,11 +274,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -282,10 +291,10 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     const fn = ref => {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
 
                         return () => {
                             customCleanup2()
@@ -314,17 +323,17 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     const fn = ref => {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
                     }
 
                     return (
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -339,11 +348,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -353,10 +365,10 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     function fn(ref) {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
 
                         return () => {
                             customCleanup2()
@@ -385,17 +397,17 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     function fn(ref) {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
                     }
 
                     return (
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -410,11 +422,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -424,7 +439,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -449,7 +464,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -463,11 +478,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -477,7 +495,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -503,7 +521,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -518,11 +536,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -532,7 +553,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -555,7 +576,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View ref={myRef} style={[obj1, obj2]}>
@@ -564,11 +585,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -578,7 +602,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -607,13 +631,13 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={{
@@ -628,11 +652,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -642,7 +669,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -671,13 +698,13 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[
@@ -692,11 +719,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -706,7 +736,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -730,13 +760,13 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[styles.container]}
@@ -746,11 +776,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -760,7 +793,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -786,27 +819,32 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+
+                                styles.container(1, 2, _ref)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={[styles.container(1, 2, 1)]}
+                            style={[styles.container(1, 2)]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: () => ({
+                            backgroundColor: 'red'
+                        })
+                    },
+                    921918562
+                )
             `
         },
         {
@@ -816,7 +854,7 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -832,9 +870,9 @@ pluginTester({
                 }
 
                 const styles = StyleSheet.create({
-                    container: () => ({
+                    container: {
                         backgroundColor: 'red'
-                    })
+                    }
                 })
             `,
             output: `
@@ -843,40 +881,46 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+
+                                styles.container(1, 2, _ref)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={{
-                                backgroundColor: 'red',
-                                ...styles.container(1, 2, 1)
-                            }}
+                            style={{ backgroundColor: 'red', ...styles.container(1, 2) }}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should modify registry names if user changes name of member expression',
+            title: 'It should extract variants and pass them to ShadowReigstry',
             code: `
                 import { useRef } from 'react'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
+
+                    styles.useVariants({
+                        size: 'default'
+                    })
 
                     return (
                         <View
@@ -890,7 +934,17 @@ pluginTester({
 
                 const uhh = StyleSheet.create({
                     dkk: () => ({
-                        backgroundColor: 'red'
+                        backgroundColor: 'red',
+                        variants: {
+                            size: {
+                                small: {
+                                    backgroundColor: 'blue'
+                                },
+                                default: {
+                                    backgroundColor: 'green'
+                                }
+                            }
+                        }
                     })
                 })
             `,
@@ -900,52 +954,69 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
+                    const __uni__variants = {
+                        size: 'default'
+                    }
+                    styles.useVariants(__uni__variants)
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, uhh.dkk)
+                                myRef.current = _ref
+                                uhh.dkk(_ref)
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants)
                                 return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
-                            style={uhh.dkk(1)}
+                            style={uhh.dkk()}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const uhh = StyleSheet.create({
-                    dkk: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const uhh = StyleSheet.create(
+                    {
+                        dkk: () => ({
+                            backgroundColor: 'red',
+                            variants: {
+                                size: {
+                                    small: {
+                                        backgroundColor: 'blue'
+                                    },
+                                    default: {
+                                        backgroundColor: 'green'
+                                    }
+                                }
+                            },
+                            uni__dependencies: [4]
+                        })
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should increment counter for web dynamic functions',
+            title: 'Should modify registry names if user changes name of member expression',
             code: `
                 import { useRef } from 'react'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={myRef}
-                            style={styles.container()}
+                            style={uhh.dkk()}
                         >
-                            <Text style={styles.container()}>
-                                Hello world
-                            </Text>
+                            <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
+                const uhh = StyleSheet.create({
+                    dkk: () => ({
                         backgroundColor: 'red'
                     })
                 })
@@ -956,36 +1027,155 @@ pluginTester({
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(_ref, styles.container)
+                                myRef.current = _ref
+                                uhh.dkk(_ref)
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined)
+                                return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
-                            style={styles.container(1)}
+                            style={uhh.dkk()}
                         >
-                            <Text
-                                style={styles.container(2)}
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const uhh = StyleSheet.create(
+                    {
+                        dkk: () => ({
+                            backgroundColor: 'red'
+                        })
+                    },
+                    921918562
+                )
+            `
+        },
+        {
+            title: 'Should pass ref for dynamic functions to bind it to shadow node',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View style={styles.container(1, 5)} />
+                            <View style={styles.container(2, 6)} />
+                            <View style={styles.container(5, 1)} />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: (flex, gap) => ({
+                        flex,
+                        gap
+                    })
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View
+                                style={styles.container(1, 5)}
                                 ref={ref => {
-                                    UnistylesShadowRegistry.add(ref, styles.container)
+                                    styles.container(1, 5, ref)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                     return () => UnistylesShadowRegistry.remove(ref, styles.container)
                                 }}
-                            >
-                                Hello world
-                            </Text>
-                        </View>
+                            />
+                            <View
+                                style={styles.container(2, 6)}
+                                ref={ref => {
+                                    styles.container(2, 6, ref)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                }}
+                            />
+                            <View
+                                style={styles.container(5, 1)}
+                                ref={ref => {
+                                    styles.container(5, 1, ref)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                }}
+                            />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: (flex, gap) => ({
+                            flex,
+                            gap
+                        })
+                    },
+                    921918562
+                )
+            `
+        },
+        {
+            title: 'Should pass refs for dynamic functions',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View style={[styles.container(1, 5), styles.container2(1, 6)]} />
+                        </React.Fragment>
                     )
                 }
 
                 const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
+                    container: (flex, gap) => ({
+                        flex,
+                        gap
                     })
                 })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View
+                                style={[styles.container(1, 5), styles.container2(1, 6)]}
+                                ref={ref => {
+                                    styles.container(1, 5, ref)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                    styles.container2(1, 6, ref)
+                                    UnistylesShadowRegistry.add(ref, styles.container2, undefined)
+                                    return () => {
+                                        ;(() => UnistylesShadowRegistry.remove(ref, styles.container))()
+                                        UnistylesShadowRegistry.remove(ref, styles.container2)
+                                    }
+                                }}
+                            />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: (flex, gap) => ({
+                            flex,
+                            gap
+                        })
+                    },
+                    921918562
+                )
             `
-        },
+        }
     ]
 })