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

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

@@ -117,7 +117,7 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
 
         reactApplicationContext
             .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("onChange", body)
+            .emit("__unistylesOnChange", body)
     }
 
     private fun onThemeChange(themeName: String) {
@@ -130,7 +130,7 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
 
         reactApplicationContext
             .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("onChange", body)
+            .emit("__unistylesOnChange", body)
     }
 
     private fun onPluginChange() {
@@ -140,7 +140,7 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
 
         reactApplicationContext
             .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("onChange", body)
+            .emit("__unistylesOnChange", body)
     }
 
     @ReactMethod

package/ios/UnistylesModule.mm

@@ -65,7 +65,7 @@ RCT_EXPORT_MODULE(Unistyles)
 
 #pragma mark - Event emitter
 - (NSArray<NSString *> *)supportedEvents {
-    return @[@"onChange"];
+    return @[@"__unistylesOnChange"];
 }
 
 - (void)startObserving {
@@ -78,7 +78,7 @@ RCT_EXPORT_MODULE(Unistyles)
 
 - (void)emitEvent:(NSString *)eventName withBody:(NSDictionary *)body {
     if (self.hasListeners) {
-        [self sendEventWithName:@"onChange" body:body];
+        [self sendEventWithName:@"__unistylesOnChange" body:body];
     }
 }
 
@@ -127,7 +127,7 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
             }
         };
 
-        [weakSelf emitEvent:@"onChange" withBody:body];
+        [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
     });
 
     unistylesRuntime.get()->onLayoutChange([=](std::string breakpoint, std::string orientation, int width, int height) {
@@ -143,7 +143,7 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
             }
         };
 
-        [weakSelf emitEvent:@"onChange" withBody:body];
+        [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
     });
     
     unistylesRuntime.get()->onPluginChange([=]() {
@@ -152,7 +152,7 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
         };
 
         dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
-            [weakSelf emitEvent:@"onChange" withBody:body];
+            [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
         });
     });
 

package/lib/commonjs/core/Unistyles.js

@@ -16,7 +16,7 @@ class Unistyles {
     }
 
     // @ts-ignore
-    this._bridge = global.__UNISTYLES__;
+    this._bridge = (_common.isWeb ? window : global).__UNISTYLES__;
     this._registry = new _UnistyleRegistry.UnistyleRegistry(this._bridge);
     this._runtime = new _UnistylesRuntime.UnistylesRuntime(this._bridge, this._registry);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistyleRegistry","_common","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","registry","runtime","unistyles","exports"],"sourceRoot":"../../../src","sources":["core/Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,SAAS,CAAC;EAKZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,sBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACJ,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;EACtE;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACJ,SAAS;EACzB;EAEA,IAAWK,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACH,QAAQ;EACxB;AACJ;AAEO,MAAMI,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAIjB,SAAS,CAAC,CAAC"}
