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

package/plugin/style.js

@@ -1,33 +1,99 @@
-function getStyleMetadata(t, node, dynamicFunction = null) {
+function getStyleMetadata(t, node, dynamicFunction = null, state) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
         return [
             {
-                styleObj: node.object.name,
-                styleProp: node.property.name,
-                dynamicFunction
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
+                dynamicFunction,
+                conditionalExpression: undefined,
+                logicalExpression: undefined
             }
         ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleMetadata(t, element))
+        return node.elements.flatMap(element => getStyleMetadata(t, element, null, state))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleMetadata(t, node.argument)
+        return getStyleMetadata(t, node.argument, null, state)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
+        return node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    return [{
+                        members: [],
+                        inlineStyle: t.objectExpression([prop]),
+                        dynamicFunction: undefined,
+                        conditionalExpression: undefined,
+                        logicalExpression: undefined
+                    }]
+                }
+
+                return getStyleMetadata(t, prop.argument, null, state)
+            })
+            .filter(Boolean)
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        return getStyleMetadata(t, node.callee, node)
+        return getStyleMetadata(t, node.callee, node, state)
+    }
+
+    if (t.isIdentifier(node)) {
+        return [{
+            members: [node.name],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined,
+            logicalExpression: undefined
+        }]
+    }
+
+    if (t.isConditionalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: node,
+            logicalExpression: undefined
+        }]
+    }
+
+    if (t.isArrowFunctionExpression(node)) {
+        return getStyleMetadata(t, node.body, node, state)
+    }
+
+    // {condition && styles.container}
+    if (t.isLogicalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined,
+            logicalExpression: node
+        }]
+    }
+
+    // only when pressable is used
+    if (t.isBlockStatement(node) && state.file.shouldIncludePressable) {
+        const returnStatement = node.body.find(t.isReturnStatement)
+
+        return returnStatement
+            ? getStyleMetadata(t, returnStatement.argument, null, state)
+            : []
     }
 
     return []
