Optimize

Author: owjs3901

src/code-impl.ts

@@ -18,60 +18,16 @@ 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 {
+  exportPagesAndComponents,
+  extractCustomComponentImports,
+  extractImports,
+} from './commands/exportPagesAndComponents'
+export { extractCustomComponentImports, extractImports }
+
 import { getComponentName, resetTextStyleCache } from './utils'
 import { toPascal } from './utils/to-pascal'
 
-const DEVUP_COMPONENTS = [
-  'Center',
-  'VStack',
-  'Flex',
-  'Grid',
-  'Box',
-  'Text',
-  'Image',
-]
-
-export function extractImports(
-  componentsCodes: ReadonlyArray<readonly [string, string]>,
-): string[] {
-  const allCode = componentsCodes.map(([_, code]) => code).join('\n')
-  const imports = new Set<string>()
-
-  for (const component of DEVUP_COMPONENTS) {
-    const regex = new RegExp(`<${component}[\\s/>]`, 'g')
-    if (regex.test(allCode)) {
-      imports.add(component)
-    }
-  }
-
-  if (/\bkeyframes\s*(\(|`)/.test(allCode)) {
-    imports.add('keyframes')
-  }
-
-  return Array.from(imports).sort()
-}
-
-export function extractCustomComponentImports(
-  componentsCodes: ReadonlyArray<readonly [string, string]>,
-): string[] {
-  const allCode = componentsCodes.map(([_, code]) => code).join('\n')
-  const customImports = new Set<string>()
-
-  // Find all component usages in JSX: <ComponentName or <ComponentName>
-  const componentUsageRegex = /<([A-Z][a-zA-Z0-9]*)/g
-  const matches = allCode.matchAll(componentUsageRegex)
-  for (const match of matches) {
-    const componentName = match[1]
-    // Skip devup-ui components and components defined in this code
-    if (!DEVUP_COMPONENTS.includes(componentName)) {
-      customImports.add(componentName)
-    }
-  }
-
-  return Array.from(customImports).sort()
-}
-
 function generateImportStatements(
   componentsCodes: ReadonlyArray<readonly [string, string]>,
 ): string {
@@ -357,9 +313,6 @@ export function registerCodegen(ctx: typeof figma) {
             componentsResponsiveCodes = responsiveResults
           }
 
-          console.info(`[benchmark] devup-ui end ${Date.now() - time}ms`)
-          console.info(perfReport())
-
           // Check if node itself is SECTION or has a parent SECTION
           const isNodeSection = ResponsiveCodegen.canGenerateResponsive(node)
           const parentSection = ResponsiveCodegen.hasParentSection(node)
@@ -416,6 +369,8 @@ export function registerCodegen(ctx: typeof figma) {
             }
           }
           if (debug) {
+            console.info(`[benchmark] devup-ui end ${Date.now() - time}ms`)
+            console.info(perfReport())
             // Track AFTER codegen — collects all node properties for test case
             // generation without Proxy overhead during the hot codegen path.
             nodeProxyTracker.trackTree(node)

src/codegen/props/auto-layout.ts

@@ -59,7 +59,10 @@ function getAlignItems(node: SceneNode & BaseFrameMixin): string | undefined {
 function getGridProps(
   node: GridLayoutMixin,
 ): Record<string, boolean | undefined | string | number | null> {
-  const sameGap = node.gridRowGap === node.gridColumnGap
+  // Round to 2 decimal places to handle Figma floating-point imprecision
+  const sameGap =
+    Math.round(node.gridRowGap * 100) / 100 ===
+    Math.round(node.gridColumnGap * 100) / 100
   return {
     display: 'grid',
     gridTemplateColumns: `repeat(${node.gridColumnCount}, 1fr)`,

src/codegen/props/border.ts

@@ -43,7 +43,7 @@ export async function getBorderProps(
   const paintCssList = []
   for (let i = 0; i < node.strokes.length; i++) {
     const paint = node.strokes[node.strokes.length - 1 - i]
-    if (paint.visible && paint.opacity !== 0) {
+    if (paint.visible !== false && paint.opacity !== 0) {
       paintCssList.push(
         paintToCSSSyncIfPossible(paint, node, i === node.strokes.length - 1) ??
           (await paintToCSS(paint, node, i === node.strokes.length - 1)),

src/codegen/props/selector.ts

@@ -62,27 +62,27 @@ function toTransitionPropertyName(key: string): string {
   return toKebabCase(mapped)
 }
 
-// 속성 이름을 유효한 TypeScript 식별자로 변환
+// Convert property names to valid TypeScript identifiers
 const toUpperCase = (_: string, chr: string) => chr.toUpperCase()
 
 export function sanitizePropertyName(name: string): string {
   // 0. Strip Figma's internal "#nodeId:uniqueId" suffix (e.g., "leftIcon#60:123" → "leftIcon")
   const stripped = name.replace(/#\d+:\d+$/, '')
 
-  // 1. 한글 '속성'을 'property'로 변환 (공백 포함 처리: "속성1" → "property1")
-  const normalized = stripped.trim().replace(/속성\s*/g, 'property') // 한글 '속성' + 뒤따르는 공백을 'property'로 변환
+  // 1. Replace Korean word for "property" with English equivalent (e.g., "속성1" → "property1")
+  const normalized = stripped.trim().replace(/속성\s*/g, 'property')
 
-  // 2. 공백과 특수문자를 처리하여 camelCase로 변환
+  // 2. Convert spaces and special characters to camelCase
   const result = normalized
-    // 공백이나 특수문자 뒤의 문자를 대문자로 (camelCase 변환)
+    // Capitalize the character after spaces/hyphens/underscores (camelCase)
     .replace(/[\s\-_]+(.)/g, toUpperCase)
-    // 숫자로 시작하면 앞에 _ 추가
+    // Prefix leading digits with underscore
     .replace(/^(\d)/, '_$1')
 
-  // 3. 유효하지 않은 문자 제거 (한글, 특수문자 등)
+  // 3. Remove invalid characters (Korean, special chars, etc.)
   const cleaned = result.replace(/[^\w$]/g, '')
 
-  // 4. 완전히 비어있거나 숫자로만 구성된 경우 기본값 사용
+  // 4. Fall back to default name if empty or digits-only
   if (!cleaned || /^\d+$/.test(cleaned)) {
     return 'variant'
   }
@@ -143,9 +143,6 @@ async function computeSelectorProps(node: ComponentSetNode): Promise<{
 }> {
   const hasEffect = !!node.componentPropertyDefinitions.effect
   const tSelector = perfStart()
-  console.info(
-    `[perf] getSelectorProps: processing ${node.children.length} children`,
-  )
   // Pre-filter: only call expensive getProps() on children with non-default effects.
   // The effect/trigger check is a cheap property read — skip children that would be
   // discarded later anyway (effect === undefined or effect === 'default').
@@ -303,9 +300,6 @@ async function computeSelectorPropsForGroup(
   if (!defaultComponent) return {}
 
   const tGroup = perfStart()
-  console.info(
-    `[perf] getSelectorPropsForGroup: processing ${matchingComponents.length} matching components`,
-  )
   const defaultProps = await getProps(defaultComponent)
   const result: Record<string, object | string> = {}
   const diffKeys = new Set<string>()

src/codegen/props/text-shadow.ts

@@ -7,7 +7,7 @@ export function getTextShadowProps(
 ): Record<string, string> | undefined {
   if (node.type !== 'TEXT') return
 
-  const effects = node.effects.filter((effect) => effect.visible)
+  const effects = node.effects.filter((effect) => effect.visible !== false)
   if (effects.length === 0) return
   const dropShadows = effects.filter((effect) => effect.type === 'DROP_SHADOW')
   if (dropShadows.length === 0) return

src/codegen/props/text-stroke.ts

@@ -5,7 +5,7 @@ export async function getTextStrokeProps(
 ): Promise<Record<string, string> | undefined> {
   if (node.type !== 'TEXT') return
 
-  const strokes = node.strokes.filter((stroke) => stroke.visible)
+  const strokes = node.strokes.filter((stroke) => stroke.visible !== false)
   if (strokes.length === 0) return
   const solidStrokes = strokes.filter((stroke) => stroke.type === 'SOLID')
   // @todo support gradient stroke

src/codegen/responsive/ResponsiveCodegen.ts

@@ -547,9 +547,6 @@ export class ResponsiveCodegen {
     componentSet: ComponentSetNode,
     componentName: string,
   ): Promise<ReadonlyArray<readonly [string, string]>> {
-    console.info(
-      `[perf] generateVariantResponsiveComponents: ${componentName}, ${componentSet.children.length} children, ${Object.keys(componentSet.componentPropertyDefinitions).length} variant keys`,
-    )
     const tTotal = perfStart()
 
     // Find viewport and effect variant keys

src/codegen/utils/check-asset-node.ts

@@ -45,7 +45,7 @@ export function checkAssetNode(
       // if node has tile, it is not an Image, it just has a tile background
       node.fills.find(
         (fill: Paint) =>
-          fill.visible &&
+          fill.visible !== false &&
           (fill.type === 'PATTERN' ||
             (fill.type === 'IMAGE' && fill.scaleMode === 'TILE')),
       )
@@ -55,7 +55,7 @@ export function checkAssetNode(
       ? 'fills' in node && Array.isArray(node.fills)
         ? node.fills.some(
             (fill: Paint) =>
-              fill.visible &&
+              fill.visible !== false &&
               fill.type === 'IMAGE' &&
               fill.scaleMode !== 'TILE',
           )
@@ -75,7 +75,7 @@ export function checkAssetNode(
           Array.isArray(node.fills) &&
           !node.fills.some(
             (fill: Paint) =>
-              fill.visible &&
+              fill.visible !== false &&
               (fill.type === 'IMAGE' ||
                 fill.type === 'VIDEO' ||
                 fill.type === 'PATTERN'),
@@ -93,18 +93,15 @@ export function checkAssetNode(
           node.paddingBottom > 0)) ||
       ('fills' in node &&
         (Array.isArray(node.fills)
-          ? node.fills.find((fill) => fill.visible)
+          ? node.fills.find((fill) => fill.visible !== false)
           : true))
     )
       return null
     return checkAssetNode(children[0], true)
   }
-  const fillterdChildren = children.filter((child) => child.visible)
+  const filteredChildren = children.filter((child) => child.visible)
 
-  // return children.every((child) => child.visible && checkAssetNode(child))
-  //   ? 'svg'
-  //   : null
-  return fillterdChildren.every((child) => {
+  return filteredChildren.every((child) => {
     const result = checkAssetNode(child, true)
     if (result === null) return false
     return result === 'svg'

src/codegen/utils/four-value-shortcut.ts

@@ -1,11 +1,17 @@
 import { addPx } from './add-px'
 
 export function fourValueShortcut(
-  first: number,
-  second: number,
-  third: number,
-  fourth: number,
+  _first: number,
+  _second: number,
+  _third: number,
+  _fourth: number,
 ): string {
+  // Round to 2 decimal places to handle Figma floating-point imprecision
+  const first = Math.round(_first * 100) / 100
+  const second = Math.round(_second * 100) / 100
+  const third = Math.round(_third * 100) / 100
+  const fourth = Math.round(_fourth * 100) / 100
+
   if (first === second && second === third && third === fourth)
     return addPx(first, '0')
   if (first === third && second === fourth)