react-native-unistyles 3.0.0-alpha.41 → 3.0.0-alpha.43

package/plugin/style.js

@@ -1,6 +1,3 @@
-const { PRESSABLE_STATE_NAME } = require('./common')
-const { generateUniqueId } = require('./ref')
-
 function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
@@ -13,7 +10,8 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
                 members: members.filter(Boolean),
                 inlineStyle: undefined,
                 dynamicFunction,
-                conditionalExpression: undefined
+                conditionalExpression: undefined,
+                logicalExpression: undefined
             }
         ]
     }
@@ -39,7 +37,8 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
                         members: [],
                         inlineStyle: t.objectExpression([prop]),
                         dynamicFunction: undefined,
-                        conditionalExpression: undefined
+                        conditionalExpression: undefined,
+                        logicalExpression: undefined
                     }]
                 }
 
@@ -58,7 +57,8 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
             members: [node.name],
             inlineStyle: undefined,
             dynamicFunction: undefined,
-            conditionalExpression: undefined
+            conditionalExpression: undefined,
+            logicalExpression: undefined
         }]
     }
 
@@ -67,15 +67,26 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
             members: [],
             inlineStyle: undefined,
             dynamicFunction: undefined,
-            conditionalExpression: node
+            conditionalExpression: node,
+            logicalExpression: undefined
         }]
     }
 
-    // pressable
     if (t.isArrowFunctionExpression(node)) {
         return getStyleMetadata(t, node.body, node)
     }
 
+    // {condition && styles.container}
+    if (t.isLogicalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined,
+            logicalExpression: node
+        }]
+    }
+
     return []
 }
 