+{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistyleRegistry","_common","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","isWeb","window","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","registry","runtime","unistyles","exports"],"sourceRoot":"../../../src","sources":["core/Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,SAAS,CAAC;EAKZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,sBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAG,CAACC,aAAK,GAAGC,MAAM,GAAGC,MAAM,EAAEC,aAAgC;IACzE,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,CAAC;IACnD,IAAI,CAACO,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACR,OAAO,EAAE,IAAI,CAACK,SAAS,CAAC;EACtE;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACJ,SAAS;EACzB;EAEA,IAAWK,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACH,QAAQ;EACxB;AACJ;AAEO,MAAMI,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAInB,SAAS,CAAC,CAAC"}

package/lib/commonjs/core/UnistylesModule.web.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnistylesModule = exports.UnistylesBridgeWeb = void 0;
+var _reactNative = require("react-native");
+var _plugins = require("../plugins");
+class UnistylesBridgeWeb {
+  #timerRef = undefined;
+  #hasAdaptiveThemes = false;
+  #supportsAutomaticColorScheme = false;
+  #screenWidth = window.innerWidth;
+  #screenHeight = window.innerHeight;
+  #themes = [];
+  #colorScheme = this.getPreferredColorScheme();
+  #themeName = '';
+  #enabledPlugins = [_plugins.normalizeWebStylesPlugin.name];
+  #unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
+  #sortedBreakpointPairs = [];
+  #breakpoint = '';
+  constructor() {
+    this.setupListeners();
+  }
+  install() {
+    // @ts-ignore
+    window.__UNISTYLES__ = new Proxy({}, {
+      get: (_target, prop) => {
+        switch (prop) {
+          case 'themeName':
+            return this.getTheme();
+          case 'screenWidth':
+            return this.#screenWidth;
+          case 'screenHeight':
+            return this.#screenHeight;
+          case 'breakpoint':
+            return this.#breakpoint || undefined;
+          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.#sortedBreakpointPairs = Object.entries(breakpoints).sort((_ref, _ref2) => {
+      let [, a] = _ref;
+      let [, b] = _ref2;
+      return (a ?? 0) - (b ?? 0);
+    });
+    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((_ref3, index, otherBreakpoints) => {
+      let [, value] = _ref3;
+      const minVal = value;
+      const maxVal = otherBreakpoints[index + 1]?.[1];
+      if (!maxVal) {
+        return true;
+      }
+      return width >= minVal && width < maxVal;
+    });
+    return breakpoint?.at(0);
+  }
+  getPreferredColorScheme() {
+    if (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.web.js.map

package/lib/commonjs/core/UnistylesModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_plugins","UnistylesBridgeWeb","timerRef","undefined","hasAdaptiveThemes","supportsAutomaticColorScheme","screenWidth","window","innerWidth","screenHeight","innerHeight","themes","colorScheme","getPreferredColorScheme","themeName","enabledPlugins","normalizeWebStylesPlugin","name","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","sortedBreakpointPairs","breakpoint","constructor","setupListeners","install","__UNISTYLES__","Proxy","get","_target","prop","getTheme","useTheme","breakpoints","useBreakpoints","enable","useAdaptiveThemes","pluginName","notify","addPlugin","removePlugin","Reflect","set","target","newValue","receiver","includes","emitThemeChange","Object","entries","sort","_ref","_ref2","a","b","getBreakpointFromScreenWidth","concat","emitPluginChange","filter","length","at","addEventListener","clearTimeout","setTimeout","emitLayoutChange","matchMedia","event","matches","width","find","_ref3","index","otherBreakpoints","value","minVal","maxVal","emit","type","payload","orientation","screen","height","exports","UnistylesModule"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.web.ts"],"mappings":"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"}

package/lib/commonjs/hooks/useUnistyles.js

@@ -21,7 +21,7 @@ const useUnistyles = () => {
     }
   });
   (0, _react.useEffect)(() => {
-    const subscription = unistylesEvents.addListener('onChange', event => {
+    const subscription = unistylesEvents.addListener('__unistylesOnChange', event => {
       switch (event.type) {
         case _common.UnistylesEventType.Theme:
           {

package/lib/commonjs/hooks/useUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_core","_common","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","plugins","setPlugins","useState","unistyles","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screenSize","width","screen","height","useEffect","subscription","addListener","event","type","UnistylesEventType","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove","exports"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAGA,MAAMI,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAACC,eAAS,CAACC,OAAO,CAACC,cAAc,CAAC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAL,eAAQ,EAACC,eAAS,CAACK,QAAQ,CAACC,QAAQ,CAACN,eAAS,CAACC,OAAO,CAACM,SAAS,CAAC,CAAC;EAC5F,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAV,eAAQ,EAAC;IACjCW,UAAU,EAAEV,eAAS,CAACC,OAAO,CAACS,UAAU;IACxCC,WAAW,EAAEX,eAAS,CAACC,OAAO,CAACU,WAAW;IAC1CC,UAAU,EAAE;MACRC,KAAK,EAAEb,eAAS,CAACC,OAAO,CAACa,MAAM,CAACD,KAAK;MACrCE,MAAM,EAAEf,eAAS,CAACC,OAAO,CAACa,MAAM,CAACC;IACrC;EACJ,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGzB,eAAe,CAAC0B,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,0BAAkB,CAACC,KAAK;UAAE;YAC3B,MAAMC,UAAU,GAAGJ,KAA4B;YAE/C,OAAOf,QAAQ,CAACJ,eAAS,CAACK,QAAQ,CAACC,QAAQ,CAACiB,UAAU,CAACC,OAAO,CAACjB,SAAS,CAAC,CAAC;UAC9E;QACA,KAAKc,0BAAkB,CAACI,MAAM;UAAE;YAC5B,MAAMC,WAAW,GAAGP,KAAmC;YAEvD,OAAOV,SAAS,CAAC;cACbC,UAAU,EAAEgB,WAAW,CAACF,OAAO,CAACd,UAAU;cAC1CC,WAAW,EAAEe,WAAW,CAACF,OAAO,CAACb,WAAW;cAC5CC,UAAU,EAAEc,WAAW,CAACF,OAAO,CAACV;YACpC,CAAC,CAAC;UACN;QACA,KAAKO,0BAAkB,CAACM,MAAM;UAAE;YAC5B,OAAO7B,UAAU,CAACE,eAAS,CAACC,OAAO,CAACC,cAAc,CAAC;UACvD;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOe,YAAY,CAACW,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH/B,OAAO;IACPM,KAAK;IACLK;EACJ,CAAC;AACL,CAAC;AAAAqB,OAAA,CAAAjC,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["_reactNative","require","_react","_core","_common","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","plugins","setPlugins","useState","unistyles","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screenSize","width","screen","height","useEffect","subscription","addListener","event","type","UnistylesEventType","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove","exports"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAGA,MAAMI,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAACC,eAAS,CAACC,OAAO,CAACC,cAAc,CAAC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAL,eAAQ,EAACC,eAAS,CAACK,QAAQ,CAACC,QAAQ,CAACN,eAAS,CAACC,OAAO,CAACM,SAAS,CAAC,CAAC;EAC5F,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAV,eAAQ,EAAC;IACjCW,UAAU,EAAEV,eAAS,CAACC,OAAO,CAACS,UAAU;IACxCC,WAAW,EAAEX,eAAS,CAACC,OAAO,CAACU,WAAW;IAC1CC,UAAU,EAAE;MACRC,KAAK,EAAEb,eAAS,CAACC,OAAO,CAACa,MAAM,CAACD,KAAK;MACrCE,MAAM,EAAEf,eAAS,CAACC,OAAO,CAACa,MAAM,CAACC;IACrC;EACJ,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGzB,eAAe,CAAC0B,WAAW,CAC5C,qBAAqB,EACpBC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,0BAAkB,CAACC,KAAK;UAAE;YAC3B,MAAMC,UAAU,GAAGJ,KAA4B;YAE/C,OAAOf,QAAQ,CAACJ,eAAS,CAACK,QAAQ,CAACC,QAAQ,CAACiB,UAAU,CAACC,OAAO,CAACjB,SAAS,CAAC,CAAC;UAC9E;QACA,KAAKc,0BAAkB,CAACI,MAAM;UAAE;YAC5B,MAAMC,WAAW,GAAGP,KAAmC;YAEvD,OAAOV,SAAS,CAAC;cACbC,UAAU,EAAEgB,WAAW,CAACF,OAAO,CAACd,UAAU;cAC1CC,WAAW,EAAEe,WAAW,CAACF,OAAO,CAACb,WAAW;cAC5CC,UAAU,EAAEc,WAAW,CAACF,OAAO,CAACV;YACpC,CAAC,CAAC;UACN;QACA,KAAKO,0BAAkB,CAACM,MAAM;UAAE;YAC5B,OAAO7B,UAAU,CAACE,eAAS,CAACC,OAAO,CAACC,cAAc,CAAC;UACvD;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOe,YAAY,CAACW,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH/B,OAAO;IACPM,KAAK;IACLK;EACJ,CAAC;AACL,CAAC;AAAAqB,OAAA,CAAAjC,YAAA,GAAAA,YAAA"}

package/lib/commonjs/utils/withPlugins.js

@@ -7,7 +7,7 @@ exports.withPlugins = void 0;
 var _core = require("../core");
 const withPlugins = (key, style) => _core.unistyles.registry.plugins.reduce((acc, plugin) => {
   if (plugin.onParsedStyle) {
-    return plugin.onParsedStyle(key, style, _core.unistyles.runtime);
+    return plugin.onParsedStyle(key, acc, _core.unistyles.runtime);
   }
   return acc;
 }, style);

package/lib/commonjs/utils/withPlugins.js.map

@@ -1 +1 @@
-{"version":3,"names":["_core","require","withPlugins","key","style","unistyles","registry","plugins","reduce","acc","plugin","onParsedStyle","runtime","exports"],"sourceRoot":"../../../src","sources":["utils/withPlugins.ts"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEO,MAAMC,WAAW,GAAGA,CACvBC,GAAW,EACXC,KAAc,KACbC,eAAS,CAACC,QAAQ,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;EACpD,IAAIA,MAAM,CAACC,aAAa,EAAE;IACtB,OAAOD,MAAM,CAACC,aAAa,CAACR,GAAG,EAAEC,KAAK,EAAEC,eAAS,CAACO,OAAO,CAAC;EAC9D;EAEA,OAAOH,GAAG;AACd,CAAC,EAAEL,KAAK,CAAC;AAAAS,OAAA,CAAAX,WAAA,GAAAA,WAAA"}
+{"version":3,"names":["_core","require","withPlugins","key","style","unistyles","registry","plugins","reduce","acc","plugin","onParsedStyle","runtime","exports"],"sourceRoot":"../../../src","sources":["utils/withPlugins.ts"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEO,MAAMC,WAAW,GAAGA,CACvBC,GAAW,EACXC,KAAc,KACbC,eAAS,CAACC,QAAQ,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;EACpD,IAAIA,MAAM,CAACC,aAAa,EAAE;IACtB,OAAOD,MAAM,CAACC,aAAa,CAACR,GAAG,EAAEM,GAAG,EAAEJ,eAAS,CAACO,OAAO,CAAC;EAC5D;EAEA,OAAOH,GAAG;AACd,CAAC,EAAEL,KAAK,CAAC;AAAAS,OAAA,CAAAX,WAAA,GAAAA,WAAA"}

package/lib/module/core/Unistyles.js

@@ -1,7 +1,7 @@
 import { UnistylesModule } from './UnistylesModule';
 import { UnistylesRuntime } from './UnistylesRuntime';
 import { UnistyleRegistry } from './UnistyleRegistry';
-import { UnistylesError } from '../common';
+import { UnistylesError, isWeb } from '../common';
 class Unistyles {
   constructor() {
     const isInstalled = UnistylesModule?.install() ?? false;
@@ -10,7 +10,7 @@ class Unistyles {
     }
 
     // @ts-ignore
-    this._bridge = global.__UNISTYLES__;
+    this._bridge = (isWeb ? window : global).__UNISTYLES__;
     this._registry = new UnistyleRegistry(this._bridge);
     this._runtime = new UnistylesRuntime(this._bridge, this._registry);
   }

package/lib/module/core/Unistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["UnistylesModule","UnistylesRuntime","UnistyleRegistry","UnistylesError","Unistyles","constructor","isInstalled","install","Error","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","_runtime","registry","runtime","unistyles"],"sourceRoot":"../../../src","sources":["core/Unistyles.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,SAASC,cAAc,QAAQ,WAAW;AAE1C,MAAMC,SAAS,CAAC;EAKZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGN,eAAe,EAAEO,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACD,WAAW,EAAE;MACd,MAAM,IAAIE,KAAK,CAACL,cAAc,CAACM,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIX,gBAAgB,CAAC,IAAI,CAACQ,OAAO,CAAC;IACnD,IAAI,CAACI,QAAQ,GAAG,IAAIb,gBAAgB,CAAC,IAAI,CAACS,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;EACtE;EAEA,IAAWE,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACF,SAAS;EACzB;EAEA,IAAWG,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACF,QAAQ;EACxB;AACJ;AAEA,OAAO,MAAMG,SAAS,GAAG,IAAIb,SAAS,CAAC,CAAC"}
+{"version":3,"names":["UnistylesModule","UnistylesRuntime","UnistyleRegistry","UnistylesError","isWeb","Unistyles","constructor","isInstalled","install","Error","RuntimeUnavailable","_bridge","window","global","__UNISTYLES__","_registry","_runtime","registry","runtime","unistyles"],"sourceRoot":"../../../src","sources":["core/Unistyles.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,SAASC,cAAc,EAAEC,KAAK,QAAQ,WAAW;AAEjD,MAAMC,SAAS,CAAC;EAKZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGP,eAAe,EAAEQ,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACD,WAAW,EAAE;MACd,MAAM,IAAIE,KAAK,CAACN,cAAc,CAACO,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAG,CAACP,KAAK,GAAGQ,MAAM,GAAGC,MAAM,EAAEC,aAAgC;IACzE,IAAI,CAACC,SAAS,GAAG,IAAIb,gBAAgB,CAAC,IAAI,CAACS,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIf,gBAAgB,CAAC,IAAI,CAACU,OAAO,EAAE,IAAI,CAACI,SAAS,CAAC;EACtE;EAEA,IAAWE,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACF,SAAS;EACzB;EAEA,IAAWG,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACF,QAAQ;EACxB;AACJ;AAEA,OAAO,MAAMG,SAAS,GAAG,IAAId,SAAS,CAAC,CAAC"}

package/lib/module/core/UnistylesModule.web.js

@@ -0,0 +1,180 @@
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import { normalizeWebStylesPlugin } from '../plugins';
+export class UnistylesBridgeWeb {
+  #timerRef = undefined;
+  #hasAdaptiveThemes = false;
+  #supportsAutomaticColorScheme = false;
+  #screenWidth = window.innerWidth;
+  #screenHeight = window.innerHeight;
+  #themes = [];
+  #colorScheme = this.getPreferredColorScheme();
+  #themeName = '';
+  #enabledPlugins = [normalizeWebStylesPlugin.name];
+  #unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
+  #sortedBreakpointPairs = [];
+  #breakpoint = '';
+  constructor() {
+    this.setupListeners();
+  }
+  install() {
+    // @ts-ignore
+    window.__UNISTYLES__ = new Proxy({}, {
+      get: (_target, prop) => {
+        switch (prop) {
+          case 'themeName':
+            return this.getTheme();
+          case 'screenWidth':
+            return this.#screenWidth;
+          case 'screenHeight':
+            return this.#screenHeight;
+          case 'breakpoint':
+            return this.#breakpoint || undefined;
+          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.#sortedBreakpointPairs = Object.entries(breakpoints).sort((_ref, _ref2) => {
+      let [, a] = _ref;
+      let [, b] = _ref2;
+      return (a ?? 0) - (b ?? 0);
+    });
+    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((_ref3, index, otherBreakpoints) => {
+      let [, value] = _ref3;
+      const minVal = value;
+      const maxVal = otherBreakpoints[index + 1]?.[1];
+      if (!maxVal) {
+        return true;
+      }
+      return width >= minVal && width < maxVal;
+    });
+    return breakpoint?.at(0);
+  }
+  getPreferredColorScheme() {
+    if (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
+        }
+      }
+    });
+  }
+}
+export const UnistylesModule = new UnistylesBridgeWeb();
+//# sourceMappingURL=UnistylesModule.web.js.map

package/lib/module/core/UnistylesModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NativeEventEmitter","NativeModules","normalizeWebStylesPlugin","UnistylesBridgeWeb","timerRef","undefined","hasAdaptiveThemes","supportsAutomaticColorScheme","screenWidth","window","innerWidth","screenHeight","innerHeight","themes","colorScheme","getPreferredColorScheme","themeName","enabledPlugins","name","unistylesEvents","Unistyles","sortedBreakpointPairs","breakpoint","constructor","setupListeners","install","__UNISTYLES__","Proxy","get","_target","prop","getTheme","useTheme","breakpoints","useBreakpoints","enable","useAdaptiveThemes","pluginName","notify","addPlugin","removePlugin","Reflect","set","target","newValue","receiver","includes","emitThemeChange","Object","entries","sort","_ref","_ref2","a","b","getBreakpointFromScreenWidth","concat","emitPluginChange","filter","length","at","addEventListener","clearTimeout","setTimeout","emitLayoutChange","matchMedia","event","matches","width","find","_ref3","index","otherBreakpoints","value","minVal","maxVal","emit","type","payload","orientation","screen","height","UnistylesModule"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.web.ts"],"mappings":"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"}

package/lib/module/hooks/useUnistyles.js

@@ -15,7 +15,7 @@ export const useUnistyles = () => {
     }
   });
   useEffect(() => {
-    const subscription = unistylesEvents.addListener('onChange', event => {
+    const subscription = unistylesEvents.addListener('__unistylesOnChange', event => {
       switch (event.type) {
         case UnistylesEventType.Theme:
           {

package/lib/module/hooks/useUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","unistyles","UnistylesEventType","unistylesEvents","Unistyles","useUnistyles","plugins","setPlugins","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screenSize","width","screen","height","subscription","addListener","event","type","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,SAAS,QAAQ,SAAS;AACnC,SAASC,kBAAkB,QAAQ,WAAW;AAG9C,MAAMC,eAAe,GAAG,IAAIN,kBAAkB,CAACC,aAAa,CAACM,SAAS,CAAC;AAEvE,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGP,QAAQ,CAACC,SAAS,CAACO,OAAO,CAACC,cAAc,CAAC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACC,SAAS,CAACW,QAAQ,CAACC,QAAQ,CAACZ,SAAS,CAACO,OAAO,CAACM,SAAS,CAAC,CAAC;EAC5F,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC;IACjCiB,UAAU,EAAEhB,SAAS,CAACO,OAAO,CAACS,UAAU;IACxCC,WAAW,EAAEjB,SAAS,CAACO,OAAO,CAACU,WAAW;IAC1CC,UAAU,EAAE;MACRC,KAAK,EAAEnB,SAAS,CAACO,OAAO,CAACa,MAAM,CAACD,KAAK;MACrCE,MAAM,EAAErB,SAAS,CAACO,OAAO,CAACa,MAAM,CAACC;IACrC;EACJ,CAAC,CAAC;EAEFvB,SAAS,CAAC,MAAM;IACZ,MAAMwB,YAAY,GAAGpB,eAAe,CAACqB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKxB,kBAAkB,CAACyB,KAAK;UAAE;YAC3B,MAAMC,UAAU,GAAGH,KAA4B;YAE/C,OAAOd,QAAQ,CAACV,SAAS,CAACW,QAAQ,CAACC,QAAQ,CAACe,UAAU,CAACC,OAAO,CAACf,SAAS,CAAC,CAAC;UAC9E;QACA,KAAKZ,kBAAkB,CAAC4B,MAAM;UAAE;YAC5B,MAAMC,WAAW,GAAGN,KAAmC;YAEvD,OAAOT,SAAS,CAAC;cACbC,UAAU,EAAEc,WAAW,CAACF,OAAO,CAACZ,UAAU;cAC1CC,WAAW,EAAEa,WAAW,CAACF,OAAO,CAACX,WAAW;cAC5CC,UAAU,EAAEY,WAAW,CAACF,OAAO,CAACR;YACpC,CAAC,CAAC;UACN;QACA,KAAKnB,kBAAkB,CAAC8B,MAAM;UAAE;YAC5B,OAAOzB,UAAU,CAACN,SAAS,CAACO,OAAO,CAACC,cAAc,CAAC;UACvD;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOc,YAAY,CAACU,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH3B,OAAO;IACPI,KAAK;IACLK;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","unistyles","UnistylesEventType","unistylesEvents","Unistyles","useUnistyles","plugins","setPlugins","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screenSize","width","screen","height","subscription","addListener","event","type","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,SAAS,QAAQ,SAAS;AACnC,SAASC,kBAAkB,QAAQ,WAAW;AAG9C,MAAMC,eAAe,GAAG,IAAIN,kBAAkB,CAACC,aAAa,CAACM,SAAS,CAAC;AAEvE,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGP,QAAQ,CAACC,SAAS,CAACO,OAAO,CAACC,cAAc,CAAC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACC,SAAS,CAACW,QAAQ,CAACC,QAAQ,CAACZ,SAAS,CAACO,OAAO,CAACM,SAAS,CAAC,CAAC;EAC5F,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC;IACjCiB,UAAU,EAAEhB,SAAS,CAACO,OAAO,CAACS,UAAU;IACxCC,WAAW,EAAEjB,SAAS,CAACO,OAAO,CAACU,WAAW;IAC1CC,UAAU,EAAE;MACRC,KAAK,EAAEnB,SAAS,CAACO,OAAO,CAACa,MAAM,CAACD,KAAK;MACrCE,MAAM,EAAErB,SAAS,CAACO,OAAO,CAACa,MAAM,CAACC;IACrC;EACJ,CAAC,CAAC;EAEFvB,SAAS,CAAC,MAAM;IACZ,MAAMwB,YAAY,GAAGpB,eAAe,CAACqB,WAAW,CAC5C,qBAAqB,EACpBC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKxB,kBAAkB,CAACyB,KAAK;UAAE;YAC3B,MAAMC,UAAU,GAAGH,KAA4B;YAE/C,OAAOd,QAAQ,CAACV,SAAS,CAACW,QAAQ,CAACC,QAAQ,CAACe,UAAU,CAACC,OAAO,CAACf,SAAS,CAAC,CAAC;UAC9E;QACA,KAAKZ,kBAAkB,CAAC4B,MAAM;UAAE;YAC5B,MAAMC,WAAW,GAAGN,KAAmC;YAEvD,OAAOT,SAAS,CAAC;cACbC,UAAU,EAAEc,WAAW,CAACF,OAAO,CAACZ,UAAU;cAC1CC,WAAW,EAAEa,WAAW,CAACF,OAAO,CAACX,WAAW;cAC5CC,UAAU,EAAEY,WAAW,CAACF,OAAO,CAACR;YACpC,CAAC,CAAC;UACN;QACA,KAAKnB,kBAAkB,CAAC8B,MAAM;UAAE;YAC5B,OAAOzB,UAAU,CAACN,SAAS,CAACO,OAAO,CAACC,cAAc,CAAC;UACvD;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOc,YAAY,CAACU,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH3B,OAAO;IACPI,KAAK;IACLK;EACJ,CAAC;AACL,CAAC"}

package/lib/module/utils/withPlugins.js

@@ -1,7 +1,7 @@
 import { unistyles } from '../core';
 export const withPlugins = (key, style) => unistyles.registry.plugins.reduce((acc, plugin) => {
   if (plugin.onParsedStyle) {
-    return plugin.onParsedStyle(key, style, unistyles.runtime);
+    return plugin.onParsedStyle(key, acc, unistyles.runtime);
   }
   return acc;
 }, style);

package/lib/module/utils/withPlugins.js.map

@@ -1 +1 @@
-{"version":3,"names":["unistyles","withPlugins","key","style","registry","plugins","reduce","acc","plugin","onParsedStyle","runtime"],"sourceRoot":"../../../src","sources":["utils/withPlugins.ts"],"mappings":"AACA,SAASA,SAAS,QAAQ,SAAS;AAEnC,OAAO,MAAMC,WAAW,GAAGA,CACvBC,GAAW,EACXC,KAAc,KACbH,SAAS,CAACI,QAAQ,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;EACpD,IAAIA,MAAM,CAACC,aAAa,EAAE;IACtB,OAAOD,MAAM,CAACC,aAAa,CAACP,GAAG,EAAEC,KAAK,EAAEH,SAAS,CAACU,OAAO,CAAC;EAC9D;EAEA,OAAOH,GAAG;AACd,CAAC,EAAEJ,KAAK,CAAC"}
+{"version":3,"names":["unistyles","withPlugins","key","style","registry","plugins","reduce","acc","plugin","onParsedStyle","runtime"],"sourceRoot":"../../../src","sources":["utils/withPlugins.ts"],"mappings":"AACA,SAASA,SAAS,QAAQ,SAAS;AAEnC,OAAO,MAAMC,WAAW,GAAGA,CACvBC,GAAW,EACXC,KAAc,KACbH,SAAS,CAACI,QAAQ,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;EACpD,IAAIA,MAAM,CAACC,aAAa,EAAE;IACtB,OAAOD,MAAM,CAACC,aAAa,CAACP,GAAG,EAAEK,GAAG,EAAEP,SAAS,CAACU,OAAO,CAAC;EAC5D;EAEA,OAAOH,GAAG;AACd,CAAC,EAAEJ,KAAK,CAAC"}

package/lib/typescript/src/core/UnistylesModule.web.d.ts

@@ -0,0 +1,19 @@
+export declare class UnistylesBridgeWeb {
+    #private;
+    constructor();
+    install(): boolean;
+    private useTheme;
+    private useBreakpoints;
+    private useAdaptiveThemes;
+    private addPlugin;
+    private removePlugin;
+    private getTheme;
+    private setupListeners;
+    private getBreakpointFromScreenWidth;
+    private getPreferredColorScheme;
+    private emitPluginChange;
+    private emitThemeChange;
+    private emitLayoutChange;
+}
+export declare const UnistylesModule: UnistylesBridgeWeb;
+//# sourceMappingURL=UnistylesModule.web.d.ts.map

package/lib/typescript/src/core/UnistylesModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnistylesModule.web.d.ts","sourceRoot":"","sources":["../../../../src/core/UnistylesModule.web.ts"],"names":[],"mappings":"AAKA,qBAAa,kBAAkB;;;IAkBpB,OAAO;IA0Dd,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,4BAA4B;IAgBpC,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;CAe3B;AAED,eAAO,MAAM,eAAe,oBAA2B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/core/Unistyles.ts

@@ -2,7 +2,7 @@ import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from '../types'
-import { UnistylesError } from '../common'
+import { UnistylesError, isWeb } from '../common'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
@@ -17,7 +17,7 @@ class Unistyles {
         }
 
         // @ts-ignore
-        this._bridge = global.__UNISTYLES__ as UnistylesBridge
+        this._bridge = (isWeb ? window : global).__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
     }

package/src/core/UnistylesModule.web.ts

@@ -0,0 +1,214 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
+import type { ColorSchemeName } from '../types'
+import { normalizeWebStylesPlugin } from '../plugins'
+
+export class UnistylesBridgeWeb {
+    #timerRef?: ReturnType<typeof setTimeout> = undefined
+    #hasAdaptiveThemes: boolean = false
+    #supportsAutomaticColorScheme = false
+    #screenWidth: number = window.innerWidth
+    #screenHeight: number = window.innerHeight
+    #themes: Array<keyof UnistylesThemes> = []
+    #colorScheme: ColorSchemeName = this.getPreferredColorScheme()
+    #themeName: keyof UnistylesThemes = '' as keyof UnistylesThemes
+    #enabledPlugins: Array<string> = [normalizeWebStylesPlugin.name]
+    #unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+    #sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = []
+    #breakpoint: keyof UnistylesBreakpoints = '' as keyof UnistylesBreakpoints
+
+    constructor() {
+        this.setupListeners()
+    }
+
+    public install() {
+        // @ts-ignore
+        window.__UNISTYLES__ = new Proxy({}, {
+            get: (_target, prop) => {
+                switch (prop) {
+                    case 'themeName':
+                        return this.getTheme()
+                    case 'screenWidth':
+                        return this.#screenWidth
+                    case 'screenHeight':
+                        return this.#screenHeight
+                    case 'breakpoint':
+                        return this.#breakpoint || undefined
+                    case 'hasAdaptiveThemes':
+                        return this.#hasAdaptiveThemes
+                    case 'sortedBreakpointPairs':
+                        return this.#sortedBreakpointPairs
+                    case 'enabledPlugins':
+                        return this.#enabledPlugins
+                    case 'colorScheme':
+                        return this.#colorScheme
+                    case 'useTheme':
+                        return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
+                    case 'useBreakpoints':
+                        return (breakpoints: UnistylesBreakpoints) => this.useBreakpoints(breakpoints)
+                    case 'useAdaptiveThemes':
+                        return (enable: boolean) => this.useAdaptiveThemes(enable)
+                    case 'addPlugin':
+                        return (pluginName: string, notify: boolean) => this.addPlugin(pluginName, notify)
+                    case 'removePlugin':
+                        return (pluginName: string) => 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 as keyof UnistylesThemes
+                        this.emitThemeChange()
+
+                        return true
+                    }
+                    default:
+                        return Reflect.set(target, prop, newValue, receiver)
+                }
+            }
+        })
+
+        return true
+    }
+
+    private useTheme(themeName: keyof UnistylesThemes) {
+        this.#themeName = themeName
+        this.emitThemeChange()
+    }
+
+    private useBreakpoints(breakpoints: UnistylesBreakpoints) {
+        this.#sortedBreakpointPairs = Object
+            .entries(breakpoints)
+            .sort(([, a], [, b]) => (a ?? 0) - (b ?? 0)) as Array<[keyof UnistylesBreakpoints, number]>
+        this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
+    }
+
+    private useAdaptiveThemes(enable: boolean) {
+        this.#hasAdaptiveThemes = enable
+
+        if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
+            return
+        }
+
+        if (this.#themeName !== this.#colorScheme) {
+            this.#themeName = this.#colorScheme as keyof UnistylesThemes
+            this.emitThemeChange()
+        }
+    }
+
+    private addPlugin(pluginName: string, notify: boolean) {
+        this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins)
+
+        if (notify) {
+            this.emitPluginChange()
+        }
+    }
+
+    private removePlugin(pluginName: string) {
+        this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName)
+        this.emitPluginChange()
+    }
+
+    private getTheme(): keyof UnistylesThemes {
+
+        if (this.#themes.length === 1) {
+            return this.#themes.at(0) as keyof UnistylesThemes
+        }
+
+        return this.#themeName
+    }
+
+    private 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 as keyof UnistylesThemes
+                this.emitThemeChange()
+            }
+        })
+    }
+
+    private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
+        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) as keyof UnistylesBreakpoints
+    }
+
+    private getPreferredColorScheme() {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark'
+        }
+
+        return 'light'
+    }
+
+    private emitPluginChange() {
+        this.#unistylesEvents.emit('__unistylesOnChange', {
+            type: 'plugin'
+        })
+    }
+
+    private emitThemeChange() {
+        this.#unistylesEvents.emit('__unistylesOnChange', {
+            type: 'theme',
+            payload: {
+                themeName: this.#themeName
+            }
+        })
+    }
+
+    private 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
+                }
+            }
+        })
+    }
+}
+
+export const UnistylesModule = new UnistylesBridgeWeb()

package/src/hooks/useUnistyles.ts

@@ -20,7 +20,7 @@ export const useUnistyles = () => {
 
     useEffect(() => {
         const subscription = unistylesEvents.addListener(
-            'onChange',
+            '__unistylesOnChange',
             (event: UnistylesEvents) => {
                 switch (event.type) {
                     case UnistylesEventType.Theme: {

package/src/utils/withPlugins.ts

@@ -6,7 +6,7 @@ export const withPlugins = (
     style: RNStyle
 ) => unistyles.registry.plugins.reduce((acc, plugin) => {
     if (plugin.onParsedStyle) {
-        return plugin.onParsedStyle(key, style, unistyles.runtime)
+        return plugin.onParsedStyle(key, acc, unistyles.runtime)
     }
 
     return acc