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

package/plugin/style.js

@@ -1,44 +1,79 @@
-function getStyleObjectPath(t, node, state) {
+const { PRESSABLE_STATE_NAME } = require('./common')
+const { generateUniqueId } = require('./ref')
+
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
+        return [
+            {
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
+                dynamicFunction,
+                conditionalExpression: undefined
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
+        return node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    return [{
+                        members: [],
+                        inlineStyle: t.objectExpression([prop]),
+                        dynamicFunction: undefined,
+                        conditionalExpression: undefined
+                    }]
+                }
+
+                return getStyleMetadata(t, prop.argument)
+            })
+            .filter(Boolean)
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
-
-        if (!lastPart) {
-            return path
-        }
-
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
+        return getStyleMetadata(t, node.callee, node)
+    }
 
-            return path
-        }
+    if (t.isIdentifier(node)) {
+        return [{
+            members: [node.name],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: undefined
+        }]
+    }
 
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
+    if (t.isConditionalExpression(node)) {
+        return [{
+            members: [],
+            inlineStyle: undefined,
+            dynamicFunction: undefined,
+            conditionalExpression: node
+        }]
+    }
 
-        return path
+    // pressable
+    if (t.isArrowFunctionExpression(node)) {
+        return getStyleMetadata(t, node.body, node)
     }
 
     return []
@@ -52,7 +87,158 @@ 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
+            .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) {
+    const styleExpression = styleAttr.value.expression
+
+    // {style.pressable}
+    // the worst case, we don't know if user rely on state
+    if (t.isMemberExpression(styleExpression)) {
+        const members = metadata.at(0).members
+
+        if (members.length === 0) {
+            return
+        }
+
+        const stylePath = members.slice(1).reduce(
+            (acc, property) => t.memberExpression(acc, t.identifier(property)),
+            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)
+                        )
+                    ])]
+                ),
+                stylePath
+            )
+        )
+
+        return uniquePressableId
+    }
+
+    // {style.pressable(1, 2)}
+    if (t.isCallExpression(styleExpression)) {
+        // user already called dynamic function
+        // there is no work to do
+        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
+
+        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.isCallExpression(args) || args.arguments.length === 0) {
+            return
+        }
+
+        // get state local name
+        const stateIdentifier = styleExpression.params[0]
+
+        if (!stateIdentifier || !t.isIdentifier(stateIdentifier)) {
+            return
+        }
+
+        // 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(arg) && arg.object.name === stateIdentifier.name) {
+                arg.object.name = PRESSABLE_STATE_NAME
+            }
+
+            return arg
+        })
+
+        const uniquePressableId = generateUniqueId()
+
+        args.arguments.push(t.objectExpression([
+            t.objectProperty(
+                t.identifier("__uni_pressable_id"),
+                t.stringLiteral(uniquePressableId)
+            )
+        ]))
+
+        // update arrow function arg name
+        styleExpression.params[0].name = PRESSABLE_STATE_NAME
+
+        return uniquePressableId
+    }
+}
+
 module.exports = {
-    getStyleObjectPath,
-    getStyleAttribute
+    getStyleMetadata,
+    getStyleAttribute,
+    styleAttributeToArray,
+    handlePressable
 }

package/plugin/stylesheet.js

@@ -14,7 +14,21 @@ const UnistyleDependency = {
     PixelRatio: 10,
     FontScale: 11,
     StatusBar: 12,
-    NavigationBar: 13
+    NavigationBar: 13,
+    Ime: 14
+}
+
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
 }
 
 function isUnistylesStyleSheet(t, path, state) {
@@ -28,6 +42,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -80,7 +101,8 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
-                        case 'orientation': {
+                        case 'isPortrait':
+                        case 'isLandscape': {
                             dependencies.push(UnistyleDependency.Orientation)
 
                             return
@@ -90,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)
 
@@ -141,7 +168,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/components/Display.tsx

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

package/src/components/index.ts

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

package/src/components/useMedia.ts

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+import { isValidMq, parseMq, isUnistylesMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const computeIsVisible = (): boolean => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { width, height } = UnistylesRuntime.screen
+
+        if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
+            return false
+        }
+
+        if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
+            return false
+        }
+
+        if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
+            return false
+        }
+
+        if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
+            return false
+        }
+
+        return true
+    }
+    const [isVisible, setIsVisible] = useState<boolean | null>(computeIsVisible())
+
+    useEffect(() => {
+        setIsVisible(computeIsVisible())
+    }, [config.mq])
+
+    useLayoutEffect(() => {
+        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setIsVisible(computeIsVisible())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [config.mq])
+
+    return {
+        isVisible
+    }
+}

