@wix/zero-config-implementation 1.98.0 → 1.99.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.98.0",
+  "version": "1.99.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "741408430f509ba8b4ac3b6f2ff22c4fae1bf06d9f8b98e2a9e8e079"
+  "falconPackageHash": "905a961b05476216ee10b85e56b0d50818e5247abe594c0917619c0a"
 }

package/src/component-renderer.ts

@@ -94,6 +94,16 @@ const isDOMTag = (type: unknown): type is string => typeof type === 'string' &&
 
 type ElementCreator = (type: unknown, props: unknown, ...rest: unknown[]) => ReactElement
 
+/**
+ * Whether a child slot rendered nothing - what a node prop mocked to null leaves
+ * behind. `false` is excluded: it is what an unrendered conditional leaves, and a
+ * conditional on a mocked boolean would make the slot depend on the faker sequence.
+ */
+function isEmptySlot(child: unknown): boolean {
+  if (Array.isArray(child)) return child.some(isEmptySlot)
+  return child === null || child === undefined
+}
+
 /**
  * Creates an intercepted version of an element creation function.
  * Works with both createElement (children as rest params) and jsx/jsxs (children in props).
@@ -103,14 +113,19 @@ function createInterceptor(
   listeners: CreateElementListener[],
   getNextId: () => string,
   store: ExtractorStore,
+  /** jsx/jsxs/jsxDEV take children in props and a key as the third argument. */
+  childrenInProps: boolean,
 ): ElementCreator {
   return (type, elementProps, ...rest) => {
     const props = (elementProps ?? {}) as Record<string, unknown>
     const isDomElement = isDOMTag(type)
     const traceId = isDomElement ? getNextId() : undefined
 
-    // Children location differs: createElement uses rest params, jsx/jsxs uses props.children
-    const children = rest.length > 0 ? rest : props.children ? [props.children] : []
+    // Children location differs: createElement takes rest params but also accepts them
+    // in props, jsx/jsxs only in props. Keyed on presence, not truthiness, so a slot
+    // that rendered nothing is still visible.
+    const children = childrenInProps || rest.length === 0 ? ('children' in props ? [props.children] : []) : rest
+    const hasEmptySlot = children.some(isEmptySlot)
 
     const event: CreateElementEvent = {
       type,
@@ -119,6 +134,7 @@ function createInterceptor(
       props: { ...props, children },
       traceId,
       children: children as unknown[],
+      hasEmptySlot,
       store,
     }
 
@@ -322,10 +338,11 @@ export function renderWithExtractors(
     listeners,
     getNextId,
     store,
+    false,
   )
-  const interceptedJsx = createInterceptor(originalJsx as ElementCreator, listeners, getNextId, store)
-  const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store)
-  const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store)
+  const interceptedJsx = createInterceptor(originalJsx as ElementCreator, listeners, getNextId, store, true)
+  const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store, true)
+  const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store, true)
 
   // The shim reads globalThis[REACT_KEY] on every hook call, so pointing it at
   // userReact ensures ESM hooks use the same dispatcher that SSR drives.

package/src/converters/states-builder.test.ts

