react-native-unistyles 3.0.0-beta.8 → 3.0.0-experimental-2025051402

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) => {
@@ -70,8 +66,6 @@ export const removeInlineStyles = (values: UnistylesValues) => {
     return returnValue
 }
 
-export const isInDocument = (element: HTMLElement) => document.body.contains(element)
-
 export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
     if (Object.values(Orientation).includes(query as Orientation)) {
         return `@media (orientation: ${query})`
@@ -89,18 +83,18 @@ 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)
-            .sort((a, b) => a - b)
-            .find(b => b > breakpointValue)
-        const queries = [
-            `(min-width: ${breakpointValue}px)`,
-            nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
-        ].filter(Boolean).join(' and ')
-
-        return `@media ${queries}`
+        .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 = [
+        `(min-width: ${breakpointValue}px)`,
+        nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
+    ].filter(Boolean).join(' and ')
+
+    return `@media ${queries}`
 }
 
 export const extractUnistyleDependencies = (value: any) => {
@@ -112,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/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"
+}

package/cxx/core/UnistylesCommitHook.cpp

@@ -1,52 +0,0 @@
-#include "UnistylesCommitHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesCommitHook::~UnistylesCommitHook() noexcept {
-    _uiManager->unregisterCommitHook(*this);
-}
-
-void core::UnistylesCommitHook::commitHookWasRegistered(const UIManager &uiManager) noexcept {}
-void core::UnistylesCommitHook::commitHookWasUnregistered(const UIManager &uiManager) noexcept {}
-
-RootShadowNode::Unshared core::UnistylesCommitHook::shadowTreeWillCommit(
-    const ShadowTree &shadowTree,
-    const RootShadowNode::Shared &oldRootShadowNode,
-    const RootShadowNode::Unshared &newRootShadowNode
-) noexcept {
-    RootShadowNode::Unshared rootNode = newRootShadowNode;
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootShadowNode);
-
-    // this is Unistyles commit, we don't need to override it
-    if (unistylesRootNode->hasUnistylesCommitTrait()) {
-        unistylesRootNode->removeUnistylesCommitTrait();
-        unistylesRootNode->addUnistylesMountTrait();
-
-        return newRootShadowNode;
-    }
-
-    // this is React Native / Reanimated commit
-    // merge Unistyles updates before it completes
-    auto& registry = core::UnistylesRegistry::get();
-    
-    return registry.trafficController.withLock([&](){
-        auto& shadowLeafUpdates = registry.trafficController.getUpdates();
-
-        // oops, no updates from Unistyles yet, skip it!
-        if (shadowLeafUpdates.size() == 0) {
-            return newRootShadowNode;
-        }
-
-        auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(*rootNode, shadowLeafUpdates);
-
-        registry.trafficController.stopUnistylesTraffic();
-        
-        // we have few updates, so merge it
-        return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-            *rootNode,
-            shadowLeafUpdates,
-            affectedNodes
-        ));
-    });
-}

package/cxx/core/UnistylesCommitHook.h

@@ -1,27 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerCommitHook.h>
-#include "ShadowTreeManager.h"
-#include "ShadowTrafficController.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesCommitHook : public UIManagerCommitHook {
-    UnistylesCommitHook(std::shared_ptr<UIManager> uiManager) : _uiManager{uiManager} {
-        _uiManager->registerCommitHook(*this);
-    }
-
-    ~UnistylesCommitHook() noexcept override;
-
-    void commitHookWasRegistered(const UIManager &uiManager) noexcept override;
-    void commitHookWasUnregistered(const UIManager &uiManager) noexcept override;
-    RootShadowNode::Unshared shadowTreeWillCommit(const ShadowTree &shadowTree, const RootShadowNode::Shared &oldRootShadowNode, const RootShadowNode::Unshared &newRootShadowNode) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-};
-
-}

package/cxx/core/UnistylesMountHook.cpp

@@ -1,28 +0,0 @@
-#include "UnistylesMountHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesMountHook::~UnistylesMountHook() noexcept {
-    _uiManager->unregisterMountHook(*this);
-}
-
-void core::UnistylesMountHook::shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept {
-    auto rootNode = std::const_pointer_cast<RootShadowNode>(rootShadowNode);
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(rootNode);
-
-    // if this is Unistyles commit, do nothing
-    if (unistylesRootNode->hasUnistylesMountTrait()) {
-        unistylesRootNode->removeUnistylesMountTrait();
-
-        return;
-    }
-
-    // this is React Native or Reanimated commit
-    // one more time merge Unistyles changes
-    auto& registry = core::UnistylesRegistry::get();
-
-    if (registry.trafficController.shouldStop()) {
-        registry.trafficController.resumeUnistylesTraffic();
-    }
-}

package/cxx/core/UnistylesMountHook.h

@@ -1,24 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerMountHook.h>
-#include "ShadowTreeManager.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesMountHook : public UIManagerMountHook {
-    UnistylesMountHook(std::shared_ptr<UIManager> uiManager): _uiManager{uiManager} {
-        _uiManager->registerMountHook(*this);
-    }
-
-    ~UnistylesMountHook() noexcept override;
-
-    void shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-};
-
-}

package/lib/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}