refactor: try to cache computed styles at least within updates

Here I added basic cache for computed styles which is busted every time
any style or instance is changed.

Though it computes each property only once between changes.
So property label, style section dots and style control reuse the same
computed piece.

This can potentially fix performance and memory usages. Though requires testing.

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -291,11 +291,26 @@ export const $availableColorVariables = computed(
     availableVariables.filter((value) => value.fallback?.type !== "unit")
 );
 
+// completely bust the cache when model is changed
+let prevModel: undefined | StyleObjectModel;
+// store cached computed declarations by following key
+// instanceSelector + styleSourceId + state + property
+let cache = new Map<string, ComputedStyleDecl>();
+
+const validateCache = (model: StyleObjectModel) => {
+  if (model !== prevModel) {
+    prevModel = model;
+    cache.clear();
+  }
+};
+
 export const createComputedStyleDeclStore = (property: StyleProperty) => {
   return computed(
     [$model, $instanceAndRootSelector, $selectedOrLastStyleSourceSelector],
     (model, instanceSelector, styleSourceSelector) => {
+      validateCache(model);
       return getComputedStyleDecl({
+        cache,
         model,
         instanceSelector,
         styleSourceId: styleSourceSelector?.styleSourceId,
@@ -306,10 +321,6 @@ export const createComputedStyleDeclStore = (property: StyleProperty) => {
   );
 };
 
-export const useStyleObjectModel = () => {
-  return useStore($model);
-};
-
 export const useComputedStyleDecl = (property: StyleProperty) => {
   const $store = useMemo(
     () => createComputedStyleDeclStore(property),
@@ -324,7 +335,9 @@ export const useParentComputedStyleDecl = (property: StyleProperty) => {
       computed(
         [$model, $instanceAndRootSelector],
         (model, instanceSelector) => {
+          validateCache(model);
           return getComputedStyleDecl({
+            cache,
             model,
             instanceSelector: instanceSelector?.slice(1),
             property,

apps/builder/app/shared/style-object-model.test.tsx

@@ -1576,3 +1576,30 @@ describe("style value source", () => {
     });
   });
 });
+
+describe("cache", () => {
+  test("reuse computed values", () => {
+    const model = createModel({
+      css: `
+        bodyLocal {
+          color: red;
+        }
+      `,
+      jsx: <$.Body ws:id="body" ws:tag="body" class="bodyLocal"></$.Body>,
+    });
+    const cache = new Map();
+    const first = getComputedStyleDecl({
+      cache,
+      model,
+      instanceSelector: ["body"],
+      property: "color",
+    });
+    const second = getComputedStyleDecl({
+      cache,
+      model,
+      instanceSelector: ["body"],
+      property: "color",
+    });
+    expect(first).toBe(second);
+  });
+});

apps/builder/app/shared/style-object-model.ts

@@ -285,13 +285,15 @@ export type ComputedStyleDecl = {
  * https://drafts.csswg.org/css-cascade-5/#value-stages
  */
 export const getComputedStyleDecl = ({
+  cache = new Map(),
   model,
   instanceSelector = [],
   styleSourceId,
   state,
   property,
   customPropertiesGraph = new Map(),
 }: {
+  cache?: Map<string, ComputedStyleDecl>;
   model: StyleObjectModel;
   instanceSelector?: InstanceSelector;
   styleSourceId?: StyleDecl["styleSourceId"];
@@ -302,6 +304,17 @@ export const getComputedStyleDecl = ({
    */
   customPropertiesGraph?: Map<Instance["id"], Set<Property>>;
 }): ComputedStyleDecl => {
+  const cacheKey = JSON.stringify({
+    instanceSelector,
+    styleSourceId,
+    state,
+    property,
+  });
+  const cachedValue = cache.get(cacheKey);
+  if (cachedValue) {
+    return cachedValue;
+  }
+
   const isCustomProperty = property.startsWith("--");
   const propertyData = isCustomProperty
     ? customPropertyData
@@ -431,5 +444,13 @@ export const getComputedStyleDecl = ({
   // fallback to inherited value
   cascadedValue ??= computedValue;
 
-  return { property, source, cascadedValue, computedValue, usedValue };
+  const computedStyleDecl: ComputedStyleDecl = {
+    property,
+    source,
+    cascadedValue,
+    computedValue,
+    usedValue,
+  };
+  cache.set(cacheKey, computedStyleDecl);
+  return computedStyleDecl;
 };