react-native-unistyles 3.0.0-beta.4 → 3.0.0-beta.6

package/plugin/stylesheet.js

@@ -42,6 +42,20 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function isKindOfStyleSheet(t, path, state) {
+    if (!state.file.forceProcessing) {
+        return false
+    }
+
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee.node) &&
+        callee.node.property.name === 'create' &&
+        t.isIdentifier(callee.node.object)
+    )
+}
+
 function addStyleSheetTag(t, path, state) {
     const callee = path.get('callee')
     const uniqueId = stringToUniqueId(state.filename.replace(state.cwd, '')) + ++state.file.tagNumber
@@ -49,6 +63,7 @@ function addStyleSheetTag(t, path, state) {
     callee.container.arguments.push(t.numericLiteral(uniqueId))
 }
 
+/** @param {import('./index').UnistylesPluginPass} state */
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -204,9 +219,21 @@ function getUnistyles(t, property) {
     return []
 }
 
+function addThemeDependencyToMemberExpression(t, path) {
+    path.value = t.objectExpression([
+        t.spreadElement(path.value),
+        t.objectProperty(
+            t.identifier('uni__dependencies'),
+            t.arrayExpression([t.numericLiteral(UnistyleDependency.Theme)])
+        )
+    ])
+}
+
 module.exports = {
     isUnistylesStyleSheet,
     analyzeDependencies,
     addStyleSheetTag,
-    getUnistyles
+    getUnistyles,
+    isKindOfStyleSheet,
+    addThemeDependencyToMemberExpression
 }

package/plugin/variants.js

@@ -1,92 +1,66 @@
-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
-}
-
-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')),
-        []
-    )
-
-    const element = path.openingElement && path.openingElement.name
-    const isWrappedInRegularFragment = t.isJSXFragment(path)
-    const isWrappedInFragment = (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') || (t.isJSXIdentifier(element) && element.name === 'Fragment')
-
-    wrapperElement.children = (isWrappedInRegularFragment || isWrappedInFragment)
-        ? path.children
-        : [path]
+    const maybeVariants = path.node.body.filter(node => (
+        t.isExpressionStatement(node) &&
+        t.isCallExpression(node.expression) &&
+        t.isMemberExpression(node.expression.callee)
+    ))
 
-    // copy Fragment props like key
-    if (isWrappedInFragment) {
-        wrapperElement.openingElement.attributes.push(...path.openingElement.attributes)
+    if (maybeVariants.length === 0) {
+        return
     }
 
-    return wrapperElement
-}
+    const targetVariant = maybeVariants.find(variant => {
+        const calleeName = variant.expression.callee.object.name
+
+        return (
+            t.isIdentifier(variant.expression.callee.object, { name: calleeName }) &&
+            t.isIdentifier(variant.expression.callee.property, { name: 'useVariants' }) &&
+            variant.expression.arguments.length === 1
+        )
+    })
 
-function addJSXVariants(t, path) {
-    if (!t.isReturnStatement(path.node)) {
+    if (!targetVariant) {
         return
     }
 
-    const jsxElement = path.node.argument
+    const calleeName = targetVariant.expression.callee.object.name
+    const node = targetVariant.expression
+    const newUniqueName = path.scope.generateUidIdentifier(calleeName)
 
-    if (t.isConditionalExpression(jsxElement)) {
-        const ifStatement = t.ifStatement(
-            jsxElement.test,
-            t.blockStatement([t.returnStatement(jsxElement.consequent)]),
-            t.blockStatement([t.returnStatement(jsxElement.alternate)])
-        )
+    // Create shadow declaration eg. const _styles = styles
+    const shadowDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(newUniqueName, t.identifier(calleeName))
+    ])
 
-        path.replaceWith(ifStatement)
+    // Create the new call expression eg. const styles = _styles.useVariants(...)
+    const newCallExpression = t.callExpression(
+        t.memberExpression(t.identifier(newUniqueName.name), t.identifier('useVariants')),
+        node.arguments
+    )
+    const finalDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier(calleeName), newCallExpression)
+    ])
 
-        return
-    }
+    // Find the current node's index, we will move everything after to new block
+    const pathIndex = path.node.body
+        .findIndex(bodyPath => bodyPath === targetVariant)
+    const rest = path.node.body.slice(pathIndex + 1)
 
-    if (!t.isJSXElement(jsxElement) && !t.isJSXFragment(jsxElement)) {
-        return
-    }
+    // move rest to new block (scope)
+    const blockStatement = t.blockStatement([
+        finalDeclaration,
+        ...rest
+    ])
+
+    path.node.body = [
+        ...path.node.body.slice(0, pathIndex),
+        shadowDeclaration,
+        blockStatement
+    ]
 
