Optimize

Author: owjs3901

src/code-impl.ts

@@ -4,12 +4,13 @@ import { resetSelectorPropsCache } from './codegen/props/selector'
 import { ResponsiveCodegen } from './codegen/responsive/ResponsiveCodegen'
 import { nodeProxyTracker } from './codegen/utils/node-proxy'
 import { perfEnd, perfReport, perfReset, perfStart } from './codegen/utils/perf'
+import { resetVariableCache } from './codegen/utils/variable-cache'
 import { wrapComponent } from './codegen/utils/wrap-component'
 import { exportDevup, importDevup } from './commands/devup'
 import { exportAssets } from './commands/exportAssets'
 import { exportComponents } from './commands/exportComponents'
 import { exportPagesAndComponents } from './commands/exportPagesAndComponents'
-import { getComponentName } from './utils'
+import { getComponentName, resetTextStyleCache } from './utils'
 import { toPascal } from './utils/to-pascal'
 
 const DEVUP_COMPONENTS = [
@@ -132,6 +133,8 @@ export function registerCodegen(ctx: typeof figma) {
           perfReset()
           resetGetPropsCache()
           resetSelectorPropsCache()
+          resetVariableCache()
+          resetTextStyleCache()
 
           let t = perfStart()
           const codegen = new Codegen(node)

src/codegen/Codegen.ts

@@ -212,13 +212,11 @@ export class Codegen {
 
     // Build children sequentially to avoid Figma API contention.
     // getProps(node) is already in-flight concurrently above.
+    // INSTANCE children are handled inside doBuildTree when buildTree(child) recurses —
+    // no pre-call to getMainComponentAsync needed (was causing duplicate Figma API calls).
     const children: NodeTree[] = []
     if ('children' in node) {
       for (const child of node.children) {
-        if (child.type === 'INSTANCE') {
-          const mainComponent = await child.getMainComponentAsync()
-          if (mainComponent) await this.addComponentTree(mainComponent)
-        }
         children.push(await this.buildTree(child))
       }
     }
@@ -296,14 +294,11 @@ export class Codegen {
     const t = perfStart()
     const selectorPropsPromise = getSelectorProps(node)
 
-    // Build children sequentially to avoid Figma API contention
+    // Build children sequentially to avoid Figma API contention.
+    // INSTANCE children are handled inside doBuildTree when buildTree(child) recurses.
     const childrenTrees: NodeTree[] = []
     if ('children' in node) {
       for (const child of node.children) {
-        if (child.type === 'INSTANCE') {
-          const mainComponent = await child.getMainComponentAsync()
-          if (mainComponent) await this.addComponentTree(mainComponent)
-        }
         childrenTrees.push(await this.buildTree(child))
       }
     }

src/codegen/props/index.ts

@@ -51,6 +51,19 @@ export async function getProps(
     // Fire all async prop getters in parallel — they are independent
     // (no shared mutable state, no inter-function data dependencies).
     // Skip TEXT-only async getters for non-TEXT nodes.
+    const tBorder = perfStart()
+    const borderP = getBorderProps(node)
+    const tBg = perfStart()
+    const bgP = getBackgroundProps(node)
+    const tEffect = perfStart()
+    const effectP = getEffectProps(node)
+    const tTextStroke = perfStart()
+    const textStrokeP = isText ? getTextStrokeProps(node) : undefined
+    const tTextShadow = perfStart()
+    const textShadowP = isText ? getTextShadowProps(node) : undefined
+    const tReaction = perfStart()
+    const reactionP = getReactionProps(node)
+
     const [
       borderProps,
       backgroundProps,
@@ -59,12 +72,34 @@ export async function getProps(
       textShadowProps,
       reactionProps,
     ] = await Promise.all([
-      getBorderProps(node),
-      getBackgroundProps(node),
-      getEffectProps(node),
-      isText ? getTextStrokeProps(node) : undefined,
-      isText ? getTextShadowProps(node) : undefined,
-      getReactionProps(node),
+      borderP.then((r) => {
+        perfEnd('getProps.border', tBorder)
+        return r
+      }),
+      bgP.then((r) => {
+        perfEnd('getProps.background', tBg)
+        return r
+      }),
+      effectP.then((r) => {
+        perfEnd('getProps.effect', tEffect)
+        return r
+      }),
+      textStrokeP
+        ? textStrokeP.then((r) => {
+            perfEnd('getProps.textStroke', tTextStroke)
+            return r
+          })
+        : undefined,
+      textShadowP
+        ? textShadowP.then((r) => {
+            perfEnd('getProps.textShadow', tTextShadow)
+            return r
+          })
+        : undefined,
+      reactionP.then((r) => {
+        perfEnd('getProps.reaction', tReaction)
+        return r
+      }),
     ])
 
     return {

src/codegen/render/text.ts

@@ -2,6 +2,7 @@ import { propsToPropsWithTypography } from '../../utils'
 import { textSegmentToTypography } from '../../utils/text-segment-to-typography'
 import { fixTextChild } from '../utils/fix-text-child'
 import { paintToCSS } from '../utils/paint-to-css'
+import { perfEnd, perfStart } from '../utils/perf'
 import { renderNode } from '.'
 
 /**
@@ -34,6 +35,7 @@ export async function renderText(node: TextNode): Promise<{
   children: string[]
   props: Record<string, string>
 }> {
+  const tRender = perfStart()
   const segs = node.getStyledTextSegments(SEGMENT_TYPE)
 
   // select main color
@@ -139,15 +141,18 @@ export async function renderText(node: TextNode): Promise<{
   )
   const resultChildren = children.flat()
 
-  if (resultChildren.length === 1)
+  if (resultChildren.length === 1) {
+    perfEnd('renderText()', tRender)
     return {
       children: resultChildren[0].children,
       props: {
         ...defaultProps,
         ...resultChildren[0].props,
       },
     }
+  }
 
+  perfEnd('renderText()', tRender)
   return {
     children: resultChildren.map((child) => {
       if (Object.keys(child.props).length === 0)

src/codegen/utils/__tests__/paint-to-css.test.ts

@@ -1,12 +1,16 @@
-import { describe, expect, mock, test } from 'bun:test'
+import { beforeEach, describe, expect, mock, test } from 'bun:test'
 import { paintToCSS } from '../paint-to-css'
+import { resetVariableCache } from '../variable-cache'
 
 // mock asset checker to avoid real node handling
 mock.module('../check-asset-node', () => ({
   checkAssetNode: () => 'png',
 }))
 
 describe('paintToCSS', () => {
+  beforeEach(() => {
+    resetVariableCache()
+  })
   test('converts image paint with TILE scaleMode to repeat url', async () => {
     ;(globalThis as { figma?: unknown }).figma = {
       util: { rgba: (v: unknown) => v },

src/codegen/utils/paint-to-css.ts

@@ -4,6 +4,7 @@ import { toCamel } from '../../utils/to-camel'
 import { checkAssetNode } from './check-asset-node'
 import { fmtPct } from './fmtPct'
 import { solidToString } from './solid-to-string'
+import { getVariableByIdCached } from './variable-cache'
 import { buildCssUrl } from './wrap-url'
 
 interface Point {
@@ -19,7 +20,7 @@ async function processGradientStopColor(
   opacity: number,
 ): Promise<string> {
   if (stop.boundVariables?.color) {
-    const variable = await figma.variables.getVariableByIdAsync(
+    const variable = await getVariableByIdCached(
       stop.boundVariables.color.id as string,
     )
     if (variable?.name) {

src/codegen/utils/solid-to-string.ts

@@ -1,10 +1,11 @@
 import { optimizeHex } from '../../utils/optimize-hex'
 import { rgbaToHex } from '../../utils/rgba-to-hex'
 import { toCamel } from '../../utils/to-camel'
+import { getVariableByIdCached } from './variable-cache'
 
 export async function solidToString(solid: SolidPaint) {
   if (solid.boundVariables?.color) {
-    const variable = await figma.variables.getVariableByIdAsync(
+    const variable = await getVariableByIdCached(
       solid.boundVariables.color.id as string,
     )
     if (variable?.name) return `$${toCamel(variable.name)}`

src/codegen/utils/variable-cache.ts

@@ -0,0 +1,22 @@
+// Global cache for figma.variables.getVariableByIdAsync() results.
+// This is the single hottest Figma API call — used by solidToString,
+// processGradientStopColor, and transitively by every prop getter that
+// resolves colors (border, background, text-stroke, reaction, renderText).
+// Keyed by variable ID; stores the Promise to deduplicate concurrent calls.
+const variableByIdCache = new Map<string, Promise<Variable | null>>()
+
+export function getVariableByIdCached(
+  variableId: string,
+): Promise<Variable | null> {
+  const cached = variableByIdCache.get(variableId)
+  if (cached) return cached
+  const promise = Promise.resolve(
+    figma.variables.getVariableByIdAsync(variableId),
+  )
+  variableByIdCache.set(variableId, promise)
+  return promise
+}
+
+export function resetVariableCache(): void {
+  variableByIdCache.clear()
+}

src/utils.ts

@@ -1,16 +1,43 @@
 import { toCamel } from './utils/to-camel'
 import { toPascal } from './utils/to-pascal'
 
+// Cache for figma.getLocalTextStylesAsync() — called once per codegen run
+let localTextStyleIdsCache: Promise<Set<string>> | null = null
+
+function getLocalTextStyleIds(): Promise<Set<string>> {
+  if (localTextStyleIdsCache) return localTextStyleIdsCache
+  localTextStyleIdsCache = Promise.resolve(
+    figma.getLocalTextStylesAsync(),
+  ).then((styles) => new Set(styles.map((s) => s.id)))
+  return localTextStyleIdsCache
+}
+
+// Cache for figma.getStyleByIdAsync() — keyed by style ID
+const styleByIdCache = new Map<string, Promise<BaseStyle | null>>()
+
+function getStyleByIdCached(styleId: string): Promise<BaseStyle | null> {
+  const cached = styleByIdCache.get(styleId)
+  if (cached) return cached
+  const promise = Promise.resolve(figma.getStyleByIdAsync(styleId))
+  styleByIdCache.set(styleId, promise)
+  return promise
+}
+
+export function resetTextStyleCache(): void {
+  localTextStyleIdsCache = null
+  styleByIdCache.clear()
+}
+
 export async function propsToPropsWithTypography(
   props: Record<string, unknown>,
   textStyleId: string,
 ) {
   const ret: Record<string, unknown> = { ...props }
   delete ret.w
   delete ret.h
-  const styles = await figma.getLocalTextStylesAsync()
-  if (textStyleId && styles.find((style) => style.id === textStyleId)) {
-    const style = await figma.getStyleByIdAsync(textStyleId)
+  const localStyleIds = await getLocalTextStyleIds()
+  if (textStyleId && localStyleIds.has(textStyleId)) {
+    const style = await getStyleByIdCached(textStyleId)
     if (style) {
       const split = style.name.split('/')
       ret.typography = toCamel(split[split.length - 1])