@wix/zero-config-implementation 1.39.0 → 1.41.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.39.0",
+  "version": "1.41.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -84,5 +84,5 @@
       ]
     }
   },
-  "falconPackageHash": "7a722b2c0d3a2401e9c24708c061591e14e588d2901397bab2ddb304"
+  "falconPackageHash": "ddb29001681fab5fe2cdf61a3df6d062898ed82539a5c841e9a45c39"
 }

package/src/converters/to-editor-component.ts

@@ -170,6 +170,7 @@ function buildNearestCommonAncestorCustomProps(
 
     const existingProps = nearestCommonAncestorCustomProps.get(nearestCommonAncestorTraceId) ?? {}
     existingProps[cleanVarName] = {
+      displayName: formatDisplayName(cleanVarName),
       defaultValue,
       ...(cssPropertyType !== undefined && { cssPropertyType }),
     }

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

@@ -2,10 +2,10 @@
  * Build Element Tree
  *
  * Parses HTML to get hierarchy and merges with ExtractorStore data.
- * Each element gets a semantic name computed by concatenating ancestor names.
+ * Each element gets a semantic local name from semantic selectors/attributes.
  */
 
-import { camelCase, pascalCase } from 'case-anything'
+import { camelCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
 import { findPreferredSemanticClass } from '../../../../utils/css-class'
@@ -229,7 +229,7 @@ function unwrapPresetsWrappers(nodes: Node[]): Node[] {
 
 /**
  * Builds an element tree from HTML, merging with store data.
- * Each element gets a semantic name from concatenated ancestor names.
+ * Each element gets a semantic local name.
  */
 export function buildElementTree(html: string, store: ExtractorStore): ExtractedElement[] {
   const fragment = parseFragment(html)
@@ -252,12 +252,12 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
   /**
    * Recursively walks the tree, building ExtractedElements.
    * @param node - The current parse5 node
-   * @param ancestorPath - The concatenated name path from ancestors (empty for root's children)
    * @param isRoot - Whether this is the root element (first traced element)
    */
-  const walkTree = (node: Node, ancestorPath: string, isRoot: boolean): ExtractedElement[] => {
+  const walkTree = (node: Node, isRoot: boolean): ExtractedElement[] => {
     if (!isElement(node)) return []
 
+    const children = node.childNodes.flatMap((childNode) => walkTree(childNode, false))
     const traceId = getAttribute(node, TRACE_ATTR)
 
     // If this element has a traceId, it's a traced element
@@ -267,16 +267,10 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
 
       // 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))
+        return children
       }
 
-      // Compute this element's name part
-      const namePart = isRoot ? 'root' : getElementNamePart(node, getElementById)
-
-      // Full name is ancestor path + this element's name (no separator).
-      // Use pascalCase on namePart when appending so that
-      // e.g. "mediaSection" + "vectorArt" → "mediaSectionVectorArt".
-      const name = isRoot ? 'root' : ancestorPath.length > 0 ? ancestorPath + pascalCase(namePart) : namePart
+      const name = isRoot ? 'root' : getElementNamePart(node, getElementById)
 
       // Check for text content
       const hasText = hasDirectTextContent(node)
@@ -292,11 +286,6 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
         }
       }
 
-      // Recursively process children
-      // Children use this element's full name as their ancestor path
-      const childPath = isRoot ? '' : name
-      const children = node.childNodes.flatMap((child) => walkTree(child, childPath, false))
-
       // Build attributes (excluding trace-id)
       const attributes = getAttributes(node)
       delete attributes[TRACE_ATTR]
@@ -314,18 +303,18 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
       ]
     }
 
-    // No traceId - just pass through to children with same ancestor path
-    return node.childNodes.flatMap((child) => walkTree(child, ancestorPath, false))
+    // No traceId - just pass through to children
+    return children
   }
 
-  // Start with empty ancestor path, first traced element is root
+  // The first traced element is root.
   const topLevelNodes = unwrapPresetsWrappers([...fragment.childNodes])
 
   let isFirst = true
   const result: ExtractedElement[] = []
 
   for (const node of topLevelNodes) {
-    const elements = walkTree(node, '', isFirst)
+    const elements = walkTree(node, isFirst)
     if (elements.length > 0) {
       result.push(...elements)
       isFirst = false // Only the first traced element is root