-    path.get('argument').replaceWith(wrapVariants(t, jsxElement));
+    state.file.hasVariants = true
 }
 
 module.exports = {
-    isUsingVariants,
-    extractVariants,
-    addJSXVariants
+    extractVariants
 }

package/src/components/ScopedTheme.tsx

@@ -21,7 +21,7 @@ export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeP
     const mappedChildren = [
         <Apply key={name} name={name} />,
         children,
-        <Apply key='dispose' name={previousScopedTheme} />
+        <Apply key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
     ]
 
     return (

package/src/components/index.ts

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

package/src/components/native/Animated.tsx

@@ -0,0 +1,17 @@
+import { Animated as RNAnimated } from 'react-native'
+import { View } from './View'
+import { Text } from './Text'
+import { FlatList } from './FlatList'
+import { Image } from './Image'
+import { ScrollView } from './ScrollView'
+import { SectionList } from './SectionList'
+
+export const Animated = {
+    ...RNAnimated,
+    View: RNAnimated.createAnimatedComponent(View),
+    Text: RNAnimated.createAnimatedComponent(Text),
+    FlatList: RNAnimated.createAnimatedComponent(FlatList),
+    Image: RNAnimated.createAnimatedComponent(Image),
+    ScrollView: RNAnimated.createAnimatedComponent(ScrollView),
+    SectionList: RNAnimated.createAnimatedComponent(SectionList)
+}

package/src/components/native/ImageBackground.native.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/ImageBackground.tsx

@@ -1,4 +1,59 @@
+import React from 'react'
 import { ImageBackground as NativeImageBackground } from 'react-native'
-import { createUnistylesImageBackground } from '../../core'
+import { forwardRef } from 'react'
+import type { UnistylesValues } from '../../types'
+import { getClassName } from '../../core'
+import { isServer } from '../../web/utils'
+import { UnistylesShadowRegistry } from '../../web'
+import { copyComponentProperties } from '../../utils'
 
-export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)
+type Props = {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
+    let storedRef: NativeImageBackground | null = null
+    let storedImageRef: NativeImageBackground | null = null
+    const styleClassNames = getClassName(props.style)
+    const imageClassNames = getClassName(props.imageStyle)
+
+    return (
+        // @ts-expect-error - RN types are not compatible with RNW styles
+        <NativeImageBackground
+            {...props}
+            style={styleClassNames}
+            imageStyle={imageClassNames}
+            ref={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
+                }
+
+                storedRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
+
+                if (typeof forwardedRef === 'function') {
+                    return forwardedRef(ref)
+                }
+
+                if (forwardedRef) {
+                    forwardedRef.current = ref
+                }
+            }}
+            imageRef={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
+                }
+
+                storedImageRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+            }}
+        />
+    )
+})
+
+export const ImageBackground = copyComponentProperties(NativeImageBackground, UnistylesImageBackground)

package/src/components/native/NativeText.native.tsx

@@ -0,0 +1,12 @@
+import type { TextProps } from 'react-native'
+import { type ComponentType, createElement, forwardRef } from 'react'
+import { createUnistylesElement } from '../../core'
+
+// credits to @hirbod
+const LeanText = forwardRef((props, ref) => {
+    return createElement('RCTText', { ...props, ref })
+}) as ComponentType<TextProps>
+
+LeanText.displayName = 'RCTText'
+
+export const NativeText = createUnistylesElement(LeanText)

package/src/components/native/NativeText.tsx

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

package/src/components/native/NativeView.native.tsx

@@ -0,0 +1,13 @@
+import type { ViewProps } from 'react-native'
+import { type ComponentType, createElement, forwardRef } from 'react'
+import { createUnistylesElement } from '../../core'
+
+// credits to @hirbod
+const LeanView = forwardRef((props, ref) => {
+    return createElement('RCTView', { ...props, ref })
+}) as ComponentType<ViewProps>
+
+LeanView.displayName = 'RCTView'
+
+// this will match default export from react-native
+export default createUnistylesElement(LeanView)

package/src/components/native/NativeView.tsx

@@ -0,0 +1,3 @@
+import { View } from './View'
+
+export default View

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
@@ -8,9 +8,34 @@ type PressableProps = Props & {
     variants?: Record<string, string | boolean>
 }
 
+const getStyles = (styleProps: Record<string, any> = {}) => {
+    const unistyleKey = Object
+        .keys(styleProps)
+        .find(key => key.startsWith('unistyles-'))
+
+    if (!unistyleKey) {
+        return styleProps
+    }
+
+    return {
+        // styles without C++ state
+        ...styleProps[unistyleKey].uni__getStyles(),
+        [unistyleKey]: styleProps[unistyleKey].uni__getStyles()
+    }
+}
+
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
+    useLayoutEffect(() => {
+        return () => {
+            if (storedRef.current) {
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.remove(storedRef.current)
+            }
+        }
+    }, [])
+
     return (
         <NativePressableReactNative
             {...props}
@@ -18,37 +43,29 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 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)
+                UnistylesShadowRegistry.add(ref, unistyles)
 
