react-native-unistyles 2.0.0-rc.1 → 2.0.0-rc.3

package/android/src/main/cxx/cpp-adapter.cpp

@@ -27,7 +27,8 @@ Java_com_unistyles_UnistylesModule_nativeInstall(
         jlong jsi,
         jint screenWidth,
         jint screenHeight,
-        jstring colorScheme
+        jstring colorScheme,
+        jstring contentSizeCategory
 ) {
     auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsi);
 
@@ -43,10 +44,15 @@ Java_com_unistyles_UnistylesModule_nativeInstall(
     std::string colorSchemeStr(colorSchemeChars);
     env->ReleaseStringUTFChars(colorScheme, colorSchemeChars);
 
+    const char *contentSizeCategoryChars = env->GetStringUTFChars(contentSizeCategory, nullptr);
+    std::string contentSizeCategoryStr(contentSizeCategoryChars);
+    env->ReleaseStringUTFChars(contentSizeCategory, contentSizeCategoryChars);
+
     unistylesRuntime = std::make_shared<UnistylesRuntime>(
         screenWidth,
         screenHeight,
-        colorSchemeStr
+        colorSchemeStr,
+        contentSizeCategoryStr
     );
 
     unistylesRuntime->onThemeChange([=](const std::string &theme) {
@@ -79,6 +85,16 @@ Java_com_unistyles_UnistylesModule_nativeInstall(
         env->DeleteLocalRef(cls);
     });
 
+    unistylesRuntime->onContentSizeCategoryChange([=](const std::string &contentSizeCategory) {
+        jstring contentSizeCategoryStr = env->NewStringUTF(contentSizeCategory.c_str());
+        jclass cls = env->GetObjectClass(unistylesModule);
+        jmethodID methodId = env->GetMethodID(cls, "onContentSizeCategoryChange", "(Ljava/lang/String;)V");
+
+        env->CallVoidMethod(unistylesModule, methodId, contentSizeCategoryStr);
+        env->DeleteLocalRef(contentSizeCategoryStr);
+        env->DeleteLocalRef(cls);
+    });
+
     jsi::Object hostObject = jsi::Object::createFromHostObject(*runtime, unistylesRuntime);
 
     runtime->global().setProperty(*runtime, "__UNISTYLES__", std::move(hostObject));
@@ -106,3 +122,11 @@ Java_com_unistyles_UnistylesModule_nativeOnAppearanceChange(JNIEnv *env, jobject
         unistylesRuntime->handleAppearanceChange(env->GetStringUTFChars(colorScheme, nullptr));
     }
 }
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeOnContentSizeCategoryChange(JNIEnv *env, jobject thiz, jstring contentSizeCategory) {
+    if (unistylesRuntime != nullptr) {
+        unistylesRuntime->handleContentSizeCategoryChange(env->GetStringUTFChars(contentSizeCategory, nullptr));
+    }
+}

package/android/src/main/java/com/unistyles/UnistylesModule.kt

@@ -15,6 +15,7 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.modules.core.DeviceEventManagerModule
 
+
 class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext), LifecycleEventListener {
     private val configurationChangeReceiver = object : BroadcastReceiver() {
         override fun onReceive(context: Context, intent: Intent) {
@@ -54,6 +55,7 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
             this.nativeOnAppearanceChange(
                 config["colorScheme"] as String
             )
+            this.nativeOnContentSizeCategoryChange(config["contentSizeCategory"] as String)
         }
     }
 
@@ -64,11 +66,20 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
             Configuration.UI_MODE_NIGHT_NO -> "light"
             else -> "unspecified"
         }
+        val fontScale = reactApplicationContext.resources.configuration.fontScale
+        val contentSizeCategory = when {
+            fontScale <= 0.85f -> "Small"
+            fontScale <= 1.0f -> "Default"
+            fontScale <= 1.15f -> "Large"
+            fontScale <= 1.3f -> "ExtraLarge"
+            else -> "Huge"
+        }
 
         return mapOf(
             "width" to (displayMetrics.widthPixels / displayMetrics.density).toInt(),
             "height" to (displayMetrics.heightPixels / displayMetrics.density).toInt(),
-            "colorScheme" to colorScheme
+            "colorScheme" to colorScheme,
+            "contentSizeCategory" to contentSizeCategory
         )
     }
 