@@ -41,7 +107,62 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // {{...style.container, ...style.container}}
+    if (t.isObjectExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.properties
+            .map(property => t.isSpreadElement(property)
+                ? property.argument
+                : t.objectExpression([property])
+            )
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    // [{...style.container, ...style.container}]
+    if (t.isArrayExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.elements
+            .flatMap(property => {
+                if (t.isSpreadElement(property)) {
+                    return property.argument
+                }
+                return property
+            })
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
+}
+
+function handlePressable(t, path, styleAttr, metadata, state) {
+    // add variants
+    if (state.file.hasVariants) {
+        const variants = t.jsxAttribute(
+            t.jsxIdentifier('variants'),
+            t.jsxExpressionContainer(t.identifier('__uni__variants'))
+        )
+
+        path.node.openingElement.attributes.push(variants)
+    }
+
+    // to add import
+    state.file.hasAnyUnistyle = true
+
+    if (t.isMemberExpression(styleAttr.value.expression)) {
+        // styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true)
+    }
+}
+
 module.exports = {
     getStyleMetadata,
-    getStyleAttribute
+    getStyleAttribute,
+    styleAttributeToArray,
+    handlePressable
 }

package/plugin/stylesheet.js

@@ -14,7 +14,8 @@ const UnistyleDependency = {
     PixelRatio: 10,
     FontScale: 11,
     StatusBar: 12,
-    NavigationBar: 13
+    NavigationBar: 13,
+    Ime: 14
 }
 
 function stringToUniqueId(str) {
@@ -43,7 +44,7 @@ function isUnistylesStyleSheet(t, path, state) {
 
 function addStyleSheetTag(t, path, state) {
     const callee = path.get('callee')
-    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+    const uniqueId = stringToUniqueId(state.filename.replace(state.cwd, '')) + ++state.file.tagNumber
 
     callee.container.arguments.push(t.numericLiteral(uniqueId))
 }
@@ -100,7 +101,8 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
-                        case 'orientation': {
+                        case 'isPortrait':
+                        case 'isLandscape': {
                             dependencies.push(UnistyleDependency.Orientation)
 
                             return
@@ -110,6 +112,11 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
+                        case 'ime': {
+                            dependencies.push(UnistyleDependency.Ime)
+
+                            return
+                        }
                         case 'insets': {
                             dependencies.push(UnistyleDependency.Insets)
 
@@ -161,30 +168,45 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
-function getUnistyle(t, property) {
+function getUnistyles(t, property) {
     const propertyValue = t.isArrowFunctionExpression(property.value)
         ? property.value.body
         : property.value
 
     if (t.isObjectExpression(propertyValue)) {
-        return propertyValue
+        return [propertyValue]
     }
 
     if (t.isBlockStatement(propertyValue)) {
-        const returnStatement = propertyValue.body
-            .find(value => t.isReturnStatement(value))
-
-        return returnStatement
-            ? returnStatement.argument
-            : null
+        // here we might have single return statement
+        // or if-else statements with return statements
+        return propertyValue.body
+            .flatMap(value => {
+                if (t.isReturnStatement(value)) {
+                    return [value]
+                }
+
+                if (!t.isIfStatement(value)) {
+                    return []
+                }
+
+                return [value.consequent, value.alternate]
+                    .filter(Boolean)
+                    .flatMap(value => {
+                        if (t.isBlockStatement(value)) {
+                            return value.body.filter(t.isReturnStatement)
+                        }
+                    })
+            })
+            .map(value => value.argument)
     }
 
-    return null
+    return []
 }
 
 module.exports = {
     isUnistylesStyleSheet,
     analyzeDependencies,
     addStyleSheetTag,
-    getUnistyle
+    getUnistyles
 }

package/plugin/variants.js

@@ -27,7 +27,60 @@ function extractVariants(t, path, state) {
     state.file.hasVariants = true
 }
 
+function wrapVariants(t, path) {
+    const wrapperElement = t.jsxElement(
+        t.jsxOpeningElement(
+            t.jsxIdentifier('Variants'),
+            [
+                t.jsxAttribute(
+                    t.jsxIdentifier('variants'),
+                    t.jsxExpressionContainer(t.identifier('__uni__variants'))
+                ),
+            ],
+            false
+        ),
+        t.jsxClosingElement(t.jsxIdentifier('Variants')),
+        [path]
+    )
+
+    if (t.isJSXFragment(path)) {
+        wrapperElement.children = path.children
+    }
+
+    // other case for React.Fragment
+    const element = path.openingElement && path.openingElement.name
+
+    if (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') {
+        wrapperElement.children = path.children
+        wrapperElement.openingElement.attributes.push(...path.openingElement.attributes)
+    }
+
+    return wrapperElement
+}
+
+function addJSXVariants(t, path) {
+    if (!t.isReturnStatement(path.node)) {
+        return
+    }
+
+    const jsxElement = path.node.argument
+
+    if (t.isConditionalExpression(jsxElement)) {
+        jsxElement.alternate = wrapVariants(t, jsxElement.alternate)
+        jsxElement.consequent = wrapVariants(t, jsxElement.consequent)
+
+        return
+    }
+
+    if (!t.isJSXElement(jsxElement) && !t.isJSXFragment(jsxElement)) {
+        return
+    }
+
+    path.get('argument').replaceWith(wrapVariants(t, jsxElement));
+}
+
 module.exports = {
     isUsingVariants,
-    extractVariants
+    extractVariants,
+    addJSXVariants
 }

package/src/components/Display.tsx

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react'
+import { useMedia } from '../hooks'
+
+type DisplayProps = { mq: symbol } & PropsWithChildren
+
+export const Display: React.FunctionComponent<DisplayProps> = ({ children, ...props }) => {
+    const { isVisible } = useMedia(props)
+
+    return isVisible
+        ? children
+        : null
+}

package/src/components/Hide.tsx

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react'
+import { useMedia } from '../hooks'
+
+type HideProps = { mq: symbol } & PropsWithChildren
+
+export const Hide: React.FunctionComponent<HideProps> = ({ children, ...props }) => {
+    const { isVisible } = useMedia(props)
+
+    return !isVisible
+        ? children
+        : null
+}

package/src/components/ScopedTheme.tsx

@@ -0,0 +1,32 @@
+import React, { useLayoutEffect } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+
+type ThemeProps = {
+    name: keyof UnistylesThemes
+}
+
+const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
+    UnistylesShadowRegistry.setScopedTheme(name)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.setScopedTheme(name)
+    })
+
+    return null
+}
+
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
+    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const mappedChildren = [
+        <Apply key={name} name={name} />,
+        children,
+        <Apply key='dispose' name={previousScopedTheme} />
+    ]
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/Variants.tsx

@@ -0,0 +1,29 @@
+import React, { useLayoutEffect } from 'react'
+import { UnistylesShadowRegistry } from '../specs'
+
+type VariantProps = {
+    variants?: Record<string, string | boolean | undefined>
+}
+
+const Apply: React.FunctionComponent<VariantProps> = ({ variants }) => {
+    UnistylesShadowRegistry.selectVariants(variants)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.selectVariants(variants)
+    })
+
+    return null
+}
+export const Variants: React.FunctionComponent<React.PropsWithChildren<VariantProps>> = ({ variants, children }) => {
+    const mappedChildren = [
+        <Apply key='add' variants={variants} />,
+        children,
+        <Apply key='remove' />
+    ]
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { Hide } from './Hide'
+export { Display } from './Display'
+export { Variants } from './Variants'
+export { ScopedTheme } from './ScopedTheme'

package/src/components/native/ActivityIndicator.tsx

@@ -0,0 +1,4 @@
+import { ActivityIndicator as NativeActivityIndicator } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const ActivityIndicator = createUnistylesElement(NativeActivityIndicator)

package/src/components/native/FlatList.tsx

@@ -0,0 +1,4 @@
+import { FlatList as NativeFlatList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const FlatList = createUnistylesElement(NativeFlatList)

package/src/components/native/Image.tsx

@@ -0,0 +1,4 @@
+import { Image as NativeImage } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Image = createUnistylesElement(NativeImage)

package/src/components/native/ImageBackground.tsx

@@ -0,0 +1,4 @@
+import { ImageBackground as NativeImageBackground } from 'react-native'
+import { createUnistylesImageBackground } from '../../core'
+
+export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)

package/src/components/native/KeyboardAvoidingView.tsx

@@ -0,0 +1,4 @@
+import { KeyboardAvoidingView as NativeKeyboardAvoidingView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const KeyboardAvoidingView = createUnistylesElement(NativeKeyboardAvoidingView)

package/src/components/native/Pressable.native.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
+import { UnistylesShadowRegistry } from '../../specs'
+import { passForwardedRef } from '../../core'
+
+type PressableProps = Props & {
+    variants?: Record<string, string | boolean>
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
+    const storedRef = useRef<View | null>()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                const unistyles = typeof style === 'function'
+                    ? style({ pressed: false })
+                    : style
+                const styles = Array.isArray(unistyles)
+                    ? unistyles
+                    : [unistyles]
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, styles)
+
+                storedRef.current = ref
+
+                return passForwardedRef(props, ref, forwardedRef)
+            }}
+            style={state => {
+                UnistylesShadowRegistry.selectVariants(variants)
+
+                const unistyles = typeof style === 'function'
+                    ? style(state)
+                    : style
+                const styles = Array.isArray(unistyles)
+                    ? unistyles
+                    : [unistyles]
+
+                if (storedRef.current) {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.add(storedRef.current, styles)
+                }
+
+                UnistylesShadowRegistry.selectVariants(undefined)
+
+                return unistyles
+            }}
+        />
+    )
+})

