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 f5eddec.

* Revert "remove `removeItem`"

This reverts commit 11ab4b3.

* Revert "Move if one layer up"

This reverts commit cdc7e60.

* Revert "add await"

This reverts commit 55fd0a0.

* Revert "callback dependency"

This reverts commit 1ade218.

* Revert "logging and prevent excessive theme changes"

This reverts commit f10d982.

* Remove zod parsing in creating values

* Revert "Remove zod parsing in creating values"

This reverts commit d6c0001.

* Only use zod for validation, remove from proxy creation steps

Author: YoussefHenna

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": [

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.

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;

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;
+}

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;
-}

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"