react-native-unistyles 3.0.0-rc.2 → 3.0.0-rc.4

package/src/web/services.ts

@@ -3,8 +3,9 @@ import { UnistylesRegistry } from './registry'
 import { UnistylesRuntime } from './runtime'
 import { UnistylesShadowRegistry } from './shadowRegistry'
 import { UnistylesState } from './state'
+import { isServer } from './utils'
 
-export class UnistylesServices {
+class UnistylesServices {
     runtime: UnistylesRuntime
     registry: UnistylesRegistry
     shadowRegistry: UnistylesShadowRegistry
@@ -26,3 +27,15 @@ export class UnistylesServices {
         this.services.listener = this.listener
     }
 }
+
+declare global {
+    // @ts-ignore
+    var __unistyles__: UnistylesServices
+}
+
+if (isServer() && !globalThis.__unistyles__) {
+    // @ts-ignore
+    globalThis.__unistyles__ = new UnistylesServices()
+}
+
+export const services = isServer() ? globalThis.__unistyles__ : new UnistylesServices()

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
-import { UnistyleDependency } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
-import type { UnistylesServices } from './types'
-import { extractSecrets, extractUnistyleDependencies } from './utils'
+import type { UniGeneratedStyle, UnistylesServices } from './types'
+import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
     }
 
     addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
+        const [firstStyle] = unistyles
+
+        // If it is already a generated style, return it
+        if (firstStyle && isGeneratedUnistyle(firstStyle)) {
+            return firstStyle as UniGeneratedStyle
+        }
+
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -37,6 +44,11 @@ export class UnistylesShadowRegistry {
                     return unistyle
                 }
 
+                // Animated styles - shouldn't be processed
+                if (Object.keys(secrets).length === 0) {
+                    return {}
+                }
+
                 const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
@@ -52,7 +64,10 @@ export class UnistylesShadowRegistry {
                     this.services.registry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
                 }
 
-                return resultWithVariants as UnistylesValues
+                return {
+                    ...resultWithVariants,
+                    ...resultWithVariants._web
+                } as UnistylesValues
             })
 
             return deepMergeObjects(...allStyles)