package/src/components/native/Pressable.tsx

@@ -0,0 +1,98 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import { UnistylesShadowRegistry } from '../../specs'
+
+type Variants = Record<string, string | boolean | undefined>
+type WebPressableState = {
+    pressed: boolean,
+    hovered: boolean,
+    focused: boolean
+}
+
+type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+
+type PressableProps = Props & {
+    variants?: Variants
+    style?: WebPressableStyle,
+}
+
+const initialState: WebPressableState = {
+    pressed: false,
+    hovered: false,
+    focused: false
+}
+
+type UpdateStylesProps = {
+    ref: View | null,
+    style: WebPressableStyle,
+    variants?: Variants,
+    state: WebPressableState
+    scopedTheme?: string
+}
+
+const extractStyleResult = (style: any) => {
+    return typeof style === 'function'
+        ? [style()]
+        : Array.isArray(style)
+            ? style.map(style => typeof style === 'function' ? style() : style)
+            : [style]
+}
+
+const updateStyles = ({ ref, style, state, scopedTheme, variants }: UpdateStylesProps) => {
+    const styleResult = typeof style === 'function'
+        ? style(state)
+        : style
+    const extractedResult = extractStyleResult(styleResult)
+    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const previousVariants = UnistylesShadowRegistry.getVariants()
+
+    UnistylesShadowRegistry.selectVariants(variants as unknown as Variants)
+    UnistylesShadowRegistry.setScopedTheme(scopedTheme as any)
+
+    UnistylesShadowRegistry.add(ref, extractedResult)
+
+    UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+    UnistylesShadowRegistry.selectVariants(previousVariants as unknown as Variants)
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>(null)
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const variants = UnistylesShadowRegistry.getVariants()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            style={state => {
+                if (!storedRef.current) {
+                    return {}
+                }
+
+                updateStyles({
+                    ref: storedRef.current,
+                    style: style as WebPressableStyle,
+                    variants,
+                    scopedTheme,
+                    state: state as WebPressableState
+                })
+
+                return {}
+            }}
+            ref={ref => {
+                storedRef.current = ref
+                updateStyles({
+                    ref,
+                    style: style as WebPressableStyle,
+                    variants,
+                    scopedTheme,
+                    state: initialState
+                })
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+            }}
+        />
+    )
+})

