@wix/zero-config-implementation 1.29.0 → 1.31.0

package/package.json

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

package/src/converters/utils.test.ts

@@ -30,6 +30,15 @@ describe('formatDisplayName', () => {
     )
   })
 
+  it('drops leading words and result is less than 50 characters', () => {
+    // capitalCase('myComponentWithAVeryShortAndLongEnoughName')
+    // => "My Component With A Very Short And Long Enough Name" (51 chars)
+    // Drop "My" => "Component With A Very Short And Long Enough Name" (48 chars) < 50
+    const result = formatDisplayName('myComponentWithAVeryShortAndLongEnoughName')
+    expect(result).toBe('Component With A Very Short And Long Enough Name')
+    expect(result.length).toBe(48)
+  })
+
   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)

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

@@ -5,7 +5,7 @@
  * Each element gets a semantic name computed by concatenating ancestor names.
  */
 
-import { pascalCase } from 'case-anything'
+import { camelCase, pascalCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
 import { findPreferredSemanticClass } from '../../../../utils/css-class'
@@ -34,59 +34,59 @@ export interface ExtractedElement {
 // ─────────────────────────────────────────────────────────────────────────────
 
 const TAG_NAMES: Record<string, string> = {
-  a: 'Anchor',
-  abbr: 'Abbreviation',
-  article: 'Article',
-  aside: 'Aside',
-  button: 'Button',
-  caption: 'Caption',
-  col: 'TableColumn',
-  colgroup: 'TableColumnGroup',
-  dd: 'DescriptionDetails',
-  details: 'Details',
-  div: 'Div',
-  dl: 'DescriptionList',
-  dt: 'DescriptionTerm',
-  fieldset: 'Fieldset',
-  figcaption: 'FigureCaption',
-  figure: 'Figure',
-  footer: 'Footer',
-  form: 'Form',
-  h1: 'Heading1',
-  h2: 'Heading2',
-  h3: 'Heading3',
-  h4: 'Heading4',
-  h5: 'Heading5',
-  h6: 'Heading6',
-  header: 'Header',
-  hr: 'HorizontalRule',
-  img: 'Image',
-  input: 'Input',
-  label: 'Label',
-  legend: 'Legend',
-  li: 'ListItem',
-  main: 'Main',
-  nav: 'Navigation',
-  ol: 'OrderedList',
-  optgroup: 'OptionGroup',
-  option: 'Option',
-  p: 'Paragraph',
-  pre: 'Preformatted',
-  progress: 'Progress',
-  section: 'Section',
-  select: 'Select',
-  span: 'Span',
-  strong: 'Strong',
-  summary: 'Summary',
-  table: 'Table',
-  tbody: 'TableBody',
-  td: 'TableCell',
-  textarea: 'TextArea',
-  tfoot: 'TableFooter',
-  th: 'TableHeader',
-  thead: 'TableHead',
-  tr: 'TableRow',
-  ul: 'UnorderedList',
+  a: 'anchor',
+  abbr: 'abbreviation',
+  article: 'article',
+  aside: 'aside',
+  button: 'button',
+  caption: 'caption',
+  col: 'tableColumn',
+  colgroup: 'tableColumnGroup',
+  dd: 'descriptionDetails',
+  details: 'details',
+  div: 'div',
+  dl: 'descriptionList',
+  dt: 'descriptionTerm',
+  fieldset: 'fieldset',
+  figcaption: 'figureCaption',
+  figure: 'figure',
+  footer: 'footer',
+  form: 'form',
+  h1: 'heading1',
+  h2: 'heading2',
+  h3: 'heading3',
+  h4: 'heading4',
+  h5: 'heading5',
+  h6: 'heading6',
+  header: 'header',
+  hr: 'horizontalRule',
+  img: 'image',
+  input: 'input',
+  label: 'label',
+  legend: 'legend',
+  li: 'listItem',
+  main: 'main',
+  nav: 'navigation',
+  ol: 'orderedList',
+  optgroup: 'optionGroup',
+  option: 'option',
+  p: 'paragraph',
+  pre: 'preformatted',
+  progress: 'progress',
+  section: 'section',
+  select: 'select',
+  span: 'span',
+  strong: 'strong',
+  summary: 'summary',
+  table: 'table',
+  tbody: 'tableBody',
+  td: 'tableCell',
+  textarea: 'textArea',
+  tfoot: 'tableFooter',
+  th: 'tableHeader',
+  thead: 'tableHead',
+  tr: 'tableRow',
+  ul: 'unorderedList',
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -118,10 +118,10 @@ const hasDirectTextContent = (element: Element): boolean =>
   element.childNodes.some((child) => isTextNode(child) && child.value.trim().length > 0)
 
 /**
- * Normalizes a tag name to its semantic PascalCase form
+ * Normalizes a tag name to its semantic camelCase form
  */
 function normalizeTagName(tag: string): string {
-  return TAG_NAMES[tag.toLowerCase()] ?? pascalCase(tag)
+  return TAG_NAMES[tag.toLowerCase()] ?? camelCase(tag)
 }
 
 /**
@@ -148,16 +148,17 @@ function getTextContent(element: Element): string {
  * Priority: id > aria-label > aria-labelledby > normalized tag name
  */
 function getElementNamePart(element: Element, getElementById: (id: string) => Element | undefined): string {
+  let elementName: string | undefined
   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.includes('mock_')) {
-    return pascalCase(id)
+    elementName = id
   }
 
   const ariaLabel = getAttribute(element, 'aria-label')
   if (ariaLabel && !ariaLabel.startsWith('mock_')) {
-    return pascalCase(ariaLabel)
+    elementName = ariaLabel
   }
 
   const ariaLabelledBy = getAttribute(element, 'aria-labelledby')
@@ -166,7 +167,7 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
     if (labelElement) {
       const labelText = getTextContent(labelElement)
       if (labelText) {
-        return pascalCase(labelText)
+        elementName = labelText
       }
     }
   }
@@ -174,7 +175,11 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
   const classAttr = getAttribute(element, 'class')
   if (classAttr) {
     const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
-    if (semanticClass) return pascalCase(semanticClass)
+    if (semanticClass) elementName = semanticClass
+  }
+
+  if (elementName) {
+    return camelCase(elementName)
   }
 
   return normalizeTagName(element.tagName)
@@ -268,8 +273,10 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
       // 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
+      // 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
 
       // Check for text content
       const hasText = hasDirectTextContent(node)