@@ -11,6 +11,7 @@ function makeElement(input: { tag: string; className: string; attributes?: Recor
     boundProps: [],
     concatenatedAttrs: new Map(),
     eventHandlers: [],
+    hasEmptySlot: false,
   }
   return {
     traceId: 'trace-0',

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

@@ -0,0 +1,186 @@
+import { CSS_PROPERTIES } from '@wix/react-component-schema'
+import { describe, expect, it } from 'vitest'
+import type { CssPropertiesData } from '../css-properties'
+import { getCssPropertiesForTag } from '../css-properties'
+import { ExtractorStore } from './store'
+import { type ExtractedElement, buildElementTree } from './tree-builder'
+
+const { CSS_PROPERTY_TYPE } = CSS_PROPERTIES
+
+function createStoreForTags(tagsByTraceId: Record<string, string>, emptySlotTraceIds: string[] = []): ExtractorStore {
+  const store = new ExtractorStore()
+  for (const [traceId, tag] of Object.entries(tagsByTraceId)) {
+    store.set(traceId, 'css-properties', { relevant: getCssPropertiesForTag(tag) })
+    store.set(traceId, 'prop-tracker', {
+      tag,
+      boundProps: [],
+      concatenatedAttrs: new Map<string, string>(),
+      eventHandlers: [],
+      hasEmptySlot: emptySlotTraceIds.includes(traceId),
+    })
+  }
+  return store
+}
+
+function findElementByName(elements: ExtractedElement[], name: string): ExtractedElement | undefined {
+  for (const element of elements) {
+    if (element.name === name) return element
+    const match = findElementByName(element.children, name)
+    if (match) return match
+  }
+  return undefined
+}
+
+function relevantPropertiesOf(element: ExtractedElement): string[] {
+  const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+  return cssData?.relevant ?? []
+}
+
+describe('buildElementTree - button typography', () => {
+  const TEXT_PROPERTIES = [
+    CSS_PROPERTY_TYPE.font,
+    CSS_PROPERTY_TYPE.lineHeight,
+    CSS_PROPERTY_TYPE.letterSpacing,
+    CSS_PROPERTY_TYPE.textDecorationLine,
+    CSS_PROPERTY_TYPE.textTransform,
+    CSS_PROPERTY_TYPE.textAlign,
+    CSS_PROPERTY_TYPE.textShadow,
+    CSS_PROPERTY_TYPE.color,
+  ]
+
+  it('gives a button the full text set when its label sits in a dropped wrapper', () => {
+    const html = `
+      <div data-trace-id="t1" class="label-button">
+        <button data-trace-id="t2" class="label-button__trigger">
+          <span data-trace-id="t3" class="_label_1x9fa">Play</span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'labelButtonTrigger')
+
+    expect(trigger).toBeDefined()
+    expect(relevantPropertiesOf(trigger!)).toEqual(expect.arrayContaining(TEXT_PROPERTIES))
+  })
+
+  it('keeps a text-free button to color alone, with no typography', () => {
+    const html = `
+      <div data-trace-id="t1" class="icon-button">
+        <button data-trace-id="t2" class="icon-button__trigger" aria-label="Play">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'iconButtonTrigger')
+
+    expect(trigger).toBeDefined()
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.color)
+    for (const textProperty of TEXT_PROPERTIES.filter((property) => property !== CSS_PROPERTY_TYPE.color)) {
+      expect(relevantPropertiesOf(trigger!)).not.toContain(textProperty)
+    }
+  })
+
+  it('keeps typography on a button whose content prop rendered nothing', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger"></button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button' }, ['t2'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // Node props mock to null, so an empty button may still render text at runtime
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography on a button whose slotted label sits in a wrapper', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <span data-trace-id="t3" class="_label_1x9fa"></span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span' }, ['t3'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // The wrapper is dropped and its slotted label mocked to null, so the button
+    // is the only element left that can carry the typography
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography on a button holding an icon beside a slotted label', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' }, ['t2'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // The icon is the only child left once the slotted label mocks to null
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography off a button that rendered nothing at all', () => {
+    const html = `
+      <div data-trace-id="t1" class="spacer-button">
+        <button data-trace-id="t2" class="spacer-button__trigger"></button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'spacerButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).not.toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('finds a slot in a wrapper that also rendered an icon', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <span data-trace-id="t3" class="_content_1x9fa">
+            <svg data-trace-id="t4" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+          </span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span', t4: 'svg' }, ['t3'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('ignores text that only SVG metadata renders', () => {
+    const html = `
+      <div data-trace-id="t1" class="icon-button">
+        <button data-trace-id="t2" class="icon-button__trigger">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><title>Play</title><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'iconButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).not.toContain(CSS_PROPERTY_TYPE.font)
+  })
+})

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

@@ -11,7 +11,7 @@ import { TRACE_ATTR } from '../../../../component-renderer'
 import { findPreferredSemanticClass, normalizeClassNames } from '../../../../utils/css-class'
 import { PRESETS_WRAPPER_CLASS_NAME } from '../../utils/mock-generator'
 import type { CssPropertiesData } from '../css-properties'
