@wix/zero-config-implementation 1.91.0 → 1.93.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.91.0",
+  "version": "1.93.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "7232f116f870e20fe94caa49ba503a0a945ec4eed14c9f9b55544590"
+  "falconPackageHash": "d7c036bb07aaafe708985efa56e88c2eefb34077d2d892938112978f"
 }

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

@@ -166,6 +166,71 @@ describe('toEditorReactComponent display conversion', () => {
   })
 })
 
+describe('toEditorReactComponent selector conversion', () => {
+  it.each([
+    ['a', 'a___'],
+    ['div', 'div_'],
+    ['span', 'span'],
+  ])('pads the root selector %j to at least four characters', (tag, expectedSelector) => {
+    const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe(expectedSelector)
+  })
+
+  it('pads a short semantic class selector', () => {
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'a',
+    })
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe('.a__')
+  })
+
+  it('pads short inline and ref element selectors', () => {
+    const inlineElement: ExtractedElement = {
+      traceId: 'trace-link',
+      name: 'link',
+      tag: 'a',
+      attributes: {},
+      extractorData: new Map<string, unknown>(),
+      children: [],
+    }
+    const refElement: ExtractedElement = {
+      traceId: 'trace-action-button',
+      name: 'actionButton',
+      tag: 'div',
+      attributes: {},
+      extractorData: new Map<string, unknown>([
+        [
+          'ref-element',
+          {
+            elementPropsPath: 'actionButton',
+            refComponentType: 'test.Button',
+            selector: '.a',
+          },
+        ],
+      ]),
+      children: [],
+    }
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'root',
+      children: [inlineElement, refElement],
+    })
+
+    const elements = toEditorReactComponent(createComponent(rootElement)).editorElement?.elements
+
+    expect(elements?.link?.inlineElement?.selector).toBe('a___')
+    expect(elements?.actionButton?.refElement?.selector).toBe('.a__')
+  })
+})
+
 function cssInfoFromStylesheet(cssString: string): ExtractedCssInfo {
   const api = parseCss(cssString)
   const properties = new Map<string, string>()

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

@@ -34,6 +34,8 @@ import type { StateClassTrigger } from './state-class-trigger'
 import { buildStatesBlock } from './states-builder'
 import { formatDisplayName } from './utils'
 
+const MINIMUM_SELECTOR_LENGTH = 4
+
 /**
  * Merges native and custom state blocks. Native states take precedence on any
  * key collision (e.g. an author wrapping `isDisabled` in `ElementState<>` does not
@@ -140,9 +142,13 @@ function getSemanticBlockName(element: ExtractedElement | undefined): string | u
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
     const semanticClass = findPreferredSemanticClass(normalizeClassNames(rootElement.attributes.class))
-    if (semanticClass) return `.${semanticClass}`
+    if (semanticClass) return padSelector(`.${semanticClass}`)
   }
-  return rootElement?.tag ?? ''
+  return padSelector(rootElement?.tag ?? '')
+}
+
+function padSelector(selector: string): string {
+  return selector.padEnd(MINIMUM_SELECTOR_LENGTH, '_')
 }
 
 function buildInnerElementDisplayName(element: ExtractedElement, ancestorSemanticClasses: string[]): string {
@@ -206,7 +212,7 @@ function buildElements(
       result[buildRefElementManifestKey(refElementMatch.elementPropsPath, parentElementPropsPath)] = {
         elementType: ELEMENTS.ELEMENT_TYPE.refElement,
         refElement: {
-          selector: refElementMatch.selector,
+          selector: padSelector(refElementMatch.selector),
           type: refElementMatch.refComponentType,
         },
       }

package/src/information-extractors/react/extractors/css-properties.test.ts

@@ -38,7 +38,7 @@ function createElementWithCssProperties(
 ): ExtractedElement {
   const extractorData = new Map<string, unknown>()
   extractorData.set('css-matcher', matcherDataFromCss(declarations))
-  extractorData.set('css-properties', { relevant: getCssPropertiesForTag(tag, attributes.role) })
+  extractorData.set('css-properties', { relevant: getCssPropertiesForTag(tag, attributes) })
 
   return {
     traceId: 'trace-1',
@@ -173,11 +173,38 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
 
-  it('derives box properties from default display for controls', () => {
-    const relevantProperties = getCssPropertiesForTag('button')
+  it('gives interactive controls both box and text properties', () => {
+    for (const tag of ['button', 'select', 'textarea']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.color)
+    }
+  })
+
+  it('treats an input with no type as text-bearing', () => {
+    const relevantProperties = getCssPropertiesForTag('input')
 
     expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
-    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('treats text-entry and button-like input types as text-bearing', () => {
+    for (const inputType of ['text', 'email', 'password', 'search', 'number', 'submit', 'button', 'reset']) {
+      const relevantProperties = getCssPropertiesForTag('input', { type: inputType })
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    }
+  })
+
+  it('keeps typography off input types that render no text of their own', () => {
+    for (const inputType of ['checkbox', 'radio', 'range', 'color', 'file', 'image', 'hidden']) {
+      const relevantProperties = getCssPropertiesForTag('input', { type: inputType })
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    }
   })
 
   it('keeps media elements out of box properties even when their default display is non-inline', () => {
@@ -203,7 +230,7 @@ describe('getCssPropertiesForTag', () => {
   })
 
   it('keeps role-based heading text-only by default', () => {
-    const relevantProperties = getCssPropertiesForTag('div', 'heading')
+    const relevantProperties = getCssPropertiesForTag('div', { role: 'heading' })
 
     expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)

package/src/information-extractors/react/extractors/css-properties.ts

@@ -19,12 +19,18 @@ export interface CssPropertiesData {
   relevant: string[]
 }
 
+export interface SemanticAttributes {
+  role?: string
+  type?: string
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Semantic Traits
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * Text & Typography - elements where readability and hierarchy are primary
+ * Text & Typography - elements where readability and hierarchy are primary.
+ * Form controls render their own text; `input` varies by type (see below).
  */
 const TEXT_TAGS = new Set([
   'h1',
@@ -42,8 +48,14 @@ const TEXT_TAGS = new Set([
   'em',
   'b',
   'i',
+  'button',
+  'select',
+  'textarea',
 ])
 
+/** Anything else - including a missing or invalid `type` - defaults to text. */
+const NON_TEXT_INPUT_TYPES = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'hidden'])
+
 const DEFAULT_NON_BOX_TEXT_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
 
 /**
@@ -107,13 +119,15 @@ const MEDIA_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.boxShadow,
 ]
 
-function hasTextSemantics(tag: string, role?: string): boolean {
+function hasTextSemantics(tag: string, attributes: SemanticAttributes = {}): boolean {
+  const normalizedRole = attributes.role?.toLowerCase()
+  if (normalizedRole === 'heading' || normalizedRole === 'paragraph') {
+    return true
+  }
+
   const normalizedTag = tag.toLowerCase()
-  if (role) {
-    const normalizedRole = role.toLowerCase()
-    if (normalizedRole === 'heading' || normalizedRole === 'paragraph') {
-      return true
-    }
+  if (normalizedTag === 'input') {
+    return !NON_TEXT_INPUT_TYPES.has((attributes.type ?? 'text').toLowerCase())
   }
   return TEXT_TAGS.has(normalizedTag)
 }
@@ -135,11 +149,11 @@ function hasMediaSemantics(tag: string, role?: string): boolean {
  * Note: hasTextContent determination is deferred to tree building since
  * we can't know during createElement if a child will have text content.
  */
-export function getCssPropertiesForTag(tag: string, role?: string): string[] {
+export function getCssPropertiesForTag(tag: string, attributes: SemanticAttributes = {}): string[] {
   const properties: string[] = []
-  const hasTextProperties = hasTextSemantics(tag, role)
-  const hasMediaProperties = hasMediaSemantics(tag, role)
-  const hasBoxProperties = hasDefaultBoxProperties(tag, role) && !hasMediaProperties
+  const hasTextProperties = hasTextSemantics(tag, attributes)
+  const hasMediaProperties = hasMediaSemantics(tag, attributes.role)
+  const hasBoxProperties = hasDefaultBoxProperties(tag, attributes.role) && !hasMediaProperties
 
   if (hasTextProperties) {
     properties.push(...TEXT_CSS_PROPERTIES)
@@ -465,12 +479,11 @@ export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElem
  */
 export function enrichContainerProperties(elements: ExtractedElement[]): ExtractedElement[] {
   return elements.map((element) => {
-    const role = element.attributes.role
-    if (hasTextSemantics(element.tag, role)) {
+    if (hasTextSemantics(element.tag, element.attributes)) {
       const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
       const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
 
-      if (cssData && hasEffectiveContainerDisplay(element.tag, role, matcherData)) {
+      if (cssData && hasEffectiveContainerDisplay(element.tag, element.attributes.role, matcherData)) {
         element.extractorData.set('css-properties', {
           relevant: addBoxProperties(cssData.relevant),
         })
@@ -500,9 +513,10 @@ export function createCssPropertiesExtractor(): ReactExtractor {
       if (!event.isDomElement || !event.tag || !event.traceId) return
 
       const { tag, props, traceId, store } = event
-      const role = props.role as string | undefined
-
-      const relevant = getCssPropertiesForTag(tag, role)
+      const relevant = getCssPropertiesForTag(tag, {
+        role: props.role as string | undefined,
+        type: props.type as string | undefined,
+      })
       const data: CssPropertiesData = { relevant }
 
       store.set(traceId, 'css-properties', data)