react-native-unistyles 3.0.0-alpha.8 → 3.0.0-beta.1

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,375 @@ 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 metadataToRawStyle(t, metadata, styleExpression) {
+    const expressions = []
+
+    metadata.forEach(meta => {
+        if (meta.inlineStyle) {
+            return meta.inlineStyle.properties.forEach(prop => {
+                if (t.isObjectProperty(prop)) {
+                    expressions.push(t.objectExpression([prop]))
+                }
+            })
+        }
+
+        if (meta.members.length > 0) {
+            return expressions.push(t.memberExpression(...meta.members.map(member => t.identifier(member))))
+        }
+
+        if (meta.logicalExpression) {
+            const expression = t.cloneNode(meta.logicalExpression)
+
+            if (t.isIdentifier(expression.left)) {
+                if (t.isCallExpression(expression.right)) {
+                    expression.right = expression.right.callee
+                }
+
+                expressions.push(expression)
+            }
+        }
+
+        if (meta.conditionalExpression) {
+            const expression = t.cloneNode(meta.conditionalExpression)
+
+            if (t.isCallExpression(expression.alternate)) {
+                expression.alternate = expression.alternate.callee
+            }
+
+            if (t.isCallExpression(expression.consequent)) {
+                expression.consequent = expression.consequent.callee
+            }
+
+            expressions.push(expression)
+        }
+    })
+
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 1) {
+        return t.jsxAttribute(
+            t.jsxIdentifier('rawStyle'),
+            t.jsxExpressionContainer(
+                t.arrowFunctionExpression(styleExpression.params, t.arrayExpression([
+                ...expressions
+                ])
+            ))
+        )
+    }
+
+    return t.jsxAttribute(
+        t.jsxIdentifier('rawStyle'),
+        t.jsxExpressionContainer(t.arrayExpression([
+            ...expressions
+        ]))
+    )
+}
+
+function wrapInGetBoundArgs(t, toWrap, extraArgs) {
+    const expression = t.callExpression(
+        t.identifier('getBoundArgs'),
+        [toWrap]
+    )
+
+    return  t.callExpression(
+        t.memberExpression(expression, t.identifier('bind')),
+        [t.identifier('undefined'), ...extraArgs].filter(Boolean)
+    )
+}
+
+function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunction) {
+    let expression = undefined
+    let args = []
+
+    const members = metadata.at(0).members
+
+    if (members) {
+        expression = members.slice(1).reduce(
+            (acc, property) => t.memberExpression(acc, t.identifier(property)),
+            t.identifier(members[0]))
+    }
+
+    if (t.isMemberExpression(metadata.at(0))) {
+        expression = metadata.at(0)
+    }
+
+    if (t.isCallExpression(metadata.at(0))) {
+        expression = metadata.at(0).callee
+        args = metadata.at(0).arguments
+    }
+
+    if (!expression) {
+        return
+    }
+
+    const bindCall = wrapInGetBoundArgs(t , expression, wrapInArrowFunction ? [t.identifier("state")] : args)
+
+    if (t.isCallExpression(metadata.at(0))) {
+        return bindCall
+    }
+
+    if (!wrapInArrowFunction) {
+        return t.conditionalExpression(
+            t.binaryExpression(
+                "===",
+                t.unaryExpression(
+                    "typeof",
+                    expression
+                ),
+                t.stringLiteral("function")
+            ),
+            bindCall,
+            expression
+        )
+    }
+
+    // state => typeof style.pressable === 'function'
+    // ? getBoundArgs(style.pressable).bind(undefined, state)
+    // : style.pressable
+    return t.arrowFunctionExpression(
+        [t.identifier("state")],
+        t.conditionalExpression(
+            t.binaryExpression(
+                "===",
+                t.unaryExpression(
+                    "typeof",
+                    expression
+                ),
+                t.stringLiteral("function")
+            ),
+            bindCall,
+            expression
+        )
+    )
+}
+
+function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index) {
+    if (t.isObjectExpression(wrapper)) {
+        return
+    }
+
+    if (t.isMemberExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
+        parentWrapper.elements[index] = handlePressableFromMemberExpression(t, path, [metadata[index]])
+
+        return
+    }
+
+    if (t.isMemberExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
+        parentWrapper = handlePressableFromMemberExpression(t, path, metadata)
+
+        return
+    }
+
+    if (t.isLogicalExpression(wrapper)) {
+        if (t.isIdentifier(wrapper.left) && t.isMemberExpression(wrapper.right)) {
+            parentWrapper.elements[index].right = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].right])
+
+            return
+        }
+
+        return
+    }
+
+    if (t.isConditionalExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
+        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
+            parentWrapper.elements[index].alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].alternate])
+        }
+
+        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
+            parentWrapper.elements[index].consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].consequent])
+        }
+
+        return
+    }
+
+    if (t.isConditionalExpression(wrapper) && !t.isArrayExpression(parentWrapper)) {
+        if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) {
+            parentWrapper.alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.alternate])
+        }
+
+        if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) {
+            parentWrapper.consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.consequent])
+        }
+
+        return
+    }
+
+    const pressableArgs = t.isCallExpression(wrapper)
+        ? wrapper.arguments
+        : wrapper.argument.arguments
+    const callee = t.isCallExpression(wrapper)
+        ? wrapper.callee
+        : wrapper.argument.callee
+
+    const getBoundArgsCall = t.callExpression(
+        t.identifier('getBoundArgs'),
+        [callee]
+    )
+    const bindCall = t.callExpression(
+        t.memberExpression(getBoundArgsCall, t.identifier('bind')),
+        [t.identifier('undefined'), ...pressableArgs]
+    )
+
+    if (t.isCallExpression(wrapper) && t.isArrayExpression(parentWrapper)) {
+        parentWrapper.elements[index] = bindCall
+
+        return
+    }
+
+    if (t.isCallExpression(wrapper)) {
+        styleExpression.body = bindCall
+    }
+}
+
+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)
+    }
+
+    // add raw C++ style as prop to be bound
+    path.node.openingElement.attributes.push(metadataToRawStyle(t, metadata, styleAttr.value.expression))
+
+    const styleExpression = styleAttr.value.expression
+
+    // {style.pressable}
+    if (t.isMemberExpression(styleExpression)) {
+        styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true)
+
+        return
+    }
+
+    // {style.pressable(1, 2)}
+    if (t.isCallExpression(styleExpression)) {
+        // user already called dynamic function
+        const expression = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [styleExpression.callee]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(expression, t.identifier('bind')),
+            [t.identifier('undefined'), ...styleExpression.arguments]
+        )
+
+        path.node.openingElement.attributes = path.node.openingElement.attributes.map(attribute => {
+            if (attribute.name.name === "style") {
+                attribute.value.expression = t.arrowFunctionExpression([], bindCall)
+            }
+
+            return attribute
+        })
+
+        return
+    }
+
+    // {() => style.pressable(1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
+            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
+            : styleExpression.body
+
+        if (t.isMemberExpression(parentWrapper)) {
+            return
+        }
+
+        if (t.isArrayExpression(parentWrapper)) {
+            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
+        }
+
+        if (t.isReturnStatement(parentWrapper)) {
+            parentWrapper = parentWrapper.argument
+
+            return handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
+        }
+
+        const pressableArgs = t.isCallExpression(parentWrapper)
+            ? parentWrapper.arguments
+            : parentWrapper.argument.arguments
+        const callee = t.isCallExpression(parentWrapper)
+            ? parentWrapper.callee
+            : parentWrapper.argument.callee
+        const getBoundArgsCall = t.callExpression(
+            t.identifier('getBoundArgs'),
+            [callee]
+        )
+        const bindCall = t.callExpression(
+            t.memberExpression(getBoundArgsCall, t.identifier('bind')),
+            [t.identifier('undefined'), ...pressableArgs]
+        )
+
+        if (t.isCallExpression(parentWrapper)) {
+            styleExpression.body = bindCall
+
+            return
+        }
+
+        if (parentWrapper) {
+            parentWrapper.argument = bindCall
+        }
+
+        return
+    }
+
+    // {state => style.pressable(state, 1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
+        // user used state with custom args we need to getBoundArgs
+        // detect between arrow function with body and arrow function
+        let parentWrapper = t.isBlockStatement(styleExpression.body)
+            ? styleExpression.body.body.find(node => t.isReturnStatement(node))
+            : styleExpression.body
+
+        if (t.isArrayExpression(parentWrapper)) {
+            return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index))
+        }
+
+        if (t.isReturnStatement(parentWrapper)) {
+            parentWrapper = parentWrapper.argument
+        }
+
+        handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
+    }
+}
+
 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)
 

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/Pressable.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative, type PressableStateCallbackType } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { getId } from '../core'
+
+type PressableProps = Props & {
+    rawStyle?: Array<any> | ((event: PressableStateCallbackType) => Array<any>)
+    variants?: Record<string, string | boolean>
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, rawStyle, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                storedRef.current = ref
+                const styleResult = typeof style === 'function'
+                    ? style({ pressed: false })
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : Array.isArray(styleResult)
+                        ? styleResult
+                            // @ts-expect-error - this is hidden from TS
+                            .map(style => typeof style === 'function' ? style.getBoundArgs() : [])
+                        : []
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+
+                const returnFn = typeof passedRef === 'function'
+                    ? passedRef(ref)
+                    : () => {}
+                const unistyles = typeof rawStyle === 'function'
+                    ? rawStyle({ pressed: false })
+                    : (rawStyle ?? [])
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs])
+
+                return () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+
+                    if (typeof returnFn === 'function') {
+                        returnFn()
+                    }
+                }
+            }}
+            style={state => {
+                const styleResult = typeof style === 'function'
+                    ? style(state)
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : Array.isArray(styleResult)
+                        ? styleResult
+                            // @ts-expect-error - this is hidden from TS
+                            .map(style => typeof style === 'function' ? style.getBoundArgs() : [])
+                        : []
+                const pressId = getId()
+                const unistyles = typeof rawStyle === 'function'
+                    ? rawStyle(state)
+                    : (rawStyle ?? [])
+
+                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, unistyles, variants, Array.isArray(styleResult) ? fnArgs : [fnArgs], pressId)
+                }
+
+                return typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult(pressId)
+                    : Array.isArray(styleResult)
+                        // @ts-expect-error - this is hidden from TS
+                        ? styleResult.map(style => typeof style === 'function' ? style(pressId) : style)
+                        : styleResult
+            }}
+        />
+    )
+})