@wix/zero-config-implementation 1.103.0 → 1.105.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.103.0",
+  "version": "1.105.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "37bdab4bfdcda072c3c9d9edbfc88017a9270a42765e4b943aa0f51b"
+  "falconPackageHash": "0c8ba866b638c1cacaeaecfc2e82c36a40e6307f5e3896c922c1dc25"
 }

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

@@ -117,7 +117,7 @@ function applyResolvedTypeToDataItem(
       return handleObjectType(dataItem, resolvedType, propUsages, propPath)
 
     case 'union':
-      return handleUnionType(dataItem, resolvedType, propInfo)
+      return handleUnionType({ dataItem, resolvedType, propInfo, propUsages, propPath })
 
     case 'function':
       handleFunctionType(dataItem, propInfo, bindings)
@@ -290,11 +290,19 @@ function handleObjectType(
  * Handles union types by detecting special patterns (boolean literals,
  * string literal enums) or falling back to the first valid member type.
  */
-function handleUnionType(
-  dataItem: DataItem,
-  resolvedType: ResolvedType,
-  propInfo: PropInfo,
-): Result<void, ParseErrorInstance> {
+function handleUnionType({
+  dataItem,
+  resolvedType,
+  propInfo,
+  propUsages,
+  propPath,
+}: {
+  dataItem: DataItem
+  resolvedType: ResolvedType
+  propInfo: PropInfo
+  propUsages?: TrackingStores['propUsages']
+  propPath?: string
+}): Result<void, ParseErrorInstance> {
   if (!resolvedType.types || resolvedType.types.length === 0) {
     dataItem.dataType = DATA_TYPE.text
     dataItem.text = {}
@@ -341,7 +349,7 @@ function handleUnionType(
   // For other unions, use the first valid type
   const firstValidType = validTypes[0]
   if (firstValidType) {
-    return applyResolvedTypeToDataItem(dataItem, firstValidType, propInfo)
+    return applyResolvedTypeToDataItem(dataItem, firstValidType, propInfo, propUsages, propPath)
   }
 
   dataItem.dataType = DATA_TYPE.text

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

@@ -374,6 +374,48 @@ describe('toEditorReactComponent — cssProperties defaultValue', () => {
     expect(result.editorElement?.cssProperties?.overflow).toEqual({ defaultValue: 'hidden' })
   })
 
+  it("excludes margin from the root element but keeps it on inner elements (editor's layout positions the root on stage)", () => {
+    const marginProperties = [
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.margin,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginRight,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginLeft,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd,
+    ]
+    const createExtractorData = () => {
+      const extractorData = new Map<string, unknown>()
+      extractorData.set('css-matcher', matcherDataFromCss(''))
+      extractorData.set('css-properties', { relevant: marginProperties })
+      return extractorData
+    }
+
+    const childElement: ExtractedElement = {
+      traceId: 'trace-icon',
+      name: 'icon',
+      tag: 'div',
+      attributes: {},
+      extractorData: createExtractorData(),
+      children: [],
+    }
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData: createExtractorData(),
+      children: [childElement],
+    }
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    for (const property of marginProperties) {
+      expect(result.editorElement?.cssProperties?.[property]).toBeUndefined()
+      expect(result.editorElement?.elements?.icon?.inlineElement?.cssProperties?.[property]).toEqual({})
+    }
+  })
+
   it('keeps width/height on inner (non-root) elements', () => {
     const rootExtractorData = new Map<string, unknown>()
     rootExtractorData.set('css-matcher', matcherDataFromCss(''))

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

@@ -576,9 +576,20 @@ function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
   return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
 }
 
-// Root sizing is handled separately via layout config, so `width`/`height`
-// are excluded from the root element's own `cssProperties`.
-const ROOT_EXCLUDED_CSS_PROPERTIES = new Set<string>([CSS_PROPERTY_TYPE.width, CSS_PROPERTY_TYPE.height])
+// CSS properties left out of the root element's own `cssProperties`:
+// - `width`/`height`: root sizing is handled separately via layout config.
+// - margins: the editor's layout positions the root on stage.
+const ROOT_EXCLUDED_CSS_PROPERTIES = new Set<string>([
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.margin,
+  CSS_PROPERTY_TYPE.marginTop,
+  CSS_PROPERTY_TYPE.marginRight,
+  CSS_PROPERTY_TYPE.marginBottom,
+  CSS_PROPERTY_TYPE.marginLeft,
+  CSS_PROPERTY_TYPE.marginInlineStart,
+  CSS_PROPERTY_TYPE.marginInlineEnd,
+])
 
 function buildCssProperties(
   element: ExtractedElement | undefined,

package/src/manifest-pipeline.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 
 import type { ComponentInfo } from './information-extractors/ts'
-import type { PropInfo } from './information-extractors/ts/types'
+import type { PropInfo, ResolvedType } from './information-extractors/ts/types'
 
 import {
   type ExtractedElement,
@@ -227,10 +227,11 @@ function processElementPropsWrites(
     if (!relativePath) continue
 
     // Resolve the PropInfo for this leaf prop by walking the type tree
-    const propInfo = resolveInnerPropInfo(elementPropsInfo, relativePath)
-    if (!propInfo) continue
+    const resolvedProp = resolveInnerPropInfo(elementPropsInfo, relativePath)
+    if (!resolvedProp) continue
+    const { propInfo, relativePropPath } = resolvedProp
 
-    const elementPropsPath = extractParentElementPropsPath(relativePath)
+    const elementPropsPath = extractParentElementPropsPath(relativePropPath)
     if (!elementPropsPath) continue
     const bindings = extractBindings(writeInfo)
 
@@ -248,7 +249,7 @@ function processElementPropsWrites(
         entry.props[leafName] = {
           ...propInfo,
           logicOnly: false,
-          propPath: path,
+          propPath: `props.elementProps.${relativePropPath}`,
         }
       }
     }
@@ -262,29 +263,44 @@ function processElementPropsWrites(
  * e.g., path "navbar.items" -> walk elementProps type -> navbar property -> items property
  * Handles recursive nesting: "hamburgerMenu.elementProps.hamburgerCloseButton.label"
  */
-function resolveInnerPropInfo(elementPropsPropInfo: PropInfo, relativePath: string): PropInfo | null {
+function resolveInnerPropInfo(
+  elementPropsPropInfo: PropInfo,
+  relativePath: string,
+): { propInfo: PropInfo; relativePropPath: string } | null {
   const segments = relativePath.split('.')
-  let currentType = elementPropsPropInfo.resolvedType
+  let currentType = unwrapOptionalType(elementPropsPropInfo.resolvedType)
 
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i]
+  for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
+    const segment = segments[segmentIndex]
     if (!currentType.properties) return null
 
     const propInfo = currentType.properties[segment]
     if (!propInfo) return null
 
-    // If this is the last segment, return the PropInfo
-    if (i === segments.length - 1) {
-      return propInfo
+    // A11y is one semantic data item. Its tracked DOM writes point at fields
+    // such as next.a11y.ariaLabel, but the type has no property tree to descend.
+    // Keep the parent path so the builder can collect only the used attributes.
+    const propType = unwrapOptionalType(propInfo.resolvedType)
+    const isA11y = propType.kind === 'semantic' && propType.value === 'A11y'
+    if (segmentIndex === segments.length - 1 || isA11y) {
+      return { propInfo, relativePropPath: segments.slice(0, segmentIndex + 1).join('.') }
     }
 
     // Otherwise, descend into this property's resolved type
-    currentType = propInfo.resolvedType
+    currentType = propType
   }
 
   return null
 }
 
+function unwrapOptionalType(resolvedType: ResolvedType): ResolvedType {
+  if (resolvedType.kind !== 'union') return resolvedType
+  const definedTypes = resolvedType.types?.filter(
+    (member) => !(member.kind === 'primitive' && (member.value === 'undefined' || member.value === 'null')),
+  )
+  return definedTypes?.length === 1 ? definedTypes[0] : resolvedType
+}
+
 function extractBindings(
   writeInfo: TrackingStores['propUsages'] extends Map<string, infer V> ? V : never,
 ): DOMBinding[] {