@wix/zero-config-implementation 1.80.0 → 1.82.0

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-B8oF7hWg.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-tAvBvLbA.js";
 import "react";
 export {
   t as BaseError,

package/package.json

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

package/src/__fixtures__/esm-browser-globals-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-existing-navigator-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-preservation-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-runtime-error-entry.mjs

@@ -0,0 +1,4 @@
+void navigator.userAgent
+void Element.prototype
+
+throw new Error('browser-global fixture runtime failure')

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/module-loader.test.ts

@@ -8,7 +8,170 @@ import { readLoaderPortRefStateForTests, readRegisteredRefElementModuleUrlsForTe
 
 const require = createRequire(import.meta.url)
 
+const extractionGlobalPropertyNames = [
+  'window',
+  'document',
+  'HTMLElement',
+  'Element',
+  'navigator',
+  'customElements',
+  'IntersectionObserver',
+  'React',
+  'ReactDOM',
+] as const
+
+type ExtractionGlobalPropertyName = (typeof extractionGlobalPropertyNames)[number]
+
+function snapshotExtractionGlobalDescriptors(): Map<ExtractionGlobalPropertyName, PropertyDescriptor | undefined> {
+  return new Map(
+    extractionGlobalPropertyNames.map((propertyName) => [
+      propertyName,
+      Object.getOwnPropertyDescriptor(globalThis, propertyName),
+    ]),
+  )
+}
+
+function clearExtractionGlobals(): void {
+  for (const propertyName of extractionGlobalPropertyNames) {
+    Reflect.deleteProperty(globalThis, propertyName)
+  }
+}
+
+function restoreExtractionGlobalDescriptors(
+  originalDescriptors: Map<ExtractionGlobalPropertyName, PropertyDescriptor | undefined>,
+): void {
+  clearExtractionGlobals()
+  for (const [propertyName, propertyDescriptor] of originalDescriptors) {
+    if (propertyDescriptor !== undefined) {
+      Object.defineProperty(globalThis, propertyName, propertyDescriptor)
+    }
+  }
+}
+
 describe('module loading', () => {
+  it('loads an ESM entry that reads navigator and Element during module evaluation', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    try {
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+      const configuredWindow = globals.window as Record<string, unknown>
+
+      expect(loadedModule.moduleExports.navigatorUserAgent).toBe(
+        (configuredWindow.navigator as { userAgent: string }).userAgent,
+      )
+      expect(loadedModule.moduleExports.elementPrototype).toBe(
+        (configuredWindow.Element as { prototype: unknown }).prototype,
+      )
+      expect(globals.navigator).toBe(configuredWindow.navigator)
+      expect(globals.Element).toBe(configuredWindow.Element)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('preserves caller-provided navigator and Element globals', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const callerNavigator = { userAgent: 'caller-provided navigator' }
+    class CallerProvidedElement {}
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: callerNavigator,
+        writable: true,
+      })
+      Object.defineProperty(globalThis, 'Element', {
+        configurable: true,
+        value: CallerProvidedElement,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-preservation-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+
+      expect(globals.navigator).toBe(callerNavigator)
+      expect(globals.Element).toBe(CallerProvidedElement)
+      expect(loadedModule.moduleExports.elementPrototype).toBe(CallerProvidedElement.prototype)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('preserves an existing navigator while adding a missing Element global', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const existingNavigator = { userAgent: 'existing Node navigator' }
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: existingNavigator,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-existing-navigator-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+      const configuredWindow = globals.window as Record<string, unknown>
+
+      expect(loadedModule.moduleExports.navigatorUserAgent).toBe(existingNavigator.userAgent)
+      expect(loadedModule.moduleExports.elementPrototype).toBe(
+        (configuredWindow.Element as { prototype: unknown }).prototype,
+      )
+      expect(globals.navigator).toBe(existingNavigator)
+      expect(globals.Element).toBe(configuredWindow.Element)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('keeps unrelated module-evaluation failures visible after browser-global setup', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const callerNavigator = { userAgent: 'caller-provided navigator' }
+    class CallerProvidedElement {}
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: callerNavigator,
+        writable: true,
+      })
+      Object.defineProperty(globalThis, 'Element', {
+        configurable: true,
+        value: CallerProvidedElement,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-runtime-error-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+
+      expect(loadedModuleResult.isErr()).toBe(true)
+      if (loadedModuleResult.isErr()) {
+        expect(loadedModuleResult.error.esmError?.message).toContain('browser-global fixture runtime failure')
+      }
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
   it('temporarily tags ref-element modules in the CJS fallback and cleans them up afterwards', async () => {
     const entryPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-entry.cjs')
     const targetPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-target.cjs')

package/src/module-loader.ts

@@ -44,6 +44,8 @@ function setupWindowGlobals(): void {
   }
 
   const windowObj = globals.window as Record<string, unknown>
+  if (globals.navigator === undefined) globals.navigator = windowObj.navigator
+  if (globals.Element === undefined) globals.Element = windowObj.Element
   const intersectionObserver = windowObj.IntersectionObserver ?? NoopIntersectionObserver
   if (globals.IntersectionObserver === undefined) globals.IntersectionObserver = intersectionObserver
   if (windowObj.IntersectionObserver === undefined) windowObj.IntersectionObserver = intersectionObserver