@codeleap/web 5.5.4 → 5.6.3

package/dist/lib/hooks/useStylesFor.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStylesFor = void 0;
 var styles_1 = require("@codeleap/styles");
@@ -7,7 +18,7 @@ var WebStyleRegistry_1 = require("../WebStyleRegistry");
 var hooks_1 = require("@codeleap/hooks");
 var useStylesFor = function (componentName, style) {
     var styleObserver = (0, styles_1.useStyleObserver)(style);
-    var isClient = (0, hooks_1.useIsClient)().isClient;
+    var isMounted = (0, hooks_1.useIsMounted)();
     var styles = (0, react_1.useMemo)(function () {
         return WebStyleRegistry_1.WebStyleRegistry.current.styleFor(componentName, style);
     }, [styleObserver]);
@@ -16,11 +27,14 @@ var useStylesFor = function (componentName, style) {
         return Object.entries(styles).reduce(function (acc, _a) {
             var key = _a[0], styleValue = _a[1];
             var isServer = typeof window === 'undefined';
-            var inEnvTransition = isServer ? false : !isClient;
-            acc[key] = inEnvTransition ? { opacity: 0 } : styleValue;
+            var inEnvTransition = isServer ? false : !isMounted;
+            acc[key] = inEnvTransition ? __assign({ 
+                // Despite what it may look like, this is not (just) a joke. The "orphans" property is almost completely useless,
+                // so we set it just to force the styles to recompute after hydration. Also picked for comedic impact.
+                orphans: 1 }, styleValue) : styleValue;
             return acc;
         }, {});
-    }, [styles, isClient]);
+    }, [styles, isMounted]);
     return processedStyles;
 };
 exports.useStylesFor = useStylesFor;

