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

package/src/web/create.ts

@@ -21,7 +21,7 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         __uni__key: key,
         __uni__stylesheet: stylesheet,
         __uni__args: args,
-        __uni_variants: variants
+        __stylesheetVariants: variants
     })
 
     const createStyleSheetStyles = (variants?: Variants) => {

package/src/web/css/core.ts

@@ -34,8 +34,16 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
         }
 
         if (typeof styleValue === 'object') {
-            const allBreakpoints = Object.keys(value)
             Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                const allBreakpoints = Object.entries(value)
+                    .filter(([_, value]) => {
+                        if (typeof value !== 'object' || value === null) {
+                            return false
+                        }
+
+                        return breakpointStyleKey in value
+                    })
+                    .map(([key]) => key)
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 
                 state.set({

package/src/web/css/state.ts

@@ -32,7 +32,7 @@ export class CSSState {
     mainMap: MapType = new Map()
     mqMap: MapType = new Map()
     private styleTag: HTMLStyleElement | null = null
-    private CSS = ''
+    private themesCSS = new Map<string, string>()
 
     constructor(private services: UnistylesServices) {
         if (isServer()) {
@@ -62,7 +62,10 @@ export class CSSState {
 
     add = (hash: string, values: UnistylesValues) => {
         convertToCSS(hash, convertUnistyles(values, this.services.runtime), this)
+        this.recreate()
+    }
 
+    recreate = () => {
         if (this.styleTag) {
             this.styleTag.innerText = this.getStyles()
         }
@@ -84,10 +87,10 @@ export class CSSState {
         Object.entries(values).forEach(([key, value]) => convertToCSS(key, value))
 
         if (theme === 'light' || theme === 'dark') {
-            this.CSS += `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`
+            this.themesCSS.set(`media ${theme}`, `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`)
         }
 
-        this.CSS += `:root.${theme}{${themeVars}}`
+        this.themesCSS.set(theme, `:root.${theme}{${themeVars}}`)
     }
 
     remove = (hash: string) => {
@@ -97,14 +100,13 @@ export class CSSState {
         this.mqMap.forEach(styles => {
             styles.delete(hash)
         })
-
-        if (this.styleTag) {
-            this.styleTag.innerText = this.getStyles()
-        }
+        this.recreate()
     }
 
     getStyles = () => {
-        let styles = this.CSS
+        let styles = Array.from(this.themesCSS.entries()).reduce((acc, [, themeCss]) => {
+            return acc + themeCss
+        }, '')
 
         const generate = (mediaQuery: string, secondLevelMap: Map<string, Map<string, string>>) => {
             if (mediaQuery) {

package/src/web/listener.ts

@@ -29,6 +29,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
         this.services.runtime.lightMedia?.addEventListener('change', event => {
@@ -40,6 +41,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
 

package/src/web/runtime.ts

@@ -4,7 +4,7 @@ import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../s
 import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
 import type { UnistylesServices } from './types'
-import { error, isServer, schemeToTheme } from './utils'
+import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
     lightMedia = this.getLightMedia()
@@ -76,6 +76,14 @@ export class UnistylesRuntime {
         return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape
     }
 
+    get isLandscape() {
+        return this.orientation === Orientation.Landscape
+    }
+
+    get isPortrait() {
+        return this.orientation === Orientation.Portrait
+    }
+
     get theme() {
         return this.getTheme(this.themeName)
     }
@@ -204,7 +212,20 @@ export class UnistylesRuntime {
             throw error(`Unistyles: You're trying to update theme "${themeName}" but it wasn't registered.`)
         }
 
-        this.services.state.themes.set(themeName, updater(oldTheme))
+        const newTheme = updater(oldTheme)
+
+        this.services.state.themes.set(themeName, newTheme)
+
+        if (this.services.state.CSSVars) {
+            this.services.state.cssThemes.set(
+                themeName,
+                Object.fromEntries(Object.entries(newTheme).map(([key, value]) => {
+                    return convertTheme(key, value)
+                })) as UnistylesTheme
+            )
+            this.services.registry.css.addTheme(themeName, newTheme)
+            this.services.registry.css.recreate()
+        }
     }
 
     getTheme = (themeName = this.themeName, CSSVars = false) => {

package/src/web/shadowRegistry.ts

@@ -20,7 +20,7 @@ export class UnistylesShadowRegistry {
     constructor(private services: UnistylesServices) {}
 
     add = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 
@@ -49,7 +49,7 @@ export class UnistylesShadowRegistry {
                     return {}
                 }
 
-                const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
+                const { __uni__key, __uni__stylesheet, __uni__args = [], __stylesheetVariants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
                 const result = typeof style === 'function'
@@ -94,7 +94,7 @@ export class UnistylesShadowRegistry {
             ? hash.replace(' > *', '')
             : hash
 
-        return { injectedClassName, hash: hashClassname }
+        return { injectedClassName, hash: hashClassname, parsedStyles }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
@@ -118,4 +118,6 @@ export class UnistylesShadowRegistry {
                 this.disposeMap.delete(hash)
             })
     }
+
+    flush = () => {}
 }

package/src/web/state.ts

@@ -5,7 +5,7 @@ import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
-import { error, hyphenate, isServer, schemeToTheme } from './utils'
+import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 
@@ -72,22 +72,12 @@ export class UnistylesState {
 
             if (CSSVars) {
                 this.services.registry.css.addTheme(themeName, theme)
-
-                const convertTheme = (key: string, value: any, prev = '-'): [string, any] => {
-                    if (typeof value === 'object' && value !== null) {
-                        return [key, Object.fromEntries(Object.entries(value).map(([nestedKey, nestedValue]) => convertTheme(nestedKey, nestedValue, `${prev}-${key}`)))]
-                    }
-
-                    if (typeof value === 'string') {
-                        return [key, `var(${prev}-${hyphenate(key)})`]
-                    }
-
-                    return [key, value]
-                }
-
-                this.cssThemes.set(themeName, Object.fromEntries(Object.entries(theme).map(([key, value]) => {
-                    return convertTheme(key, value)
-                })) as UnistylesTheme)
+                this.cssThemes.set(
+                    themeName,
+                    Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+                        return convertTheme(key, value)
+                    })) as UnistylesTheme
+                )
             }
         })
     }

package/src/web/types.ts

@@ -1,3 +1,4 @@
+import type { UnistylesValues } from '../types'
 import type { UnistylesListener } from './listener'
 import type { UnistylesRegistry } from './registry'
 import type { UnistylesRuntime } from './runtime'
@@ -15,4 +16,6 @@ export type UnistylesServices = {
 export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
 export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
 
-export type UniGeneratedStyle = Record<UniGeneratedKey, string>
+export type UniGeneratedStyle = Record<UniGeneratedKey, string> & {
+    parsedStyles?: UnistylesValues
+}

package/src/web/utils/unistyle.ts

@@ -3,10 +3,11 @@ import type { UnistylesBreakpoints } from '../../global'
 import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { isUnistylesMq, parseMq } from '../../utils'
+import { isDefined, isUnistylesMq, parseMq } from '../../utils'
+import type { UnistylesRuntime } from '../runtime'
 import * as unistyles from '../services'
 import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
-import { keyInObject, reduceObject } from './common'
+import { hyphenate, keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
@@ -22,7 +23,7 @@ export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
     __uni__key: string,
     __uni__args?: Array<any>,
-    __uni_variants: Record<string, string | boolean | undefined>
+    __stylesheetVariants: Record<string, string | boolean | undefined>
 }
 
 export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
@@ -142,5 +143,34 @@ export const checkForAnimated = (value: any): boolean => {
 }
 
 export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
-    return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+    const keys = Object.keys(value)
+
+    return keys.length > 0 && keys.every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}
+
+export const convertTheme = (key: string, value: any, prev = '-'): [string, any] => {
+    if (typeof value === 'object' && value !== null) {
+        return [key, Object.fromEntries(Object.entries(value).map(([nestedKey, nestedValue]) => convertTheme(nestedKey, nestedValue, `${prev}-${key}`)))]
+    }
+
+    if (typeof value === 'string') {
+        return [key, `var(${prev}-${hyphenate(key)})`]
+    }
+
+    return [key, value]
+}
+
+export const getClosestBreakpointValue = <T>(runtime: UnistylesRuntime, values: Partial<Record<keyof UnistylesBreakpoints, T>>) => {
+    const breakpoints = runtime.breakpoints
+    const breakpointValues = Object.entries(values)
+        // Filter out non-breakpoint values
+        .filter((pair): pair is [keyof UnistylesBreakpoints, T] => pair[0] in breakpoints)
+        // Sort in descending order
+        .sort(([a], [b]) => (breakpoints[b] ?? 0) - (breakpoints[a] ?? 0))
+    // Get breakpoint value with highest priority
+    const [_, currentBreakpointValue] = breakpointValues.find(
+        ([key]) => isDefined(runtime.breakpoint) && (breakpoints[key] ?? 0) <= (breakpoints[runtime.breakpoint] ?? 0)
+    ) ?? []
+
+    return currentBreakpointValue
 }

package/cxx/core/UnistylesCommitHook.cpp

@@ -1,59 +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;
-    }
-
-    auto& registry = core::UnistylesRegistry::get();
-
-    if (registry.trafficController.shouldStop()) {
-        registry.trafficController.resumeUnistylesTraffic();
-
-        return newRootShadowNode;
-    }
-
-    // this is React Native / Reanimated commit
-    // merge Unistyles updates before it completes
-
-    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,26 +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();
-
-    registry.trafficController.stopUnistylesTraffic();
-}

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"}