@@ -85,7 +96,8 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
                     it.get(),
                     config["width"] as Int,
                     config["height"] as Int,
-                    config["colorScheme"] as String
+                    config["colorScheme"] as String,
+                    config["contentSizeCategory"] as String
                 )
 
                 Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
@@ -99,10 +111,11 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         }
     }
 
-    private external fun nativeInstall(jsi: Long, width: Int, height: Int, colorScheme: String)
+    private external fun nativeInstall(jsi: Long, width: Int, height: Int, colorScheme: String, contentSizeCategory: String)
     private external fun nativeDestroy()
     private external fun nativeOnOrientationChange(width: Int, height: Int)
     private external fun nativeOnAppearanceChange(colorScheme: String)
+    private external fun nativeOnContentSizeCategoryChange(contentSizeCategory: String)
 
     //endregion
     //region Event emitter
@@ -147,6 +160,19 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
             .emit("__unistylesOnChange", body)
     }
 
+    private fun onContentSizeCategoryChange(contentSizeCategory: String) {
+        val body = Arguments.createMap().apply {
+            putString("type", "dynamicTypeSize")
+            putMap("payload", Arguments.createMap().apply {
+                putString("contentSizeCategory", contentSizeCategory)
+            })
+        }
+
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("__unistylesOnChange", body)
+    }
+
     @ReactMethod
     fun addListener(eventName: String?) = Unit
 

package/cxx/UnistylesRuntime.cpp

@@ -11,6 +11,7 @@ std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& ru
     // getters
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenWidth")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenHeight")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("contentSizeCategory")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("hasAdaptiveThemes")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themeName")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("breakpoint")));
@@ -43,6 +44,10 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
     if (propName == "hasAdaptiveThemes") {
         return jsi::Value(this->hasAdaptiveThemes);
     }
+    
+    if (propName == "contentSizeCategory") {
+        return jsi::Value(jsi::String::createFromUtf8(runtime, this->contentSizeCategory));
+    }
 
     if (propName == "themeName") {
         return !this->themeName.empty()
@@ -293,6 +298,11 @@ void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
     }
 }
 
+void UnistylesRuntime::handleContentSizeCategoryChange(std::string contentSizeCategory) {
+    this->contentSizeCategory = contentSizeCategory;
+    this->onContentSizeCategoryChangeCallback(contentSizeCategory);
+}
+
 jsi::Value UnistylesRuntime::getThemeOrFail(jsi::Runtime& runtime) {
     if (this->themes.size() == 1) {
         std::string themeName = this->themes.at(0);

package/cxx/UnistylesRuntime.h

@@ -20,18 +20,21 @@ class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
 private:
     std::function<void(std::string)> onThemeChangeCallback;
     std::function<void(std::string breakpoint, std::string orientation, int screenWidth, int screenHeight)> onLayoutChangeCallback;
+    std::function<void(std::string)> onContentSizeCategoryChangeCallback;
     std::function<void()> onPluginChangeCallback;
 
     int screenWidth;
     int screenHeight;
     std::string colorScheme;
+    std::string contentSizeCategory;
 
 public:
     UnistylesRuntime(
         int screenWidth,
         int screenHeight,
-        std::string colorScheme
-    ): screenWidth(screenWidth), screenHeight(screenHeight), colorScheme(colorScheme) {}
+        std::string colorScheme,
+        std::string contentSizeCategory
+    ): screenWidth(screenWidth), screenHeight(screenHeight), colorScheme(colorScheme), contentSizeCategory(contentSizeCategory) {}
 
     bool hasAdaptiveThemes;
     bool supportsAutomaticColorScheme;
@@ -53,6 +56,10 @@ public:
     void onPluginChange(std::function<void()> callback) {
         this->onPluginChangeCallback = callback;
     }
+    
+    void onContentSizeCategoryChange(std::function<void(std::string)> callback) {
+        this->onContentSizeCategoryChangeCallback = callback;
+    }
 
     jsi::Value get(jsi::Runtime&, const jsi::PropNameID& name) override;
     void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
@@ -60,6 +67,7 @@ public:
 
     void handleScreenSizeChange(int width, int height);
     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);