-import { addTextProperties } from '../css-properties'
+import { addTextProperties, rendersTextThroughContent } from '../css-properties'
 import type { PropTrackerData } from '../prop-tracker'
 import type { ExtractorStore } from './store'
 
@@ -111,11 +111,43 @@ const getAttributes = (element: Element): Record<string, string> => {
   return attrs
 }
 
+const hasVisibleText = (node: Node): boolean => isTextNode(node) && node.value.trim().length > 0
+
 /**
  * Checks if an element has direct text content (non-whitespace text nodes as children)
  */
-const hasDirectTextContent = (element: Element): boolean =>
-  element.childNodes.some((child) => isTextNode(child) && child.value.trim().length > 0)
+const hasDirectTextContent = (element: Element): boolean => element.childNodes.some(hasVisibleText)
+
+/** Tags whose text is metadata or source, never styleable text in the layout. */
+const NON_RENDERED_TEXT_TAGS = new Set(['title', 'desc', 'metadata', 'script', 'style', 'template'])
+
+/** An element whose own content can reach the page. */
+const isRenderedElement = (node: Node): node is Element =>
+  isElement(node) && !NON_RENDERED_TEXT_TAGS.has(node.tagName.toLowerCase())
+
+/** Checks if an element renders any text anywhere beneath it. */
+const hasDescendantTextContent = (element: Element): boolean =>
+  element.childNodes.some(
+    (child) => hasVisibleText(child) || (isRenderedElement(child) && hasDescendantTextContent(child)),
+  )
+
+/** Whether this element's own child slot rendered nothing. */
+const hasEmptySlot = (element: Element, store: ExtractorStore): boolean => {
+  const traceId = getAttribute(element, TRACE_ATTR)
+  return Boolean(traceId && store.get<PropTrackerData>(traceId, 'prop-tracker')?.hasEmptySlot)
+}
+
+/** Whether content is missing from this element's own slot, or from one below it. */
+const hasMissingContent = (element: Element, store: ExtractorStore): boolean =>
+  hasEmptySlot(element, store) ||
+  element.childNodes.some((child) => isElement(child) && hasMissingContent(child, store))
+
+/**
+ * Returns true if an element renders no text. Content the probe could not produce
+ * leaves this unknown, so an element missing content returns false.
+ */
+const rendersNoText = (element: Element, store: ExtractorStore): boolean =>
+  !hasDescendantTextContent(element) && !hasMissingContent(element, store)
 
 /**
  * Normalizes a tag name to its semantic camelCase form
@@ -275,8 +307,12 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
       // Check for text content
       const hasText = hasDirectTextContent(node)
 
-      // If element has text content and has css-properties data, add text properties
-      if (hasText) {
+      // Wrappers without a semantic class never reach the tree, so an element whose
+      // text comes from its content must own the typography itself.
+      const rendersText = hasText || (rendersTextThroughContent(node.tagName) && !rendersNoText(node, store))
+
+      // If element renders text and has css-properties data, add text properties
+      if (rendersText) {
         const cssData = extractorData.get('css-properties') as CssPropertiesData | undefined
         if (cssData) {
           const enhanced: CssPropertiesData = {

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

@@ -24,6 +24,8 @@ export interface CreateElementEvent {
   props: Record<string, unknown>
   traceId?: string
   children: unknown[]
+  /** True when a child slot rendered nothing, e.g. a `children` prop mocked to null. */
+  hasEmptySlot?: boolean
   store: ExtractorStore
 }
 

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

@@ -173,8 +173,8 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
 
