@wix/zero-config-implementation 1.106.0 → 1.109.0

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

@@ -1,6 +1,5 @@
 import type {
   CssCustomPropertyItem,
-  CssNumber,
   CssPropertyItem,
   CustomPropertyEnum,
   DataItem,
@@ -387,7 +386,6 @@ function buildNearestCommonAncestorCustomProps(
       ? registration.cssPropertyType
       : getVarPropertyTypeFromCssInfos(varName, valueForTypeInference, component.css)
     const customEnum = buildCustomEnum(registration)
-    const numberLimits = buildCssNumber(registration, cssPropertyType)
     const cleanVarName = varName.startsWith('--') ? varName.slice(2) : varName
 
     const existingProps = nearestCommonAncestorCustomProps.get(nearestCommonAncestorTraceId) ?? {}
@@ -397,7 +395,6 @@ function buildNearestCommonAncestorCustomProps(
       ...(statesDefaultValues && { statesDefaultValues }),
       ...(cssPropertyType !== undefined && { cssPropertyType }),
       ...(customEnum && { customEnum }),
-      ...(numberLimits && { number: numberLimits }),
     }
     nearestCommonAncestorCustomProps.set(nearestCommonAncestorTraceId, existingProps)
   }
@@ -493,42 +490,6 @@ function buildCustomEnum(registration: RegisteredCustomProperty | undefined): Cu
   }
 }
 
-function parseFiniteDescriptor(rawValue: string | undefined): number | undefined {
-  const trimmed = rawValue?.trim()
-  if (!trimmed) return undefined
-  const parsed = Number(trimmed)
-  return Number.isFinite(parsed) ? parsed : undefined
-}
-
-/**
- * Builds the clamp the panel's number control applies, from an @property's range
- * descriptors. Anything unusable is dropped rather than passed through.
- */
-function buildCssNumber(
-  registration: RegisteredCustomProperty | undefined,
-  cssPropertyType: CssCustomPropertyItem['cssPropertyType'],
-): CssNumber | undefined {
-  if (!registration?.range || cssPropertyType !== CSS_PROPERTIES.CSS_DATA_TYPE.number) return undefined
-
-  let min = parseFiniteDescriptor(registration.range.min)
-  let max = parseFiniteDescriptor(registration.range.max)
-  if (min !== undefined && max !== undefined && min >= max) {
-    min = undefined
-    max = undefined
-  }
-
-  const step = parseFiniteDescriptor(registration.range.step)
-  const multiplier = step !== undefined && step > 0 ? step : undefined
-
-  if (min === undefined && max === undefined && multiplier === undefined) return undefined
-
-  return {
-    ...(min !== undefined && { min: String(min) }),
-    ...(max !== undefined && { max: String(max) }),
-    ...(multiplier !== undefined && { multiplier: String(multiplier) }),
-  }
-}
-
 function getVarPropertyTypeFromCssInfos(
   varName: string,
   defaultValue: string,

package/src/information-extractors/css/parse.ts

@@ -9,7 +9,6 @@ import type {
   CssDataType,
   NativePseudoClass,
   RegisteredCustomProperty,
-  RegisteredPropertyRange,
   SelectorStateScope,
   StateClassRule,
 } from './types'
@@ -537,19 +536,6 @@ function extractAtruleDescriptors(block: CssNode): Map<string, string> {
   return descriptors
 }
 
-/** Picks the range descriptors out of the block; css-tree collects them like any other declaration. */
-function extractRangeDescriptors(descriptors: Map<string, string>): RegisteredPropertyRange | undefined {
-  const min = descriptors.get('--min')
-  const max = descriptors.get('--max')
-  const step = descriptors.get('--step')
-  if (min === undefined && max === undefined && step === undefined) return undefined
-  return {
-    ...(min !== undefined && { min }),
-    ...(max !== undefined && { max }),
-    ...(step !== undefined && { step }),
-  }
-}
-
 /**
  * Walks the stylesheet for `@property` at-rules and builds a map of registered custom
  * properties keyed by the `--`-prefixed variable name.
@@ -577,13 +563,11 @@ function parseRegisteredProperties(cssString: string): Map<string, RegisteredCus
       if (!resolved) return
       const { cssPropertyType, enumOptions } = resolved
       const initialValue = descriptors.get('initial-value')
-      const range = extractRangeDescriptors(descriptors)
 
       registered.set(varName, {
         cssPropertyType,
         ...(enumOptions && { enumOptions }),
         ...(initialValue !== undefined && { defaultValue: initialValue }),
-        ...(range && { range }),
       })
     },
   })

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

@@ -69,23 +69,6 @@ export interface RegisteredCustomProperty {
    * (`a | b | c`). Present only when `cssPropertyType` is `customEnum`.
    */
   enumOptions?: string[]
-  /**
-   * The numeric range for the control, as raw descriptor strings. Validated at
-   * conversion time. Meaningful only when `cssPropertyType` is `number`.
-   */
-  range?: RegisteredPropertyRange
-}
-
-/**
- * `--min` / `--max` / `--step` descriptors an importer may emit inside an `@property`
- * block. The `--` prefix keeps them in the author namespace: browsers ignore descriptors
- * they don't know, so the CSS stays valid and CSS can't standardise these names out from
- * under us.
- */
-export interface RegisteredPropertyRange {
-  min?: string
-  max?: string
-  step?: string
 }
 
 export type NativePseudoClass = 'hover' | 'focus' | 'disabled' | 'invalid'

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