package/ios/UnistylesHelpers.h

@@ -1,4 +1,5 @@
 #include <string>
 
 std::string getColorScheme();
+std::string getContentSizeCategory(UIContentSizeCategory contentSizeCategory);
 NSString* cxxStringToNSString(std::string);

package/ios/UnistylesHelpers.mm

@@ -15,6 +15,38 @@ std::string getColorScheme() {
     }
 }
 
+std::string getContentSizeCategory(UIContentSizeCategory contentSizeCategory) {
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryExtraExtraExtraLarge]) {
+        return std::string([@"xxxLarge" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryExtraExtraLarge]) {
+        return std::string([@"xxLarge" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryExtraLarge]) {
+        return std::string([@"xLarge" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryLarge]) {
+        return std::string([@"Large" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryMedium]) {
+        return std::string([@"Medium" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategorySmall]) {
+        return std::string([@"Small" UTF8String]);
+    }
+    
+    if ([contentSizeCategory isEqualToString:UIContentSizeCategoryExtraSmall]) {
+        return std::string([@"xSmall" UTF8String]);
+    }
+    
+    return std::string([@"unspecified" UTF8String]);
+}
+
 NSString* cxxStringToNSString(std::string cxxString) {
     return [NSString stringWithUTF8String:cxxString.c_str()];
 }

package/ios/UnistylesModule.mm

@@ -24,6 +24,10 @@ RCT_EXPORT_MODULE(Unistyles)
                                                  selector:@selector(appearanceChanged:)
                                                      name:RCTUserInterfaceStyleDidChangeNotification
                                                    object:nil];
+        [[NSNotificationCenter defaultCenter] addObserver:self
+                                                 selector:@selector(contentSizeCategoryDidChange:)
+                                                     name:UIContentSizeCategoryDidChangeNotification
+                                                   object:nil];
     }
 
     return self;
@@ -34,7 +38,15 @@ RCT_EXPORT_MODULE(Unistyles)
         self.unistylesRuntime = nullptr;
     }
 
-    [[NSNotificationCenter defaultCenter] removeObserver:self];
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                          name: UIContentSizeCategoryDidChangeNotification
+                                          object: nil];
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                          name: RCTUserInterfaceStyleDidChangeNotification
+                                          object: nil];
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                          name: UIDeviceOrientationDidChangeNotification
+                                          object: nil];
 }
 
 
@@ -63,6 +75,14 @@ RCT_EXPORT_MODULE(Unistyles)
     }
 }
 
+- (void)contentSizeCategoryDidChange:(NSNotification *)notification {
+    UIContentSizeCategory contentSizeCategory = [[UIApplication sharedApplication] preferredContentSizeCategory];
+
+    if (self.unistylesRuntime != nullptr) {
+        ((UnistylesRuntime*)self.unistylesRuntime)->handleContentSizeCategoryChange(getContentSizeCategory(contentSizeCategory));
+    }
+}
+
 #pragma mark - Event emitter
 - (NSArray<NSString *> *)supportedEvents {
     return @[@"__unistylesOnChange"];
@@ -112,11 +132,17 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
     CGFloat initialScreenWidth = [UIScreen mainScreen].bounds.size.width;
     CGFloat initialScreenHeight = [UIScreen mainScreen].bounds.size.height;
     std::string initialColorScheme = getColorScheme();
+    __block UIContentSizeCategory contentSizeCategory;
+    
+    dispatch_sync(dispatch_get_main_queue(), ^{
+        contentSizeCategory = [[UIApplication sharedApplication] preferredContentSizeCategory];
+    });
 
     auto unistylesRuntime = std::make_shared<UnistylesRuntime>(
         (int)initialScreenWidth,
         (int)initialScreenHeight,
-        initialColorScheme
+        initialColorScheme,
+        getContentSizeCategory(contentSizeCategory)
     );
 
     unistylesRuntime.get()->onThemeChange([=](std::string theme) {
@@ -155,6 +181,17 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
             [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
         });
     });
