@wix/zero-config-implementation 1.85.0 → 1.87.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.85.0",
+  "version": "1.87.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -39,8 +39,32 @@
     }
   },
   "dependencies": {
-    "@wix/builder-services-wrapper": "^1.56.0",
-    "@wix/react-component-schema": "1.8.0"
+    "@wix/react-component-schema": "1.8.0",
+    "@wix/seo-service": "^1.9.0",
+    "@wix/services-manager": "^1.0.7",
+    "@wix/services-manager-react": "^1.0.8",
+    "@wix/site-service-configuration": "^1.0.1",
+    "@wix/site-service-device-info": "^1.0.2",
+    "@wix/site-service-editor-context": "^1.0.1",
+    "@wix/site-service-experiments": "^1.0.3",
+    "@wix/site-service-locale": "^1.0.2",
+    "@wix/site-service-pages": "^1.0.2",
+    "@wix/site-service-provide-css": "^1.0.1",
+    "@wix/site-service-rendering-context": "^1.0.1",
+    "@wix/site-service-url": "^1.0.1",
+    "@wix/viewer-service-anchors": "^1.0.40",
+    "@wix/viewer-service-consent-policy": "^1.0.100",
+    "@wix/viewer-service-environment": "^1.0.47",
+    "@wix/viewer-service-link-utils": "^1.0.62",
+    "@wix/viewer-service-named-signals": "^1.0.16",
+    "@wix/viewer-service-pages": "^1.0.9",
+    "@wix/viewer-service-provide-css": "^1.0.31",
+    "@wix/viewer-service-renderer-configuration": "^1.0.7",
+    "@wix/viewer-service-sdk-state": "^1.0.28",
+    "@wix/viewer-service-site-scroll-blocker": "^1.0.63",
+    "@wix/viewer-service-topology": "^1.0.26",
+    "@wix/viewer-service-translations": "^1.0.15",
+    "@wix/viewer-service-url": "^1.0.69"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.2.0",
@@ -82,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "57c46654a2a7b434be3282e37ce2fff52e061ef822797e00a88ba528"
+  "falconPackageHash": "1db79cb96c2d3ad1aa00f8c608385635757b7899b0f11f7a74f228e4"
 }

package/src/converters/active-item-index-builder.test.ts

