react-native-unistyles 3.0.0-beta.7 → 3.0.0-beta.8

package/src/components/native/ImageBackground.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { forwardRef } from 'react'
-import { ImageBackground as NativeImageBackground } from 'react-native'
+import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
@@ -19,11 +19,10 @@ const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef
     const imageClassNames = getClassName(props.imageStyle)
 
     return (
-        // @ts-expect-error - RN types are not compatible with RNW styles
         <NativeImageBackground
             {...props}
-            style={styleClassNames}
-            imageStyle={imageClassNames}
+            style={styleClassNames as StyleProp<ViewStyle>}
+            imageStyle={imageClassNames as StyleProp<ImageStyle>}
             ref={isServer() ? undefined : ref => {
                 if (!ref) {
                     // @ts-expect-error hidden from TS

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

@@ -25,7 +25,8 @@ const getStyles = (styleProps: Record<string, any> = {}) => {
 }
 
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
-    const storedRef = useRef<View | null>()
+    const storedRef = useRef<View | null>(null)
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
     useLayoutEffect(() => {
         return () => {
@@ -40,14 +41,26 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         <NativePressableReactNative
             {...props}
             ref={ref => {
+                const isPropStyleAFunction = typeof style === 'function'
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, { pressed: false })
+                    : getStyles(style as unknown as Record<string, any>)
+
                 if (ref) {
                     storedRef.current = ref
                 }
 
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(storedRef.current, unistyles)
+
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {
                 const isPropStyleAFunction = typeof style === 'function'
+                const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+
                 const unistyles = isPropStyleAFunction
                     ? style.call(style, state)
                     : getStyles(style as unknown as Record<string, any>)
@@ -62,6 +75,8 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(storedRef.current, unistyles)
 
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
                 return unistyles
             }}
         />

package/src/core/createUnistylesElement.native.tsx

@@ -42,6 +42,11 @@ export const createUnistylesElement = (Component: any) => {
 
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    return () => {
+                        // @ts-ignore
+                        UnistylesShadowRegistry.remove(ref)
+                    }
                 }}
             />
         )

package/src/core/createUnistylesImageBackground.tsx

@@ -32,6 +32,11 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                     return () => {
                         // @ts-ignore
                         UnistylesShadowRegistry.remove(ref)
+
+                        if (storedImageRef.current) {
+                            // @ts-ignore
+                            UnistylesShadowRegistry.remove(storedImageRef.current)
+                        }
                     }
                 }}
                 imageRef={ref => {

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -31,7 +31,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
-    const disposeRef = useRef<VoidFunction>()
+    const disposeRef = useRef<VoidFunction>(undefined)
 
     const reinitListener = () => {
         disposeRef.current?.()

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -12,22 +12,48 @@ type GenericComponentProps<P> = ComponentProps<P>
 // @ts-expect-error
 type GenericComponentRef<T> = ComponentRef<T>
 
+type UnistylesSecrets = {
+    uni__getStyles: () => Record<string, any>,
+    uni__dependencies: Array<UnistyleDependency>
+}
+
+type MappedSecrets = {
+    styles: Record<string, any>,
+    dependencies: Array<UnistyleDependency>
+}
+
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
     }
-    const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
-        const unistyleKey = Object
-            .keys(styleProps)
-            .find(key => key.startsWith('unistyles_'))
-
-        return unistyleKey
-            ? styleProps[unistyleKey]
-            : {
-                uni__getStyles: () => styleProps,
-                uni__dependencies: [],
-            }
+    const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
+        const styles = Array.isArray(styleProps)
+            ? styleProps.flat()
+            : [styleProps]
+
+        const secrets: Array<UnistylesSecrets> = styles
+            .filter(Boolean)
+            .reduce((acc, style) => {
+                const unistyleKey = Object
+                    .keys(style)
+                    .find(key => key.startsWith('unistyles_'))
+
+                return acc.concat([
+                    unistyleKey
+                        ? style[unistyleKey]
+                        : {
+                            uni__getStyles: () => styleProps,
+                            uni__dependencies: [],
+                        }
+                ])
+            }, [])
+
+        return {
+            styles: secrets.reduce((acc, secret) => Object
+                .assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+            dependencies: secrets.flatMap(secret => secret.uni__dependencies),
+        }
     }
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
@@ -46,7 +72,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             const styleSecrets = getSecrets(narrowedProps.style)
             const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies(Array.from(new Set([...styleSecrets.uni__dependencies, ...contentContainerStyleSecrets.uni__dependencies])))
+            addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
         const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
@@ -58,10 +84,10 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: styleSecrets.uni__getStyles(),
+                style: styleSecrets.styles,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleSecrets.uni__getStyles(),
+                contentContainerStyle: contentContainerStyleSecrets.styles,
             } : {},
         } as any
 

package/src/specs/ShadowRegistry/index.ts

@@ -45,6 +45,7 @@ HybridShadowRegistry.add = (handle, styles) => {
         .filter(style => !style?.initial?.updater)
         .filter(style => style && Object.keys(style).length > 0)
         .flat()
+        .filter(Boolean)
 
     if (filteredStyles.length > 0) {
         HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)

package/src/types/stylesheet.ts

@@ -62,7 +62,7 @@ export type UnistylesValues = FlatUnistylesValues & {
 } & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
 } & {
-    _web?: CSSProperties & CustomClassName & {
+    _web?: ToDeepUnistyles<CSSProperties> & CustomClassName & {
         [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
     }
 }

package/plugin/consts.js

@@ -1,63 +0,0 @@
-const REACT_NATIVE_COMPONENT_NAMES = [
-    'ActivityIndicator',
-    'View',
-    'Text',
-    'Image',
-    'ImageBackground',
-    'KeyboardAvoidingView',
-    'Pressable',
-    'ScrollView',
-    'FlatList',
-    'SectionList',
-    'Switch',
-    'TextInput',
-    'RefreshControl',
-    'TouchableHighlight',
-    'TouchableOpacity',
-    'VirtualizedList',
-    'Animated'
-    // Modal - there is no exposed native handle
-    // TouchableWithoutFeedback - can't accept a ref
-]
-
-// auto replace RN imports to Unistyles imports under these paths
-// our implementation simply borrows 'ref' to register it in ShadowRegistry
-// so we won't affect anyone's implementation
-const REPLACE_WITH_UNISTYLES_PATHS = [
-    'react-native-reanimated/src/component',
-    'react-native-gesture-handler/src/components'
-]
-
-// this is more powerful API as it allows to convert unmatched imports to Unistyles
-// { path: string, imports: Array<{ name: string, isDefault: boolean, path: string, mapTo: string }> }
-// path => node_modules path
-// imports:
-// name? <- target import name if isDefault is false
-// isDefault <- is the import default?
-// path <- path to the target import
-// mapTo <- name of the Unistyles component
-const REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = []
-
-// this list will additionally detect React Native direct imports
-const NATIVE_COMPONENTS_PATHS = {
-    imports: [
-        {
-            name: 'NativeText',
-            isDefault: false,
-            path: 'react-native/Libraries/Text/TextNativeComponent',
-            mapTo: 'NativeText'
-        },
-        {
-            isDefault: true,
-            path: 'react-native/Libraries/Components/View/ViewNativeComponent',
-            mapTo: 'NativeView'
-        }
-    ]
-}
-
-module.exports = {
-    NATIVE_COMPONENTS_PATHS,
-    REACT_NATIVE_COMPONENT_NAMES,
-    REPLACE_WITH_UNISTYLES_PATHS,
-    REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
-}

package/plugin/exotic.js

@@ -1,54 +0,0 @@
-function handleExoticImport(t, path, state, exoticImport) {
-    const specifiers = path.node.specifiers
-    const source = path.node.source
-
-    if (path.node.importKind !== 'value') {
-        return
-    }
-
-    specifiers.forEach(specifier => {
-        for (const rule of exoticImport.imports) {
-            const hasMatchingImportType = (!rule.isDefault && t.isImportSpecifier(specifier)) || (rule.isDefault && t.isImportDefaultSpecifier(specifier))
-            const hasMatchingImportName = rule.isDefault || (!rule.isDefault && rule.name === specifier.local.name)
-            const hasMatchingPath = rule.path === source.value
-
-            if (!hasMatchingImportType || !hasMatchingImportName || !hasMatchingPath) {
-                continue
-            }
-
-            if (t.isImportDefaultSpecifier(specifier)) {
-                const newImport = t.importDeclaration(
-                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.replaceWith(newImport)
-            } else {
-                const newImport = t.importDeclaration(
-                    [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.node.specifiers = specifiers.filter(s => s !== specifier)
-
-                if (path.node.specifiers.length === 0) {
-                    path.replaceWith(newImport)
-                } else {
-                    path.insertBefore(newImport)
-                }
-            }
-
-            return
-        }
-    })
-}
-
-module.exports = {
-    handleExoticImport
-}

package/plugin/import.js

@@ -1,51 +0,0 @@
-/** @param {import('./index').UnistylesPluginPass} state */
-function addUnistylesImport(t, path, state) {
-    const localNames = Object.keys(state.reactNativeImports)
-    const names = Object.values(state.reactNativeImports)
-    const pairs = Object.entries(state.reactNativeImports)
-    const nodesToRemove = []
-
-    // remove rn-imports
-    path.node.body.forEach(node => {
-        // user might have multiple imports like import type, import
-        if (t.isImportDeclaration(node) && node.source.value === 'react-native') {
-            node.specifiers = node.specifiers.filter(specifier => !localNames.some(name => name === specifier.local.name))
-
-            if (node.specifiers.length === 0) {
-                nodesToRemove.push(node)
-            }
-        }
-    })
-
-    // remove RNWeb imports
-    names.forEach(name => {
-        const rnWebImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`)
-
-        if (rnWebImport) {
-            rnWebImport.specifiers = []
-        }
-    })
-
-    // import components from react-native-unistyles
-    pairs.forEach(([localName, name]) => {
-        const newImport = t.importDeclaration(
-            [t.importSpecifier(t.identifier(localName), t.identifier(name))],
-            t.stringLiteral(state.opts.isLocal
-                ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/src/components/native/${name}`)
-                : `react-native-unistyles/components/native/${name}`
-            )
-        )
-
-        path.node.body.unshift(newImport)
-    })
-
-    // cleanup
-    nodesToRemove.forEach(node => path.node.body.splice(path.node.body.indexOf(node), 1))
-}
-
-const isInsideNodeModules = state => state.file.opts.filename.includes('node_modules')
-
-module.exports = {
-    isInsideNodeModules,
-    addUnistylesImport
-}

package/plugin/ref.js

@@ -1,11 +0,0 @@
-function hasStringRef(t, path) {
-    return path.node.openingElement.attributes.find(attr =>
-        t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
-        t.isStringLiteral(attr.value)
-    )
-}
-
-module.exports = {
-    hasStringRef
-}