+    
+    unistylesRuntime.get()->onContentSizeCategoryChange([=](std::string contentSizeCategory) {
+        NSDictionary *body = @{
+            @"type": @"dynamicTypeSize",
+            @"payload": @{
+                @"contentSizeCategory": cxxStringToNSString(contentSizeCategory)
+            }
+        };
+
+        [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
+    });
 
     weakSelf.unistylesRuntime = unistylesRuntime.get();
 

package/lib/commonjs/common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.warn = exports.isWeb = exports.isServer = exports.isMobile = exports.isIOS = exports.isAndroid = exports.UnistylesEventType = exports.UnistylesError = exports.ScreenOrientation = void 0;
+exports.warn = exports.isWeb = exports.isServer = exports.isMobile = exports.isIOS = exports.isAndroid = exports.UnistylesEventType = exports.UnistylesError = exports.ScreenOrientation = exports.IOSContentSizeCategory = exports.AndroidContentSizeCategory = void 0;
 var _reactNative = require("react-native");
 const warn = message => {
   console.warn(`🦄 [react-native-unistyles]: ${message}`);
@@ -18,10 +18,30 @@ const ScreenOrientation = exports.ScreenOrientation = {
   Landscape: 'landscape',
   Portrait: 'portrait'
 };
+let IOSContentSizeCategory = exports.IOSContentSizeCategory = /*#__PURE__*/function (IOSContentSizeCategory) {
+  IOSContentSizeCategory["ExtraExtraExtraLarge"] = "xxxLarge";
+  IOSContentSizeCategory["ExtraExtraLarge"] = "xxLarge";
+  IOSContentSizeCategory["ExtraLarge"] = "xLarge";
+  IOSContentSizeCategory["Large"] = "Large";
+  IOSContentSizeCategory["Medium"] = "Medium";
+  IOSContentSizeCategory["Small"] = "Small";
+  IOSContentSizeCategory["ExtraSmall"] = "xSmall";
+  IOSContentSizeCategory["Unspecified"] = "unspecified";
+  return IOSContentSizeCategory;
+}({});
+let AndroidContentSizeCategory = exports.AndroidContentSizeCategory = /*#__PURE__*/function (AndroidContentSizeCategory) {
+  AndroidContentSizeCategory["Small"] = "Small";
+  AndroidContentSizeCategory["Default"] = "Default";
+  AndroidContentSizeCategory["Large"] = "Large";
+  AndroidContentSizeCategory["ExtraLarge"] = "ExtraLarge";
+  AndroidContentSizeCategory["Huge"] = "Huge";
+  return AndroidContentSizeCategory;
+}({});
 let UnistylesEventType = exports.UnistylesEventType = /*#__PURE__*/function (UnistylesEventType) {
   UnistylesEventType["Theme"] = "theme";
   UnistylesEventType["Layout"] = "layout";
   UnistylesEventType["Plugin"] = "plugin";
+  UnistylesEventType["DynamicTypeSize"] = "dynamicTypeSize";
   return UnistylesEventType;
 }({});
 let UnistylesError = exports.UnistylesError = /*#__PURE__*/function (UnistylesError) {

package/lib/commonjs/common.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","warn","message","console","exports","isWeb","Platform","OS","isIOS","isAndroid","isMobile","isServer","window","ScreenOrientation","Landscape","Portrait","UnistylesEventType","UnistylesError"],"sourceRoot":"../../src","sources":["common.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,IAAI,GAAIC,OAAe,IAAK;EACrCC,OAAO,CAACF,IAAI,CAAE,gCAA+BC,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA;AAEM,MAAMI,KAAK,GAAAD,OAAA,CAAAC,KAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAMC,KAAK,GAAAJ,OAAA,CAAAI,KAAA,GAAGF,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAME,SAAS,GAAAL,OAAA,CAAAK,SAAA,GAAGH,qBAAQ,CAACC,EAAE,KAAK,SAAS;AAC3C,MAAMG,QAAQ,GAAAN,OAAA,CAAAM,QAAA,GAAGF,KAAK,IAAIC,SAAS;AACnC,MAAME,QAAQ,GAAAP,OAAA,CAAAO,QAAA,GAAG,OAAOC,MAAM,KAAK,WAAW;AAE9C,MAAMC,iBAAiB,GAAAT,OAAA,CAAAS,iBAAA,GAAG;EAC7BC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU;AAAA,IAEEC,kBAAkB,GAAAZ,OAAA,CAAAY,kBAAA,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA;AAAA,IAMlBC,cAAc,GAAAb,OAAA,CAAAa,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
+{"version":3,"names":["_reactNative","require","warn","message","console","exports","isWeb","Platform","OS","isIOS","isAndroid","isMobile","isServer","window","ScreenOrientation","Landscape","Portrait","IOSContentSizeCategory","AndroidContentSizeCategory","UnistylesEventType","UnistylesError"],"sourceRoot":"../../src","sources":["common.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,IAAI,GAAIC,OAAe,IAAK;EACrCC,OAAO,CAACF,IAAI,CAAE,gCAA+BC,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA;AAEM,MAAMI,KAAK,GAAAD,OAAA,CAAAC,KAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAMC,KAAK,GAAAJ,OAAA,CAAAI,KAAA,GAAGF,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAME,SAAS,GAAAL,OAAA,CAAAK,SAAA,GAAGH,qBAAQ,CAACC,EAAE,KAAK,SAAS;AAC3C,MAAMG,QAAQ,GAAAN,OAAA,CAAAM,QAAA,GAAGF,KAAK,IAAIC,SAAS;AACnC,MAAME,QAAQ,GAAAP,OAAA,CAAAO,QAAA,GAAG,OAAOC,MAAM,KAAK,WAAW;AAE9C,MAAMC,iBAAiB,GAAAT,OAAA,CAAAS,iBAAA,GAAG;EAC7BC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU;AAAA,IAEEC,sBAAsB,GAAAZ,OAAA,CAAAY,sBAAA,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IAWtBC,0BAA0B,GAAAb,OAAA,CAAAa,0BAAA,0BAA1BA,0BAA0B;EAA1BA,0BAA0B;EAA1BA,0BAA0B;EAA1BA,0BAA0B;EAA1BA,0BAA0B;EAA1BA,0BAA0B;EAAA,OAA1BA,0BAA0B;AAAA;AAAA,IAQ1BC,kBAAkB,GAAAd,OAAA,CAAAc,kBAAA,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA;AAAA,IAOlBC,cAAc,GAAAf,OAAA,CAAAe,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}

package/lib/commonjs/core/UnistyleRegistry.js

@@ -67,35 +67,25 @@ class UnistyleRegistry {
     }
     throw new Error(_common.UnistylesError.ThemeNotSelected);
   };
-  addPlugin = (() => {
-    var _this = this;
-    return function (plugin) {
-      let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      if (plugin.name.startsWith('__unistyles')) {
-        throw new Error(_common.UnistylesError.InvalidPluginName);
-      }
-      if (_this.plugins.some(_ref => {
-        let {
-          name
-        } = _ref;
-        return name === plugin.name;
-      })) {
-        throw new Error(_common.UnistylesError.DuplicatePluginName);
-      }
-      _this.plugins = [plugin].concat(_this.plugins);
-      _this.unistylesBridge.addPlugin(plugin.name, notify);
-    };
-  })();
+  addPlugin = (plugin, notify = true) => {
+    if (plugin.name.startsWith('__unistyles')) {
+      throw new Error(_common.UnistylesError.InvalidPluginName);
+    }
+    if (this.plugins.some(({
+      name
+    }) => name === plugin.name)) {
+      throw new Error(_common.UnistylesError.DuplicatePluginName);
+    }
+    this.plugins = [plugin].concat(this.plugins);
+    this.unistylesBridge.addPlugin(plugin.name, notify);
+  };
   removePlugin = plugin => {
     if (plugin.name.startsWith('__unistyles')) {
       throw new Error(_common.UnistylesError.CantRemoveInternalPlugin);
     }
-    this.plugins = this.plugins.filter(_ref2 => {
-      let {
-        name
-      } = _ref2;
-      return name !== plugin.name;
-    });
+    this.plugins = this.plugins.filter(({
+      name
+    }) => name !== plugin.name);
     this.unistylesBridge.removePlugin(plugin.name);
   };
   hasTheme = name => name in this.themes;

package/lib/commonjs/core/UnistyleRegistry.js.map

@@ -1 +1 @@
-{"version":3,"names":["_common","require","_plugins","UnistyleRegistry","config","plugins","isWeb","normalizeWebStylesPlugin","themeNames","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","keys","Object","addBreakpoints","addConfig","useBreakpoints","adaptiveThemes","useAdaptiveThemes","forEach","plugin","addPlugin","initialTheme","useTheme","experimentalCSSMediaQueries","cssMediaQueriesPlugin","concat","name","getTheme","forName","length","hasTheme","themeName","Error","UnistylesError","ThemeNotFound","ThemeNotSelected","_this","notify","arguments","undefined","startsWith","InvalidPluginName","some","_ref","DuplicatePluginName","removePlugin","CantRemoveInternalPlugin","filter","_ref2","exports"],"sourceRoot":"../../../src","sources":["core/UnistyleRegistry.ts"],"mappings":"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"}
+{"version":3,"names":["_common","require","_plugins","UnistyleRegistry","config","plugins","isWeb","normalizeWebStylesPlugin","themeNames","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","keys","Object","addBreakpoints","addConfig","useBreakpoints","adaptiveThemes","useAdaptiveThemes","forEach","plugin","addPlugin","initialTheme","useTheme","experimentalCSSMediaQueries","cssMediaQueriesPlugin","concat","name","getTheme","forName","length","hasTheme","themeName","Error","UnistylesError","ThemeNotFound","ThemeNotSelected","notify","startsWith","InvalidPluginName","some","DuplicatePluginName","removePlugin","CantRemoveInternalPlugin","filter","exports"],"sourceRoot":"../../../src","sources":["core/UnistyleRegistry.ts"],"mappings":"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"}

package/lib/commonjs/core/UnistylesModule.js

@@ -3,7 +3,195 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnistylesModule = void 0;
+exports.UnistylesModule = exports.UnistylesBridgeWeb = void 0;
 var _reactNative = require("react-native");
-const UnistylesModule = exports.UnistylesModule = _reactNative.NativeModules?.Unistyles;
+var _plugins = require("../plugins");
+var _common = require("../common");
+class UnistylesBridgeWeb {
+  #timerRef = undefined;
+  #hasAdaptiveThemes = false;
+  #supportsAutomaticColorScheme = false;
+  #screenWidth = _common.isServer ? undefined : window.innerWidth;
+  #screenHeight = _common.isServer ? undefined : window.innerHeight;
+  #themes = [];
+  #breakpoints = {};
+  #colorScheme = this.getPreferredColorScheme();
+  #themeName = '';
+  #enabledPlugins = [_plugins.normalizeWebStylesPlugin.name];
+  #unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
+  #sortedBreakpointPairs = [];
+  #breakpoint = '';
+  #contentSizeCategory = 'unspecified';
+  constructor() {
+    if (!_common.isServer) {
+      this.setupListeners();
+      this.#screenWidth = window.innerWidth;
+      this.#screenHeight = window.innerHeight;
+    }
+  }
+  install() {
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    globalThis.__UNISTYLES__ = new Proxy({}, {
+      get: (_target, prop) => {
+        switch (prop) {
+          case 'themeName':
+            return this.getTheme();
+          case 'screenWidth':
+            return this.#screenWidth;
+          case 'screenHeight':
+            return this.#screenHeight;
+          case 'contentSizeCategory':
+            return this.#contentSizeCategory;
+          case 'breakpoint':
+            return this.#breakpoint || undefined;
+          case 'breakpoints':
+            return this.#breakpoints;
+          case 'hasAdaptiveThemes':
+            return this.#hasAdaptiveThemes;
+          case 'sortedBreakpointPairs':
+            return this.#sortedBreakpointPairs;
+          case 'enabledPlugins':
+            return this.#enabledPlugins;
+          case 'colorScheme':
+            return this.#colorScheme;
+          case 'useTheme':
+            return themeName => this.useTheme(themeName);
+          case 'useBreakpoints':
+            return breakpoints => this.useBreakpoints(breakpoints);
+          case 'useAdaptiveThemes':
+            return enable => this.useAdaptiveThemes(enable);
+          case 'addPlugin':
+            return (pluginName, notify) => this.addPlugin(pluginName, notify);
+          case 'removePlugin':
+            return pluginName => this.removePlugin(pluginName);
+          default:
+            return Reflect.get(this, prop);
+        }
+      },
+      set: (target, prop, newValue, receiver) => {
+        switch (prop) {
+          case 'themes':
+            {
+              this.#themes = newValue;
+              this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark');
+              return true;
+            }
+          case 'themeName':
+            {
+              this.#themeName = newValue;
+              this.emitThemeChange();
+              return true;
+            }
+          default:
+            return Reflect.set(target, prop, newValue, receiver);
+        }
+      }
+    });
+    return true;
+  }
+  useTheme(themeName) {
+    this.#themeName = themeName;
+    this.emitThemeChange();
+  }
+  useBreakpoints(breakpoints) {
+    this.#breakpoints = breakpoints;
+    this.#sortedBreakpointPairs = Object.entries(breakpoints).sort(([, a], [, b]) => (a ?? 0) - (b ?? 0));
+    if (!_common.isServer) {
+      this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
+    }
+  }
+  useAdaptiveThemes(enable) {
+    this.#hasAdaptiveThemes = enable;
+    if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
+      return;
+    }
+    if (this.#themeName !== this.#colorScheme) {
+      this.#themeName = this.#colorScheme;
+      this.emitThemeChange();
+    }
+  }
+  addPlugin(pluginName, notify) {
+    this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
+    if (notify) {
+      this.emitPluginChange();
+    }
+  }
+  removePlugin(pluginName) {
+    this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName);
+    this.emitPluginChange();
+  }
+  getTheme() {
+    if (this.#themes.length === 1) {
+      return this.#themes.at(0);
+    }
+    return this.#themeName;
+  }
+  setupListeners() {
+    window.addEventListener('resize', () => {
+      clearTimeout(this.#timerRef);
+      this.#timerRef = setTimeout(() => {
+        this.#screenWidth = window.innerWidth;
+        this.#screenHeight = window.innerHeight;
+        this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
+        this.emitLayoutChange();
+      }, 100);
+    });
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      this.#colorScheme = event.matches ? 'dark' : 'light';
+      if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
+        return;
+      }
+      if (this.#colorScheme !== this.#themeName) {
+        this.#themeName = this.#colorScheme;
+        this.emitThemeChange();
+      }
+    });
+  }
+  getBreakpointFromScreenWidth(width) {
+    const breakpoint = this.#sortedBreakpointPairs.find(([, value], index, otherBreakpoints) => {
+      const minVal = value;
+      const maxVal = otherBreakpoints[index + 1]?.[1];
+      if (!maxVal) {
+        return true;
+      }
+      return width >= minVal && width < maxVal;
+    });
+    return breakpoint?.at(0);
+  }
+  getPreferredColorScheme() {
+    if (!_common.isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  emitPluginChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'plugin'
+    });
+  }
+  emitThemeChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'theme',
+      payload: {
+        themeName: this.#themeName
+      }
+    });
+  }
+  emitLayoutChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'layout',
+      payload: {
+        breakpoint: this.#breakpoint,
+        orientation: this.#screenWidth > this.#screenHeight ? 'landscape' : 'portrait',
+        screen: {
+          width: this.#screenWidth,
+          height: this.#screenHeight
+        }
+      }
+    });
+  }
+}
+exports.UnistylesBridgeWeb = UnistylesBridgeWeb;
+const UnistylesModule = exports.UnistylesModule = new UnistylesBridgeWeb();
 //# sourceMappingURL=UnistylesModule.js.map