@wix/zero-config-implementation 1.81.0 → 1.83.0

package/dist/index.d.ts

@@ -2395,6 +2395,8 @@ export declare interface PropInfo {
     resolvedType: ResolvedType;
     description?: string;
     deprecated?: boolean;
+    min?: string;
+    max?: string;
     isStateTrigger?: boolean;
 }
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-CqoYtob0.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-nLqobONA.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.81.0",
+  "version": "1.83.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "a62684e6a36b7c409927242d6d286817a3aa7b2ef5601dac8e42ab5f"
+  "falconPackageHash": "f80ca8596a9188b6f45fa139c17ea7ed3637fceffaddcb566b22d2db"
 }

package/src/converters/data-item-builder.ts

@@ -169,7 +169,10 @@ function handlePrimitiveType(
     }
   } else if (typeValue.includes('number')) {
     dataItem.dataType = DATA_TYPE.number
-    dataItem.number = {}
+    dataItem.number =
+      propInfo.min != null || propInfo.max != null
+        ? { ...(propInfo.min != null && { min: propInfo.min }), ...(propInfo.max != null && { max: propInfo.max }) }
+        : {}
   } else if (typeValue.includes('boolean')) {
     dataItem.dataType = DATA_TYPE.booleanValue
   } else {

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

@@ -54,6 +54,27 @@ function createComponent(rootElement: ExtractedElement): ComponentInfoWithCss {
   }
 }
 
