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

package/README.md

@@ -59,12 +59,12 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f
 <a href="https://github.com/happyfloat">
      <img src="https://avatars.githubusercontent.com/u/186333704?s=200&v=4" height="70px" width="70px" alt="happyfloat" />
 </a>
-<a href="https://github.com/hyoban">
-     <img src="https://avatars.githubusercontent.com/u/38493346?v=4" height="70px" width="70px" alt="hyoban" />
-</a>
 <a href="https://github.com/oscklm">
      <img src="https://avatars.githubusercontent.com/u/22825865?v=4" height="70px" width="70px" alt="oscklm" />
 </a>
+<a href="https://github.com/giovannilondero">
+     <img src="https://avatars.githubusercontent.com/u/10998991?v=4" height="70px" width="70px" alt="giovannilondero" />
+</a>
 
 ## Past sponsors
 
@@ -86,6 +86,9 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f
 <a href="https://github.com/abanobboles">
      <img src="https://avatars.githubusercontent.com/u/9078953?v=4" height="70px" width="70px" alt="abanobboles" />
 </a>
+<a href="https://github.com/hyoban">
+     <img src="https://avatars.githubusercontent.com/u/38493346?v=4" height="70px" width="70px" alt="hyoban" />
+</a>
 
 ## Sponsor my work
 

package/android/src/main/cxx/NativeUnistylesModule.cpp

@@ -35,7 +35,7 @@ void UnistylesModule::registerNatives() {
 jni::local_ref<BindingsInstallerHolder::javaobject> UnistylesModule::getBindingsInstaller(jni::alias_ref<UnistylesModule::javaobject> jobj) {
     auto& runtimeExecutor = jobj->cthis()->_runtimeExecutor;
     auto& uiManager = jobj->cthis()->_uiManager;
-    auto& nativePlatform = *jobj->cthis()->_nativePlatform;
+    auto& nativePlatform = jobj->cthis()->_nativePlatform;
 
     return BindingsInstallerHolder::newObjectCxxArgs([&runtimeExecutor, uiManager, nativePlatform](jsi::Runtime& rt) {
         // function is called on: first init and every live reload

package/android/src/main/cxx/NativeUnistylesModule.h

@@ -36,7 +36,7 @@ struct UnistylesModule : public jni::HybridClass<UnistylesModule> {
 private:
     std::shared_ptr<UIManager> _uiManager;
     RuntimeExecutor _runtimeExecutor;
-    Unistyles::HybridNativePlatformSpecCxx* _nativePlatform;
+    std::shared_ptr<HybridNativePlatformSpec> _nativePlatform;
 };
 
 }

package/components/native/ActivityIndicator/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/ActivityIndicator.js",
-  "module": "../../../lib/module/components/native/ActivityIndicator.js"
+  "module": "../../../lib/module/components/native/ActivityIndicator.js",
+  "react-native": "../../../src/components/native/ActivityIndicator.tsx"
 }

package/components/native/FlatList/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/FlatList.js",
-  "module": "../../../lib/module/components/native/FlatList.js"
+  "module": "../../../lib/module/components/native/FlatList.js",
+  "react-native": "../../../src/components/native/FlatList.tsx"
 }

package/components/native/Image/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/Image.js",
-  "module": "../../../lib/module/components/native/Image.js"
+  "module": "../../../lib/module/components/native/Image.js",
+  "react-native": "../../../src/components/native/Image.tsx"
 }

package/components/native/ImageBackground/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/ImageBackground.js",
-  "module": "../../../lib/module/components/native/ImageBackground.js"
+  "module": "../../../lib/module/components/native/ImageBackground.js",
+  "react-native": "../../../src/components/native/ImageBackground.native.tsx"
 }

package/components/native/KeyboardAvoidingView/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/KeyboardAvoidingView.js",
-  "module": "../../../lib/module/components/native/KeyboardAvoidingView.js"
+  "module": "../../../lib/module/components/native/KeyboardAvoidingView.js",
+  "react-native": "../../../src/components/native/KeyboardAvoidingView.tsx"
 }

