react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.30

package/plugin/__tests__/stylesheet.spec.js

@@ -1,396 +0,0 @@
-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/web/convert/breakpoint.ts

@@ -1,21 +0,0 @@
-import type { MediaQuery } from 'typestyle/lib/types'
-import { UnistylesState } from '../state'
-import { keyInObject } from '../utils'
-import { isUnistylesMq, parseMq } from '../mq'
-import { Orientation } from '../../src/specs/types'
-
-export const convertBreakpoint = (breakpoint: string): MediaQuery => {
-    if (Object.values(Orientation).includes(breakpoint as Orientation)) {
-        return {
-            orientation: breakpoint as Orientation
-        }
-    }
-
-    if (isUnistylesMq(breakpoint)) {
-        return parseMq(breakpoint)
-    }
-
-    return {
-        minWidth: UnistylesState.breakpoints && keyInObject(UnistylesState.breakpoints, breakpoint) ? UnistylesState.breakpoints[breakpoint] : undefined,
-    }
-}

package/web/create.ts

@@ -1,102 +0,0 @@
-import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet } from '../src/types'
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
-import { UnistylesRegistry } from './registry'
-import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
-import { UnistylesRuntime } from './runtime'
-import { createUseVariants } from './useVariants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../src/specs/NativePlatform'
-
-type ListenToDependenciesProps = {
-    value: StyleSheet[keyof StyleSheet],
-    key: PropertyKey,
-    unistyles: TypeStyle,
-    className: string,
-    args?: Array<any>
-}
-
-export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet
-
-    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
-        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
-
-        if (dependencies.length === 0) {
-            return
-        }
-
-        return UnistylesListener.addListeners(dependencies, () => {
-            const newComputedStylesheet = typeof stylesheet === 'function'
-                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-                : stylesheet
-
-            if (!keyInObject(newComputedStylesheet, key)) {
-                return
-            }
-
-            const value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
-
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
-
-    const styles = reduceObject(computedStylesheet, (value, key) => {
-        if (typeof value === 'function') {
-            const classNameMap = new Map<number, string>()
-            const unistylesMap = new Map<number, TypeStyle>()
-            const disposeMap = new Map<number, VoidFunction | undefined>()
-
-            return (...args: Array<any>) => {
-                const [id] = args.slice(-1)
-                const result = value(...args.slice(0, -1))
-                const dispose = disposeMap.get(id)
-                const unistyles = unistylesMap.get(id)
-                const className = classNameMap.get(id)
-
-                if (unistyles && className && dispose) {
-                    dispose()
-                    UnistylesRegistry.updateStyles(unistyles, result, className)
-                    disposeMap.set(id, listenToDependencies({
-                        key,
-                        value,
-                        unistyles,
-                        className,
-                        args
-                    }))
-
-                    return toReactNativeClassName(className, result)
-                }
-
-                const entry = UnistylesRegistry.createStyles(result, key)
-
-                classNameMap.set(id, entry.className)
-                unistylesMap.set(id, entry.unistyles)
-                disposeMap.set(id, listenToDependencies({
-                    key,
-                    value,
-                    unistyles: entry.unistyles,
-                    className: entry.className,
-                    args
-                }))
-
-                return toReactNativeClassName(entry.className, result)
-            }
-        }
-
-        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
-
-        listenToDependencies({ key, value, unistyles, className })
-
-        return toReactNativeClassName(className, value)
-    }) as ReactNativeStyleSheet<StyleSheet>
-
-    createUseVariants(styles)
-
-    return styles
-}

package/web/listener/index.ts

@@ -1 +0,0 @@
-export { UnistylesListener } from './listener'

package/web/pseudo.ts

@@ -1,11 +0,0 @@
-// TODO: Add complete list of pseudo selectors
-export const pseudos = [
-    '_hover',
-    '_css',
-    '_before',
-    '_after'
-] as const
-
-export const isPseudo = (selector: string) => pseudos.includes(selector as Pseudo)
-
-export type Pseudo = typeof pseudos[number]

package/web/registry.ts

@@ -1,41 +0,0 @@
-import { createTypeStyle, TypeStyle } from 'typestyle'
-import type { UnistylesValues } from '../src/types'
-import { convertToTypeStyle } from './convert'
-import { UnistylesState } from './state'
-
-class UnistylesRegistryBuilder {
-    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
-        const stylesTag = UnistylesState.createTag()
-        const unistyles = createTypeStyle(stylesTag)
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
-
-        const className = unistyles.style({
-            $debugName: String(key),
-        }, typestyleStylesheet)
-
-        if (stylesheet._web?._css) {
-            const customClassName = Array.isArray(stylesheet._web._css)
-                ? stylesheet._web._css.join(' ')
-                : stylesheet._web._css
-
-            return {
-                className: `${className} ${customClassName}`,
-                unistyles
-            }
-        }
-
-        return {
-            className,
-            unistyles
-        }
-    }
-
-    updateStyles = (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => {
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
-
-        unistyles.reinit()
-        unistyles.cssRule(`.${className}`, typestyleStylesheet)
-    }
-}
-
-export const UnistylesRegistry = new UnistylesRegistryBuilder()