@@ -0,0 +1,149 @@
+import { DISPLAY_GROUPS } from '@wix/react-component-schema'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { CoupledProp } from '../information-extractors/react/types'
+import { buildActiveItemDisplayGroups, buildActiveItemIndexDisplayFilters } from './active-item-index-builder'
+
+function arrayProp(name: string): CoupledProp {
+  return { name, type: 'Array<Item>', resolvedType: { kind: 'array' } } as unknown as CoupledProp
+}
+
+function activeIndexProp(name: string, targetArrayProp: string): CoupledProp {
+  return {
+    name,
+    type: 'number',
+    resolvedType: { kind: 'primitive', value: 'number' },
+    activeItemIndexTarget: targetArrayProp,
+  } as unknown as CoupledProp
+}
+
+function numberProp(name: string): CoupledProp {
+  return { name, type: 'number', resolvedType: { kind: 'primitive', value: 'number' } } as unknown as CoupledProp
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('buildActiveItemDisplayGroups', () => {
+  it('emits displayGroups when ActiveItemIndex pairs with an array prop', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+  })
+
+  it('keeps only the first ActiveItemIndex link when multiple pairs exist', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+      slides: arrayProp('slides'),
+      activeSlide: activeIndexProp('activeSlide', 'slides'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Multiple ActiveItemIndex<> props found; only "activeTab" -> "tabs" is used. Dropping "activeSlide" -> "slides".',
+    )
+  })
+
+  it('keeps the first link and drops later indexes targeting the same array', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+      selectedTab: activeIndexProp('selectedTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(warnSpy).toHaveBeenCalledWith(
+      'ActiveItemIndex<> link "selectedTab" -> "tabs" conflicts with an existing link — dropping.',
+    )
+  })
+
+  it('returns undefined when no ActiveItemIndex props exist', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      count: numberProp('count'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target array prop does not exist', () => {
+    const props = {
+      activeTab: activeIndexProp('activeTab', 'nonexistent'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target prop is not an array type', () => {
+    const props = {
+      tabs: numberProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+})
+
+describe('buildActiveItemIndexDisplayFilters', () => {
+  it('hides active index props from Settings data panel', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toEqual({
+      data: { hide: ['activeTab'] },
+    })
+  })
+
+  it('returns undefined when no ActiveItemIndex props exist', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      count: numberProp('count'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target prop is not an array type', () => {
+    const props = {
+      tabs: numberProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toBeUndefined()
+  })
+})

package/src/converters/active-item-index-builder.ts

@@ -0,0 +1,90 @@
+/**
+ * Manifest emission for the `ActiveItemIndex<'<arrayProp>'>` marker type.
+ *
+ * The TS extractor sets `activeItemIndexTarget` on index props. This module is the
+ * single place that interprets that marker for the generated manifest:
+ *
+ *   - `buildActiveItemDisplayGroups` → `displayGroups.<arrayProp>` (`arrayItems` hat)
+ *   - `buildActiveItemIndexDisplayFilters` → `displayFilters.data.hide` (hide raw index)
+ *
+ * `displayGroups` and `displayFilters` stay separate exports because they are
+ * orthogonal manifest fields — they only share the same trigger here.
+ *
+ * Default value `0` for unset index props is applied in `buildData` inside
+ * `to-editor-component`, not here.
+ *
+ * Each index prop and array prop may participate in at most one link. Conflicts
+ * are logged and dropped; only the first valid link is emitted (one hat per component).
+ */
+
+import type { DisplayFilters, DisplayGroupItem } from '@wix/react-component-schema'
+import { DISPLAY_GROUPS } from '@wix/react-component-schema'
+import type { CoupledProp } from '../information-extractors/react'
+import { formatDisplayName, singularize } from './utils'
+
+interface ActiveItemIndexLink {
+  indexPropName: string
+  arrayPropName: string
+}
+
+export function buildActiveItemDisplayGroups(
+  props: Record<string, CoupledProp>,
+): Record<string, DisplayGroupItem> | undefined {
+  const groups: Record<string, DisplayGroupItem> = {}
+  const activeItemIndexLinks = collectValidActiveItemIndexLinks(props)
+
+  for (const { indexPropName, arrayPropName } of activeItemIndexLinks) {
+    groups[arrayPropName] = {
+      displayName: formatDisplayName(singularize(arrayPropName)),
+      groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+      arrayItems: {
+        arrayItems: arrayPropName,
+        selectedItemIndex: indexPropName,
+      },
+    }
+  }
+
+  return Object.keys(groups).length > 0 ? groups : undefined
+}
+
+export function buildActiveItemIndexDisplayFilters(props: Record<string, CoupledProp>): DisplayFilters | undefined {
+  const hiddenIndexProps = collectValidActiveItemIndexLinks(props).map((link) => link.indexPropName)
+  return hiddenIndexProps.length > 0 ? { data: { hide: hiddenIndexProps } } : undefined
+}
+
+function collectValidActiveItemIndexLinks(props: Record<string, CoupledProp>): ActiveItemIndexLink[] {
+  const links: ActiveItemIndexLink[] = []
+  const registeredIndexProps = new Set<string>()
+  const registeredArrayProps = new Set<string>()
+
+  for (const [indexPropName, prop] of Object.entries(props)) {
+    const arrayPropName = prop.activeItemIndexTarget
+    if (!arrayPropName) continue
+
+    const arrayProp = props[arrayPropName]
+    if (!arrayProp || arrayProp.resolvedType.kind !== 'array') continue
+
+    const conflictsWithRegisteredLink =
+      registeredIndexProps.has(indexPropName) || registeredArrayProps.has(arrayPropName)
+    if (conflictsWithRegisteredLink) {
+      console.warn(
+        `ActiveItemIndex<> link "${indexPropName}" -> "${arrayPropName}" conflicts with an existing link — dropping.`,
+      )
+      continue
+    }
+
+    const hasRegisteredLink = links.length > 0
+    if (hasRegisteredLink) {
+      console.warn(
+        `Multiple ActiveItemIndex<> props found; only "${links[0].indexPropName}" -> "${links[0].arrayPropName}" is used. Dropping "${indexPropName}" -> "${arrayPropName}".`,
+      )
+      continue
+    }
+
+    links.push({ indexPropName, arrayPropName })
+    registeredIndexProps.add(indexPropName)
+    registeredArrayProps.add(arrayPropName)
+  }
+
+  return links
+}

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

@@ -318,3 +318,67 @@ describe('toEditorReactComponent — @property design tokens', () => {
     expect(editorElement?.cssProperties?.['--sdf-safelight-color']).toBeUndefined()
   })
 })
+
+describe('toEditorReactComponent — ActiveItemIndex display groups', () => {
+  it('emits displayGroups and hides the active index from Settings', () => {
+    const stringType = { kind: 'primitive' as const, value: 'string' as const }
+    const tabItemType = {
+      kind: 'object' as const,
+      properties: {
+        name: { name: 'name', type: 'string', required: false, resolvedType: stringType },
+        body: { name: 'body', type: 'string', required: false, resolvedType: stringType },
+      },
+    }
+
+    const component: ComponentInfoWithCss = {
+      componentName: 'SimpleTabs',
+      props: {
+        tabs: {
+          name: 'tabs',
+          type: 'Array<TabItem>',
+          required: false,
+          resolvedType: { kind: 'array', elementType: tabItemType },
+          propPath: 'props.tabs',
+          logicOnly: false,
+        },
+        activeTab: {
+          name: 'activeTab',
+          type: 'number',
+          required: false,
+          resolvedType: { kind: 'primitive', value: 'number' },
+          activeItemIndexTarget: 'tabs',
+          propPath: 'props.activeTab',
+          logicOnly: false,
+        },
+      },
+      elements: [
+        createSemanticElement({
+          traceId: 'trace-root',
+          name: 'root',
+          className: 'simple-tabs',
+        }),
+      ],
+      propUsages: new Map(),
+      css: [],
+      varUsedByTraceId: new Map(),
+    }
+
+    const editorElement = toEditorReactComponent(component).editorElement
+
+    expect(editorElement?.displayGroups).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: 'arrayItems',
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(editorElement?.displayFilters).toEqual({
+      data: { hide: ['activeTab'] },
+    })
+    expect(editorElement?.data?.activeTab?.defaultValue).toBe(0)
+    expect(editorElement?.data?.activeTab?.dataType).toBe('number')
+  })
+})

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

@@ -25,6 +25,7 @@ import type {
 } from '../information-extractors/react'
 import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
 import { findPreferredSemanticClass, normalizeClassNames } from '../utils/css-class'
+import { buildActiveItemDisplayGroups, buildActiveItemIndexDisplayFilters } from './active-item-index-builder'
 import { resolveLonghand } from './css-longhand-resolver'
 import { type CustomClassTrigger, buildCustomStatesBlock } from './custom-states-builder'
 import { buildDataItem } from './data-item-builder'
@@ -94,6 +95,9 @@ function buildEditorElement(
       )
     : undefined
 
+  const displayGroups = buildActiveItemDisplayGroups(component.props)
+  const displayFilters = buildActiveItemIndexDisplayFilters(component.props)
+
   return {
     selector: buildSelector(rootElement),
     displayName: formatDisplayName(component.componentName),
@@ -109,6 +113,8 @@ function buildEditorElement(
     cssProperties: buildCssProperties(rootElement),
     cssCustomProperties: rootCustomProps,
     ...(rootStates && { states: rootStates }),
+    ...(displayGroups && { displayGroups }),
+    ...(displayFilters && { displayFilters }),
   }
 }
 
@@ -157,6 +163,10 @@ function buildData(
 
     const result = buildDataItem(prop, defaultValue, propUsages, prop.propPath)
     if (result.isErr()) throw result.error
+    // ActiveItemIndex props default to 0 when no default is specified
+    if (prop.activeItemIndexTarget && result.value.defaultValue === undefined) {
+      result.value.defaultValue = 0
+    }
     data[name] = result.value
   }
 

package/src/converters/utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { formatDisplayName } from './utils'
+import { formatDisplayName, singularize } from './utils'
 
 describe('formatDisplayName', () => {
   it('maps a11y to Accessibility', () => {
@@ -47,3 +47,16 @@ describe('formatDisplayName', () => {
     expect(formatDisplayName(longSingleWord).length).toBe(50)
   })
 })
+
+describe('singularize', () => {
+  it.each([
+    ['slides', 'slide'],
+    ['entries', 'entry'],
+    ['boxes', 'box'],
+    ['tabs', 'tab'],
+    ['glass', 'glass'],
+    ['item', 'item'],
+  ])('singularizes "%s" to "%s"', (input, expected) => {
+    expect(singularize(input)).toBe(expected)
+  })
+})

package/src/converters/utils.ts

@@ -41,3 +41,14 @@ export function formatDisplayName(input: string): string {
   const result = words.join(' ')
   return result.slice(0, DISPLAY_NAME_MAX_LENGTH)
 }
+
+/**
+ * Naive singularization for display names.
+ * Falls back to the original if no rule matches.
+ */
+export function singularize(name: string): string {
+  if (name.endsWith('ies')) return `${name.slice(0, -3)}y`
+  if (name.endsWith('ses') || name.endsWith('xes') || name.endsWith('zes')) return name.slice(0, -2)
+  if (name.endsWith('s') && !name.endsWith('ss')) return name.slice(0, -1)
+  return name
+}

package/src/extensions/wix-services/service-stub.test.ts

@@ -0,0 +1,149 @@
+import { createServicesManager, createServicesMap } from '@wix/services-manager'
+import type { ServiceDefinition } from '@wix/services-manager/types'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { createAutoStubFallbackManager } from './service-stub'
+
+// Definitions are plain strings at runtime, so a cast string is a faithful stand-in.
+function defineTestService(serviceId: string): ServiceDefinition<never, never> {
+  return serviceId as unknown as ServiceDefinition<never, never>
+}
+
+const UnregisteredDefinition = defineTestService('@wix/viewer-service-topology')
+
+// biome-ignore lint/suspicious/noExplicitAny: stubs are intentionally untyped at the call site
+function stubFor(serviceId: string): any {
+  return createAutoStubFallbackManager().getService(defineTestService(serviceId))
+}
+
+describe('createAutoStubFallbackManager', () => {
+  it('returns a referentially stable stub across repeated lookups', () => {
+    const fallbackManager = createAutoStubFallbackManager()
+
+    expect(fallbackManager.getService(UnregisteredDefinition)).toBe(fallbackManager.getService(UnregisteredDefinition))
+  })
+
+  it('notifies once per distinct service id', () => {
+    const onServiceStubbed = vi.fn()
+    const fallbackManager = createAutoStubFallbackManager({ onServiceStubbed })
+
+    fallbackManager.getService(UnregisteredDefinition)
+    fallbackManager.getService(UnregisteredDefinition)
+    fallbackManager.getService(defineTestService('@wix/seo-service'))
+
+    expect(onServiceStubbed.mock.calls).toEqual([['@wix/viewer-service-topology'], ['@wix/seo-service']])
+  })
+})
+
+describe('service stub value semantics', () => {
+  it('resolves nested reads and curried calls to memoized stubs', () => {
+    const pagesStub = stubFor('@wix/site-service-pages')
+    expect(pagesStub.currentPage.title).toBe(pagesStub.currentPage.title)
+
+    const translationsStub = stubFor('@wix/viewer-service-translations')
+    expect(translationsStub.translate('app')('greeting')).toBe(translationsStub.translate('app')('greeting'))
+  })
+
+  it('keeps well-known symbol handlers referentially stable', () => {
+    const stub = stubFor('@wix/viewer-service-topology')
+
+    expect(stub.toString).toBe(stub.toString)
+    expect(stub[Symbol.iterator]).toBe(stub[Symbol.iterator])
+  })
+
+  it('agrees between `in` and reads for symbols', () => {
+    const stub = stubFor('@wix/viewer-service-topology')
+    const unhandledSymbol = Symbol.for('some-library-symbol')
+
+    // Reporting a symbol as present while reading undefined would break
+    // `if (sym in service) service[sym]()`.
+    expect(unhandledSymbol in stub).toBe(false)
+    expect(stub[unhandledSymbol]).toBeUndefined()
+
+    expect(Symbol.iterator in stub).toBe(true)
+    expect(stub[Symbol.iterator]).toBeDefined()
+  })
+
+  it('is not thenable, so awaiting it cannot hang', async () => {
+    const stub = stubFor('@wix/seo-service')
+
+    expect(stub.then).toBeUndefined()
+    expect('then' in stub).toBe(false)
+    await expect(Promise.resolve(stub)).resolves.toBe(stub)
+  })
+
+  it('terminates on spread and key enumeration instead of recursing', () => {
+    const stub = stubFor('@wix/viewer-service-sdk-state')
+
+    expect(Object.keys(stub)).toEqual([])
+    expect({ ...stub }).toEqual({})
+  })
+
+  it('reads as an empty string and iterates as empty', () => {
+    const stub = stubFor('@wix/viewer-service-topology')
+
+    expect(`${stub}`).toBe('')
+    expect([...stub]).toEqual([])
+  })
+
+  it('does not crash React when handed to JSX as a child', () => {
+    // Unconverted, so React sees the Proxy itself — and throws on plain-object children.
+    const reactWarning = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const stub = stubFor('@wix/viewer-service-topology')
+
+    expect(() => renderToStaticMarkup(React.createElement('span', null, stub))).not.toThrow()
+
+    reactWarning.mockRestore()
+  })
+})
+
+describe('used as a services-manager fallback', () => {
+  const RegisteredDefinition = defineTestService('@wix/registered-test-service')
+
+  function createManagerWithFallback(onServiceStubbed?: (serviceId: string) => void) {
+    return createServicesManager(
+      createServicesMap([
+        {
+          definition: RegisteredDefinition,
+          impl: (() => ({ realValue: 'from-real-service' })) as never,
+          config: {} as never,
+        },
+      ]),
+      createAutoStubFallbackManager({ onServiceStubbed }),
+    )
+  }
+
+  it('keeps extended bindings real and still stubs the rest', () => {
+    const ExtendedDefinition = defineTestService('@wix/extended-test-service')
+    const extended = createAutoStubFallbackManager().extend(
+      createServicesMap([
+        {
+          definition: ExtendedDefinition,
+          impl: (() => ({ realValue: 'from-extension' })) as never,
+          config: {} as never,
+        },
+      ]),
+    )
+
+    expect(extended.getService(ExtendedDefinition)).toEqual({ realValue: 'from-extension' })
+    expect(() => extended.getService(UnregisteredDefinition)).not.toThrow()
+  })
+
+  it('leaves registered services untouched', () => {
+    const servicesManager = createManagerWithFallback()
+
+    expect(servicesManager.getService(RegisteredDefinition)).toEqual({ realValue: 'from-real-service' })
+  })
+
+  it('substitutes a stub where an unregistered service would otherwise throw', () => {
+    const onServiceStubbed = vi.fn()
+
+    expect(() => createServicesManager(createServicesMap([])).getService(UnregisteredDefinition)).toThrow(
+      /is not provided/,
+    )
+
+    expect(() => createManagerWithFallback(onServiceStubbed).getService(UnregisteredDefinition)).not.toThrow()
+    expect(onServiceStubbed).toHaveBeenCalledWith('@wix/viewer-service-topology')
+  })
+})