package/components/native/Pressable/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/Pressable.js",
   "module": "../../../lib/module/components/native/Pressable.js",
-  "react-native": "../../../lib/commonjs/components/native/Pressable.native.js"
+  "react-native": "../../../src/components/native/Pressable.native.tsx"
 }

package/components/native/RefreshControl/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/RefreshControl.js",
-  "module": "../../../lib/module/components/native/RefreshControl.js"
+  "module": "../../../lib/module/components/native/RefreshControl.js",
+  "react-native": "../../../src/components/native/RefreshControl.tsx"
 }

package/components/native/ScrollView/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/ScrollView.js",
-  "module": "../../../lib/module/components/native/ScrollView.js"
+  "module": "../../../lib/module/components/native/ScrollView.js",
+  "react-native": "../../../src/components/native/ScrollView.tsx"
 }

package/components/native/SectionList/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/SectionList.js",
-  "module": "../../../lib/module/components/native/SectionList.js"
+  "module": "../../../lib/module/components/native/SectionList.js",
+  "react-native": "../../../src/components/native/SectionList.tsx"
 }

package/components/native/Switch/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/Switch.js",
-  "module": "../../../lib/module/components/native/Switch.js"
+  "module": "../../../lib/module/components/native/Switch.js",
+  "react-native": "../../../src/components/native/Switch.tsx"
 }

package/components/native/Text/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/Text.js",
-  "module": "../../../lib/module/components/native/Text.js"
+  "module": "../../../lib/module/components/native/Text.js",
+  "react-native": "../../../src/components/native/Text.tsx"
 }

package/components/native/TextInput/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/TextInput.js",
-  "module": "../../../lib/module/components/native/TextInput.js"
+  "module": "../../../lib/module/components/native/TextInput.js",
+  "react-native": "../../../src/components/native/TextInput.tsx"
 }

package/components/native/TouchableHighlight/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/TouchableHighlight.js",
-  "module": "../../../lib/module/components/native/TouchableHighlight.js"
+  "module": "../../../lib/module/components/native/TouchableHighlight.js",
+  "react-native": "../../../src/components/native/TouchableHighlight.tsx"
 }

package/components/native/TouchableOpacity/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/TouchableOpacity.js",
-  "module": "../../../lib/module/components/native/TouchableOpacity.js"
+  "module": "../../../lib/module/components/native/TouchableOpacity.js",
+  "react-native": "../../../src/components/native/TouchableOpacity.tsx"
 }

package/components/native/View/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/View.js",
-  "module": "../../../lib/module/components/native/View.js"
+  "module": "../../../lib/module/components/native/View.js",
+  "react-native": "../../../src/components/native/View.tsx"
 }

package/components/native/VirtualizedList/package.json

@@ -1,4 +1,5 @@
 {
   "main": "../../../lib/commonjs/components/native/VirtualizedList.js",
-  "module": "../../../lib/module/components/native/VirtualizedList.js"
+  "module": "../../../lib/module/components/native/VirtualizedList.js",
+  "react-native": "../../../src/components/native/VirtualizedList.tsx"
 }

package/cxx/common/Constants.h

@@ -2,14 +2,14 @@
 
 namespace margelo::nitro::unistyles::helpers {
 
-static const std::string UNISTYLES_ID = "__unid";
+static const std::string STYLESHEET_ID = "__stylesheetID";
+static const std::string UNISTYLE_ID = "__unistyleID";
 static const std::string ADD_VARIANTS_FN = "useVariants";
 static const std::string STYLE_DEPENDENCIES = "uni__dependencies";
-static const std::string STYLE_VARIANTS = "uni__variants";
+static const std::string STYLESHEET_VARIANTS = "__stylesheetVariants";
 static const std::string WEB_STYLE_KEY = "_web";
 static const std::string EXOTIC_STYLE_KEY = "_exotic";
-static const std::string NAME_STYLE_KEY = "__unistyles_name";
-static const std::string SECRETS = "__uni__secrets";
 static const std::string ARGUMENTS = "__uni__args";
+static const std::string GET_STYLES = "uni__getStyles";
 
 }

