@wix/zero-config-implementation 1.27.0 → 1.28.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.27.0",
+  "version": "1.28.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": "b9b7aa47b7618d7b031628208f9fb26661e34ddb5fe300679306084e"
 }

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)