-                storedRef.current = ref
+                if (ref) {
+                    storedRef.current = ref
+                }
 
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {
                 const unistyles = typeof style === 'function'
                     ? style(state)
-                    : style
-                const styles = Array.isArray(unistyles)
-                    ? unistyles
-                    : [unistyles]
+                    : getStyles(style as unknown as Record<string, any>)
 
                 if (!storedRef.current) {
                     return unistyles
                 }
 
-                if (state.pressed) {
-                    UnistylesShadowRegistry.selectVariants(variants)
-                }
-
                 // @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.add(storedRef.current, unistyles)
 
                 return unistyles
             }}

package/src/components/native/Pressable.tsx

@@ -1,7 +1,10 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
-import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
+import type { UnistylesValues } from '../../types'
+import { getClassName } from '../../core'
+import { isServer } from '../../web/utils'
 
 type Variants = Record<string, string | boolean | undefined>
 type WebPressableState = {
@@ -10,88 +13,51 @@ type WebPressableState = {
     focused: boolean
 }
 
-type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+type WebPressableStyle = ((state: WebPressableState) => UnistylesValues) | UnistylesValues
 
 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)
+export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, forwardedRef) => {
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const variants = UnistylesShadowRegistry.getVariants()
+    let storedRef: HTMLElement | null = null
+    let classNames: ReturnType<typeof getClassName> | undefined = undefined
 
     return (
         <NativePressableReactNative
             {...props}
-            style={state => {
-                if (!storedRef.current) {
-                    return {}
-                }
+            ref={isServer() ? undefined : ref => {
+                storedRef = ref as unknown as HTMLElement
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
 
-                updateStyles({
-                    ref: storedRef.current,
-                    style: style as WebPressableStyle,
-                    variants,
-                    scopedTheme,
-                    state: state as WebPressableState
-                })
+                if (typeof forwardedRef === 'function') {
+                    return forwardedRef(ref)
+                }
 
-                return {}
+                if (forwardedRef) {
+                    forwardedRef.current = ref
+                }
             }}
-            ref={ref => {
-                storedRef.current = ref
-                updateStyles({
-                    ref,
-                    style: style as WebPressableStyle,
-                    variants,
-                    scopedTheme,
-                    state: initialState
-                })
+            style={state => {
+                const styleResult = typeof style === 'function'
+                    ? style(state as WebPressableState)
+                    : style
+                const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
-                if (typeof passedRef === 'object' && passedRef !== null) {
-                    passedRef.current = ref
-                }
+                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                classNames = getClassName(styleResult as UnistylesValues)
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
+                return classNames as any
             }}
         />
     )

package/src/core/createUnistylesElement.native.tsx

@@ -0,0 +1,51 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
+
+const getNativeRef = (Component: any, ref: any) => {
+    switch (Component.name) {
+        case 'KeyboardAvoidingView':
+            return ref.viewRef?.current
+        case 'FlatList':
+            return ref.getNativeScrollRef?.()
+        case 'VirtualizedList':
+            return ref.getScrollRef?.()
+        default:
+            return ref
+    }
+}
+
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
+        const storedRef = useRef<unknown>(null)
+
+        useLayoutEffect(() => {
+            return () => {
+                if (storedRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                }
+            }
+        }, [])
+
+        return (
+            <Component
+                {...props}
+                ref={(ref: unknown) => {
+                    if (ref) {
+                        storedRef.current = getNativeRef(Component, ref)
+                    }
+
+                    passForwardedRef(props, ref, forwardedRef)
+
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesElement.tsx

@@ -1,9 +1,48 @@
 import React from 'react'
-import { passForwardedRef } from './passForwardRef'
-
-export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => (
-    <Component
-        {...props}
-        ref={(ref: unknown) => passForwardedRef(props, ref, forwardedRef)}
-    />
-))
+import type { UnistylesValues } from '../types'
+import { getClassName } from './getClassname'
+import { isServer } from '../web/utils'
+import { UnistylesShadowRegistry } from '../web'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
+
+type ComponentProps = {
+    style?: UnistylesValues | Array<UnistylesValues>
+}
+
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+        let storedRef: HTMLElement | null = null
+        const classNames = getClassName(props.style)
+
+        return (
+            <Component
+                {...props}
+                style={classNames}
+                ref={isServer() ? undefined : (ref: HTMLElement | null) => {
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    if (!ref) {
+                        // @ts-expect-error hidden from TS
+                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                    }
+
+                    storedRef = ref
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.add(ref, classNames?.hash)
+
+                    if (typeof forwardedRef === 'function') {
+                        return forwardedRef(ref)
+                    }
+
+                    if (forwardedRef) {
+                        forwardedRef.current = ref
+                    }
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}