@wix/zero-config-implementation 1.109.0 → 1.110.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.109.0",
+  "version": "1.110.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "9a14eb3c7154bae6dcc34db0e6a5db751a6ed10efc0e2da43f00408c"
+  "falconPackageHash": "47599e898cd311d543a036e8af54090473a39ec45beb3a9f760fd806"
 }

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

@@ -122,3 +122,20 @@ describe('buildDataItem — container dataType', () => {
     expect(result._unsafeUnwrap().container).toEqual(expectedContainerData)
   })
 })
+
+describe('buildDataItem — vectorArt', () => {
+  const vectorArtProp = (): PropInfo => ({
+    name: 'icon',
+    type: 'VectorArt',
+    required: false,
+    resolvedType: { kind: 'semantic', value: 'VectorArt', source: '@wix/editor-react-types' },
+  })
+
+  it('sets the vectorArt oneof member so the editor can resolve the replace panel', () => {
+    const dataItem = buildDataItem(vectorArtProp())._unsafeUnwrap()
+
+    expect(dataItem.dataType).toBe('vectorArt')
+    // Fixed to basic shapes: they are single-fill, so an icon's colour control always applies.
+    expect(dataItem.vectorArt).toEqual({ category: 'SHAPE_BASIC' })
+  })
+})

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

@@ -534,6 +534,11 @@ function applyDataToBuilderType({
         category: MEDIA.IMAGE_CATEGORY.IMAGE,
       }
       break
+    case 'vectorArt':
+      dataItem.dataType = DATA_TYPE.vectorArt
+      // Required for the Replace Vector Art panel; basic shapes are single-fill, so the colour control applies.
+      dataItem.vectorArt = { category: MEDIA.VECTOR_ART_CATEGORY.SHAPE_BASIC }
+      break
     case 'a11y':
       dataItem.dataType = DATA_TYPE.a11y
       dataItem.a11y = {

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

@@ -7,11 +7,13 @@ import {
   enrichContainerProperties,
   enrichFlexProperties,
   enrichMarginProperties,
+  enrichVectorArtProperties,
   getCssPropertiesForTag,
   getDefaultDisplayForTag,
   hasContainerLikeDisplay,
   hasFlexOrGridDisplay,
 } from './css-properties'
+import type { PropTrackerData } from './prop-tracker'
 
 function matcherDataFromCss(declarations: string): MatchedCssData {
   const properties = parseCss(`.test { ${declarations} }`).getPropertiesForSelector('.test')
@@ -610,3 +612,33 @@ describe('enrichMarginProperties', () => {
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
   })
 })
+
+describe('enrichVectorArtProperties', () => {
+  const asVectorArtHost = (element: ExtractedElement): ExtractedElement => {
+    element.extractorData.set('prop-tracker', { rendersVectorArt: true } as PropTrackerData)
+    return element
+  }
+  const relevantOf = (element: ExtractedElement) =>
+    (element.extractorData.get('css-properties') as { relevant: string[] }).relevant
+
+  it('narrows a vector-art host to display, dropping the box controls of its tag', () => {
+    const host = asVectorArtHost(createElementWithCssProperties('div', 'display: block'))
+    expect(relevantOf(host)).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.background)
+
+    const [enrichedHost] = enrichVectorArtProperties([host])
+
+    expect(relevantOf(enrichedHost)).toEqual([CSS_PROPERTIES.CSS_PROPERTY_TYPE.display])
+  })
+
+  it('narrows a nested host after the flex pass, so its alignSelf does not survive', () => {
+    const parent: ExtractedElement = {
+      ...createElementWithCssProperties('div', 'display: flex'),
+      children: [asVectorArtHost(createElementWithCssProperties('span', ''))],
+    }
+
+    const [enrichedParent] = enrichVectorArtProperties(enrichFlexProperties([parent]))
+
+    expect(relevantOf(enrichedParent.children[0])).toEqual([CSS_PROPERTIES.CSS_PROPERTY_TYPE.display])
+    expect(relevantOf(enrichedParent)).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+  })
+})

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

@@ -10,6 +10,7 @@ import { resolveCssPropertyValue } from '../../css/parse'
 import type { MatchedCssData } from '../../css/types'
 import type { ExtractedElement } from './core/tree-builder'
 import type { CreateElementEvent, ReactExtractor } from './core/types'
+import type { PropTrackerData } from './prop-tracker'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -188,6 +189,11 @@ const TEXT_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.color,
 ]
 