@@ -21,6 +21,12 @@ export interface ResolvedType {
   properties?: Record<string, PropInfo>
   elementType?: ResolvedType
   types?: ResolvedType[] // For unions and intersections
+  functionSignature?: {
+    parameters: { name: string; type: ResolvedType; optional: boolean; rest: boolean }[]
+    returnType: ResolvedType
+    async: boolean
+    overloaded: boolean
+  }
 }
 
 /**

package/src/information-extractors/ts/utils/semantic-type-resolver.ts

@@ -214,7 +214,7 @@ function resolveTypeBody({
     () => resolveUnionType(type, checker, depth, seenTypes),
     () => resolveArrayType(type, checker, depth, seenTypes),
     () => resolveIntersectionType(type, checker, depth, seenTypes),
-    () => resolveFunctionType(type, checker),
+    () => resolveFunctionType(type, checker, depth, seenTypes),
     () => resolveObjectType(type, checker, depth, seenTypes),
   ]
 
@@ -367,7 +367,58 @@ function getArrayElementType(type: ts.Type, checker: ts.TypeChecker): ts.Type |
   return checker.getIndexTypeOfType(type, ts.IndexKind.Number)
 }
 
-function resolveFunctionType(type: ts.Type, checker: ts.TypeChecker): ResolvedType | undefined {
+const REACT_EVENT_TYPES = new Set([
+  'ChangeEvent',
+  'MouseEvent',
+  'PointerEvent',
+  'FocusEvent',
+  'KeyboardEvent',
+  'FormEvent',
+])
+
+function resolveCallbackType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+  typeNode?: ts.TypeNode,
+): ResolvedType {
+  const declaredSemanticType = resolveDeclaredCallbackSemanticType(typeNode, checker)
+  if (declaredSemanticType) return declaredSemanticType
+  const symbol = type.getSymbol()
+  if (symbol && REACT_EVENT_TYPES.has(symbol.getName())) {
+    const source = getSymbolPackage(symbol, checker)
+    if (source === '@types/react' || source === 'react') {
+      return { kind: 'semantic', value: symbol.getName(), source }
+    }
+  }
+  return resolveType({ type, checker, depth: depth + 1, seenTypes })
+}
+
+function resolveDeclaredCallbackSemanticType(
+  typeNode: ts.TypeNode | undefined,
+  checker: ts.TypeChecker,
+  seenSymbols = new Set<ts.Symbol>(),
+): ResolvedType | undefined {
+  if (!typeNode || !ts.isTypeReferenceNode(typeNode)) return undefined
+  let symbol = checker.getSymbolAtLocation(typeNode.typeName)
+  if (!symbol) return undefined
+  if ((symbol.flags & ts.SymbolFlags.Alias) !== 0) symbol = checker.getAliasedSymbol(symbol)
+  if (seenSymbols.has(symbol)) return undefined
+  seenSymbols.add(symbol)
+  if (getSymbolPackage(symbol, checker) === '@wix/editor-react-types' && isValidWixSemanticType(symbol.getName())) {
+    return { kind: 'semantic', value: symbol.getName(), source: '@wix/editor-react-types' }
+  }
+  const declaration = symbol.getDeclarations()?.find(ts.isTypeAliasDeclaration)
+  return declaration ? resolveDeclaredCallbackSemanticType(declaration.type, checker, seenSymbols) : undefined
+}
+
+function resolveFunctionType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+): ResolvedType | undefined {
   const callSignatures = type.getCallSignatures()
   if (callSignatures.length > 0) {
     const signature = callSignatures[0]
@@ -379,6 +430,13 @@ function resolveFunctionType(type: ts.Type, checker: ts.TypeChecker): ResolvedTy
       }
     })
     const returnType = signature.getReturnType()
+    const isAsync = returnType.getSymbol()?.getName() === 'Promise'
+    const resolvedReturnType = isAsync ? checker.getTypeArguments(returnType as ts.TypeReference)[0] : returnType
+    const declaredReturnType = signature.getDeclaration()?.type
+    const returnTypeNode =
+      isAsync && declaredReturnType && ts.isTypeReferenceNode(declaredReturnType)
+        ? declaredReturnType.typeArguments?.[0]
+        : declaredReturnType
 
     return {
       kind: 'function',
@@ -386,6 +444,39 @@ function resolveFunctionType(type: ts.Type, checker: ts.TypeChecker): ResolvedTy
         parameters,
         returnType: checker.typeToString(returnType),
       },
+      functionSignature: {
+        parameters: signature.getParameters().map((parameter) => {
+          const declaration = parameter.valueDeclaration
+          const parameterTypeNode = declaration && ts.isParameter(declaration) ? declaration.type : undefined
+          const parameterType = checker.getTypeOfSymbol(parameter)
+          const optional =
+            (parameter.flags & ts.SymbolFlags.Optional) !== 0 ||
+            (declaration &&
+              ts.isParameter(declaration) &&
+              Boolean(declaration.questionToken || declaration.initializer))
+          const definedType =
+            optional && parameterType.isUnion()
+              ? parameterType.types.filter((member) => !(member.flags & ts.TypeFlags.Undefined))
+              : [parameterType]
+          return {
+            name: parameter.getName(),
+            type:
+              definedType.length === 1
+                ? resolveCallbackType(definedType[0], checker, depth, seenTypes, parameterTypeNode)
+                : {
+                    kind: 'union',
+                    types: definedType.map((member) =>
+                      resolveCallbackType(member, checker, depth, seenTypes, parameterTypeNode),
+                    ),
+                  },
+            optional: Boolean(optional),
+            rest: Boolean(declaration && ts.isParameter(declaration) && declaration.dotDotDotToken),
+          }
+        }),
+        returnType: resolveCallbackType(resolvedReturnType ?? returnType, checker, depth, seenTypes, returnTypeNode),
+        async: isAsync,
+        overloaded: callSignatures.length > 1,
+      },
     }
   }
   return undefined