react-native-unistyles 2.8.0-beta.1 → 2.8.0-beta.2

package/cxx/UnistylesImpl.cpp

@@ -0,0 +1,241 @@
+#include "UnistylesRuntime.h"
+#include <jsi/jsi.h>
+
+using namespace facebook;
+
+jsi::Value UnistylesRuntime::getScreenWidth(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->screen.width);
+}
+
+jsi::Value UnistylesRuntime::getScreenHeight(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->screen.height);
+}
+
+jsi::Value UnistylesRuntime::getContentSizeCategory(jsi::Runtime & rt, std::string fnName) {
+    return jsi::Value(jsi::String::createFromUtf8(rt, this->contentSizeCategory));
+}
+
+jsi::Value UnistylesRuntime::hasEnabledAdaptiveThemes(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->hasAdaptiveThemes);
+}
+
+jsi::Value UnistylesRuntime::getThemeName(jsi::Runtime& rt, std::string fnName) {
+    return !this->themeName.empty()
+        ? jsi::Value(jsi::String::createFromUtf8(rt, this->themeName))
+        : this->getThemeOrFail(rt);
+}
+
+jsi::Value UnistylesRuntime::getCurrentBreakpoint(jsi::Runtime& rt, std::string fnName) {
+    return !this->breakpoint.empty()
+        ? jsi::Value(jsi::String::createFromUtf8(rt, this->breakpoint))
+        : jsi::Value::undefined();
+}
+
+jsi::Value UnistylesRuntime::getColorScheme(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(jsi::String::createFromUtf8(rt, this->colorScheme));
+}
+
+jsi::Value UnistylesRuntime::getSortedBreakpointPairs(jsi::Runtime& rt, std::string fnName) {
+    std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(rt, this->sortedBreakpointPairs.size());
+
+    for (size_t i = 0; i < this->sortedBreakpointPairs.size(); ++i) {
+        std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(rt, 2);
+        jsi::String nameValue = jsi::String::createFromUtf8(rt, this->sortedBreakpointPairs[i].first);
+
+        pairArray->setValueAtIndex(rt, 0, nameValue);
+        pairArray->setValueAtIndex(rt, 1, jsi::Value(this->sortedBreakpointPairs[i].second));
+        sortedBreakpointEntriesArray->setValueAtIndex(rt, i, *pairArray);
+    }
+
+    return jsi::Value(rt, *sortedBreakpointEntriesArray);
+}
+
+jsi::Value UnistylesRuntime::setBreakpoints(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        jsi::Object breakpointsObj = arguments[0].asObject(rt);
+        auto sortedBreakpoints = this->toSortedBreakpointPairs(rt, breakpointsObj);
+
+        if (sortedBreakpoints.size() == 0) {
+            throw jsi::JSError(rt, UnistylesErrorBreakpointsCannotBeEmpty);
+        }
+
+        if (sortedBreakpoints.at(0).second != 0) {
+            throw jsi::JSError(rt, UnistylesErrorBreakpointsMustStartFromZero);
+        }
+
+        this->sortedBreakpointPairs = sortedBreakpoints;
+
+        std::string breakpoint = this->getBreakpointFromScreenWidth(this->screen.width, sortedBreakpoints);
+
+        this->breakpoint = breakpoint;
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::setActiveTheme(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string themeName = arguments[0].asString(rt).utf8(rt);
+
+        if (this->themeName != themeName) {
+            this->themeName = themeName;
+            this->onThemeChange(themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::updateTheme(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string themeName = arguments[0].asString(rt).utf8(rt);
+
+        if (this->themeName == themeName) {
+            this->onThemeChange(themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::useAdaptiveThemes(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        bool enableAdaptiveThemes = arguments[0].asBool();
+
+        if (enableAdaptiveThemes && this->colorScheme == UnistylesUnspecifiedScheme) {
+            throw jsi::JSError(rt, UnistylesErrorAdaptiveThemesNotSupported);
+        }
+
+        this->hasAdaptiveThemes = enableAdaptiveThemes;
+
+        if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
+            return jsi::Value::undefined();
+        }
+
+        if (this->themeName != this->colorScheme) {
+            this->themeName = this->colorScheme;
+            this->onThemeChange(this->themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::addPlugin(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string pluginName = arguments[0].asString(rt).utf8(rt);
+        bool notify = arguments[1].asBool();
+
+        this->pluginNames.push_back(pluginName);
+
+        // registry enabled plugins won't notify listeners
+        if (notify) {
+            this->onPluginChange();
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::removePlugin(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string pluginName = arguments[0].asString(rt).utf8(rt);
+
+        auto it = std::find(this->pluginNames.begin(), this->pluginNames.end(), pluginName);
+
+        if (it != this->pluginNames.end()) {
+            this->pluginNames.erase(it);
+            this->onPluginChange();
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::getEnabledPlugins(jsi::Runtime& rt, std::string fnName) {
+    auto jsiArray = facebook::jsi::Array(rt, this->pluginNames.size());
+
+    for (size_t i = 0; i < this->pluginNames.size(); i++) {
+        jsiArray.setValueAtIndex(rt, i, facebook::jsi::String::createFromUtf8(rt, this->pluginNames[i]));
+    }
+
+    return jsiArray;
+}
+
+jsi::Value UnistylesRuntime::getInsets(jsi::Runtime& rt, std::string fnName) {
+    auto insets = jsi::Object(rt);
+
+    insets.setProperty(rt, "top", this->insets.top);
+    insets.setProperty(rt, "bottom", this->insets.bottom);
+    insets.setProperty(rt, "left", this->insets.left);
+    insets.setProperty(rt, "right", this->insets.right);
+
+    return insets;
+}
+
+jsi::Value UnistylesRuntime::getStatusBar(jsi::Runtime& rt, std::string fnName) {
+    auto statusBar = jsi::Object(rt);
+    auto setStatusBarColorFunction = HOST_FN("setColor", 1, {
+        std::string color = arguments[0].asString(rt).utf8(rt);
+
+        if (this->setStatusBarColor.has_value()) {
+            this->setStatusBarColor.value()(color);
+        }
+
+        return jsi::Value::undefined();
+    });
+
+    statusBar.setProperty(rt, "width", this->statusBar.width);
+    statusBar.setProperty(rt, "height", this->statusBar.height);
+    statusBar.setProperty(rt, "setColor", setStatusBarColorFunction);
+
+    return statusBar;
+}
+
+jsi::Value UnistylesRuntime::getNavigationBar(jsi::Runtime& rt, std::string fnName) {
+    auto navigationBarValue = jsi::Object(rt);
+    auto setNavigationBarColorFunction = HOST_FN("setColor", 1, {
+        std::string color = arguments[0].asString(rt).utf8(rt);
+
+        if (this->setNavigationBarColor.has_value()) {
+            this->setNavigationBarColor.value()(color);
+        }
+
+        return jsi::Value::undefined();
+    });
+
+    navigationBarValue.setProperty(rt, "width", this->navigationBar.width);
+    navigationBarValue.setProperty(rt, "height", this->navigationBar.height);
+    navigationBarValue.setProperty(rt, "setColor", setNavigationBarColorFunction);
+
+    return navigationBarValue;
+}
+
+std::optional<jsi::Value> UnistylesRuntime::setThemes(jsi::Runtime& rt, const jsi::Value& value) {
+    jsi::Array themes = value.asObject(rt).asArray(rt);
+    std::vector<std::string> themesVector;
+    size_t length = themes.size(rt);
+
+    for (size_t i = 0; i < length; ++i) {
+        jsi::Value element = themes.getValueAtIndex(rt, i);
+
+        if (element.isString()) {
+            std::string theme = element.asString(rt).utf8(rt);
+            themesVector.push_back(theme);
+        }
+    }
+
+    if (themesVector.size() == 0) {
+        throw jsi::JSError(rt, UnistylesErrorThemesCannotBeEmpty);
+    }
+
+    this->themes = themesVector;
+    this->themeName = "";
+
+    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::nullopt;
+}

package/cxx/UnistylesModel.cpp

@@ -0,0 +1,230 @@
+#include "UnistylesModel.h"
+
+std::string UnistylesModel::getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointPairs) {
+    for (size_t i = 0; i < sortedBreakpointPairs.size(); ++i) {
+        const auto& [key, value] = sortedBreakpointPairs[i];
+        const double maxVal = (i + 1 < sortedBreakpointPairs.size()) ? sortedBreakpointPairs[i + 1].second : std::numeric_limits<double>::infinity();
+
+        if (width >= value && width < maxVal) {
+            return key;
+        }
+    }
+
+    return sortedBreakpointPairs.empty() ? "" : sortedBreakpointPairs.back().first;
+}
+
+void UnistylesModel::handleScreenSizeChange(Dimensions& screen, std::optional<Insets> insets, std::optional<Dimensions> statusBar, std::optional<Dimensions> navigationBar) {
+    std::string breakpoint = this->getBreakpointFromScreenWidth(screen.width, this->sortedBreakpointPairs);
+    bool hasDifferentBreakpoint = this->breakpoint != breakpoint;
+    bool hasDifferentScreenDimensions = this->screen.width != screen.width || this->screen.height != screen.height;
+    bool hasDifferentInsets = insets.has_value()
+        ? this->insets.top != insets->top || this->insets.bottom != insets->bottom || this->insets.left != insets->left || this->insets.right != insets->right
+        : false;
+
+    // we don't need to check statusBar/navigationBar as they will only change on orientation change witch is equal to hasDifferentScreenDimensions
+    bool shouldNotify = hasDifferentBreakpoint || hasDifferentScreenDimensions || hasDifferentInsets;
+
+    this->breakpoint = breakpoint;
+    this->screen = {screen.width, screen.height};
+    
+    if (insets.has_value()) {
+        this->insets = {insets->top, insets->bottom, insets->left, insets->right};
+    }
+    
+    if (statusBar.has_value()) {
+        this->statusBar = {statusBar->width, statusBar->height};
+    }
+    
+    if (navigationBar.has_value()) {
+        this->navigationBar = {navigationBar->width, navigationBar->height};
+    }
+
+    if (shouldNotify) {
+        this->onLayoutChange();
+    }
+}
+
+void UnistylesModel::handleAppearanceChange(std::string colorScheme) {
+    this->colorScheme = colorScheme;
+
+    if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
+        return;
+    }
+
+    if (this->themeName != this->colorScheme) {
+        this->onThemeChange(this->colorScheme);
+        this->themeName = this->colorScheme;
+    }
+}
+
+void UnistylesModel::handleContentSizeCategoryChange(std::string contentSizeCategory) {
+    this->contentSizeCategory = contentSizeCategory;
+    this->onContentSizeCategoryChange(contentSizeCategory);
+}
+
+jsi::Value UnistylesModel::getThemeOrFail(jsi::Runtime& runtime) {
+    if (this->themes.size() == 1) {
+        std::string themeName = this->themes.at(0);
+
+        this->themeName = themeName;
+
+        return jsi::String::createFromUtf8(runtime, themeName);
+    }
+
+    return jsi::Value().undefined();
+}
+
+std::vector<std::pair<std::string, double>> UnistylesModel::toSortedBreakpointPairs(jsi::Runtime& rt, jsi::Object& breakpointsObj) {
+    jsi::Array propertyNames = breakpointsObj.getPropertyNames(rt);
+    std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
+
+    for (size_t i = 0; i < propertyNames.size(rt); ++i) {
+        jsi::Value propNameValue = propertyNames.getValueAtIndex(rt, i);
+        std::string name = propNameValue.asString(rt).utf8(rt);
+        jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(rt, name);
+        jsi::Value value = breakpointsObj.getProperty(rt, 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;
+    });
+
+    return sortedBreakpointEntriesVec;
+}
+
+// a little bit hacky, but works like Turbo Module emitDeviceEvent
+// it will be super easy to refactor for Unistyles 3.0
+// ref: https://github.com/facebook/react-native/pull/43375
+// ref: https://github.com/facebook/react-native/blob/b5fd041917d197f256433a41a126f0dff767c429/packages/react-native/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.cpp#L42
+void UnistylesModel::emitDeviceEvent(const std::string eventType, EventPayload payload) {
+    this->callInvoker->invokeAsync([eventType, payload, this](){
+        jsi::Value emitter = this->runtime.global().getProperty(this->runtime, "__rctDeviceEventEmitter");
+
+        if (emitter.isUndefined()) {
+            return;
+        }
+
+        jsi::Object emitterObject = emitter.asObject(runtime);
+        jsi::Function emitFunction = emitterObject.getPropertyAsFunction(runtime, "emit");
+
+        std::vector<jsi::Value> arguments;
+        jsi::Object event = jsi::Object(this->runtime);
+
+        event.setProperty(this->runtime, "type", jsi::String::createFromUtf8(this->runtime, eventType));
+
+        jsi::Object eventPayload = this->parseEventPayload(payload);
+
+        event.setProperty(this->runtime, "payload", eventPayload);
+
+        arguments.emplace_back(jsi::String::createFromAscii(runtime, "__unistylesOnChange"));
+        arguments.emplace_back(std::move(event));
+
+        emitFunction.callWithThis(runtime, emitterObject, (const jsi::Value*)arguments.data(), arguments.size());
+    });
+}
+
+void UnistylesModel::onThemeChange(std::string themeName) {
+    EventPayload payload;
+    payload["themeName"] = themeName;
+
+    this->emitDeviceEvent("theme", payload);
+}
+
+void UnistylesModel::onContentSizeCategoryChange(std::string contentSizeCategory) {
+    EventPayload payload;
+    payload["contentSizeCategory"] = contentSizeCategory;
+
+    this->emitDeviceEvent("dynamicTypeSize", payload);
+}
+
+void UnistylesModel::onPluginChange() {
+    this->emitDeviceEvent("plugin", {});
+}
+
+void UnistylesModel::onLayoutChange() {
+    EventPayload payload;
+    std::string orientation = screen.width > screen.height
+        ? UnistylesOrientationLandscape
+        : UnistylesOrientationPortrait;
+
+    payload["breakpoint"] = this->breakpoint;
+    payload["orientation"] = orientation;
+
+    EventNestedValue screenPayload;
+    auto screen = this->screen;
+    
+    screenPayload["width"] = screen.width;
+    screenPayload["height"] = screen.height;
+
+    payload["screen"] = screenPayload;
+
+    EventNestedValue statusBarPayload;
+    auto statusBar = this->statusBar;
+    
+    statusBarPayload["width"] = statusBar.width;
+    statusBarPayload["height"] = statusBar.height;
+
+    payload["statusBar"] = statusBarPayload;
+
+    EventNestedValue navigationBarPayload;
+    auto navigationBar = this->navigationBar;
+    
+    navigationBarPayload["width"] = navigationBar.width;
+    navigationBarPayload["height"] = navigationBar.height;
+
+    payload["navigationBar"] = navigationBarPayload;
+
+    EventNestedValue insetsPayload;
+    auto insets = this->insets;
+    
+    insetsPayload["top"] = insets.top;
+    insetsPayload["bottom"] = insets.bottom;
+    insetsPayload["left"] = insets.left;
+    insetsPayload["right"] = insets.right;
+
+    payload["insets"] = insetsPayload;
+
+    this->emitDeviceEvent("layout", payload);
+}
+
+jsi::Object UnistylesModel::parseEventPayload(EventPayload payload) {
+    jsi::Object eventPayload = jsi::Object(this->runtime);
+
+    for (const auto& [key, value] : payload) {
+        if (std::holds_alternative<std::string>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), jsi::String::createFromUtf8(this->runtime, std::get<std::string>(value)));
+        }
+
+        if (std::holds_alternative<int>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), std::get<int>(value));
+        }
+
+        if (std::holds_alternative<EventNestedValue>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), this->parseEventNestedPayload(std::get<EventNestedValue>(value)));
+        }
+    }
+
+    return eventPayload;
+}
+
+jsi::Object UnistylesModel::parseEventNestedPayload(EventNestedValue payload) {
+    jsi::Object eventPayload = jsi::Object(this->runtime);
+
+    for (const auto& [key, value] : payload) {
+        if (std::holds_alternative<std::string>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), jsi::String::createFromUtf8(this->runtime, std::get<std::string>(value)));
+        }
+
+        if (std::holds_alternative<int>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), std::get<int>(value));
+        }
+    }
+
+    return eventPayload;
+}

package/cxx/UnistylesModel.h

@@ -0,0 +1,112 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <ReactCommon/CallInvoker.h>
+#include <vector>
+#include <map>
+#include <optional>
+#include <variant>
+
+using namespace facebook;
+
+const std::string UnistylesOrientationPortrait = "portrait";
+const std::string UnistylesOrientationLandscape = "landscape";
+
+const std::string UnistylesDarkScheme = "dark";
+const std::string UnistylesLightScheme = "light";
+const std::string UnistylesUnspecifiedScheme = "unspecified";
+
+const std::string UnistylesErrorBreakpointsCannotBeEmpty = "You are trying to register empty breakpoints object";
+const std::string UnistylesErrorBreakpointsMustStartFromZero = "You are trying to register breakpoints that don't start from 0";
+const std::string UnistylesErrorThemesCannotBeEmpty = "You are trying to register empty themes object";
+const std::string UnistylesErrorAdaptiveThemesNotSupported = "Your platform doesn't support adaptive themes";
+
+struct Dimensions {
+    int width;
+    int height;
+};
+
+struct Insets {
+    int top;
+    int bottom;
+    int left;
+    int right;
+};
+
+using EventNestedValue = std::map<std::string, std::variant<std::string, int>>;
+using EventValue = std::variant<std::string, int>;
+using EventPayload = std::map<std::string, std::variant<std::string, int, EventNestedValue>>;
+
+struct UnistylesModel {
+    void emitDeviceEvent(const std::string eventType, EventPayload payload);
+    void onThemeChange(std::string themeName);
+    void onPluginChange();
+    void onContentSizeCategoryChange(std::string contentSizeCategory);
+    void onLayoutChange();
+    jsi::Object parseEventPayload(EventPayload payload);
+    jsi::Object parseEventNestedPayload(EventNestedValue payload);
+
+    std::function<Dimensions()> getScreenDimensions;
+    std::function<std::string()> getContentSizeCategory;
+    std::function<std::string()> getColorScheme;
+    std::function<Dimensions()> getStatusBarDimensions;
+    std::function<Dimensions()> getNavigationBarDimensions;
+    std::function<Insets()> getInsets;
+    std::optional<std::function<void(std::string)>> setStatusBarColor;
+    std::optional<std::function<void(std::string)>> setNavigationBarColor;
+
+    void setScreenDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getScreenDimensions = callback;
+    }
+    void setContentSizeCategoryCallback(std::function<std::string()> callback) {
+        this->getContentSizeCategory = callback;
+    }
+    void setColorSchemeCallback(std::function<std::string()> callback) {
+        this->getColorScheme = callback;
+    }
+    void setStatusBarDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getStatusBarDimensions = callback;
+    }
+    void setNavigationBarDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getNavigationBarDimensions = callback;
+    }
+    void setInsetsCallback(std::function<Insets()> callback) {
+        this->getInsets = callback;
+    }
+    void setStatusBarColorCallback(std::function<void(std::string color)> callback) {
+        this->setStatusBarColor = callback;
+    }
+    void setNavigationBarColorCallback(std::function<void(std::string color)> callback) {
+        this->setNavigationBarColor = callback;
+    }
+
+    Dimensions screen = {0, 0};
+    Dimensions statusBar = {0, 0};
+    Dimensions navigationBar = {0, 0};
+    Insets insets = {0, 0, 0, 0};
+    std::string colorScheme = UnistylesUnspecifiedScheme;
+    std::string contentSizeCategory = UnistylesUnspecifiedScheme;
+
+    UnistylesModel(jsi::Runtime& rt, std::shared_ptr<react::CallInvoker> callInvoker): runtime(rt), callInvoker(callInvoker) {}
+
+    bool hasAdaptiveThemes;
+    bool supportsAutomaticColorScheme;
+
+    std::string themeName;
+    std::string breakpoint;
+    std::vector<std::string> pluginNames;
+    std::vector<std::string> themes;
+    std::vector<std::pair<std::string, double>> sortedBreakpointPairs;
+
+    void handleScreenSizeChange(Dimensions& screen, std::optional<Insets> insets, std::optional<Dimensions> statusBar, std::optional<Dimensions> navigationBar);
+    void handleAppearanceChange(std::string colorScheme);
+    void handleContentSizeCategoryChange(std::string contentSizeCategory);
+
+    jsi::Value getThemeOrFail(jsi::Runtime&);
+    std::string getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
+    std::vector<std::pair<std::string, double>> toSortedBreakpointPairs(jsi::Runtime&, jsi::Object&);
+
+private:
+    jsi::Runtime& runtime;
+    std::shared_ptr<react::CallInvoker> callInvoker;
+};