perf: cache computed properties with loops (#2053)

.changeset/two-plants-jump.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/core': patch
+---
+
+Slight perf improvement by caching a few computed properties that contains a loop

packages/core/src/breakpoints.ts

@@ -3,18 +3,18 @@ import type { RawCondition } from '@pandacss/types'
 import type { Root } from 'postcss'
 
 export class Breakpoints {
-  constructor(private breakpoints: Record<string, string>) {}
-
-  get sorted() {
-    return sortBreakpoints(this.breakpoints)
-  }
-
-  get values() {
-    return Object.fromEntries(this.sorted)
-  }
-
-  get keys() {
-    return ['base', ...Object.keys(this.values)]
+  sorted: ReturnType<typeof sortBreakpoints>
+  values: Record<string, BreakpointEntry>
+  keys: string[]
+  ranges: Record<string, string>
+  conditions: Record<string, Cond>
+
+  constructor(private breakpoints: Record<string, string>) {
+    this.sorted = sortBreakpoints(breakpoints)
+    this.values = Object.fromEntries(this.sorted)
+    this.keys = ['base', ...Object.keys(this.values)]
+    this.ranges = this.getRanges()
+    this.conditions = this.getConditions()
   }
 
   get = (name: string) => {
@@ -31,7 +31,7 @@ export class Breakpoints {
     return this.build({ min, max })
   }
 
-  get ranges(): Record<string, string> {
+  private getRanges = () => {
     const breakpoints: string[] = Object.keys(this.values)
     const permuations = getPermutations(breakpoints)
 
@@ -57,8 +57,9 @@ export class Breakpoints {
     return Object.fromEntries(values)
   }
 
-  get conditions(): Record<string, Cond> {
+  private getConditions = () => {
     const values = Object.entries(this.ranges).map(([key, value]) => {
+      // console.log(key, value)
       return [key, toCondition(key, value)]
     })
 
@@ -81,7 +82,8 @@ export class Breakpoints {
   }
 }
 
-type Entries = [string, { name: string; min?: string | null; max?: string | null }][]
+type BreakpointEntry = { name: string; min?: string | null; max?: string | null }
+type Entries = [string, BreakpointEntry][]
 
 function adjust(value: string | null | undefined) {
   const computedMax = parseFloat(toPx(value!) ?? '') - 0.04

packages/core/src/patterns.ts

@@ -14,12 +14,14 @@ interface PatternOptions {
 export class Patterns {
   patterns: Record<string, PatternConfig>
   details: PatternNode[]
+  keys: string[]
   private utility: Utility
   private tokens: TokenDictionary
 
   constructor(options: PatternOptions) {
     this.patterns = options.config.patterns ?? {}
     this.details = Object.entries(this.patterns).map(([name, pattern]) => this.createDetail(name, pattern))
+    this.keys = Object.keys(this.patterns)
     this.utility = options.utility
     this.tokens = options.tokens
   }
@@ -39,10 +41,6 @@ export class Patterns {
     }
   }
 
-  get keys(): string[] {
-    return Object.keys(this.patterns)
-  }
-
   getConfig(name: string): PatternConfig {
     return this.patterns[name]
   }

packages/core/src/recipes.ts

@@ -38,9 +38,7 @@ const sharedState = {
 export class Recipes {
   slotSeparator = '__'
 
-  get keys() {
-    return Object.keys(this.recipes)
-  }
+  keys: string[] = []
 
   private context!: SerializeContext
 
@@ -76,6 +74,7 @@ export class Recipes {
     for (const [name, recipe] of Object.entries(this.recipes)) {
       this.saveOne(name, recipe)
     }
+    this.keys = Object.keys(this.recipes)
   }
 
   saveOne = (name: string, recipe: RecipeConfig | SlotRecipeConfig) => {