Optimize

Author: owjs3901

src/codegen/Codegen.ts

@@ -100,16 +100,15 @@ function getBooleanConditionName(
 }
 
 /**
- * Shallow-clone a NodeTree — only the root-level props object is cloned
- * (downstream code mutates tree.props via Object.assign).
- * Children and textChildren are shared by reference because they are
- * never mutated (verified: no push/pop/splice/sort on children arrays,
- * no child.props mutations in ResponsiveCodegen).
+ * Shallow-clone a NodeTree — creates a new object so that per-instance
+ * property reassignment (e.g., `tree.props = { ...tree.props, ...selectorProps }`)
+ * doesn't leak across Codegen instances. Props object itself is shared by
+ * reference — callers that need to merge create their own objects.
  */
 function cloneTree(tree: NodeTree): NodeTree {
   return {
     component: tree.component,
-    props: { ...tree.props },
+    props: tree.props,
     children: tree.children,
     nodeType: tree.nodeType,
     nodeName: tree.nodeName,
@@ -364,14 +363,17 @@ export class Codegen {
     }
 
     // Now await props (likely already resolved while children were processing)
-    const props = await propsPromise
+    const baseProps = await propsPromise
 
-    // Handle TEXT nodes
+    // Handle TEXT nodes — create NEW merged object instead of mutating getProps() result.
     let textChildren: string[] | undefined
+    let props: Record<string, unknown>
     if (node.type === 'TEXT') {
       const { children: textContent, props: textProps } = await renderText(node)
       textChildren = textContent
-      Object.assign(props, textProps)
+      props = { ...baseProps, ...textProps }
+    } else {
+      props = baseProps
     }
 
     const component = getDevupComponentByNode(node, props)
@@ -486,16 +488,20 @@ export class Codegen {
     }
 
     // Await props + selectorProps (likely already resolved while children built)
-    const [props, selectorProps] = await Promise.all([
+    const [baseProps, selectorProps] = await Promise.all([
       propsPromise,
       selectorPropsPromise,
     ])
     perfEnd('getSelectorProps()', t)
 
     const variants: Record<string, string> = {}
 
+    // Create a NEW merged object instead of mutating getProps() result.
+    // This allows getProps cache to return raw references without cloning.
+    const props = selectorProps
+      ? { ...baseProps, ...selectorProps.props }
+      : baseProps
     if (selectorProps) {
-      Object.assign(props, selectorProps.props)
       Object.assign(variants, selectorProps.variants)
     }
 

src/codegen/props/index.ts

@@ -38,16 +38,17 @@ export async function getProps(
 ): Promise<Record<string, unknown>> {
   const cacheKey = node.id
   if (cacheKey) {
-    // Sync fast path: return shallow clone from resolved cache (no microtask)
+    // Sync fast path: return raw reference from resolved cache (no clone needed —
+    // all callers that need to merge selectorProps create their own objects now).
     const resolved = getPropsResolved.get(cacheKey)
     if (resolved) {
       perfEnd('getProps(cached)', perfStart())
-      return { ...resolved }
+      return resolved
     }
     const cached = getPropsCache.get(cacheKey)
     if (cached) {
       perfEnd('getProps(cached)', perfStart())
-      return { ...(await cached) }
+      return await cached
     }
   }
 
@@ -153,54 +154,3 @@ export async function getProps(
   perfEnd('getProps()', t)
   return result
 }
-
-const CENTER_SKIP_KEYS = new Set(['alignItems', 'justifyContent'])
-const IMAGE_BOX_SKIP_KEYS = new Set([
-  'alignItems',
-  'justifyContent',
-  'flexDir',
-  'gap',
-  'outline',
-  'outlineOffset',
-  'overflow',
-])
-
-export function filterPropsWithComponent(
-  component: string,
-  props: Record<string, unknown>,
-): Record<string, unknown> {
-  const newProps: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(props)) {
-    switch (component) {
-      case 'Flex':
-        // Only skip display/flexDir if it's exactly the default value (not responsive array)
-        if (key === 'display' && value === 'flex') continue
-        if (key === 'flexDir' && value === 'row') continue
-        break
-      case 'Grid':
-        // Only skip display if it's exactly 'grid' (not responsive array or other value)
-        if (key === 'display' && value === 'grid') continue
-        break
-      case 'Center':
-        if (CENTER_SKIP_KEYS.has(key)) continue
-        if (key === 'display' && value === 'flex') continue
-        if (key === 'flexDir' && value === 'row') continue
-        break
-      case 'VStack':
-        // Only skip flexDir if it's exactly 'column' (not responsive array or other value)
-        if (key === 'flexDir' && value === 'column') continue
-        if (key === 'display' && value === 'flex') continue
-        break
-
-      case 'Image':
-      case 'Box':
-        if (component === 'Box' && !('maskImage' in props)) break
-        if (IMAGE_BOX_SKIP_KEYS.has(key)) continue
-        if (key === 'display' && value === 'flex') continue
-        if (!('maskImage' in props) && ['bg'].includes(key)) continue
-        break
-    }
-    newProps[key] = value
-  }
-  return newProps
-}

src/codegen/props/selector.ts

@@ -146,27 +146,25 @@ async function computeSelectorProps(node: ComponentSetNode): Promise<{
 
   const defaultProps = await getProps(node.defaultVariant)
 
-  const result = Object.entries(node.componentPropertyDefinitions).reduce(
-    (acc, [name, definition]) => {
-      if (name === 'effect' || name === 'viewport') return acc
-
-      const sanitizedName = sanitizePropertyName(name)
-      if (definition.type === 'VARIANT' && definition.variantOptions) {
-        acc.variants[sanitizedName] = definition.variantOptions
-          .map((option) => `'${option}'`)
-          .join(' | ')
-      } else if (definition.type === 'INSTANCE_SWAP') {
-        acc.variants[sanitizedName] = 'React.ReactNode'
-      } else if (definition.type === 'BOOLEAN') {
-        acc.variants[sanitizedName] = 'boolean'
-      }
-      return acc
-    },
-    {
-      props: {} as Record<string, object | string>,
-      variants: {} as Record<string, string>,
-    },
-  )
+  const result: {
+    props: Record<string, object | string>
+    variants: Record<string, string>
+  } = { props: {}, variants: {} }
+  const defs = node.componentPropertyDefinitions
+  for (const name in defs) {
+    if (name === 'effect' || name === 'viewport') continue
+    const definition = defs[name]
+    const sanitizedName = sanitizePropertyName(name)
+    if (definition.type === 'VARIANT' && definition.variantOptions) {
+      result.variants[sanitizedName] = definition.variantOptions
+        .map((option) => `'${option}'`)
+        .join(' | ')
+    } else if (definition.type === 'INSTANCE_SWAP') {
+      result.variants[sanitizedName] = 'React.ReactNode'
+    } else if (definition.type === 'BOOLEAN') {
+      result.variants[sanitizedName] = 'boolean'
+    }
+  }
 
   if (components.length > 0) {
     const findNodeAction = (action: Action) => action.type === 'NODE'
@@ -213,10 +211,12 @@ export async function getSelectorPropsForGroup(
 
   // Build cache key from componentSet.id + filter + viewport
   const setId = componentSet.id
-  const filterKey = Object.entries(variantFilter)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([k, v]) => `${k}=${v}`)
-    .join('|')
+  const filterParts: string[] = []
+  for (const k in variantFilter) {
+    filterParts.push(`${k}=${variantFilter[k]}`)
+  }
+  filterParts.sort()
+  const filterKey = filterParts.join('|')
   const cacheKey = setId ? `${setId}::${filterKey}::${viewportValue ?? ''}` : ''
 
   if (cacheKey) {
@@ -252,8 +252,8 @@ async function computeSelectorPropsForGroup(
     const variantProps = child.variantProperties || {}
 
     // Check all filter conditions match
-    for (const [key, value] of Object.entries(variantFilter)) {
-      if (variantProps[key] !== value) return false
+    for (const key in variantFilter) {
+      if (variantProps[key] !== variantFilter[key]) return false
     }
 
     // Check viewport if specified
@@ -335,13 +335,12 @@ function triggerTypeToEffect(triggerType: Trigger['type'] | undefined) {
 }
 
 function difference(a: Record<string, unknown>, b: Record<string, unknown>) {
-  return Object.entries(a).reduce(
-    (acc, [key, value]) => {
-      if (value !== undefined && b[key] !== value) {
-        acc[key] = value
-      }
-      return acc
-    },
-    {} as Record<string, unknown>,
-  )
+  const result: Record<string, unknown> = {}
+  for (const key in a) {
+    const value = a[key]
+    if (value !== undefined && b[key] !== value) {
+      result[key] = value
+    }
+  }
+  return result
 }

src/codegen/render/index.ts

@@ -1,23 +1,29 @@
 import { space } from '../../utils'
-import { filterPropsWithComponent } from '../props'
 import { isDefaultProp } from '../utils/is-default-prop'
 import {
   paddingLeftMultiline,
   wrapReturnStatement,
 } from '../utils/padding-left-multiline'
 import { propsToString } from '../utils/props-to-str'
 
+const CENTER_SKIP_KEYS = new Set(['alignItems', 'justifyContent'])
+const IMAGE_BOX_SKIP_KEYS = new Set([
+  'alignItems',
+  'justifyContent',
+  'flexDir',
+  'gap',
+  'outline',
+  'outlineOffset',
+  'overflow',
+])
+
 export function renderNode(
   component: string,
   props: Record<string, unknown>,
   deps: number = 0,
   childrenCodes: string[],
 ): string {
-  const filteredProps = filterProps(props)
-
-  const propsString = propsToString(
-    filterPropsWithComponent(component, filteredProps),
-  )
+  const propsString = propsToString(filterAndTransformProps(component, props))
   const hasChildren = childrenCodes.length > 0
   const tail = hasChildren ? `${space(deps)}</${component}>` : ''
   const multiProps = propsString.includes('\n')
@@ -65,16 +71,46 @@ ${Object.entries(filteredVariants)
 }`
 }
 
-function filterProps(props: Record<string, unknown>) {
+function filterAndTransformProps(
+  component: string,
+  props: Record<string, unknown>,
+) {
+  const hasMaskImage = 'maskImage' in props
   const newProps: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key]
     if (value === null || value === undefined) {
       continue
     }
     const newValue = typeof value === 'number' ? String(value) : value
     if (isDefaultProp(key, newValue)) {
       continue
     }
+    switch (component) {
+      case 'Flex':
+        if (key === 'display' && newValue === 'flex') continue
+        if (key === 'flexDir' && newValue === 'row') continue
+        break
+      case 'Grid':
+        if (key === 'display' && newValue === 'grid') continue
+        break
+      case 'Center':
+        if (CENTER_SKIP_KEYS.has(key)) continue
+        if (key === 'display' && newValue === 'flex') continue
+        if (key === 'flexDir' && newValue === 'row') continue
+        break
+      case 'VStack':
+        if (key === 'flexDir' && newValue === 'column') continue
+        if (key === 'display' && newValue === 'flex') continue
+        break
+      case 'Image':
+      case 'Box':
+        if (component === 'Box' && !hasMaskImage) break
+        if (IMAGE_BOX_SKIP_KEYS.has(key)) continue
+        if (key === 'display' && newValue === 'flex') continue
+        if (!hasMaskImage && key === 'bg') continue
+        break
+    }
     newProps[key] = newValue
   }
   return newProps

src/codegen/responsive/ResponsiveCodegen.ts

@@ -421,7 +421,7 @@ export class ResponsiveCodegen {
           )
           perfEnd('getSelectorPropsForGroup(viewport)', t)
           if (Object.keys(selectorProps).length > 0) {
-            Object.assign(tree.props, selectorProps)
+            tree.props = { ...tree.props, ...selectorProps }
           }
         }
 
@@ -642,7 +642,7 @@ export class ResponsiveCodegen {
           )
           perfEnd('getSelectorPropsForGroup()', t)
           if (Object.keys(selectorProps).length > 0) {
-            Object.assign(tree.props, selectorProps)
+            tree.props = { ...tree.props, ...selectorProps }
           }
         }
 
@@ -692,7 +692,7 @@ export class ResponsiveCodegen {
     // Get pseudo-selector props (hover, active, disabled, etc.)
     const selectorProps = await getSelectorPropsForGroup(componentSet, {})
     if (Object.keys(selectorProps).length > 0) {
-      Object.assign(tree.props, selectorProps)
+      tree.props = { ...tree.props, ...selectorProps }
     }
 
     // Render the tree to JSX
@@ -757,9 +757,9 @@ export class ResponsiveCodegen {
       const codegen = new Codegen(component)
       const tree = await codegen.getTree()
       perfEnd('Codegen.getTree(nonViewportVariant)', t)
-      // Add pseudo-selector props to tree
+      // Add pseudo-selector props to tree — create NEW props to avoid mutating cached tree
       if (selectorProps && Object.keys(selectorProps).length > 0) {
-        Object.assign(tree.props, selectorProps)
+        tree.props = { ...tree.props, ...selectorProps }
       }
       variantResults.push([variantValue, tree] as const)
     }

src/codegen/responsive/__tests__/index.test.ts

@@ -68,6 +68,15 @@ describe('responsive index helpers', () => {
     expect(optimized).toEqual(obj)
   })
 
+  it('collapses equal array values in responsive optimization', () => {
+    const optimized = optimizeResponsiveValue([
+      ['10px', '20px'],
+      ['10px', '20px'],
+      null,
+    ])
+    expect(optimized).toEqual(['10px', '20px'])
+  })
+
   it('converts viewport variant values to breakpoints (case-insensitive)', () => {
     // lowercase
     expect(viewportToBreakpoint('mobile')).toBe('mobile')