+/**
+ * CSS properties for vector-art hosts. Size, colour and rotation come from CSS custom properties.
+ */
+const VECTOR_ART_CSS_PROPERTIES: string[] = [CSS_PROPERTY_TYPE.display]
+
 /**
  * CSS properties for Media elements (excluding svg)
  */
@@ -706,6 +712,28 @@ export function enrichMarginProperties(elements: ExtractedElement[]): ExtractedE
   })
 }
 
+/**
+ * Narrows vector-art hosts to `VECTOR_ART_CSS_PROPERTIES`.
+ * Must run after every other enrichment pass, so none of them can add box controls back.
+ */
+export function enrichVectorArtProperties(elements: ExtractedElement[]): ExtractedElement[] {
+  return elements.map((element) => {
+    const propTrackerData = element.extractorData.get('prop-tracker') as PropTrackerData | undefined
+    const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+
+    if (propTrackerData?.rendersVectorArt && cssData) {
+      element.extractorData.set('css-properties', {
+        relevant: cssData.relevant.filter((property) => VECTOR_ART_CSS_PROPERTIES.includes(property)),
+      })
+    }
+
+    return {
+      ...element,
+      children: enrichVectorArtProperties(element.children),
+    }
+  })
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Factory
 // ─────────────────────────────────────────────────────────────────────────────

package/src/information-extractors/react/extractors/index.ts

@@ -30,6 +30,7 @@ export {
   enrichContainerProperties,
   enrichFlexProperties,
   enrichMarginProperties,
+  enrichVectorArtProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
   ROOT_DISPLAY_CUSTOM_PROPERTY,

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { createRefElementMarker } from '../../../extensions/ref-elements/path-utils'
 import type { RefElementMatch } from '../../../extensions/ref-elements/types'
+import type { ResolvedType } from '../../ts/types'
 import { ExtractorStore } from './core/store'
 import { type PropTrackerData, createPropTrackerExtractor } from './prop-tracker'
 
@@ -267,3 +268,91 @@ describe('createPropTrackerExtractor', () => {
     expect(store.get<PropTrackerData>('trace-1', 'prop-tracker')?.hasEmptySlot).toBe(true)
   })
 })
+
+describe('createPropTrackerExtractor — vector-art hosts', () => {
+  const vectorArtType: ResolvedType = { kind: 'semantic', value: 'VectorArt', source: '@wix/editor-react-types' }
+
+  /** Mocks an `icon` prop of `resolvedType`, renders one element with `renderProps`, returns its tracker data. */
+  function renderIcon<MockedIcon = Record<string, string>>(
+    resolvedType: ResolvedType,
+    renderProps: (icon: MockedIcon) => Record<string, unknown>,
+  ): PropTrackerData | undefined {
+    const store = new ExtractorStore()
+    const { extractor } = createPropTrackerExtractor()
+    const context = {
+      componentInfo: {
+        componentName: 'Icon',
+        props: { icon: { name: 'icon', type: 'VectorArt', required: false, resolvedType } },
+      },
+      component: () => null,
+      props: {} as Record<string, unknown>,
+      store,
+    }
+    extractor.onBeforeRender?.(context)
+
+    extractor.onCreateElement?.({
+      type: 'div',
+      isDomElement: true,
+      tag: 'div',
+      traceId: 'trace-1',
+      props: renderProps(context.props.icon as MockedIcon),
+      children: [],
+      store,
+    })
+    return store.get<PropTrackerData>('trace-1', 'prop-tracker')
+  }
+
+  it('flags an element that injects svgContent as raw markup', () => {
+    const data = renderIcon(vectorArtType, (icon) => ({ injected: { __html: icon.svgContent } }))
+
+    expect(data?.rendersVectorArt).toBe(true)
+  })
+
+  it('does not flag a vector-art field bound to an ordinary attribute', () => {
+    const data = renderIcon(vectorArtType, (icon) => ({ 'data-src': icon.uri }))
+
+    expect(data?.rendersVectorArt).toBe(false)
+  })
+
+  it('does not flag raw markup that does not come from vector art', () => {
+    const data = renderIcon({ kind: 'primitive', value: 'string' }, (markup) => ({
+      injected: { __html: markup },
+    }))
+
+    expect(data?.rendersVectorArt).toBe(false)
+  })
+
+  it('flags a host when vector art is the union member the data item describes', () => {
+    const data = renderIcon({ kind: 'union', types: [vectorArtType, { kind: 'literal', value: 'none' }] }, (icon) => ({
+      injected: { __html: icon.svgContent },
+    }))
+
+    expect(data?.rendersVectorArt).toBe(true)
+  })
+
+  /** `{ name: string; badge: VectorArt }` */
+  const badgeHolderType: ResolvedType = {
+    kind: 'object',
+    properties: {
+      name: { name: 'name', type: 'string', required: true, resolvedType: { kind: 'primitive', value: 'string' } },
+      badge: { name: 'badge', type: 'VectorArt', required: true, resolvedType: vectorArtType },
+    },
+  }
+  type BadgeHolder = { name: string; badge: Record<string, string> }
+
+  it('flags a host of vector art nested in an object prop', () => {
+    const data = renderIcon<BadgeHolder>(badgeHolderType, (avatar) => ({
+      injected: { __html: avatar.badge.svgContent },
+    }))
+
+    expect(data?.rendersVectorArt).toBe(true)
+  })
+
+  it('flags a host of vector art nested in array items', () => {
+    const data = renderIcon<BadgeHolder[]>({ kind: 'array', elementType: badgeHolderType }, (items) => ({
+      injected: { __html: items[0].badge.svgContent },
+    }))
+
+    expect(data?.rendersVectorArt).toBe(true)
+  })
+})

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