package/src/components/useMedia.web.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const disposeRef = useRef(() => {})
+    const [isVisible, setIsVisible] = useState(() => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { minWidth, maxWidth, minHeight, maxHeight } = parsedMq
+
+        const mediaQuery = [
+            minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
+            maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
+            minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
+        ].filter(Boolean).join(' and ')
+
+        const media = window.matchMedia(mediaQuery)
+        const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
+
+        media.addEventListener('change', handler)
+        disposeRef.current = () => media.removeEventListener('change', handler)
+
+        return media.matches
+    })
+
+    // Unmount
+    useEffect(() => () => disposeRef.current(), [])
+
+    return {
+        isVisible
+    }
+}

package/src/core/createUnistylesComponent.native.tsx

@@ -0,0 +1,83 @@
+import React, { type ComponentType, forwardRef, useEffect, useRef, useState } from 'react'
+import type { UnistylesTheme } from '../types'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+import type { PartialBy } from '../types/common'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
+        const [, setRt] = useState(0)
+        const stylesRef = useRef<Record<string, any>>({})
+        const isForcedRef = useRef(false)
+
+        if (!isForcedRef.current) {
+            SUPPORTED_STYLE_PROPS.forEach(propName => {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent requires ${propName} to be an object. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    // @ts-expect-error - this is hidden from TS
+                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    stylesRef.current = {
+                        ...stylesRef.current,
+                        [propName]: narrowedProps[propName]
+                    }
+                }
+            })
+        }
+
+        useEffect(() => {
+            const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+                const componentDependencies = (narrowedProps.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
+
+                if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
+                    setTheme(UnistylesRuntime.getTheme())
+
+                    // override with Unistyles styles
+                    SUPPORTED_STYLE_PROPS.forEach(propName => {
+                        if (narrowedProps?.[propName]) {
+                            stylesRef.current = {
+                                ...stylesRef.current,
+                                // @ts-expect-error - this is hidden from TS
+                                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+                            }
+                        }
+                    })
+
+                    isForcedRef.current = true
+                }
+
+                if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+                    setRt(prevState => prevState + 1)
+                }
+            })
+
+            return () => {
+                removeChangeListener()
+            }
+        }, [])
+
+        const mergedProps = mappings?.(theme) as Record<string, any> ?? {}
+        const finalProps = deepMergeObjects(mergedProps, props)
+
+        // override with Unistyles styles
+        SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
+            }
+        })
+
+        isForcedRef.current = false
+
+        return <Component {...finalProps as TProps} ref={ref} />
+    })
+}

package/src/core/createUnistylesComponent.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo } from 'react'
+import type { UnistylesTheme } from '../types'
+import { UnistylesRuntime } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import type { PartialBy } from '../types/common'
+import { UnistylesListener } from '../web/listener'
+import { UnistylesShadowRegistry } from '../web'
+import { equal } from '../web/utils'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
+
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+const useShadowRegistry = (style?: Record<string, any>) => {
+    const [ref] = useState(document.createElement('div'))
+    const oldClassNames = useRef<Array<string>>([])
+    const classNames = useMemo(() => {
+        if (!style) {
+            return []
+        }
+
+        const newClassNames = UnistylesShadowRegistry.add(ref, [style], undefined, []) ?? []
+
+        if (equal(oldClassNames.current, newClassNames)) {
+            return oldClassNames.current
+        }
+
+        oldClassNames.current = newClassNames
+
+        return newClassNames
+    }, [style])
+
+    useEffect(() => () => {
+        // Remove styles on unmount
+        if (style) {
+            UnistylesShadowRegistry.add(null, [style], undefined, [])
+        }
+    })
+
+    return classNames
+}
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
+
+        useEffect(() => {
+            const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
+                if (!mappings) {
+                    disposeMappings()
+
+                    return
+                }
+
+                return setMappingsProps(mappings(UnistylesRuntime.getTheme()))
+            })
+
+            return () => disposeMappings()
+        }, [mappingsProps, narrowedProps.style])
+
+        const combinedProps = {
+            ...deepMergeObjects(props, (mappingsProps ?? {}) as object),
+            ...narrowedProps.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as unknown as TProps
+
+        return <Component {...combinedProps} ref={ref} />
+    })
+}