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

package/src/components/Pressable.web.tsx

@@ -9,9 +9,11 @@ type WebPressableState = {
     focused: boolean
 }
 
+type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+
 type PressableProps = Props & {
     variants?: Record<string, string | boolean>
-    style?: ((state: WebPressableState) => ViewStyle) | ViewStyle,
+    style?: WebPressableStyle,
 }
 
 const initialState: WebPressableState = {
@@ -29,8 +31,46 @@ const events = {
     'blur': { focused: false }
 } satisfies Partial<Record<keyof HTMLElementEventMap, Partial<WebPressableState>>>
 
+type UpdateStylesProps = {
+    ref: View | null,
+    style: WebPressableStyle,
+    variants?: Record<string, string | boolean>,
+    state: WebPressableState
+}
+
+const isFunctionWithBoundArgs = (fn: any): fn is Function & { getBoundArgs: Function } => {
+    return typeof fn === 'function' && 'getBoundArgs' in fn
+}
+
+const extractFunctionArgs = (styleResult: any) => {
+    return isFunctionWithBoundArgs(styleResult)
+        ? [styleResult.getBoundArgs()]
+        : Array.isArray(styleResult)
+            ? styleResult.map(style => isFunctionWithBoundArgs(style) ? style.getBoundArgs() : [])
+            : []
+}
+
+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, variants, state }: UpdateStylesProps) => {
+    const styleResult = typeof style === 'function'
+        ? style(state)
+        : style
+    const fnArgs = extractFunctionArgs(styleResult)
+    const extractedResult = extractStyleResult(styleResult)
+
+    // @ts-expect-error - this is hidden from TS
+    UnistylesShadowRegistry.add(ref, extractedResult, variants, fnArgs)
+}
+
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, passedRef) => {
-    const storedRef = useRef<View | null>()
+    const storedRef = useRef<View | null>(null)
     const state = useRef<WebPressableState>(initialState)
     const styleRef = useRef(style)
 
@@ -42,19 +82,12 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         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])
+            updateStyles({
+                ref: storedRef.current,
+                style: styleRef.current as WebPressableStyle,
+                variants,
+                state: state.current
+            })
         }
 
         if (!storedRef.current) {
@@ -80,23 +113,16 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
             {...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
+                updateStyles({
+                    ref,
+                    style: style as WebPressableStyle,
+                    variants,
+                    state: initialState
+                })
 
                 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/web/shadowRegistry.ts

@@ -21,17 +21,15 @@ class UnistylesShadowRegistryBuilder {
     private hashMap = new Map<HTMLElement, string>()
     private classNamesMap = new Map<HTMLElement, Array<string>>()
 
-    add = (ref: any, _style: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
-        // Style is not provided
-        if (!_style) {
+    add = (ref: any, styles: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
+        // Styles are not provided
+        if (!styles) {
             return
         }
 
         // Ref is unmounted, remove style tags from the document
         if (ref === null) {
-            const secrets = extractSecrets(_style)
-
-            secrets.forEach(({ __uni__refs }) => {
+            extractSecrets(styles).forEach(({ __uni__refs }) => {
                 __uni__refs.forEach(ref => {
                     if (isInDocument(ref)) {
                         return
@@ -55,56 +53,58 @@ class UnistylesShadowRegistryBuilder {
             return
         }
 
-        const styles = _style.filter(style => Object.keys(style ?? {}).some(key => key.startsWith('__uni__')))
-
-        // No unistyles
-        if (styles.length === 0) {
-            return
-        }
+        const parsedStyles = styles.flatMap((style, styleIndex) => {
+            const secrets = extractSecrets(style)
 
-        const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
-            const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
-            const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
-            const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
-            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
-            const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args
-            const result = typeof style === 'function'
-                ? style(...args)
-                : style
-            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
-            const dependencies = extractUnistyleDependencies(resultWithVariants)
-
-            if (typeof __uni__stylesheet === 'function') {
-                // Add dependencies from dynamic styles to stylesheet
-                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+            // Regular style
+            if (secrets.length === 0) {
+                return style as UnistylesValues
             }
 
-            __uni__refs.add(ref)
+            return secrets.map(secret => {
+                const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
+                const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+                const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
+                const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+                const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args
+                const result = typeof style === 'function'
+                    ? style(...args)
+                    : style
+                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+                const dependencies = extractUnistyleDependencies(resultWithVariants)
+    
+                if (typeof __uni__stylesheet === 'function') {
+                    // Add dependencies from dynamic styles to stylesheet
+                    UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+                }
 
-            const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
-                const hash = this.hashMap.get(ref)
+                __uni__refs.add(ref)
 
-                // Dispose listener if there is no hash
-                if (!hash) {
-                    dispose()
+                const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
+                    const hash = this.hashMap.get(ref)
 
-                    return
-                }
+                    // Dispose listener if there is no hash
+                    if (!hash) {
+                        dispose()
 
-                const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
-                const newValue = newComputedStyleSheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
-                const result = typeof newValue === 'function'
-                    ? newValue(...args)
-                    : newValue
-                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+                        return
+                    }
 
-                UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
-            })
+                    const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+                    const newValue = newComputedStyleSheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
+                    const result = typeof newValue === 'function'
+                        ? newValue(...args)
+                        : newValue
+                    const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                    const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+
+                    UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
+                })
 
-            return resultWithVariants as UnistylesValues
-        }))
+                return resultWithVariants as UnistylesValues
+            })
+        })
         const combinedStyles = deepMergeObjects(...parsedStyles)
         const oldStyles = this.resultsMap.get(ref)