-  it('gives interactive controls both box and text properties', () => {
-    for (const tag of ['button', 'select', 'textarea']) {
+  it('gives controls that render their own text both box and text properties', () => {
+    for (const tag of ['select', 'textarea']) {
       const relevantProperties = getCssPropertiesForTag(tag)
 
       expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
@@ -183,6 +183,16 @@ describe('getCssPropertiesForTag', () => {
     }
   })
 
+  it('treats a button as box-generating but not text-bearing, except for color', () => {
+    const relevantProperties = getCssPropertiesForTag('button')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    // `color` resolves `currentColor` in borders, outlines and fills, text or not
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.color)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign)
+  })
+
   it('treats an input with no type as text-bearing', () => {
     const relevantProperties = getCssPropertiesForTag('input')
 

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

@@ -30,7 +30,8 @@ export interface SemanticAttributes {
 
 /**
  * Text & Typography - elements where readability and hierarchy are primary.
- * Form controls render their own text; `input` varies by type (see below).
+ * `select`, `textarea`, and `input` render their own text; `input` varies by type
+ * (see below). `button` is absent on purpose - see CONTENT_DEPENDENT_TEXT_TAGS.
  */
 const TEXT_TAGS = new Set([
   'h1',
@@ -48,11 +49,21 @@ const TEXT_TAGS = new Set([
   'em',
   'b',
   'i',
-  'button',
   'select',
   'textarea',
 ])
 
+/**
+ * Tags whose text comes from their content rather than their own rendering, so
+ * tree building decides once the rendered subtree is known.
+ */
+const CONTENT_DEPENDENT_TEXT_TAGS = new Set(['button'])
+
+/** Whether the tag's content, rather than the tag itself, decides typography. */
+export function rendersTextThroughContent(tag: string): boolean {
+  return CONTENT_DEPENDENT_TEXT_TAGS.has(tag.toLowerCase())
+}
+
 /** 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'])
 
@@ -157,6 +168,10 @@ export function getCssPropertiesForTag(tag: string, attributes: SemanticAttribut
 
   if (hasTextProperties) {
     properties.push(...TEXT_CSS_PROPERTIES)
+  } else if (rendersTextThroughContent(tag)) {
+    // `color` resolves `currentColor` in borders, outlines and fills even with no
+    // text; the rest of the typography waits until tree building sees the content.
+    properties.push(CSS_PROPERTY_TYPE.color)
   }
   if (hasMediaProperties) {
     properties.push(...MEDIA_CSS_PROPERTIES)

package/src/information-extractors/react/extractors/prop-tracker.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { createRefElementMarker } from '../../../extensions/ref-elements/path-utils'
 import type { RefElementMatch } from '../../../extensions/ref-elements/types'
 import { ExtractorStore } from './core/store'
-import { createPropTrackerExtractor } from './prop-tracker'
+import { type PropTrackerData, createPropTrackerExtractor } from './prop-tracker'
 
 function markRefElementComponent(runtimeComponent: (...args: unknown[]) => unknown, refComponentType: string): void {
   Object.defineProperty(
@@ -248,4 +248,22 @@ describe('createPropTrackerExtractor', () => {
       selector: '.card-cta',
     })
   })
+
+  it('persists the empty-slot signal onto the element data', () => {
+    const store = new ExtractorStore()
+    const { extractor } = createPropTrackerExtractor()
+
+    extractor.onCreateElement?.({
+      type: 'button',
+      isDomElement: true,
+      tag: 'button',
+      traceId: 'trace-1',
+      props: { className: 'trigger' },
+      children: [],
+      hasEmptySlot: true,
+      store,
+    })
+
+    expect(store.get<PropTrackerData>('trace-1', 'prop-tracker')?.hasEmptySlot).toBe(true)
+  })
 })

package/src/information-extractors/react/extractors/prop-tracker.ts

@@ -26,6 +26,8 @@ export interface PropTrackerData {
   concatenatedAttrs: Map<string, string> // attrName → propName (for concatenated values)
   /** on*-handler prop names whose value is a function on this element (e.g. ['onClick', 'onChange']). */
   eventHandlers: string[]
+  /** True when a child slot rendered nothing, so the content is unknown. */
+  hasEmptySlot: boolean
 }
 
 export interface PropTrackerExtractorState {
@@ -170,6 +172,7 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
         boundProps: [...boundProps],
         concatenatedAttrs,
         eventHandlers,
+        hasEmptySlot: event.hasEmptySlot ?? false,
       } satisfies PropTrackerData)
 
       attachMatchedRefElement(traceId, props, store)

package/src/information-extractors/react/extractors/state-markers.test.ts

@@ -15,6 +15,7 @@ function makeElement(input: {
     boundProps: [],
     concatenatedAttrs: new Map(),
     eventHandlers: input.eventHandlers ?? [],
+    hasEmptySlot: false,
   }
   return {
     traceId: 'trace-0',