react-native-unistyles 2.0.0-alpha.3 → 2.0.0-alpha.5

package/src/utils/mediaQueries.ts

@@ -16,13 +16,25 @@ import type { ScreenSize } from '../types'
  * extractValues("h[100,]")    // returns [100]
  */
 export const extractValues = (codedValue: string): Array<number> => {
-    const [lh, rh] = codedValue
-        .replace(/[wh[\]]/g, '')
-        .split(',')
+    const cleanedValue = codedValue.replace(/[wh ]/g, '')
+    const [left, right] = cleanedValue.split(',') as [string, string | undefined]
 
-    return rh
-        ? [Number(lh), Number(rh)]
-        : [Number(lh)]
+    if (!right) {
+        const lh = left.startsWith('[')
+            ? Number(left.replace(/[[\]()]/g, ''))
+            : Number(left.replace(/[[\]()]/g, '')) + 1
+
+        return [lh]
+    }
+
+    const lh = left.startsWith('[')
+        ? Number(left.replace('[', ''))
+        : Number(left.replace('(', '')) + 1
+    const rh = right.endsWith(']')
+        ? Number(right.replace(']', ''))
+        : Number(right.replace(')', '')) - 1
+
+    return [lh, rh]
 }
 
 /**

package/ios/UnistylesRuntime.h

@@ -1,48 +0,0 @@
-#pragma once
-
-#import "UnistylesModule.h"
-#import <jsi/jsi.h>
-#import <vector>
-
-using namespace facebook;
-
-class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
-private:
-    UnistylesThemeChangeEvent onThemeChange;
-    UnistylesBreakpointChangeEvent onBreakpointChange;
-
-    int screenWidth;
-    int screenHeight;
-    std::string colorScheme;
-
-public:
-    UnistylesRuntime(
-        UnistylesThemeChangeEvent onThemeChange,
-        UnistylesBreakpointChangeEvent onBreakpointChange,
-        float screenWidth,
-        float screenHeight,
-        std::string colorScheme
-    ): onThemeChange(onThemeChange),
-       onBreakpointChange(onBreakpointChange),
-       screenWidth(screenWidth),
-       screenHeight(screenHeight),
-       colorScheme(colorScheme) {}
-
-    bool hasAdaptiveThemes;
-    bool supportsAutomaticColorScheme;
-
-    std::string theme;
-    std::string breakpoint;
-    std::vector<std::string> themes;
-    std::vector<std::pair<std::string, double>> sortedBreakpointEntries;
-
-    jsi::Value get(jsi::Runtime&, const jsi::PropNameID& name) override;
-    void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
-    std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
-
-    void handleScreenSizeChange(int width, int height);
-    void handleAppearanceChange(std::string colorScheme);
-
-    jsi::Value getThemeOrFail(jsi::Runtime&);
-    std::string getBreakpointFromScreenWidth(double width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
-};

package/ios/UnistylesRuntime.mm

@@ -1,228 +0,0 @@
-#import "UnistylesRuntime.h"
-
-std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& rt) {
-    std::vector<jsi::PropNameID> properties;
-
-    // getters
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("screenWidth")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("screenHeight")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("hasAdaptiveThemes")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("theme")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("breakpoint")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("colorScheme")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("sortedBreakpointPairs")));
-    
-    // setters
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("themes")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useBreakpoints")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useTheme")));
-    properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useAdaptiveThemes")));
-    
-    return properties;
-}
-
-
-jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
-    std::string propName = propNameId.utf8(runtime);
-    
-    if (propName == "screenWidth") {
-        return jsi::Value(this->screenWidth);
-    }
-
-    if (propName == "screenHeight") {
-        return jsi::Value(this->screenHeight);
-    }
-    
-    if (propName == "hasAdaptiveThemes") {
-        return jsi::Value(this->hasAdaptiveThemes);
-    }
-    
-    if (propName == "theme") {
-        return !this->theme.empty()
-            ? jsi::Value(jsi::String::createFromUtf8(runtime, this->theme))
-            : this->getThemeOrFail(runtime);
-    }
-    
-    if (propName == "breakpoint") {
-        return !this->breakpoint.empty()
-            ? jsi::Value(jsi::String::createFromUtf8(runtime, this->breakpoint))
-            : jsi::Value::undefined();
-    }
-    
-    if (propName == "colorScheme") {
-        return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
-    }
-
-    if (propName == "sortedBreakpointPairs") {
-        std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(runtime, this->sortedBreakpointEntries.size());
-            
-        for (size_t i = 0; i < this->sortedBreakpointEntries.size(); ++i) {
-            std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(runtime, 2);
-            jsi::String nameValue = jsi::String::createFromUtf8(runtime, this->sortedBreakpointEntries[i].first);
-            
-            pairArray->setValueAtIndex(runtime, 0, nameValue);
-            pairArray->setValueAtIndex(runtime, 1, jsi::Value(this->sortedBreakpointEntries[i].second));
-            sortedBreakpointEntriesArray->setValueAtIndex(runtime, i, *pairArray);
-        }
-        
-        return jsi::Value(runtime, *sortedBreakpointEntriesArray);
-    }
-    
-    if (propName == "useBreakpoints") {
-        return jsi::Function::createFromHostFunction(
-           runtime,
-           jsi::PropNameID::forAscii(runtime, "useBreakpoints"),
-           1,
-           [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
-                jsi::Object breakpointsObj = arguments[0].asObject(runtime);
-                jsi::Array propertyNames = breakpointsObj.getPropertyNames(runtime);
-                std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
-
-                for (size_t i = 0; i < propertyNames.size(runtime); ++i) {
-                    jsi::Value propNameValue = propertyNames.getValueAtIndex(runtime, i);
-                    std::string name = propNameValue.asString(runtime).utf8(runtime);
-                    jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(runtime, name);
-                    jsi::Value value = breakpointsObj.getProperty(runtime, propNameID);
-
-                    if (value.isNumber()) {
-                        double breakpointValue = value.asNumber();
-                        sortedBreakpointEntriesVec.push_back(std::make_pair(name, breakpointValue));
-                    }
-                }
-
-                std::sort(sortedBreakpointEntriesVec.begin(), sortedBreakpointEntriesVec.end(), [](const std::pair<std::string, double>& a, const std::pair<std::string, double>& b) {
-                        return a.second < b.second;
-                });
-
-                this->sortedBreakpointEntries = sortedBreakpointEntriesVec;
-                
-               std::string breakpoint = this->getBreakpointFromScreenWidth(this->screenWidth, sortedBreakpointEntriesVec);
-
-               this->breakpoint = breakpoint;
-
-               return jsi::Value::undefined();
-           }
-         );
-    }
-    
-    if (propName == "useTheme") {
-        return jsi::Function::createFromHostFunction(runtime,
-            jsi::PropNameID::forAscii(runtime, "useTheme"),
-            1,
-            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
-                std::string themeName = arguments[0].asString(runtime).utf8(runtime);
-                NSString *currentTheme = [NSString stringWithUTF8String:themeName.c_str()];
-            
-                this->theme = themeName;
-                this->onThemeChange(themeName);
-
-                return jsi::Value::undefined();
-            }
-        );
-    }
-    
-    if (propName == "useAdaptiveThemes") {
-        return jsi::Function::createFromHostFunction(runtime,
-            jsi::PropNameID::forAscii(runtime, "useAdaptiveThemes"),
-            1,
-            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
-                bool enableAdaptiveThemes = arguments[0].asBool();
-
-                this->hasAdaptiveThemes = enableAdaptiveThemes;
-            
-                if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
-                    return jsi::Value::undefined();
-                }
-
-                this->theme = this->colorScheme;
-//                this->onThemeChange(this->theme);
-
-                return jsi::Value::undefined();
-            }
-        );
-    }
-    
-    return jsi::Value::undefined();
-}
-
-void UnistylesRuntime::set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) {
-    std::string propName = propNameId.utf8(runtime);
-    
-    if (propName == "themes" && value.isObject()) {
-        jsi::Array themes = value.asObject(runtime).asArray(runtime);
-        std::vector<std::string> themesVector;
-        size_t length = themes.size(runtime);
-        
-        for (size_t i = 0; i < length; ++i) {
-            jsi::Value element = themes.getValueAtIndex(runtime, i);
-
-            if (element.isString()) {
-                std::string theme = element.asString(runtime).utf8(runtime);
-                themesVector.push_back(theme);
-            }
-        }
-        
-        this->themes = themesVector;
-        
-        bool hasLightTheme = std::find(themesVector.begin(), themesVector.end(), "light") != themesVector.end();
-        bool hasDarkTheme = std::find(themesVector.begin(), themesVector.end(), "dark") != themesVector.end();
-        
-        this->supportsAutomaticColorScheme = hasLightTheme && hasDarkTheme;
-        
-        return;
-    }
-}
-
-std::string UnistylesRuntime::getBreakpointFromScreenWidth(double width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries) {
-    for (size_t i = 0; i < sortedBreakpointEntries.size(); ++i) {
-        const auto& [key, value] = sortedBreakpointEntries[i];
-        const double maxVal = (i + 1 < sortedBreakpointEntries.size()) ? sortedBreakpointEntries[i + 1].second : std::numeric_limits<double>::infinity();
-
-        if (width >= value && width < maxVal) {
-            return key;
-        }
-    }
-    
-    return sortedBreakpointEntries.empty() ? "" : sortedBreakpointEntries.back().first;
-}
-
-void UnistylesRuntime::handleScreenSizeChange(int width, int height) {
-    if (width != this->screenWidth) {
-        this->screenWidth = width;
-    }
-    
-    if (height != this->screenHeight) {
-        this->screenHeight = height;
-    }
-    
-    std::string currentBreakpoint = this->breakpoint;
-    std::string nextBreakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointEntries);
-    
-    if (currentBreakpoint != nextBreakpoint) {
-        this->breakpoint = nextBreakpoint;
-        this->onBreakpointChange(nextBreakpoint);
-    }
-}
-
-void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
-    this->colorScheme = colorScheme;
-    
-    if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
-        return;
-    }
-    
-    this->theme = this->colorScheme;
-    this->onThemeChange(this->theme);
-}
-
-jsi::Value UnistylesRuntime::getThemeOrFail(jsi::Runtime& runtime) {
-    if (this->themes.size() == 1) {
-        std::string themeName = this->themes.at(0);
-
-        this->theme = themeName;
-        
-        return jsi::String::createFromUtf8(runtime, themeName);
-    }
-    
-    return jsi::Value().undefined();
-}

package/lib/typescript/examples/expo/src/App.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const App: React.FunctionComponent;
-//# sourceMappingURL=App.d.ts.map

package/lib/typescript/examples/expo/src/App.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../../examples/expo/src/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,iBAMvB,CAAA"}

package/lib/typescript/examples/expo/src/examples/Cxx.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Cxx: () => React.JSX.Element;
-//# sourceMappingURL=Cxx.d.ts.map

package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Cxx.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Cxx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,GAAG,yBA8Ef,CAAA"}

package/lib/typescript/examples/expo/src/examples/index.d.ts

@@ -1,2 +0,0 @@
-export { Cxx } from './Cxx';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/examples/expo/src/examples/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA"}

package/lib/typescript/examples/expo/src/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/examples/expo/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../examples/expo/src/index.ts"],"names":[],"mappings":""}

package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts

@@ -1,8 +0,0 @@
-export declare const breakpoints: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-//# sourceMappingURL=breakpoints.d.ts.map

package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA"}

package/lib/typescript/examples/expo/src/styles/index.d.ts

@@ -1,16 +0,0 @@
-import { breakpoints } from './breakpoints';
-import { lightTheme, darkTheme, premiumTheme } from './theme';
-type AppBreakpoints = typeof breakpoints;
-type AppThemes = {
-    light: typeof lightTheme;
-    dark: typeof darkTheme;
-    premium: typeof premiumTheme;
-};
-declare module 'react-native-unistyles' {
-    interface UnistylesThemes extends AppThemes {
-    }
-    interface UnistylesBreakpoints extends AppBreakpoints {
-    }
-}
-export { lightTheme, darkTheme, premiumTheme, breakpoints };
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/examples/expo/src/styles/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE7D,KAAK,cAAc,GAAG,OAAO,WAAW,CAAA;AACxC,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,EAAE,OAAO,SAAS,CAAA;IACtB,OAAO,EAAE,OAAO,YAAY,CAAA;CAC/B,CAAA;AAED,OAAO,QAAQ,wBAAwB,CAAC;IACpC,UAAiB,eAAgB,SAAQ,SAAS;KAAG;IAErD,UAAiB,oBAAqB,SAAQ,cAAc;KAAG;CAClE;AAED,OAAO,EACH,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,EACd,CAAA"}

package/lib/typescript/examples/expo/src/styles/theme.d.ts

@@ -1,40 +0,0 @@
-export declare const lightTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-};
-export declare const darkTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-};
-export declare const premiumTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-};
-//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/examples/expo/src/styles/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/theme.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU;;;;;;;;;;;;CAQtB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;CAQrB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;CAQxB,CAAA"}