Optimize

Author: owjs3901

src/codegen/Codegen.ts

@@ -155,20 +155,22 @@ export class Codegen {
   }
 
   getComponentsCodes() {
-    return Array.from(this.components.values()).map(
-      ({ node, code, variants }) => {
-        const name = getComponentName(node)
-        return [name, renderComponent(name, code, variants)] as const
-      },
-    )
+    const result: Array<readonly [string, string]> = []
+    for (const { node, code, variants } of this.components.values()) {
+      const name = getComponentName(node)
+      result.push([name, renderComponent(name, code, variants)])
+    }
+    return result
   }
 
   /**
    * Get the component nodes (SceneNode values from components Map).
    * Useful for generating responsive codes for each component.
    */
   getComponentNodes() {
-    return Array.from(this.components.values()).map(({ node }) => node)
+    const result: SceneNode[] = []
+    for (const { node } of this.components.values()) result.push(node)
+    return result
   }
 
   /**

src/codegen/props/selector.ts

@@ -183,7 +183,8 @@ async function computeSelectorProps(node: ComponentSetNode): Promise<{
       }
     }
     if (transition?.type === 'SMART_ANIMATE' && diffKeys.size > 0) {
-      const keys = Array.from(diffKeys).map(toTransitionPropertyName)
+      const keys: string[] = []
+      for (const key of diffKeys) keys.push(toTransitionPropertyName(key))
       keys.sort()
       result.props.transition = `${fmtPct(transition.duration)}ms ${transition.easing.type.toLocaleLowerCase().replaceAll('_', '-')}`
       result.props.transitionProperty = keys.join(',')
@@ -313,7 +314,8 @@ async function computeSelectorPropsForGroup(
       ?.flatMap(getTransition)
       .flat()[0]
     if (transition?.type === 'SMART_ANIMATE') {
-      const keys = Array.from(diffKeys).map(toTransitionPropertyName)
+      const keys: string[] = []
+      for (const key of diffKeys) keys.push(toTransitionPropertyName(key))
       keys.sort()
       result.transition = `${fmtPct(transition.duration)}ms ${transition.easing.type.toLocaleLowerCase().replaceAll('_', '-')}`
       result.transitionProperty = keys.join(',')

src/codegen/render/text.ts

@@ -58,27 +58,30 @@ export async function renderText(node: TextNode): Promise<{
       },
       seg.textStyleId,
     )
-    propsArray.push(
-      Object.fromEntries(
-        Object.entries(typo)
-          .filter(([_, value]) => Boolean(value))
-          .map(([key, value]) => [key, String(value)]),
-      ),
-    )
+    const filtered: Record<string, string> = {}
+    for (const key in typo) {
+      const v = typo[key]
+      if (v) filtered[key] = String(v)
+    }
+    propsArray.push(filtered)
   }
-  let defaultTypographyCount = 0
+  const _defaultTypographyCount = 0
   let defaultProps: Record<string, string> = {}
 
   // Check if any segment contains Korean text
   const hasKorean = segs.some((seg) => containsKorean(seg.characters))
 
-  propsArray.forEach((props) => {
-    if (props.characters.length >= defaultTypographyCount) {
-      defaultProps = { ...props }
-      delete defaultProps.characters
-      defaultTypographyCount = props.characters.length
+  let longestIdx = 0
+  for (let i = 0; i < propsArray.length; i++) {
+    if (
+      propsArray[i].characters.length >=
+      propsArray[longestIdx].characters.length
+    ) {
+      longestIdx = i
     }
-  })
+  }
+  defaultProps = { ...propsArray[longestIdx] }
+  delete defaultProps.characters
 
   // Add wordBreak: keep-all for Korean text
   if (hasKorean) {

src/codegen/responsive/ResponsiveCodegen.ts

@@ -315,32 +315,30 @@ export class ResponsiveCodegen {
     componentSet: ComponentSetNode,
     componentName: string,
   ): Promise<ReadonlyArray<readonly [string, string]>> {
-    // Find viewport variant key
-    const viewportKey = Object.keys(
-      componentSet.componentPropertyDefinitions,
-    ).find((key) => key.toLowerCase() === 'viewport')
+    // Find viewport and effect variant keys
+    let viewportKey: string | undefined
+    let effectKey: string | undefined
+    for (const key in componentSet.componentPropertyDefinitions) {
+      const lower = key.toLowerCase()
+      if (lower === 'viewport') viewportKey = key
+      else if (lower === 'effect') effectKey = key
+    }
 
     if (!viewportKey) {
       return []
     }
 
     // Get variants excluding viewport
     const variants: Record<string, string> = {}
-    for (const [name, definition] of Object.entries(
-      componentSet.componentPropertyDefinitions,
-    )) {
+    for (const name in componentSet.componentPropertyDefinitions) {
+      const definition = componentSet.componentPropertyDefinitions[name]
       if (name.toLowerCase() !== 'viewport' && definition.type === 'VARIANT') {
         const sanitizedName = sanitizePropertyName(name)
         variants[sanitizedName] =
           definition.variantOptions?.map((opt) => `'${opt}'`).join(' | ') || ''
       }
     }
 
-    // Find effect variant key (to exclude from grouping)
-    const effectKey = Object.keys(
-      componentSet.componentPropertyDefinitions,
-    ).find((key) => key.toLowerCase() === 'effect')
-
     // Group components by non-viewport, non-effect variants
     const groups = new Map<string, Map<BreakpointKey, ComponentNode>>()
 
@@ -358,16 +356,15 @@ export class ResponsiveCodegen {
 
       const breakpoint = viewportToBreakpoint(viewportValue)
       // Create group key from non-viewport, non-effect variants
-      const otherVariants = Object.entries(variantProps)
-        .filter(([key]) => {
-          const lowerKey = key.toLowerCase()
-          return lowerKey !== 'viewport' && lowerKey !== 'effect'
-        })
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([key, value]) => `${key}=${value}`)
-        .join('|')
-
-      const groupKey = otherVariants || '__default__'
+      const parts: string[] = []
+      for (const key in variantProps) {
+        const lowerKey = key.toLowerCase()
+        if (lowerKey !== 'viewport' && lowerKey !== 'effect') {
+          parts.push(`${key}=${variantProps[key]}`)
+        }
+      }
+      parts.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+      const groupKey = parts.join('|') || '__default__'
 
       if (!groups.has(groupKey)) {
         groups.set(groupKey, new Map())
@@ -415,7 +412,7 @@ export class ResponsiveCodegen {
           )
           perfEnd('getSelectorPropsForGroup(viewport)', t)
           if (Object.keys(selectorProps).length > 0) {
-            tree.props = { ...tree.props, ...selectorProps }
+            tree.props = Object.assign({}, tree.props, selectorProps)
           }
         }
 
@@ -454,24 +451,22 @@ export class ResponsiveCodegen {
     )
     const tTotal = perfStart()
 
-    // Find viewport variant key
-    const viewportKey = Object.keys(
-      componentSet.componentPropertyDefinitions,
-    ).find((key) => key.toLowerCase() === 'viewport')
-
-    // Find effect variant key
-    const effectKey = Object.keys(
-      componentSet.componentPropertyDefinitions,
-    ).find((key) => key.toLowerCase() === 'effect')
+    // Find viewport and effect variant keys
+    let viewportKey: string | undefined
+    let effectKey: string | undefined
+    for (const key in componentSet.componentPropertyDefinitions) {
+      const lower = key.toLowerCase()
+      if (lower === 'viewport') viewportKey = key
+      else if (lower === 'effect') effectKey = key
+    }
 
     // Get all variant keys excluding viewport and effect
     const otherVariantKeys: string[] = []
     const variants: Record<string, string> = {}
     // Map from original name to sanitized name
     const variantKeyToSanitized: Record<string, string> = {}
-    for (const [name, definition] of Object.entries(
-      componentSet.componentPropertyDefinitions,
-    )) {
+    for (const name in componentSet.componentPropertyDefinitions) {
+      const definition = componentSet.componentPropertyDefinitions[name]
       if (definition.type === 'VARIANT') {
         const lowerName = name.toLowerCase()
         // Exclude both viewport and effect from variant keys
@@ -628,7 +623,7 @@ export class ResponsiveCodegen {
           )
           perfEnd('getSelectorPropsForGroup()', t)
           if (Object.keys(selectorProps).length > 0) {
-            tree.props = { ...tree.props, ...selectorProps }
+            tree.props = Object.assign({}, tree.props, selectorProps)
           }
         }
 
@@ -672,7 +667,7 @@ export class ResponsiveCodegen {
     // Get pseudo-selector props (hover, active, disabled, etc.)
     const selectorProps = await getSelectorPropsForGroup(componentSet, {})
     if (Object.keys(selectorProps).length > 0) {
-      tree.props = { ...tree.props, ...selectorProps }
+      tree.props = Object.assign({}, tree.props, selectorProps)
     }
 
     // Render the tree to JSX
@@ -742,7 +737,7 @@ export class ResponsiveCodegen {
       perfEnd('Codegen.getTree(nonViewportVariant)', t)
       // Add pseudo-selector props to tree — create NEW props to avoid mutating cached tree
       if (selectorProps && Object.keys(selectorProps).length > 0) {
-        tree.props = { ...tree.props, ...selectorProps }
+        tree.props = Object.assign({}, tree.props, selectorProps)
       }
       treesByVariant.set(variantValue, tree)
     }