@wix/zero-config-implementation 1.27.0 → 1.29.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.27.0",
+  "version": "1.29.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -83,5 +83,5 @@
       ]
     }
   },
-  "falconPackageHash": "2e095856ec4492a70d52bef24a3f7ac22639454039660a7869423748"
+  "falconPackageHash": "9f12ded214e8668f280831d8bb3e03f08b14e2a9a46a97c8a423c29b"
 }

package/src/converters/utils.test.ts

@@ -13,4 +13,28 @@ describe('formatDisplayName', () => {
   it('formats camelCase', () => {
     expect(formatDisplayName('camelCaseExample')).toBe('Camel Case Example')
   })
+
+  it('returns name unchanged when exactly 50 characters', () => {
+    // 10 words of 4 chars + 9 spaces = 49 chars; add one more char to hit 50
+    const input = 'Word One Two Three Four Five Six Seven Eight Nine'
+    expect(input.length).toBe(49)
+    expect(formatDisplayName(input)).toBe(input)
+  })
+
+  it('drops leading words when formatted name exceeds 50 characters', () => {
+    // capitalCase('myVeryLongComponentWithAnExtremelyLongDisplayName')
+    // => "My Very Long Component With An Extremely Long Display Name" (58 chars)
+    // Drop "My" => 55 chars, drop "Very" => "Long Component With An Extremely Long Display Name" (50 chars)
+    expect(formatDisplayName('myVeryLongComponentWithAnExtremelyLongDisplayName')).toBe(
+      'Long Component With An Extremely Long Display Name',
+    )
+  })
+
+  it('truncates at 50 characters when a single word exceeds the limit', () => {
+    // capitalCase of 51 repeated 'a' characters is a single word starting with uppercase
+    const longSingleWord = 'a'.repeat(51)
+    const expected = `A${'a'.repeat(49)}` // 50 chars total
+    expect(formatDisplayName(longSingleWord)).toBe(expected)
+    expect(formatDisplayName(longSingleWord).length).toBe(50)
+  })
 })

package/src/converters/utils.ts

@@ -8,10 +8,14 @@ const DISPLAY_NAME_OVERRIDES = {
   a11y: 'Accessibility',
 } as const
 
+const DISPLAY_NAME_MAX_LENGTH = 50
+
 /**
  * Formats any string format to Title Case display name
  * Handles: kebab-case, camelCase, PascalCase, snake_case, SCREAMING_SNAKE_CASE, and mixed formats
  *
+ * If the result exceeds 50 characters, leading words are dropped (end words are more specific).
+ *
  * Examples:
  *   "input-field-weight" -> "Input Field Weight"
  *   "camelCaseExample" -> "Camel Case Example"
@@ -20,10 +24,20 @@ const DISPLAY_NAME_OVERRIDES = {
  *   "SCREAMING_SNAKE_CASE" -> "Screaming Snake Case"
  *   "mixed-format_example" -> "Mixed Format Example"
  *   "a11y" -> "Accessibility"
+ *   "myVeryLongComponentWithAnExtremelyLongDisplayName" -> "With An Extremely Long Display Name"
  */
 export function formatDisplayName(input: string): string {
   if (input in DISPLAY_NAME_OVERRIDES) {
     return DISPLAY_NAME_OVERRIDES[input as keyof typeof DISPLAY_NAME_OVERRIDES]
   }
-  return capitalCase(input, { keepSpecialCharacters: false })
+  const formatted = capitalCase(input, { keepSpecialCharacters: false })
+  if (formatted.length <= DISPLAY_NAME_MAX_LENGTH) {
+    return formatted
+  }
+  const words = formatted.split(' ')
+  while (words.length > 1 && words.join(' ').length > DISPLAY_NAME_MAX_LENGTH) {
+    words.shift()
+  }
+  const result = words.join(' ')
+  return result.slice(0, DISPLAY_NAME_MAX_LENGTH)
 }

package/src/information-extractors/react/extractors/core/tree-builder.ts

@@ -12,6 +12,7 @@ import { findPreferredSemanticClass } from '../../../../utils/css-class'
 import { PRESETS_WRAPPER_CLASS_NAME } from '../../utils/mock-generator'
 import type { CssPropertiesData } from '../css-properties'
 import { addTextProperties } from '../css-properties'
+import type { PropTrackerData } from '../prop-tracker'
 import type { ExtractorStore } from './store'
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -150,7 +151,7 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
   const id = getAttribute(element, 'id')
   // Skip spy-instrumented ids (mock_propName_XXXXXX) — they are runtime mock values,
   // not semantic identifiers, and would produce garbage element names.
-  if (id && !id.startsWith('mock_')) {
+  if (id && !id.includes('mock_')) {
     return pascalCase(id)
   }
 
@@ -179,6 +180,28 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
   return normalizeTagName(element.tagName)
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Element Filtering
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Returns true if the element should be included in the tree:
+ * - has a BEM-semantic CSS class, OR
+ * - has a className prop propagated from the component's props
+ */
+function hasClassNameCriteria(element: Element, extractorData: Map<string, unknown>): boolean {
+  const classAttr = getAttribute(element, 'class')
+  if (classAttr) {
+    const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
+    if (semanticClass) return true
+  }
+
+  const propTrackerData = extractorData.get('prop-tracker') as PropTrackerData | undefined
+  if (propTrackerData?.boundProps.includes('className')) return true
+
+  return false
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Tree Building
 // ─────────────────────────────────────────────────────────────────────────────
@@ -234,15 +257,20 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
 
     // If this element has a traceId, it's a traced element
     if (traceId) {
+      // Get extractor data from store
+      const extractorData = store.getAll(traceId) ?? new Map()
+
+      // Filter: only include non-root elements with semantic or propagated className
+      if (!isRoot && !hasClassNameCriteria(node, extractorData)) {
+        return node.childNodes.flatMap((child) => walkTree(child, ancestorPath, false))
+      }
+
       // Compute this element's name part
       const namePart = isRoot ? 'root' : getElementNamePart(node, getElementById)
 
       // Full name is ancestor path + this element's name (no separator)
       const name = isRoot ? 'root' : ancestorPath + namePart
 
-      // Get extractor data from store
-      const extractorData = store.getAll(traceId) ?? new Map()
-
       // Check for text content
       const hasText = hasDirectTextContent(node)