package/dist/lib/hooks/useStylesFor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStylesFor.js","sourceRoot":"","sources":["../../../src/lib/hooks/useStylesFor.ts"],"names":[],"mappings":";;;AAAA,2CAA8D;AAC9D,+BAA+B;AAC/B,wDAAsD;AACtD,yCAA6C;AAEtC,IAAM,YAAY,GAAG,UAAc,aAAqB,EAAE,KAA2B;IAC1F,IAAM,aAAa,GAAG,IAAA,yBAAgB,EAAC,KAAK,CAAC,CAAA;IAErC,IAAA,QAAQ,GAAK,IAAA,mBAAW,GAAE,SAAlB,CAAkB;IAElC,IAAM,MAAM,GAAG,IAAA,eAAO,EAAC;QACrB,OAAO,mCAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;IAChE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAM,eAAe,GAAG,IAAA,eAAO,EAAC;QAC9B,4EAA4E;QAC5E,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAiB;gBAAhB,GAAG,QAAA,EAAE,UAAU,QAAA;YACzD,IAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;YAC9C,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEpD,GAAG,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAA;YAExD,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAO,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEtB,OAAO,eAAe,CAAA;AACxB,CAAC,CAAA;AAtBY,QAAA,YAAY,gBAsBxB"}
+{"version":3,"file":"useStylesFor.js","sourceRoot":"","sources":["../../../src/lib/hooks/useStylesFor.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8D;AAC9D,+BAA+B;AAC/B,wDAAsD;AACtD,yCAA8C;AAEvC,IAAM,YAAY,GAAG,UAAc,aAAqB,EAAE,KAA2B;IAC1F,IAAM,aAAa,GAAG,IAAA,yBAAgB,EAAC,KAAK,CAAC,CAAA;IAE7C,IAAM,SAAS,GAAG,IAAA,oBAAY,GAAE,CAAA;IAEhC,IAAM,MAAM,GAAG,IAAA,eAAO,EAAC;QACrB,OAAO,mCAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;IAChE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAM,eAAe,GAAG,IAAA,eAAO,EAAC;QAC9B,4EAA4E;QAC5E,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAiB;gBAAhB,GAAG,QAAA,EAAE,UAAU,QAAA;YACzD,IAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;YAC9C,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAErD,GAAG,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC;gBAC1B,iHAAiH;gBACjH,sGAAsG;gBACtG,OAAO,EAAE,CAAC,IAEP,UAAU,EAAG,CAAC,CAAC,UAAU,CAAA;YAE9B,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAO,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAA;IAEvB,OAAO,eAAe,CAAA;AAExB,CAAC,CAAA;AA5BY,QAAA,YAAY,gBA4BxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "5.5.4",
+  "version": "5.6.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -9,14 +9,14 @@
   },
   "license": "UNLICENSED",
   "devDependencies": {
-    "@codeleap/config": "5.5.4",
-    "@codeleap/hooks": "5.5.4",
-    "@codeleap/i18n": "5.5.4",
-    "@codeleap/logger": "5.5.4",
-    "@codeleap/query": "5.5.4",
-    "@codeleap/types": "5.5.4",
-    "@codeleap/utils": "5.5.4",
-    "@codeleap/store": "5.5.4",
+    "@codeleap/config": "5.6.3",
+    "@codeleap/hooks": "5.6.3",
+    "@codeleap/i18n": "5.6.3",
+    "@codeleap/logger": "5.6.3",
+    "@codeleap/query": "5.6.3",
+    "@codeleap/types": "5.6.3",
+    "@codeleap/utils": "5.6.3",
+    "@codeleap/store": "5.6.3",
     "@types/react-slick": "^0.23.13"
   },
   "scripts": {
@@ -45,14 +45,14 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "@codeleap/types": "5.5.4",
-    "@codeleap/utils": "5.5.4",
-    "@codeleap/hooks": "5.5.4",
-    "@codeleap/i18n": "5.5.4",
-    "@codeleap/query": "5.5.4",
-    "@codeleap/logger": "5.5.4",
-    "@codeleap/styles": "5.5.4",
-    "@codeleap/store": "5.5.4",
+    "@codeleap/types": "5.6.3",
+    "@codeleap/utils": "5.6.3",
+    "@codeleap/hooks": "5.6.3",
+    "@codeleap/i18n": "5.6.3",
+    "@codeleap/query": "5.6.3",
+    "@codeleap/logger": "5.6.3",
+    "@codeleap/styles": "5.6.3",
+    "@codeleap/store": "5.6.3",
     "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
     "axios": "^1.7.9",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "5.5.4",
+  "version": "5.6.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/lib/hooks/useStylesFor.ts

@@ -1,12 +1,12 @@
 import { StyleProp, useStyleObserver } from '@codeleap/styles'
 import { useMemo } from 'react'
 import { WebStyleRegistry } from '../WebStyleRegistry'
-import { useIsClient } from '@codeleap/hooks'
+import { useIsMounted } from '@codeleap/hooks'
 
 export const useStylesFor = <T = unknown>(componentName: string, style: StyleProp<T, string>): T => {
   const styleObserver = useStyleObserver(style)
 
-  const { isClient } = useIsClient()
+  const isMounted = useIsMounted()
 
   const styles = useMemo(() => {
     return WebStyleRegistry.current.styleFor(componentName, style)
@@ -16,13 +16,19 @@ export const useStylesFor = <T = unknown>(componentName: string, style: StylePro
     // this is strange, but necessary to recalculate the pre-set styles from SSR
     return Object.entries(styles).reduce((acc, [key, styleValue]) => {
       const isServer = typeof window === 'undefined'
-      const inEnvTransition = isServer ? false : !isClient
-      
-      acc[key] = inEnvTransition ? { opacity: 0 } : styleValue
-      
+      const inEnvTransition = isServer ? false : !isMounted
+
+      acc[key] = inEnvTransition ? {
+        // Despite what it may look like, this is not (just) a joke. The "orphans" property is almost completely useless,
+        // so we set it just to force the styles to recompute after hydration. Also picked for comedic impact.
+        orphans: 1,
+
+        ...styleValue } : styleValue
+
       return acc
     }, {} as T)
-  }, [styles, isClient])
+  }, [styles, isMounted])
 
   return processedStyles
+
 }