package/cxx/common/Helpers.h

@@ -147,7 +147,7 @@ inline jsi::Object variantsToValue(jsi::Runtime& rt, Variants& variants) {
     return rawVariants;
 }
 
-inline std::vector<folly::dynamic> parseDynamicFunctionArguments(jsi::Runtime& rt, jsi::Array&& arguments) {
+inline std::vector<folly::dynamic> parseDynamicFunctionArguments(jsi::Runtime& rt, jsi::Array& arguments) {
     std::vector<folly::dynamic> parsedArgument{};
     size_t count = arguments.size(rt);
 

package/cxx/core/HashGenerator.cpp

@@ -0,0 +1,23 @@
+#include "HashGenerator.h"
+#include <sstream>
+#include <iomanip>
+#include <functional>
+
+namespace margelo::nitro::unistyles::helpers {
+
+std::atomic<unsigned int> HashGenerator::count(0);
+
+std::string HashGenerator::generateHash(const std::string& input) {
+    std::hash<std::string> stringHasher;
+    uint64_t inputHash = stringHasher(input);
+
+    unsigned int counterValue = count.fetch_add(1, std::memory_order_relaxed);
+    uint64_t combinedHash = inputHash ^ (static_cast<uint64_t>(counterValue) << 32);
+
+    std::stringstream ss;
+    ss << std::hex << std::setfill('0') << std::setw(8) << (combinedHash & 0xFFFFFFFF);
+
+    return "unistyles-" + ss.str();
+}
+
+}

package/cxx/core/HashGenerator.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <string>
+#include <atomic>
+
+namespace margelo::nitro::unistyles::helpers {
+
+struct HashGenerator {
+    static std::atomic<unsigned int> count;
+    static std::string generateHash(const std::string& input);
+};
+
+}

package/cxx/core/HostUnistyle.cpp

@@ -0,0 +1,83 @@
+#include "HostUnistyle.h"
+
+using namespace margelo::nitro::unistyles::core;
+using namespace facebook;
+
+std::vector<jsi::PropNameID> HostUnistyle::getPropertyNames(jsi::Runtime& rt) {
+    auto propertyNames = std::vector<jsi::PropNameID> {};
+
+    propertyNames.reserve(8);
+
+    for (const auto& pair : this->_stylesheet->unistyles) {
+        propertyNames.emplace_back(jsi::PropNameID::forUtf8(rt, pair.first));
+    }
+
+    propertyNames.emplace_back(jsi::PropNameID::forUtf8(rt, helpers::ADD_VARIANTS_FN.c_str()));
+
+    return propertyNames;
+}
+
+jsi::Value HostUnistyle::get(jsi::Runtime& rt, const jsi::PropNameID& propNameId) {
+    auto propertyName = propNameId.utf8(rt);
+
+    if (propertyName == helpers::STYLESHEET_ID.c_str()) {
+        return jsi::Value(this->_stylesheet->tag);
+    }
+
+    if (propertyName == helpers::STYLESHEET_VARIANTS.c_str()) {
+        return helpers::variantsToValue(rt, this->_variants);
+    }
+
+    if (propertyName == helpers::ADD_VARIANTS_FN.c_str()) {
+        return this->createAddVariantsProxyFunction(rt);
+    }
+
+    if (!this->_stylesheet->unistyles.contains(propertyName)) {
+        return jsi::Value::undefined();
+    }
+
+    auto& unistyle = this->_stylesheet->unistyles[propertyName];
+
+    // check if Unistyles recomputed new style in the background
+    // ()when no node was mounted), if so we need to simply rebuild unistyle to get fresh data
+    if (unistyle->isDirty) {
+        auto parser = parser::Parser(this->_unistylesRuntime);
+
+        parser.rebuildUnistyle(rt, unistyle, this->_variants, std::nullopt);
+    }
+
+    return valueFromUnistyle(rt, this->_unistylesRuntime, this->_stylesheet->unistyles[propertyName], this->_variants);
+}
+
+void HostUnistyle::set(jsi::Runtime& rt, const jsi::PropNameID& propNameId, const jsi::Value& value) {}
+
+jsi::Function HostUnistyle::createAddVariantsProxyFunction(jsi::Runtime& rt) {
+    auto useVariantsFnName = jsi::PropNameID::forUtf8(rt, helpers::ADD_VARIANTS_FN);
+
+    return jsi::Function::createFromHostFunction(rt, useVariantsFnName, 1, [this](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count){
+        helpers::assertThat(rt, count == 1, "Unistyles: useVariants expected to be called with one argument.");
+        helpers::assertThat(rt, arguments[0].isObject(), "Unistyles: useVariants expected to be called with object.");
+
+        Variants variants = helpers::variantsToPairs(rt, arguments[0].asObject(rt));
+        parser::Parser parser = parser::Parser(this->_unistylesRuntime);
+
+        helpers::enumerateJSIObject(rt, thisVal.asObject(rt), [this, &parser, &rt, &variants](const std::string& name, jsi::Value& value){
+            if (name == helpers::ADD_VARIANTS_FN || !this->_stylesheet->unistyles.contains(name)) {
+                return;
+            }
+
+            auto unistyle = this->_stylesheet->unistyles[name];
+
+            if (unistyle->dependsOn(UnistyleDependency::VARIANTS)) {
+                parser.rebuildUnistyle(rt, unistyle, variants, std::nullopt);
+            }
+        });
+
+        this->_variants = variants;
+
+        auto style = std::make_shared<core::HostUnistyle>(this->_stylesheet, this->_unistylesRuntime, variants);
+        auto styleHostObject = jsi::Object::createFromHostObject(rt, style);
+
+        return styleHostObject;
+    });
+}

package/cxx/core/HostUnistyle.h

@@ -0,0 +1,27 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include "Parser.h"
+#include "UnistyleWrapper.h"
+
+namespace margelo::nitro::unistyles::core {
+
+using Variants = std::vector<std::pair<std::string, std::string>>;
+
+struct JSI_EXPORT HostUnistyle : public jsi::HostObject {
+    HostUnistyle(std::shared_ptr<StyleSheet> stylesheet, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime, Variants& variants)
+        : _stylesheet(stylesheet), _unistylesRuntime{unistylesRuntime}, _variants{std::move(variants)} {};
+
+    std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& rt);
+    jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& propNameId);
+    void set(jsi::Runtime& rt, const jsi::PropNameID& propNameId, const jsi::Value& value);
+
+    jsi::Function createAddVariantsProxyFunction(jsi::Runtime& rt);
+
+private:
+    Variants _variants;
+    std::shared_ptr<StyleSheet> _stylesheet;
+    std::shared_ptr<HybridUnistylesRuntime> _unistylesRuntime;
+};
+
+}