+function createSemanticElement({
+  traceId,
+  name,
+  className,
+  children = [],
+}: {
+  traceId: string
+  name: string
+  className: string
+  children?: ExtractedElement[]
+}): ExtractedElement {
+  return {
+    traceId,
+    name,
+    tag: 'div',
+    attributes: { class: className },
+    extractorData: new Map<string, unknown>(),
+    children,
+  }
+}
+
 describe('toEditorReactComponent display conversion', () => {
   it('resolves local display fallback chains before emitting the manifest display value', () => {
     const rootElement = createElementWithDisplayMatcher(
@@ -85,6 +106,64 @@ describe('toEditorReactComponent display conversion', () => {
       },
     })
   })
+
+  it('omits the nearest matching ancestor class prefix from inner element display names', () => {
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'testimonials-slider',
+      children: [
+        createSemanticElement({
+          traceId: 'trace-play-pause-button',
+          name: 'playPauseButton',
+          className: 'play-pause-button',
+        }),
+        createSemanticElement({
+          traceId: 'trace-slide',
+          name: 'testimonialsSliderSlide',
+          className: 'testimonials-slider-slide',
+          children: [
+            createSemanticElement({
+              traceId: 'trace-quote',
+              name: 'testimonialsSliderQuote',
+              className: 'testimonials-slider-slide-quote',
+            }),
+            createSemanticElement({
+              traceId: 'trace-author',
+              name: 'testimonialsSliderAuthor',
+              className: 'testimonials-slider__author',
+            }),
+          ],
+        }),
+      ],
+    })
+
+    const elements = toEditorReactComponent({
+      ...createComponent(rootElement),
+      componentName: 'TestimonialsSlider',
+    }).editorElement?.elements
+
+    expect(elements?.playPauseButton?.inlineElement).toMatchObject({
+      selector: '.play-pause-button',
+      displayName: 'Play Pause Button',
+    })
+    expect(elements?.testimonialsSliderSlide?.inlineElement).toMatchObject({
+      selector: '.testimonials-slider-slide',
+      displayName: 'Slide',
+    })
+    expect(
+      elements?.testimonialsSliderSlide?.inlineElement?.elements?.testimonialsSliderQuote?.inlineElement,
+    ).toMatchObject({
+      selector: '.testimonials-slider-slide-quote',
+      displayName: 'Quote',
+    })
+    expect(
+      elements?.testimonialsSliderSlide?.inlineElement?.elements?.testimonialsSliderAuthor?.inlineElement,
+    ).toMatchObject({
+      selector: '.testimonials-slider__author',
+      displayName: 'Author',
+    })
+  })
 })
 
 function cssInfoFromStylesheet(cssString: string): ExtractedCssInfo {

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

@@ -75,6 +75,7 @@ function buildEditorElement(
   // class triggers don't (they carry the className verbatim and match the element
   // directly), so they're built even when the element resolves no semantic class.
   const rootSemanticClass = getSemanticBlockName(rootElement)
+  const rootSemanticClasses = rootSemanticClass ? [rootSemanticClass] : []
   const rootStates = rootElement
     ? mergeStates(
         rootSemanticClass ? buildStatesBlock(rootElement, rootSemanticClass) : undefined,
@@ -94,6 +95,7 @@ function buildEditorElement(
       childElements,
       nearestCommonAncestorCustomProps,
       customClassTriggers,
+      rootSemanticClasses,
       component.innerElementProps,
       component.propUsages,
     ),
@@ -116,6 +118,23 @@ function buildSelector(rootElement?: ExtractedElement): string {
   return rootElement?.tag ?? ''
 }
 
+function buildInnerElementDisplayName(element: ExtractedElement, ancestorSemanticClasses: string[]): string {
+  const semanticClass = getSemanticBlockName(element)
+
+  if (semanticClass) {
+    for (const ancestorSemanticClass of [...ancestorSemanticClasses].reverse()) {
+      for (const separator of ['-', '__']) {
+        const ancestorPrefix = `${ancestorSemanticClass}${separator}`
+        if (semanticClass.startsWith(ancestorPrefix)) {
+          return formatDisplayName(semanticClass.slice(ancestorPrefix.length))
+        }
+      }
+    }
+  }
+
+  return formatDisplayName(element.name)
+}
+
 function buildData(
   props: Record<string, CoupledProp>,
   propUsages: TrackingStores['propUsages'],
@@ -142,6 +161,7 @@ function buildElements(
   elements: ExtractedElement[],
   nearestCommonAncestorCustomProps: Map<string, Record<string, CssCustomPropertyItem>>,
   customClassTriggers: CustomClassTrigger[],
+  ancestorSemanticClasses: string[],
   innerElementProps?: CoupledComponentInfo['innerElementProps'],
   propUsages?: TrackingStores['propUsages'],
   parentElementPropsPath?: string,
@@ -180,7 +200,7 @@ function buildElements(
       elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
       inlineElement: {
         selector: buildSelector(element),
-        displayName: formatDisplayName(element.name),
+        displayName: buildInnerElementDisplayName(element, ancestorSemanticClasses),
         behaviors: { removable: true, selectable: false },
         // Add data from inner element props if available
         ...(data && Object.keys(data).length > 0 && { data }),
@@ -196,6 +216,7 @@ function buildElements(
                 element.children,
                 nearestCommonAncestorCustomProps,
                 customClassTriggers,
+                semanticClass ? [...ancestorSemanticClasses, semanticClass] : ancestorSemanticClasses,
                 innerElementProps,
                 propUsages,
                 innerEntry?.elementPropsPath ?? parentElementPropsPath,

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

@@ -252,6 +252,8 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
       resolvedType,
       description: propItem.description || undefined,
       deprecated: tags?.deprecated !== undefined ? true : undefined,
+      min: parseNumericTag(tags?.min, propName, 'min'),
+      max: parseNumericTag(tags?.max, propName, 'max'),
       isStateTrigger: stateTrigger ? true : undefined,
     }
   }
@@ -335,6 +337,14 @@ function findPropsType(
 // Default value conversion
 // ─────────────────────────────────────────────────────────────────────────────
 
+function parseNumericTag(value: string | undefined, propName: string, tag: string): string | undefined {
+  if (value !== undefined && Number.isNaN(Number(value))) {
+    console.warn(`@${tag} on prop "${propName}" is not a valid number ("${value}") — ignoring`)
+    return undefined
+  }
+  return value
+}
+
 function convertDefaultValue(rdtDefault: { value: unknown } | null): DefaultValue | undefined {
   if (!rdtDefault || rdtDefault.value == null) return undefined
 

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

@@ -51,6 +51,9 @@ export interface PropInfo {
   description?: string
   // Whether the prop is marked as deprecated via @deprecated JSDoc tag
   deprecated?: boolean
+  // Numeric range constraints extracted from @min / @max JSDoc tags (decimal strings)
+  min?: string
+  max?: string
   // True when the prop is wrapped in the `ElementState<>` marker type from
   // @wix/react-component-utils, declaring it as the trigger for a custom design
   // state. `type` and `resolvedType` reflect the unwrapped inner type, so the prop