@@ -90,12 +101,6 @@ function getStyleAttribute(t, path) {
 function styleAttributeToArray(t, path) {
     const styleAttribute = getStyleAttribute(t, path)
 
-    // special case for pressable
-    // {state => styles.pressable(state)}
-    if (t.isArrowFunctionExpression(styleAttribute.value.expression)) {
-        return
-    }
-
     // {{...style.container, ...style.container}}
     if (t.isObjectExpression(styleAttribute.value.expression)) {
         const properties = styleAttribute.value.expression.properties
@@ -127,112 +132,270 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
 }
 
-function handlePressable(t, path, styleAttr, metadata) {
-    const styleExpression = styleAttr.value.expression
+function metadataToRawStyle(t, metadata) {
+    const expressions = []
 
-    // {style.pressable}
-    // the worst case, we don't know if user rely on state
-    if (t.isMemberExpression(styleExpression)) {
-        const members = metadata.at(0).members
+    metadata.forEach(meta => {
+        if (meta.inlineStyle) {
+            return meta.inlineStyle.properties.forEach(prop => {
+                if (t.isObjectProperty(prop)) {
+                    expressions.push(t.objectExpression([prop]))
+                }
+            })
+        }
 
-        if (members.length === 0) {
-            return
+        if (meta.members.length > 0) {
+            return expressions.push(t.memberExpression(...meta.members.map(member => t.identifier(member))))
+        }
+
+        if (meta.logicalExpression) {
+            if (t.isIdentifier(meta.logicalExpression.left)) {
+                if (t.isMemberExpression(meta.logicalExpression.right)) {
+                    return expressions.push(meta.logicalExpression.right)
+                }
+
+                expressions.push(meta.logicalExpression.right.callee)
+            }
         }
+    })
 
-        const stylePath = members.slice(1).reduce(
+    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
+
+    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])
-        )
+            t.identifier(members[0]))
+    }
 
-        const uniquePressableId = generateUniqueId()
-
-        // state => typeof style.pressable === 'function' ? style.pressable(state) : style.pressable
-        styleAttr.value.expression = t.arrowFunctionExpression(
-            [t.identifier("state")],
-            t.conditionalExpression(
-                t.binaryExpression(
-                    "===",
-                    t.unaryExpression(
-                        "typeof",
-                        stylePath
-                    ),
-                    t.stringLiteral("function")
-                ),
-                t.callExpression(
-                    stylePath,
-                    [t.identifier("state"), t.objectExpression([
-                        t.objectProperty(
-                            t.identifier("__uni_pressable_id"),
-                            t.stringLiteral(uniquePressableId)
-                        )
-                    ])]
+    if (t.isMemberExpression(metadata.at(0))) {
+        expression = metadata.at(0)
+    }
+
+    if (!expression) {
+        return
+    }
+
+    const bindCall = wrapInGetBoundArgs(t , expression, wrapInArrowFunction ? [t.identifier("state")] : [])
+
+    if (!wrapInArrowFunction) {
+        return t.conditionalExpression(
+            t.binaryExpression(
+                "===",
+                t.unaryExpression(
+                    "typeof",
+                    expression
                 ),
-                stylePath
-            )
+                t.stringLiteral("function")
+            ),
+            bindCall,
+            expression
         )
-
-        return uniquePressableId
     }
 
-    // {style.pressable(1, 2)}
-    if (t.isCallExpression(styleExpression)) {
-        // user already called dynamic function
-        // there is no work to do
+    // 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
     }
 
-    // {() => style.pressable(1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
-        // user doesn't care about the state
-        // we can safely unwrap the function
-        styleAttr.value.expression = styleExpression.body
+    if (t.isMemberExpression(wrapper)) {
+        parentWrapper.elements[index] = handlePressableFromMemberExpression(t, path, [metadata[index]])
 
         return
     }
 
-    // {state => style.pressable(state, 1, 2)}
-    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
-        // already a function, we need to set state to false
-        // and pass it to C++ as in background it will never be true
-        const args = metadata.at(0).dynamicFunction
+    if (t.isLogicalExpression(wrapper)) {
+        if (t.isIdentifier(wrapper.left) && t.isMemberExpression(wrapper.right)) {
+            parentWrapper.elements[index].right = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].right])
 
-        if (!t.isCallExpression(args) || args.arguments.length === 0) {
             return
         }
 
-        // get state local name
-        const stateIdentifier = styleExpression.params[0]
+        return
+    }
 
-        if (!stateIdentifier || !t.isIdentifier(stateIdentifier)) {
-            return
+    if (t.isConditionalExpression(wrapper)) {
+        if (t.isMemberExpression(wrapper.alternate)) {
+            parentWrapper.elements[index].alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].alternate])
         }
 
-        // replace state name with matching identifier
-        args.arguments.map(arg => {
-            if (t.isIdentifier(arg) && arg.name === stateIdentifier.name) {
-                arg.name = PRESSABLE_STATE_NAME
-            }
+        if (t.isMemberExpression(wrapper.consequent)) {
+            parentWrapper.elements[index].consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].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
+    }
+}
 
-            if (t.isMemberExpression(arg) && arg.object.name === stateIdentifier.name) {
-                arg.object.name = PRESSABLE_STATE_NAME
+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))
+
+    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 arg
+            return attribute
         })
 
-        const uniquePressableId = generateUniqueId()
+        return
+    }
 
-        args.arguments.push(t.objectExpression([
-            t.objectProperty(
-                t.identifier("__uni_pressable_id"),
-                t.stringLiteral(uniquePressableId)
-            )
-        ]))
+    // {() => style.pressable(1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
+        const 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))
+        }
 
-        // update arrow function arg name
-        styleExpression.params[0].name = PRESSABLE_STATE_NAME
+        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
+        const 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))
+        }
 
-        return uniquePressableId
+        handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper)
     }
 }
 

package/src/components/Display.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { useMedia } from './useMedia'
+import { useMedia } from '../hooks'
 
 type DisplayProps = { mq: symbol } & PropsWithChildren
 

package/src/components/Hide.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { useMedia } from './useMedia'
+import { useMedia } from '../hooks'
 
 type HideProps = { mq: symbol } & PropsWithChildren
 

package/src/components/Pressable.tsx