package/cxx/core/RNStyle.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include "Helpers.h"
+#include "Parser.h"
+#include "HostUnistyle.h"
+#include "UnistyleWrapper.h"
+
+namespace margelo::nitro::unistyles::core {
+
+inline jsi::Object toRNStyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> stylesheet, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime, Variants&& variants) {
+    auto style = std::make_shared<core::HostUnistyle>(stylesheet, unistylesRuntime, variants);
+    auto styleHostObject = jsi::Object::createFromHostObject(rt, style);
+
+    return styleHostObject;
+}
+
+}

package/cxx/core/Unistyle.h

@@ -19,8 +19,8 @@ enum class UnistyleType {
 struct Unistyle {
     using Shared = std::shared_ptr<Unistyle>;
 
-    Unistyle(UnistyleType type, std::string styleKey, jsi::Object& rawObject, std::shared_ptr<StyleSheet> styleSheet)
-        : styleKey{styleKey}, type{type}, rawValue{std::move(rawObject)}, parent{styleSheet} {}
+    Unistyle(std::string hash, UnistyleType type, std::string styleKey, jsi::Object& rawObject, std::shared_ptr<StyleSheet> styleSheet)
+        : unid{hash}, styleKey{styleKey}, type{type}, rawValue{std::move(rawObject)}, parent{styleSheet} {}
     virtual ~Unistyle() = default;
 
     Unistyle(const Unistyle&) = delete;
@@ -28,11 +28,16 @@ struct Unistyle {
 
     UnistyleType type;
     std::string styleKey;
+    std::string unid;
     jsi::Object rawValue;
     std::optional<jsi::Object> parsedStyle;
     std::vector<UnistyleDependency> dependencies{};
     std::shared_ptr<StyleSheet> parent;
 
+    // defines if given unattached unistyle was modified
+    // and should be recomputed when mounting new node
+    bool isDirty = false;
+
     inline void addDependency(UnistyleDependency dependency) {
         // we can't add dependencies if unistyle is sealed
         if (this->_isSealed) {
@@ -65,8 +70,8 @@ struct UnistyleDynamicFunction: public Unistyle {
     // unprocessedValue <- object generated after calling proxy and user's original function
     // parsedStyle <- parsed with Unistyle's parser
 
-    UnistyleDynamicFunction(UnistyleType type, std::string styleKey, jsi::Object& rawObject, std::shared_ptr<StyleSheet> styleSheet)
-        : Unistyle(type, styleKey, rawObject, styleSheet) {}
+    UnistyleDynamicFunction(std::string hash, UnistyleType type, std::string styleKey, jsi::Object& rawObject, std::shared_ptr<StyleSheet> styleSheet)
+        : Unistyle(hash, type, styleKey, rawObject, styleSheet) {}
 
     UnistyleDynamicFunction(const UnistyleDynamicFunction&) = delete;
     UnistyleDynamicFunction(UnistyleDynamicFunction&& other) = delete;

package/cxx/core/UnistyleWrapper.h

@@ -21,6 +21,7 @@ struct UnistyleWrapper: public jsi::NativeState {
 
 inline static Unistyle::Shared unistyleFromStaticStyleSheet(jsi::Runtime& rt, jsi::Object& value) {
     auto exoticUnistyle = std::make_shared<Unistyle>(
+        helpers::HashGenerator::generateHash(helpers::EXOTIC_STYLE_KEY),
         UnistyleType::Object,
         helpers::EXOTIC_STYLE_KEY,
         value,
@@ -32,56 +33,63 @@ inline static Unistyle::Shared unistyleFromStaticStyleSheet(jsi::Runtime& rt, js
     return exoticUnistyle;
 }
 
-inline static std::vector<Unistyle::Shared> unistylesFromNonExistentNativeState(jsi::Runtime& rt, jsi::Object& value) {
-    auto hasUnistyleName = value.hasProperty(rt, helpers::NAME_STYLE_KEY.c_str());
-
-    // return wrapped RN/inline style
-    if (!hasUnistyleName) {
-        return {unistyleFromStaticStyleSheet(rt, value)};
-    }
+inline static std::vector<std::string> getUnistylesHashKeys(jsi::Runtime& rt, jsi::Object& object) {
+    std::vector<std::string> matchingKeys{};
+    const std::string prefix = "unistyles-";
 
-    throw jsi::JSError(rt, R"(Unistyles: Style is not bound!
+    auto propertyNames = object.getPropertyNames(rt);
+    size_t length = propertyNames.length(rt);
 
-Potential reasons:
-- You likely used the spread operator on a Unistyle style outside of a JSX component
+    for (size_t i = 0; i < length; i++) {
+        auto propertyName = propertyNames.getValueAtIndex(rt, i).getString(rt);
+        std::string key = propertyName.utf8(rt);
 
-If you need to merge styles, do it within the style prop of your JSX component:
+        if (key.compare(0, prefix.length(), prefix) == 0) {
+            matchingKeys.push_back(key);
+        }
+    }
 
-style={{...styles.container, ...styles.otherProp}}
-or
-style={[styles.container, styles.otherProp]}
+    return matchingKeys;
+}
 
-If you pass computed style prop to component use array syntax:
+inline static std::vector<Unistyle::Shared> unistylesFromHashKeys(jsi::Runtime& rt, jsi::Object& object, std::vector<std::string> keys) {
+    std::vector<Unistyle::Shared> unistyles{};
+    auto& registry = UnistylesRegistry::get();
 
-customStyleProp={[styles.container, styles.otherProp]}
+    for (auto& key: keys) {
+        unistyles.emplace_back(registry.getUnistyleById(rt, key));
+    }
 
-Copying a Unistyle style outside of a JSX element will remove its internal C++ state, leading to unexpected behavior.)");
+    return unistyles;
 }
 
-inline static jsi::Object generateUnistylesPrototype(
-    jsi::Runtime& rt,
-    std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime,
-    Unistyle::Shared unistyle,
-    std::optional<Variants> variants,
-    std::optional<jsi::Array> arguments
-) {
-    // add prototype metadata for createUnistylesComponent
-    auto proto = jsi::Object(rt);
-    auto hostFn = jsi::Function::createFromHostFunction(rt, jsi::PropNameID::forUtf8(rt, "getStyle"), 0, [unistyle, unistylesRuntime](jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count){
-        auto variants = helpers::variantsToPairs(rt, thisValue.asObject(rt).getProperty(rt, "variants").asObject(rt));
-        auto arguments = helpers::parseDynamicFunctionArguments(rt, thisValue.asObject(rt).getProperty(rt, "arguments").asObject(rt).asArray(rt));
-
-        parser::Parser(unistylesRuntime).rebuildUnistyle(rt, unistyle->parent, unistyle, variants, std::make_optional<std::vector<folly::dynamic>>(arguments));
+inline static std::vector<Unistyle::Shared> unistylesFromNonExistentNativeState(jsi::Runtime& rt, jsi::Object& value) {
+    auto unistyleHashKeys = getUnistylesHashKeys(rt, value);
 
-        return jsi::Value(rt, unistyle->parsedStyle.value()).asObject(rt);
+    // return wrapped RN/inline style
+    if (unistyleHashKeys.empty()) {
+        return {unistyleFromStaticStyleSheet(rt, value)};
+    }
+
+    // last chance to fallback and get unistyle based on hash
+    auto unistyles = unistylesFromHashKeys(rt, value, unistyleHashKeys);
+    auto areValid = std::all_of(unistyles.begin(), unistyles.end(), [](Unistyle::Shared unistyle){
+        return unistyle != nullptr;
     });
 
-    proto.setProperty(rt, "getStyle", std::move(hostFn));
-    proto.setProperty(rt, "arguments", arguments.has_value() ? std::move(arguments.value()) : jsi::Array(rt, 0));
-    proto.setProperty(rt, "variants", variants.has_value() ? helpers::pairsToVariantsValue(rt, variants.value()) : jsi::Object(rt));
-    proto.setProperty(rt, helpers::STYLE_DEPENDENCIES.c_str(), helpers::dependenciesToJSIArray(rt, unistyle->dependencies));
+    if (!areValid) {
+        throw jsi::JSError(rt, R"(Unistyles: Style is not bound!
 
-    return proto;
+You likely altered unistyle hash key and we're not able to recover C++ state attached to this node.)");
+    }
+    
+    // someone merged unistyles, and will be warned in JS
+    // the best we can do is to return first unistyle
+    if (unistyles.size() > 1) {
+        return {unistyles.at(0)};
+    }
+    
+    return unistyles;
 }
 
 inline static std::vector<Unistyle::Shared> unistyleFromValue(jsi::Runtime& rt, const jsi::Value& value) {
@@ -116,28 +124,65 @@ inline static std::vector<Unistyle::Shared> unistyleFromValue(jsi::Runtime& rt,
     return unistyles;
 }
 
-inline static jsi::Value valueFromUnistyle(jsi::Runtime& rt, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime, Unistyle::Shared unistyle, Variants& variants) {
+inline static jsi::Value objectFromUnistyle(jsi::Runtime& rt, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime, Unistyle::Shared unistyle, Variants& variants, std::optional<jsi::Array> arguments) {
     auto wrappedUnistyle = std::make_shared<UnistyleWrapper>(unistyle);
+    auto unistyleID = jsi::PropNameID::forUtf8(rt, unistyle->unid);
 
-    if (unistyle->type == UnistyleType::Object) {
-        jsi::Object obj = jsi::Object(rt);
+    jsi::Object obj = jsi::Object(rt);
 
-        obj.setNativeState(rt, std::move(wrappedUnistyle));
-        obj.setProperty(rt, helpers::NAME_STYLE_KEY.c_str(), jsi::String::createFromUtf8(rt, unistyle->styleKey));
+    obj.setNativeState(rt, std::move(wrappedUnistyle));
 
-        helpers::defineHiddenProperty(rt, obj, helpers::STYLE_DEPENDENCIES.c_str(), helpers::dependenciesToJSIArray(rt, unistyle->dependencies));
-        helpers::mergeJSIObjects(rt, obj, unistyle->parsedStyle.value());
+    auto secrets = jsi::Object(rt);
 
-        obj.setProperty(rt, "__proto__", generateUnistylesPrototype(rt, unistylesRuntime, unistyle, variants, std::nullopt));
+    auto parsedArguments = arguments.has_value()
+        ? helpers::parseDynamicFunctionArguments(rt, arguments.value())
+        : std::optional<std::vector<folly::dynamic>>{};
+    
+    if (arguments.has_value()) {
+        // this is required for HybridShadowRegistry::link
+        helpers::defineHiddenProperty(rt, secrets, helpers::ARGUMENTS.c_str(), arguments.value());
+    }
+
+    // this is required for HybridShadowRegistry::link
+    helpers::defineHiddenProperty(rt, secrets, helpers::STYLESHEET_VARIANTS.c_str(), helpers::variantsToValue(rt, variants));
+
+    // this is required for withUnistyles
+    helpers::defineHiddenProperty(rt, secrets, helpers::STYLE_DEPENDENCIES.c_str(), helpers::dependenciesToJSIArray(rt, unistyle->dependencies));
+    
+    // this is required for withUnistyles
+    auto hostFn = jsi::Function::createFromHostFunction(
+        rt,
+        jsi::PropNameID::forUtf8(rt, helpers::GET_STYLES.c_str()),
+        0,
+        [unistyle, unistylesRuntime, variants, parsedArguments](jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count
+    ) {
+        parser::Parser(unistylesRuntime).rebuildUnistyle(rt, unistyle, variants, parsedArguments);
+
+        return jsi::Value(rt, unistyle->parsedStyle.value()).asObject(rt);
+    });
+    
+    helpers::defineHiddenProperty(rt, secrets, helpers::GET_STYLES.c_str(), std::move(hostFn));
 
-        return obj;
+    obj.setProperty(rt, unistyleID, secrets);
+
+    helpers::mergeJSIObjects(rt, obj, unistyle->parsedStyle.value());
+
+    return obj;
+}
+
+inline static jsi::Value valueFromUnistyle(jsi::Runtime& rt, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime, Unistyle::Shared unistyle, Variants& variants) {
+    if (unistyle->type == UnistyleType::Object) {
+        return objectFromUnistyle(rt, unistylesRuntime, unistyle, variants, std::nullopt);
     }
 
+    auto wrappedUnistyle = std::make_shared<UnistyleWrapper>(unistyle);
+    auto unistyleID = jsi::PropNameID::forUtf8(rt, unistyle->unid);
+
     auto unistyleFn = std::dynamic_pointer_cast<UnistyleDynamicFunction>(unistyle);
     auto hostFn = jsi::Value(rt, unistyleFn->proxiedFunction.value()).asObject(rt).asFunction(rt);
 
     hostFn.setNativeState(rt, std::move(wrappedUnistyle));
-    hostFn.setProperty(rt, helpers::NAME_STYLE_KEY.c_str(), jsi::String::createFromUtf8(rt, unistyleFn->styleKey));
+    hostFn.setProperty(rt, unistyleID, jsi::Object(rt));
 
     return std::move(hostFn);
 }