@wix/zero-config-implementation 1.30.0 → 1.32.0

package/dist/information-extractors/ts/types.d.ts

@@ -14,6 +14,7 @@ export interface ResolvedType {
 /**
  * Resolved default value with its type.
  * For literals (string, number, boolean, null), the value is the actual JavaScript value.
+ * For structured literals (object, array), the value is the parsed JavaScript value.
  * For unresolvable values (references, expressions), we store the raw source text.
  */
 export type DefaultValue = {
@@ -28,6 +29,12 @@ export type DefaultValue = {
 } | {
     kind: 'null';
     value: null;
+} | {
+    kind: 'object';
+    value: Record<string, unknown>;
+} | {
+    kind: 'array';
+    value: unknown[];
 } | {
     kind: 'unresolved';
     value: string;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.30.0",
+  "version": "1.32.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -83,5 +83,5 @@
       ]
     }
   },
-  "falconPackageHash": "7c40209d1126d0b860d10bc39a13660c52b5a97620afd671085c8c41"
+  "falconPackageHash": "459bf8c730865e0703e2a8248d887164542b0044ede2b6bcdae37271"
 }

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)

package/src/information-extractors/react/utils/mock-generator.ts

@@ -74,20 +74,8 @@ function generateMockValue(propInfo: PropInfo, propName: string, path: string, r
   return generateValueFromResolvedType(propInfo.resolvedType, propName, path, registrar)
 }
 
-/**
- * Extract the actual value from a DefaultValue object
- */
 function extractDefaultValueValue(defaultValue: DefaultValue): unknown {
-  switch (defaultValue.kind) {
-    case 'string':
-    case 'number':
-    case 'boolean':
-    case 'null':
-      return defaultValue.value
-    case 'unresolved':
-      // For unresolved values, return the raw string (e.g., MY_CONST)
-      return defaultValue.value
-  }
+  return defaultValue.value
 }
 
 /**

package/src/information-extractors/ts/components.ts

@@ -372,6 +372,17 @@ function parseDefaultValueFromString(text: string, fallbackToString = false): De
     return { kind: 'string', value: trimmed.slice(1, -1) }
   }
 
+  // Object / array literals: parse via the TS compiler API so single-quoted
+  // strings and unquoted keys are handled correctly.
+  if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+    const parsed = tryParseStructuredLiteral(trimmed)
+    if (parsed !== undefined) {
+      return Array.isArray(parsed)
+        ? { kind: 'array', value: parsed }
+        : { kind: 'object', value: parsed as Record<string, unknown> }
+    }
+  }
+
   // react-docgen-typescript strips quotes from string defaults, so treat as string
   if (fallbackToString) {
     return { kind: 'string', value: trimmed }
@@ -381,6 +392,82 @@ function parseDefaultValueFromString(text: string, fallbackToString = false): De
   return { kind: 'unresolved', value: trimmed }
 }
 
+/**
+ * Attempts to parse a string that looks like a TS object or array literal into
+ * an actual JavaScript value. Uses `ts.createSourceFile` so that single-quoted
+ * strings, unquoted keys, and nested structures are all handled natively.
+ *
+ * Returns `undefined` when any part of the expression cannot be statically
+ * evaluated (references, function calls, binary expressions, etc.).
+ */
+function tryParseStructuredLiteral(text: string): Record<string, unknown> | unknown[] | undefined {
+  const sourceFile = ts.createSourceFile('__default__.ts', `const __v__ = ${text}`, ts.ScriptTarget.Latest, true)
+
+  const statement = sourceFile.statements[0]
+  if (!statement || !ts.isVariableStatement(statement)) return undefined
+
+  const initializer = statement.declarationList.declarations[0]?.initializer
+  if (!initializer) return undefined
+
+  return evaluateLiteralExpression(initializer) as Record<string, unknown> | unknown[] | undefined
+}
+
+/**
+ * Recursively evaluates a TS AST node into a plain JS value.
+ * Only pure literals are supported; returns `undefined` for anything dynamic.
+ *
+ * The sentinel `undefined` means "could not evaluate" -- this is unambiguous
+ * because `null` literals evaluate to `null`, and there is no `undefined`
+ * keyword in the TS AST (it is a global identifier, not a literal).
+ */
+function evaluateLiteralExpression(node: ts.Expression): unknown {
+  if (ts.isObjectLiteralExpression(node)) {
+    const result: Record<string, unknown> = {}
+    for (const property of node.properties) {
+      if (!ts.isPropertyAssignment(property)) return undefined
+      const key = getStaticPropertyName(property.name)
+      if (key === undefined) return undefined
+
+      const value = evaluateLiteralExpression(property.initializer)
+      if (value === undefined) return undefined
+      result[key] = value
+    }
+    return result
+  }
+
+  if (ts.isArrayLiteralExpression(node)) {
+    const elements: unknown[] = []
+    for (const element of node.elements) {
+      const value = evaluateLiteralExpression(element)
+      if (value === undefined) return undefined
+      elements.push(value)
+    }
+    return elements
+  }
+
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return node.text
+  if (ts.isNumericLiteral(node)) return Number(node.text)
+  if (
+    ts.isPrefixUnaryExpression(node) &&
+    node.operator === ts.SyntaxKind.MinusToken &&
+    ts.isNumericLiteral(node.operand)
+  ) {
+    return -Number(node.operand.text)
+  }
+  if (node.kind === ts.SyntaxKind.TrueKeyword) return true
+  if (node.kind === ts.SyntaxKind.FalseKeyword) return false
+  if (node.kind === ts.SyntaxKind.NullKeyword) return null
+
+  return undefined
+}
+
+function getStaticPropertyName(name: ts.PropertyName): string | undefined {
+  if (ts.isIdentifier(name) || ts.isStringLiteral(name) || ts.isNumericLiteral(name)) {
+    return name.text
+  }
+  return undefined
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Helpers
 // ─────────────────────────────────────────────────────────────────────────────

package/src/information-extractors/ts/types.ts

@@ -26,6 +26,7 @@ export interface ResolvedType {
 /**
  * Resolved default value with its type.
  * For literals (string, number, boolean, null), the value is the actual JavaScript value.
+ * For structured literals (object, array), the value is the parsed JavaScript value.
  * For unresolvable values (references, expressions), we store the raw source text.
  */
 export type DefaultValue =
@@ -33,7 +34,9 @@ export type DefaultValue =
   | { kind: 'number'; value: number }
   | { kind: 'boolean'; value: boolean }
   | { kind: 'null'; value: null }
-  | { kind: 'unresolved'; value: string } // For references like MY_CONST or complex expressions
+  | { kind: 'object'; value: Record<string, unknown> }
+  | { kind: 'array'; value: unknown[] }
+  | { kind: 'unresolved'; value: string }
 
 export interface PropInfo {
   name: string