@tamagui/use-window-dimensions 1.52.4 → 1.52.6

package/dist/cjs/index.js

@@ -26,26 +26,28 @@ var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_react_native = require("react-native");
 const initialValue = {
-  fontScale: 1,
   height: 800,
-  width: 600,
-  scale: 1
+  width: 600
 };
 function configureInitialWindowDimensions(next) {
   Object.assign(initialValue, next);
 }
-function useWindowDimensions({ initial } = {}) {
-  const current = (0, import_react_native.useWindowDimensions)();
-  if (process.env.TAMAGUI_TARGET != "web") {
-    return current;
-  }
-  const [state, setState] = (0, import_react.useState)(
-    initial ? { ...initialValue, ...initial } : initialValue
+import_react_native.Dimensions.addEventListener("change", () => {
+  cbs.forEach((cb) => cb(window));
+});
+const cbs = /* @__PURE__ */ new Set();
+function subscribe(cb) {
+  cbs.add(cb);
+  return () => cbs.delete(cb);
+}
+function useWindowDimensions({
+  serverValue = initialValue
+} = {}) {
+  return (0, import_react.useSyncExternalStore)(
+    subscribe,
+    () => import_react_native.Dimensions.get("window"),
+    () => import_constants.isWeb ? serverValue : import_react_native.Dimensions.get("window")
   );
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    setState(current);
-  }, Object.values(current));
-  return state;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C;AAC1C,mBAAyB;AACzB,0BAAyE;AAMzE,MAAM,eAA2B;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAEO,SAAS,iCAAiC,MAA2B;AAC1E,SAAO,OAAO,cAAc,IAAI;AAClC;AAEO,SAAS,oBAAoB,EAAE,QAAQ,IAAuC,CAAC,GAAG;AACvF,QAAM,cAAU,oBAAAA,qBAAsB;AAEtC,MAAI,QAAQ,IAAI,kBAAkB,OAAO;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAU,EAAE,GAAG,cAAc,GAAG,QAAQ,IAAI;AAAA,EAC9C;AAEA,kDAA0B,MAAM;AAC9B,aAAS,OAAO;AAAA,EAClB,GAAG,OAAO,OAAO,OAAO,CAAC;AAEzB,SAAO;AACT;",
-  "names": ["useWindowDimensionsRN"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,mBAAqC;AACrC,0BAAuC;AAWvC,MAAM,eAAqB;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAAS,iCAAiC,MAAY;AAC3D,SAAO,OAAO,cAAc,IAAI;AAClC;AAEA,+BAAW,iBAAiB,UAAU,MAAM;AAC1C,MAAI,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;AAChC,CAAC;AAED,MAAM,MAAM,oBAAI,IAAc;AAI9B,SAAS,UAAU,IAAwB;AACzC,MAAI,IAAI,EAAE;AACV,SAAO,MAAM,IAAI,OAAO,EAAE;AAC5B;AAEO,SAAS,oBAAoB;AAAA,EAClC,cAAc;AAChB,IAA4B,CAAC,GAAG;AAC9B,aAAO;AAAA,IACL;AAAA,IACA,MAAM,+BAAW,IAAI,QAAQ;AAAA,IAC7B,MAAO,yBAAQ,cAAc,+BAAW,IAAI,QAAQ;AAAA,EACtD;AACF;",
+  "names": []
 }

package/dist/esm/index.js

@@ -1,27 +1,29 @@
-import { useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { useState } from "react";
-import { useWindowDimensions as useWindowDimensionsRN } from "react-native";
+import { isWeb } from "@tamagui/constants";
+import { useSyncExternalStore } from "react";
+import { Dimensions } from "react-native";
 const initialValue = {
-  fontScale: 1,
   height: 800,
-  width: 600,
-  scale: 1
+  width: 600
 };
 function configureInitialWindowDimensions(next) {
   Object.assign(initialValue, next);
 }
-function useWindowDimensions({ initial } = {}) {
-  const current = useWindowDimensionsRN();
-  if (process.env.TAMAGUI_TARGET != "web") {
-    return current;
-  }
-  const [state, setState] = useState(
-    initial ? { ...initialValue, ...initial } : initialValue
+Dimensions.addEventListener("change", () => {
+  cbs.forEach((cb) => cb(window));
+});
+const cbs = /* @__PURE__ */ new Set();
+function subscribe(cb) {
+  cbs.add(cb);
+  return () => cbs.delete(cb);
+}
+function useWindowDimensions({
+  serverValue = initialValue
+} = {}) {
+  return useSyncExternalStore(
+    subscribe,
+    () => Dimensions.get("window"),
+    () => isWeb ? serverValue : Dimensions.get("window")
   );
-  useIsomorphicLayoutEffect(() => {
-    setState(current);
-  }, Object.values(current));
-  return state;
 }
 export {
   configureInitialWindowDimensions,

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAqB,uBAAuB,6BAA6B;AAMzE,MAAM,eAA2B;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAEO,SAAS,iCAAiC,MAA2B;AAC1E,SAAO,OAAO,cAAc,IAAI;AAClC;AAEO,SAAS,oBAAoB,EAAE,QAAQ,IAAuC,CAAC,GAAG;AACvF,QAAM,UAAU,sBAAsB;AAEtC,MAAI,QAAQ,IAAI,kBAAkB,OAAO;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB,UAAU,EAAE,GAAG,cAAc,GAAG,QAAQ,IAAI;AAAA,EAC9C;AAEA,4BAA0B,MAAM;AAC9B,aAAS,OAAO;AAAA,EAClB,GAAG,OAAO,OAAO,OAAO,CAAC;AAEzB,SAAO;AACT;",
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,4BAA4B;AACrC,SAAS,kBAA8B;AAWvC,MAAM,eAAqB;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAAS,iCAAiC,MAAY;AAC3D,SAAO,OAAO,cAAc,IAAI;AAClC;AAEA,WAAW,iBAAiB,UAAU,MAAM;AAC1C,MAAI,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;AAChC,CAAC;AAED,MAAM,MAAM,oBAAI,IAAc;AAI9B,SAAS,UAAU,IAAwB;AACzC,MAAI,IAAI,EAAE;AACV,SAAO,MAAM,IAAI,OAAO,EAAE;AAC5B;AAEO,SAAS,oBAAoB;AAAA,EAClC,cAAc;AAChB,IAA4B,CAAC,GAAG;AAC9B,SAAO;AAAA,IACL;AAAA,IACA,MAAM,WAAW,IAAI,QAAQ;AAAA,IAC7B,MAAO,QAAQ,cAAc,WAAW,IAAI,QAAQ;AAAA,EACtD;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/use-window-dimensions",
-  "version": "1.52.4",
+  "version": "1.52.6",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -26,10 +26,10 @@
     }
   },
   "dependencies": {
-    "@tamagui/constants": "1.52.4"
+    "@tamagui/constants": "1.52.6"
   },
   "devDependencies": {
-    "@tamagui/build": "1.52.4",
+    "@tamagui/build": "1.52.6",
     "react": "^18.2.0",
     "react-native": "^0.72.1"
   },

package/src/index.ts

@@ -1,36 +1,44 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useState } from 'react'
-import { ScaledSize, useWindowDimensions as useWindowDimensionsRN } from 'react-native'
+import { isWeb } from '@tamagui/constants'
+import { useSyncExternalStore } from 'react'
+import { Dimensions, ScaledSize } from 'react-native'
 
 /**
  * SSR safe useWindowDimensions
  */
 
-const initialValue: ScaledSize = {
-  fontScale: 1,
+type Size = {
+  width: number
+  height: number
+}
+
+const initialValue: Size = {
   height: 800,
   width: 600,
-  scale: 1,
 }
 
-export function configureInitialWindowDimensions(next: Partial<ScaledSize>) {
+export function configureInitialWindowDimensions(next: Size) {
   Object.assign(initialValue, next)
 }
 
-export function useWindowDimensions({ initial }: { initial?: Partial<ScaledSize> } = {}) {
-  const current = useWindowDimensionsRN()
+Dimensions.addEventListener('change', () => {
+  cbs.forEach((cb) => cb(window))
+})
 
-  if (process.env.TAMAGUI_TARGET != 'web') {
-    return current
-  }
+const cbs = new Set<Function>()
 
-  const [state, setState] = useState(
-    initial ? { ...initialValue, ...initial } : initialValue
-  )
+type WindowSizeListener = ({ window }: { window: ScaledSize }) => void
 
-  useIsomorphicLayoutEffect(() => {
-    setState(current)
-  }, Object.values(current))
+function subscribe(cb: WindowSizeListener) {
+  cbs.add(cb)
+  return () => cbs.delete(cb)
+}
 
-  return state
+export function useWindowDimensions({
+  serverValue = initialValue,
+}: { serverValue?: Size } = {}) {
+  return useSyncExternalStore(
+    subscribe,
+    () => Dimensions.get('window'),
+    () => (isWeb ? serverValue : Dimensions.get('window'))
+  )
 }

package/types/index.d.ts

@@ -1,6 +1,13 @@
-import { ScaledSize } from 'react-native';
-export declare function configureInitialWindowDimensions(next: Partial<ScaledSize>): void;
-export declare function useWindowDimensions({ initial }?: {
-    initial?: Partial<ScaledSize>;
-}): ScaledSize;
+/**
+ * SSR safe useWindowDimensions
+ */
+type Size = {
+    width: number;
+    height: number;
+};
+export declare function configureInitialWindowDimensions(next: Size): void;
+export declare function useWindowDimensions({ serverValue, }?: {
+    serverValue?: Size;
+}): Size;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAgD,MAAM,cAAc,CAAA;AAavF,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,OAAO,CAAC,UAAU,CAAC,QAEzE;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAAO,cAgBtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAOD,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,IAAI,QAE1D;AAeD,wBAAgB,mBAAmB,CAAC,EAClC,WAA0B,GAC3B,GAAE;IAAE,WAAW,CAAC,EAAE,IAAI,CAAA;CAAO,QAM7B"}