@@ -0,0 +1,101 @@
+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 { getId } from '../core'
+
+type PressableProps = Props & {
+    rawStyle?: 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 = (rawStyle ?? [])
+                    .map((style, index) => {
+                        if (fnArgs[index]) {
+                            return style
+                        }
+
+                        return undefined
+                    })
+                    .filter(Boolean)
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, unistyles, variants, [...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 = (rawStyle ?? [])
+                    .map((style, index) => {
+                        if (fnArgs[index]) {
+                            return style
+                        }
+
+                        return undefined
+                    })
+                    .filter(Boolean)
+
+                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, [...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
+            }}
+        />
+    )
+})

package/src/components/Pressable.web.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, useEffect, 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 WebPressableState = {
+    pressed: boolean,
+    hovered: boolean,
+    focused: boolean
+}
+
+type PressableProps = Props & {
+    variants?: Record<string, string | boolean>
+    style?: ((state: WebPressableState) => ViewStyle) | ViewStyle,
+}
+
+const initialState: WebPressableState = {
+    pressed: false,
+    hovered: false,
+    focused: false
+}
+
+const events = {
+    'pointerdown': { pressed: true },
+    'pointerup': { pressed: false },
+    'pointerenter': { hovered: true },
+    'pointerleave': { hovered: false },
+    'focus': { focused: true },
+    'blur': { focused: false }
+} satisfies Partial<Record<keyof HTMLElementEventMap, Partial<WebPressableState>>>
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>()
+    const state = useRef<WebPressableState>(initialState)
+    const styleRef = useRef(style)
+
+    useEffect(() => {
+        styleRef.current = style
+    }, [style])
+
+    useEffect(() => {
+        const handler = (newState: Partial<WebPressableState>) => () => {
+            state.current = { ...state.current, ...newState }
+
+            const styleResult = typeof styleRef.current === 'function'
+                ? styleRef.current(state.current)
+                : styleRef.current
+            const fnArgs = typeof styleResult === 'function'
+                // @ts-expect-error - this is hidden from TS
+                ? styleResult.getBoundArgs()
+                : []
+            const extractedResult = typeof styleResult === 'function'
+                ? (styleResult as Function)()
+                : styleResult
+
+            // @ts-expect-error - this is hidden from TS
+            UnistylesShadowRegistry.add(storedRef.current, [extractedResult], variants, [fnArgs])
+        }
+
+        if (!storedRef.current) {
+            return
+        }
+
+        // ref on the web is dom element
+        const ref = storedRef.current as unknown as HTMLDivElement
+
+        Object.entries(events).forEach(([event, state]) => {
+            ref.addEventListener(event, handler(state))
+        })
+
+        return () => {
+            Object.entries(events).forEach(([event, state]) => {
+                ref.removeEventListener(event, handler(state))
+            })
+        }
+    }, [])
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                storedRef.current = ref
+                const styleResult = typeof style === 'function'
+                    ? style(initialState)
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : []
+                const extractedResult = typeof styleResult === 'function'
+                    ? (styleResult as Function)()
+                    : styleResult
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, [extractedResult], variants, [fnArgs])
+            }}
+        />
+    )
+})

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { Hide } from './Hide'
 export { Display } from './Display'
+export { Pressable } from './Pressable'

package/src/core/getBoundArgs.ts

@@ -0,0 +1,15 @@
+export const getBoundArgs = (fn: Function) => {
+    const boundArgs = [] as Array<any>
+
+    fn.bind = (thisArg, ...args) => {
+        boundArgs.push(...args)
+
+        const newFn = Function.prototype.bind.apply(fn, [thisArg, ...args])
+
+        newFn.getBoundArgs = () => boundArgs
+
+        return newFn
+    }
+
+    return fn
+}

package/src/core/getId.ts

@@ -0,0 +1 @@
+export const getId = () => `${Math.random().toString(36).substring(2, 9)}`

package/src/core/index.ts

@@ -1 +1,3 @@
 export { createUnistylesComponent } from './createUnistylesComponent'
+export { getBoundArgs } from './getBoundArgs'
+export { getId } from './getId'

package/src/hooks/index.ts

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