@@ -89,7 +104,7 @@ export class UnistylesShadowRegistry {
     getScopedTheme = () => this.scopedTheme
 
     remove = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 

package/src/web/types.ts

@@ -1,8 +1,8 @@
 import type { UnistylesListener } from './listener'
-import type{ UnistylesRegistry } from './registry'
-import type{ UnistylesRuntime } from './runtime'
-import type{ UnistylesShadowRegistry } from './shadowRegistry'
-import type{ UnistylesState } from './state'
+import type { UnistylesRegistry } from './registry'
+import type { UnistylesRuntime } from './runtime'
+import type { UnistylesShadowRegistry } from './shadowRegistry'
+import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
     runtime: UnistylesRuntime,
@@ -11,3 +11,8 @@ export type UnistylesServices = {
     state: UnistylesState,
     listener: UnistylesListener
 }
+
+export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
+export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+
+export type UniGeneratedStyle = Record<UniGeneratedKey, string>

package/src/web/utils/createUnistylesRef.ts

@@ -1,22 +1,26 @@
 import type React from 'react'
-import type { Nullable } from '../../types'
-import { UnistylesWeb } from '../index'
+import type { Nullable, UnistylesValues } from '../../types'
+import * as unistyles from '../services'
 import { isServer } from './common'
 
-type ClassNames = {
-    hash: string
-}
+type Styles = readonly [
+    {
+        hash: string
+    },
+    Array<UnistylesValues>
+]
 
-export const createUnistylesRef = <T>(classNames?: ClassNames, forwardedRef?: React.ForwardedRef<T>) => {
+export const createUnistylesRef = <T>(styles?: Styles, forwardedRef?: React.ForwardedRef<T>) => {
     const storedRef = { current: null as Nullable<T> }
+    const [classNames] = styles ?? []
 
     return isServer() ? undefined : (ref: Nullable<T>) => {
         if (!ref) {
-            UnistylesWeb.shadowRegistry.remove(storedRef, classNames?.hash)
+            unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
         }
 
         storedRef.current = ref
-        UnistylesWeb.shadowRegistry.add(ref, classNames?.hash)
+        unistyles.services.shadowRegistry.add(ref, classNames?.hash)
 
         if (typeof forwardedRef === 'function') {
             return forwardedRef(ref)

package/src/web/utils/index.ts

@@ -1,3 +1,2 @@
 export * from './common'
 export * from './unistyle'
-export * from './createUnistylesRef'

package/src/web/utils/unistyle.ts

@@ -1,9 +1,11 @@
+import { Animated } from 'react-native'
 import type { UnistylesBreakpoints } from '../../global'
-import { isUnistylesMq, parseMq } from '../../mq'
-import type { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { UnistylesWeb } from '../index'
+import { isUnistylesMq, parseMq } from '../../utils'
+import * as unistyles from '../services'
+import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
@@ -49,13 +51,7 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    const hiddenSecrets = Object.getOwnPropertyDescriptors(secrets)
-
-    if (Object.keys(hiddenSecrets).length === 0) {
-        return undefined
-    }
-
-    return reduceObject(hiddenSecrets, secret => secret.value)
+    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {
@@ -87,10 +83,10 @@ export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
         return `@media ${queries}`
     }
 
-    const breakpointValue = UnistylesWeb.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
+    const breakpointValue = unistyles.services.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
     const nextBreakpoint = allBreakpoints
-        .filter((b): b is keyof UnistylesBreakpoints => b in UnistylesWeb.runtime.breakpoints)
-        .map(b => UnistylesWeb.runtime.breakpoints[b] as number)
+        .filter((b): b is keyof UnistylesBreakpoints => b in unistyles.services.runtime.breakpoints)
+        .map(b => unistyles.services.runtime.breakpoints[b] as number)
         .sort((a, b) => a - b)
         .find(b => b > breakpointValue)
     const queries = [
@@ -110,3 +106,41 @@ export const extractUnistyleDependencies = (value: any) => {
 
     return Array.isArray(dependencies) ? dependencies : []
 }
+
+export const checkForProp = (value: any, prop: string): boolean => {
+    if (Array.isArray(value)) {
+        return value.some(nestedValue => checkForProp(nestedValue, prop))
+    }
+
+    if (typeof value === 'object' && value !== null) {
+        return keyInObject(value, prop)
+            ? true
+            : keyInObject(value, '_web')
+                ? checkForProp(value._web, prop)
+                : false
+    }
+
+    return false
+}
+
+export const checkForAnimated = (value: any): boolean => {
+    if (Array.isArray(value)) {
+        return value.some(checkForAnimated)
+    }
+
+    if (typeof value === 'object' && value !== null) {
+        const objectValues = Object.values(value)
+        const secrets = extractSecrets(value)
+
+        // @ts-expect-error React Native Web exports Animated.AnimatedNode as Animated.Node
+        return value instanceof Animated.Node ||
+            objectValues.length > 0 && objectValues.some(checkForAnimated) ||
+            secrets && Object.keys(secrets).length === 0
+    }
+
+    return false
+}
+
+export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
+    return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}

package/src/web-only/getWebProps.ts

@@ -0,0 +1,18 @@
+import type { StyleProp } from 'react-native'
+import { getClassName } from '../core'
+import type { RNStyle, UnistylesValues } from '../types'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
+
+export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
+    const styles = getClassName(style as UnistylesValues)
+    const ref = createUnistylesRef<T>(styles)
+    const [generatedStyles] = styles ?? []
+
+    return {
+        className: [
+            generatedStyles?.hash,
+            generatedStyles?.injectedClassName,
+        ].filter(Boolean).join(' '),
+        ref
+    }
+}

package/src/web-only/index.ts

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

package/web-only/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/web-only/index",
+    "module": "../lib/module/web-only/index",
+    "react-native": "../src/web-only/index",
+    "types": "../lib/typescript/src/web-only/index"
+}