package/src/components/native/RefreshControl.tsx

@@ -0,0 +1,4 @@
+import { RefreshControl as NativeRefreshControl } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const RefreshControl = createUnistylesElement(NativeRefreshControl)

package/src/components/native/ScrollView.tsx

@@ -0,0 +1,4 @@
+import { ScrollView as NativeScrollView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const ScrollView = createUnistylesElement(NativeScrollView)

package/src/components/native/SectionList.tsx

@@ -0,0 +1,4 @@
+import { SectionList as NativeSectionList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const SectionList = createUnistylesElement(NativeSectionList)

package/src/components/native/Switch.tsx

@@ -0,0 +1,4 @@
+import { Switch as NativeSwitch } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Switch = createUnistylesElement(NativeSwitch)

package/src/components/native/Text.tsx

@@ -0,0 +1,4 @@
+import { Text as NativeText } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Text = createUnistylesElement(NativeText)

package/src/components/native/TextInput.tsx

@@ -0,0 +1,4 @@
+import { TextInput as NativeTextInput } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TextInput = createUnistylesElement(NativeTextInput)

package/src/components/native/TouchableHighlight.tsx

@@ -0,0 +1,4 @@
+import { TouchableHighlight as NativeTouchableHighlight } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TouchableHighlight = createUnistylesElement(NativeTouchableHighlight)

package/src/components/native/TouchableOpacity.tsx

@@ -0,0 +1,4 @@
+import { TouchableOpacity as NativeTouchableOpacity } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TouchableOpacity = createUnistylesElement(NativeTouchableOpacity)

package/src/components/native/View.tsx

@@ -0,0 +1,4 @@
+import { View as NativeView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const View = createUnistylesElement(NativeView)

package/src/components/native/VirtualizedList.tsx

@@ -0,0 +1,4 @@
+import { VirtualizedList as NativeVirtualizedList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const VirtualizedList = createUnistylesElement(NativeVirtualizedList)