From 092e234e9b1755fe6975528d8c92fcc1914363a0 Mon Sep 17 00:00:00 2001
From: Youssef Henna <58384527+YoussefHenna@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:58:51 +0100
Subject: [PATCH] Fix theme proxy generation performance issue (#971)

* logging and prevent excessive theme changes

* callback dependency

* add await

* Move if one layer up

* remove `removeItem`

* clear up useEffect

* Revert "clear up useEffect"

This reverts commit f5eddec44c541b9a11e8714b470647cb469c47d4.

* Revert "remove `removeItem`"

This reverts commit 11ab4b355b9c811885f1268ebdd5cb4874f52b93.

* Revert "Move if one layer up"

This reverts commit cdc7e60b2adf59f16180a9642c338ef438bcdc03.

* Revert "add await"

This reverts commit 55fd0a0307f267da8bd3cabb621e1501f8c60e7b.

* Revert "callback dependency"

This reverts commit 1ade21843e2aea2b70966e963e601121b34256b5.

* Revert "logging and prevent excessive theme changes"

This reverts commit f10d982d4986314951626b2af633b97bd76dd000.

* Remove zod parsing in creating values

* Revert "Remove zod parsing in creating values"

This reverts commit d6c000138bd69531b2fd84dd83e5774f2e008f9e.

* Only use zod for validation, remove from proxy creation steps
---
 packages/theme/package.json                  |  1 +
 packages/theme/src/createTheme.ts            |  2 +-
 packages/theme/src/createThemeValuesProxy.ts |  2 +-
 packages/theme/src/utils.ts                  | 22 ++++++++++++++++++++
 packages/theme/src/validators.ts             | 13 ------------
 yarn.lock                                    |  5 +++++
 6 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 packages/theme/src/utils.ts

diff --git a/packages/theme/package.json b/packages/theme/package.json
index d6d345cbc..b91bc8fa5 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -43,6 +43,7 @@
     "color": "^4.2.3",
     "deepmerge-ts": "^7.1.3",
     "react-native-typography": "^1.4.1",
+    "lodash.isobject": "^3.0.2",
     "zod": "^3.23.8"
   },
   "eslintIgnore": [
diff --git a/packages/theme/src/createTheme.ts b/packages/theme/src/createTheme.ts
index 28cad9149..08d81f984 100644
--- a/packages/theme/src/createTheme.ts
+++ b/packages/theme/src/createTheme.ts
@@ -6,11 +6,11 @@ import type {
   ColorPalettes,
 } from "./types";
 import {
-  isTextStyleObject,
   validateBreakpoints,
   validatePalettes,
   validateTheme,
 } from "./validators";
+import { isTextStyleObject } from "./utils";
 
 /**
  * Custom deepmerge function to skip merging of typography/text style objects.
diff --git a/packages/theme/src/createThemeValuesProxy.ts b/packages/theme/src/createThemeValuesProxy.ts
index ae9499dd8..57ac18f3b 100644
--- a/packages/theme/src/createThemeValuesProxy.ts
+++ b/packages/theme/src/createThemeValuesProxy.ts
@@ -1,6 +1,6 @@
 import { ThemeValues, Breakpoints } from "./types";
 import { Platform, TextStyle } from "react-native";
-import { asThemeValuesObject } from "./validators";
+import { asThemeValuesObject } from "./utils";
 
 interface CreateThemeValuesProxyInput {
   value: ThemeValues | undefined;
diff --git a/packages/theme/src/utils.ts b/packages/theme/src/utils.ts
new file mode 100644
index 000000000..ef8b24fd1
--- /dev/null
+++ b/packages/theme/src/utils.ts
@@ -0,0 +1,22 @@
+import { isObject } from "lodash";
+import type { ThemeValues } from "./types";
+
+export function isTextStyleObject(value: any): boolean {
+  return Object.keys(value).some((key) =>
+    [
+      "fontFamily",
+      "fontWeight",
+      "fontSize",
+      "fontStyle",
+      "lineHeight",
+      "letterSpacing",
+    ].includes(key)
+  );
+}
+
+export function asThemeValuesObject(value: any): ThemeValues | null {
+  // Any object that isn't a text style object is considered a ThemeValues object
+  return !isTextStyleObject(value) && isObject(value)
+    ? (value as ThemeValues)
+    : null;
+}
diff --git a/packages/theme/src/validators.ts b/packages/theme/src/validators.ts
index 964e1e5c1..6d6e4a01e 100644
--- a/packages/theme/src/validators.ts
+++ b/packages/theme/src/validators.ts
@@ -101,16 +101,3 @@ export function validateTheme(theme: Theme) {
     throw new Error("Invalid theme object: " + result.error.message);
   }
 }
-
-export function isTextStyleObject(value: any): boolean {
-  return TextStyleSchema.safeParse(value).success;
-}
-
-export function asThemeValuesObject(value: any): ThemeValues | null {
-  // Text style matches the shape of ThemeValues, but we don't want to treat it as a ThemeValues
-  if (isTextStyleObject(value)) {
-    return null;
-  }
-
-  return ThemeValuesSchema.safeParse(value).success ? value : null;
-}
diff --git a/yarn.lock b/yarn.lock
index 0d3d57f4d..221abee0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10446,6 +10446,11 @@ lodash.isnumber@^3.0.3:
   resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
   integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
 
+lodash.isobject@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+  integrity sha512-3/Qptq2vr7WeJbB4KHUSKlq8Pl7ASXi3UG6CMbBm8WRtXi8+GHm7mKaU3urfpSEzWe2wCIChs6/sdocUsTKJiA==
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"