@@ -28,6 +28,15 @@ export interface PropTrackerData {
   eventHandlers: string[]
   /** True when a child slot rendered nothing, so the content is unknown. */
   hasEmptySlot: boolean
+  /** True when the element injects a `VectorArt` value's `svgContent` as raw markup. */
+  rendersVectorArt?: boolean
+}
+
+interface SpyMatch {
+  propName: string
+  path: string
+  embedded: boolean
+  semantic?: string
 }
 
 export interface PropTrackerExtractorState {
@@ -68,8 +77,8 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
   const pendingRefElementsByPath = new Map<string, PendingRefElement[]>()
 
   const registrar: PropSpyRegistrar = {
-    registerString(path, propName, value) {
-      stringMeta.set(value, { path, propName, originalValue: value })
+    registerString(path, propName, value, semantic) {
+      stringMeta.set(value, { path, propName, originalValue: value, semantic })
     },
     registerNumber(path, propName, value) {
       numberMeta.set(value, { path, propName, originalValue: value })
@@ -79,16 +88,13 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
     },
   }
 
-  const extractSpies = (
-    value: unknown,
-    seen = new WeakSet<object>(),
-  ): { propName: string; path: string; embedded: boolean }[] => {
+  const extractSpies = (value: unknown, seen = new WeakSet<object>()): SpyMatch[] => {
     if (typeof value === 'string') {
-      const results: { propName: string; path: string; embedded: boolean }[] = []
+      const results: SpyMatch[] = []
       for (const [key, meta] of stringMeta) {
         if (value.includes(key)) {
           // embedded = spy marker was part of a longer string (e.g. `mailto:${email}`)
-          results.push({ propName: meta.propName, path: meta.path, embedded: value !== key })
+          results.push({ propName: meta.propName, path: meta.path, embedded: value !== key, semantic: meta.semantic })
         }
       }
       return results
@@ -138,6 +144,7 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
       const boundProps = new Set<string>()
       const concatenatedAttrs = new Map<string, string>()
       const eventHandlers: string[] = []
+      let rendersVectorArt = false
 
       Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('__') || key === TRACE_ATTR) return
@@ -146,7 +153,14 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
           eventHandlers.push(key)
         }
 
+        // Injected markup is identified by React's `{ __html }` wrapper, not by the prop's name.
+        const valueKeys = typeof value === 'object' && value !== null ? Object.keys(value) : []
+        const isRawHtmlValue = valueKeys.length === 1 && valueKeys[0] === '__html'
+
         const spies = extractSpies(value)
+        if (isRawHtmlValue && spies.some((spy) => spy.semantic === 'VectorArt')) {
+          rendersVectorArt = true
+        }
 
         spies.forEach((spy) => {
           boundProps.add(spy.propName)
@@ -173,6 +187,7 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
         concatenatedAttrs,
         eventHandlers,
         hasEmptySlot: event.hasEmptySlot ?? false,
+        rendersVectorArt,
       } satisfies PropTrackerData)
 
       attachMatchedRefElement(traceId, props, store)

package/src/information-extractors/react/index.ts

@@ -20,6 +20,7 @@ export {
   enrichContainerProperties,
   enrichFlexProperties,
   enrichMarginProperties,
+  enrichVectorArtProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
   ROOT_DISPLAY_CUSTOM_PROPERTY,

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

@@ -13,6 +13,8 @@ export interface PropSpyMeta {
   path: string
   propName: string
   originalValue: unknown
+  /** Semantic type the value was mocked for (e.g. `VectorArt`). */
+  semantic?: string
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

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

@@ -41,7 +41,7 @@ export function resetMockCounter(): void {
  * Satisfied structurally by PropSpyContext.
  */
 export interface PropSpyRegistrar {
-  registerString(path: string, propName: string, value: string): void
+  registerString(path: string, propName: string, value: string, semantic?: string): void
   registerNumber(path: string, propName: string, value: number): void
   registerFunction(path: string, propName: string, value: (...args: unknown[]) => unknown): void
 }
@@ -168,7 +168,7 @@ function generateSemanticValue(
     case 'A11y':
       return generateMockA11y(path, registrar)
     case 'VectorArt':
-      return generateMockVectorArt()
+      return generateMockVectorArt(path, registrar)
     case 'Audio':
     case 'AudioUri':
       return generateMockAudio()
@@ -249,19 +249,20 @@ function generateUnionValue(
 ): unknown {
   const types = resolvedType.types ?? []
 
-  // Prefer string literals for textEnum-like unions
-  const stringLiteral = types.find(
-    (candidateType) => candidateType.kind === 'literal' && typeof candidateType.value === 'string',
-  )
-  if (stringLiteral) {
-    return stringLiteral.value
-  }
-
   // Skip undefined/null when picking a representative type — Partial<T> produces T | undefined
   // unions where TypeScript may place undefined first, which would generate useless mock values
   const isNullish = (candidateType: ResolvedType) =>
     candidateType.kind === 'primitive' && (candidateType.value === 'undefined' || candidateType.value === 'null')
-  const representative = types.find((candidateType) => !isNullish(candidateType)) ?? types[0]
+  const definedTypes = types.filter((candidateType) => !isNullish(candidateType))
+
+  // Mirror the data-item builder: textEnum-like unions mock a literal, others their first defined member.
+  const isStringLiteral = (candidateType: ResolvedType) =>
+    candidateType.kind === 'literal' && typeof candidateType.value === 'string'
+  if (definedTypes.length > 0 && definedTypes.every(isStringLiteral)) {
+    return definedTypes[0].value
+  }
+
+  const representative = definedTypes[0] ?? types[0]
   if (representative) {
     return generateValueFromResolvedType(representative, propName, path, registrar, options)
   }
@@ -465,12 +466,19 @@ function generateMockA11y(path: string, registrar?: PropSpyRegistrar): Record<st
   return a11y
 }
 
-function generateMockVectorArt(): Record<string, unknown> {
-  return {
-    svgId: faker.string.uuid(),
-    url: `${faker.internet.url()}/icon.svg`,
-    svgContent: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>',
-  }
+/**
+ * Mocks `VectorArt`. `svgContent` is registered as `VectorArt` so the prop tracker can detect its host element.
+ */
+function generateMockVectorArt(path: string, registrar?: PropSpyRegistrar): Record<string, unknown> {
+  const viewBox = '0 0 24 24'
+  // Spies match by substring, so each registered value must be unique across props.
+  const token = faker.string.alphanumeric(8)
+  const uri = `mock_vector_${token}.svg`
+  const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" data-mock="${token}"><circle cx="12" cy="12" r="10"/></svg>`
+  registrar?.registerString(`${path}.uri`, 'uri', uri)
+  registrar?.registerString(`${path}.svgContent`, 'svgContent', svgContent, 'VectorArt')
+
+  return { viewBox, contentBox: viewBox, contentType: 'shape', colors: {}, uri, svgContent }
 }
 
 function generateMockAudio(): Record<string, unknown> {

package/src/manifest-pipeline.ts

@@ -13,6 +13,7 @@ import {
   enrichFlexProperties,
   enrichGapProperties,
   enrichMarginProperties,
+  enrichVectorArtProperties,
   runExtractors,
 } from './information-extractors/react'
 import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } from './information-extractors/react'
@@ -171,6 +172,9 @@ export function processComponent(
     }
   }
 
+  // Runs last so no earlier pass can add box controls back to a vector-art host.
+  enhancedInfo = { ...enhancedInfo, elements: enrichVectorArtProperties(enhancedInfo.elements) }
+
   return {
     ok: true,
     component: {