@wix/zero-config-implementation 1.107.0 → 1.108.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.107.0",
+  "version": "1.108.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "06e07178bd2c8944810a496429499f8a1f4a9007f694fdeb8d896363"
+  "falconPackageHash": "7adb0b7422620a1dd6289f8b7dd6936c7e173aeb90665b60b9a731f1"
 }

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

@@ -8,8 +8,8 @@
  * intentional because new type kinds are expected as the TypeScript type system
  * evolves, and a text fallback is always a safe default.
  *
- * The only real error is an invariant violation in `handleArrayType` when the
- * resolved type metadata is inconsistent (kind === 'array' but no elementType).
+ * Function signatures fail explicitly when their types cannot be represented.
+ * Arrays also fail when resolved metadata is inconsistent (no elementType).
  */
 
 import type { DataItem, DomEvent } from '@wix/react-component-schema'
@@ -21,6 +21,7 @@ import type { DOMBinding, TrackingStores } from '../information-extractors/react
 import type { PropInfo, ResolvedType } from '../information-extractors/ts/types'
 import { WIX_TYPE_TO_DATA_TYPE } from '../wix-type-to-data-type'
 import { collectUsedA11yAttributes } from './a11y-builder'
+import { buildFunctionSignature } from './function-signature-builder'
 import { formatDisplayName } from './utils'
 
 const { DATA_TYPE } = DATA
@@ -57,8 +58,8 @@ function getBindingsForPath(propUsages: TrackingStores['propUsages'], path: stri
  * @param defaultValue - Optional default value for the data item.
  * @param propUsages - The full stores.propUsages map for on-demand binding lookups.
  * @param propPath - The full stores.propUsages key for this prop, e.g. "props.linkUrl".
- * @returns `Ok<DataItem>` on success, `Err<ParseError>` if an invariant is violated
- *          (e.g. an array type missing its element type).
+ * @returns `Ok<DataItem>` on success, `Err<ParseError>` for unsupported function
+ *          signatures or inconsistent resolved metadata.
  */
 export function buildDataItem(
   propInfo: PropInfo,
@@ -120,8 +121,16 @@ function applyResolvedTypeToDataItem(
       return handleUnionType({ dataItem, resolvedType, propInfo, propUsages, propPath })
 
     case 'function':
-      handleFunctionType(dataItem, propInfo, bindings)
-      return ok(undefined)
+      {
+        const signatureResult = buildFunctionSignature(resolvedType, propInfo.name)
+        if (signatureResult.isErr()) return err(signatureResult.error)
+        if (signatureResult.value) {
+          dataItem.dataType = DATA_TYPE.function
+          dataItem.function = signatureResult.value
+          return ok(undefined)
+        }
+      }
+      return handleFunctionType(dataItem, propInfo, resolvedType, bindings)
 
     case 'semantic':
       handleSemanticType({ dataItem, resolvedType, propUsages, propPath })
@@ -309,6 +318,17 @@ function handleUnionType({
     return ok(undefined)
   }
 
+  if (resolvedType.types.some((member) => member.kind === 'function')) {
+    const definedTypes = resolvedType.types.filter(
+      (member) => !(member.kind === 'primitive' && member.value === 'undefined'),
+    )
+    if (definedTypes.length !== 1) {
+      return err(
+        new ParseError(`Cannot represent callback union for ${propInfo.name}; use a single supported signature.`),
+      )
+    }
+  }
+
   // Filter out undefined and null types
   const validTypes = resolvedType.types.filter((t) => t.value !== 'undefined' && t.value !== 'null')
 
@@ -423,8 +443,8 @@ const EVENT_ATTR_TO_DOM_EVENT: Record<string, DomEvent> = {
 }
 
 /**
- * Handles function types — maps standard DOM event handlers to `dataType: 'function'`
- * with a `domEvent` parameter, and leaves custom functions as `function: {}`.
+ * Legacy fallback when signature information is missing or uninformative.
+ * Maps recognized DOM handlers to event parameters; unresolved custom signatures fail.
  *
  * Checks bound DOM attributes first (reflects actual DOM wiring regardless of prop name),
  * then falls back to prop name matching.
@@ -432,7 +452,12 @@ const EVENT_ATTR_TO_DOM_EVENT: Record<string, DomEvent> = {
  * The `domEvent` field exists in the proto schema but is not yet present in the installed
  * FunctionParameter typings — cast through `unknown` to bridge the version gap.
  */
-function handleFunctionType(dataItem: DataItem, propInfo: PropInfo, bindings?: DOMBinding[]): void {
+function handleFunctionType(
+  dataItem: DataItem,
+  propInfo: PropInfo,
+  resolvedType: ResolvedType,
+  bindings?: DOMBinding[],
+): Result<void, ParseErrorInstance> {
   let domEvent: DomEvent | undefined
 
   if (bindings) {
@@ -452,10 +477,19 @@ function handleFunctionType(dataItem: DataItem, propInfo: PropInfo, bindings?: D
   dataItem.dataType = DATA_TYPE.function
 
   if (domEvent) {
-    dataItem.function = { parameters: [{ domEvent }] } as unknown as DataItem['function']
+    const optional = resolvedType.functionSignature?.parameters[0]?.optional
+    dataItem.function = {
+      parameters: [{ domEvent, ...(optional ? { optional: true } : {}) }],
+    } as unknown as DataItem['function']
   } else {
+    if (resolvedType.functionSignature) {
+      return err(
+        new ParseError(`Cannot infer function parameter for ${propInfo.name}; declare a supported explicit type.`),
+      )
+    }
     dataItem.function = {}
   }
+  return ok(undefined)
 }
 
 /**

package/src/converters/function-signature-builder.test.ts

@@ -0,0 +1,257 @@
+import path from 'node:path'
+import ts from 'typescript'
+import { describe, expect, it } from 'vitest'
+import type { TrackingStores } from '../information-extractors/react'
+import { extractAllComponentInfo } from '../information-extractors/ts/components'
+import { resolveType } from '../information-extractors/ts/utils/semantic-type-resolver'
+import { compileTsFile } from '../ts-compiler'
+import { buildDataItem } from './data-item-builder'
+
+const fixturePath = path.resolve(__dirname, '__signature_fixture__.ts')
+const aliasPath = path.resolve(__dirname, '__signature_alias__.ts')
+const fixtures = new Map([
+  [
+    fixturePath,
+    `
+    import type * as React from 'react'
+    import type { Email, Phone, WebUrl, Link, Image, Container } from '@wix/editor-react-types'
+    import type { ValueHandler, ChangeHandler, EmailHandler } from './__signature_alias__'
+    interface Callbacks {
+      onChange: (value: string) => void
+      onValueChange: ValueHandler
+      onOptionalValueChange?: ValueHandler
+      onUndefinedCallback: ValueHandler | undefined
+      onCallbackUnion: ((value: string) => void) | ((value: number) => void)
+      onNullableCallback: ValueHandler | null
+      onMixedCallback: ValueHandler | string
+      onOptionalNullableCallback?: ValueHandler | null
+      onOptionalBoolean: (value?: boolean) => void
+      onCheckedChange: (checked: boolean) => void
+      onNumberChange: (value: number) => void
+      onSelectionChange: (values: readonly string[]) => void
+      onDetails: (value: string, details?: { committed: boolean; count?: number }) => void
+      onTooMany: (one: string, two: string, three: string, four: string, five: string, six: string, seven: string, eight: string, nine: string, ten: string, eleven: string) => void
+      onClick: () => void
+      onEvent: ChangeHandler
+      onMouse: (event: React.MouseEvent) => void
+      onPointer: (event: React.PointerEvent) => void
+      onFocus: (event: React.FocusEvent) => void
+      onKeyboard: (event: React.KeyboardEvent) => void
+      onSubmit: (event: React.FormEvent) => void
+      onClickLegacy: (event: any) => void
+      calculate: (value: number) => Promise<number>
+      onLoad: () => Promise<void>
+      onUnsupported: (value: string | number) => void
+      onNullable: (value: string | null) => void
+      onRest: (...values: string[]) => void
+      onUnknown: (value: unknown) => void
+      onMode: (value: 'on' | 'off') => void
+      onEmail: (value: Email) => void
+      onEmailAlias: EmailHandler
+      getEmail: () => Email
+      loadEmail: () => Promise<Email>
+      onPhone: (value: Phone) => void
+      onUrl: (value: WebUrl) => void
+      onLink: (value: Link) => void
+      onImage: (value: Image) => void
+      onContainer: (value: Container) => void
+      overloaded: { (value: string): void; (value: number): void }
+    }
+  `,
+  ],
+  [
+    aliasPath,
+    `
+    import type { ChangeEvent } from 'react'
+    import type { Email as EmailAddress } from '@wix/editor-react-types'
+    type ContactEmail = EmailAddress
+    export type EmailHandler = (value: ContactEmail) => void
+    export type Name = string
+    export type ValueHandler = (value: Name) => void
+    export type InputChange = ChangeEvent<HTMLInputElement>
+    export type ChangeHandler = (event: InputChange) => void
+  `,
+  ],
+])
+const compilerOptions: ts.CompilerOptions = {
+  strict: true,
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
+  module: ts.ModuleKind.ESNext,
+  skipLibCheck: true,
+  noEmit: true,
+}
+const compilerHost = ts.createCompilerHost(compilerOptions)
+const originalReadFile = compilerHost.readFile.bind(compilerHost)
+const originalFileExists = compilerHost.fileExists.bind(compilerHost)
+compilerHost.readFile = (fileName) => fixtures.get(fileName) ?? originalReadFile(fileName)
+compilerHost.fileExists = (fileName) => fixtures.has(fileName) || originalFileExists(fileName)
+compilerHost.getSourceFile = (fileName, languageVersion) => {
+  const source = compilerHost.readFile(fileName)
+  return source === undefined ? undefined : ts.createSourceFile(fileName, source, languageVersion, true)
+}
+const program = ts.createProgram([fixturePath, aliasPath], compilerOptions, compilerHost)
+const checker = program.getTypeChecker()
+const sourceFile = program.getSourceFile(fixturePath)!
+const callbacksDeclaration = sourceFile.statements.find(ts.isInterfaceDeclaration)!
+const callbacks = checker.getTypeAtLocation(callbacksDeclaration)
+
+function buildCallback(name: string, manifestName = name, propUsages?: TrackingStores['propUsages']) {
+  const symbol = callbacks.getProperty(name)!
+  const type = checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration!)
+  return buildDataItem(
+    {
+      name: manifestName,
+      type: checker.typeToString(type),
+      required: true,
+      resolvedType: resolveType({ type, checker }),
+    },
+    undefined,
+    propUsages,
+    `props.${manifestName}`,
+  )
+}
+
+describe('function signatures from TypeScript to manifest', () => {
+  it.each([
+    ['ForwardRefComponent', 'onChange'],
+    ['ComplexProps', 'onUpdate'],
+    ['PropBindingTypes', 'onSubmit'],
+  ])('retains signatures through the actual component extractor for %s', async (componentName, callbackName) => {
+    const componentPath = path.resolve(
+      __dirname,
+      '../../../example-components/src/components',
+      componentName,
+      'component.tsx',
+    )
+    const program = (await compileTsFile(componentPath))._unsafeUnwrap()
+    const component = extractAllComponentInfo(program, componentPath).find(
+      (candidate) => candidate.componentName === componentName,
+    )!
+    const manifest = buildDataItem(component.props[callbackName])._unsafeUnwrap()
+    expect(manifest.dataType).toBe('function')
+    expect(manifest.function?.parameters?.length).toBeGreaterThan(0)
+    expect(JSON.parse(JSON.stringify(manifest)).function).toEqual(manifest.function)
+    if (componentName === 'ForwardRefComponent') expect(manifest.function?.parameters).toEqual([{ dataType: 'text' }])
+  })
+  it('uses a valid fixture with resolved React types and imported aliases', () => {
+    expect(program.getSemanticDiagnostics().map((diagnostic) => diagnostic.messageText)).toEqual([])
+  })
+  it.each([
+    ['onChange', 'text'],
+    ['onValueChange', 'text'],
+    ['onCheckedChange', 'booleanValue'],
+    ['onNumberChange', 'number'],
+  ])('maps %s from its signature rather than its name', (name, dataType) => {
+    expect(buildCallback(name)._unsafeUnwrap().function).toEqual({ parameters: [{ dataType }] })
+  })
+  it.each([
+    ['onEmail', 'email'],
+    ['onEmailAlias', 'email'],
+    ['onPhone', 'phone'],
+    ['onUrl', 'webUrl'],
+    ['onLink', 'link'],
+    ['onImage', 'image'],
+  ])('preserves semantic Wix parameter type for %s', (name, dataType) => {
+    expect(buildCallback(name)._unsafeUnwrap().function).toEqual({ parameters: [{ dataType }] })
+  })
+  it('preserves branded return values, including promised results', () => {
+    expect(buildCallback('getEmail')._unsafeUnwrap().function).toEqual({ returns: { dataType: 'email' } })
+    expect(buildCallback('loadEmail')._unsafeUnwrap().function).toEqual({ async: true, returns: { dataType: 'email' } })
+    expect(buildCallback('onContainer').isErr()).toBe(true)
+  })
+  it.each([
+    ['onEvent', 'CHANGE'],
+    ['onMouse', 'POINTER'],
+    ['onPointer', 'POINTER'],
+    ['onFocus', 'FOCUS'],
+    ['onKeyboard', 'KEYBOARD'],
+    ['onSubmit', 'SUBMIT'],
+  ])('recognizes %s including imported event aliases', (name, domEvent) => {
+    expect(buildCallback(name)._unsafeUnwrap().function).toEqual({ parameters: [{ domEvent }] })
+  })
+  it('maps readonly value arrays with the function-specific item schema', () => {
+    expect(buildCallback('onSelectionChange')._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'arrayItems', arrayItems: { item: { dataType: 'text' } } }],
+    })
+  })
+  it('handles optional callback props and optional boolean parameters', () => {
+    expect(buildCallback('onOptionalValueChange')._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'text' }],
+    })
+    expect(buildCallback('onUndefinedCallback')._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'text' }],
+    })
+    expect(buildCallback('onOptionalBoolean')._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'booleanValue', optional: true }],
+    })
+  })
+  it('does not override a declared value signature with its DOM wiring', () => {
+    const propUsages: TrackingStores['propUsages'] = new Map([
+      [
+        'props.onValueChange',
+        {
+          elements: new Map([['input', { tag: 'input', elementId: 'input' }]]),
+          attributes: new Map([['input:onChange', { attr: 'onChange', concatenated: false }]]),
+        },
+      ],
+    ])
+    expect(buildCallback('onValueChange', 'onValueChange', propUsages)._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'text' }],
+    })
+  })
+  it('preserves ordered parameters and optional structured fields', () => {
+    expect(buildCallback('onDetails')._unsafeUnwrap().function).toEqual({
+      parameters: [
+        { dataType: 'text' },
+        {
+          dataType: 'data',
+          optional: true,
+          data: {
+            items: {
+              committed: { dataType: 'booleanValue' },
+              count: { dataType: 'number', optional: true },
+            },
+          },
+        },
+      ],
+    })
+  })
+  it('does not invent an event parameter for a no-argument onClick', () => {
+    expect(buildCallback('onClick')._unsafeUnwrap().function).toEqual({})
+  })
+  it('keeps name inference for an uninformative legacy event signature', () => {
+    expect(buildCallback('onClickLegacy', 'onClick')._unsafeUnwrap().function).toEqual({
+      parameters: [{ domEvent: 'POINTER' }],
+    })
+  })
+  it('maps promised results and promised void', () => {
+    expect(buildCallback('calculate')._unsafeUnwrap().function).toEqual({
+      parameters: [{ dataType: 'number' }],
+      async: true,
+      returns: { dataType: 'number' },
+    })
+    expect(buildCallback('onLoad')._unsafeUnwrap().function).toEqual({ async: true })
+  })
+  it('preserves a string union as a text enum', () => {
+    expect(buildCallback('onMode')._unsafeUnwrap().function?.parameters?.[0]).toEqual({
+      dataType: 'textEnum',
+      textEnum: { options: [{ value: 'on' }, { value: 'off' }] },
+    })
+  })
+  it.each(['onCallbackUnion', 'onNullableCallback', 'onMixedCallback', 'onOptionalNullableCallback'])(
+    'rejects unsupported callback prop union %s',
+    (name) => {
+      const result = buildCallback(name)
+      expect(result.isErr()).toBe(true)
+      expect(result._unsafeUnwrapErr().message).toContain(name)
+    },
+  )
+  it.each(['onUnsupported', 'onNullable', 'onRest', 'onUnknown', 'overloaded', 'onTooMany'])(
+    'reports %s instead of dropping its parameters',
+    (name) => {
+      const result = buildCallback(name)
+      expect(result.isErr()).toBe(true)
+      expect(result._unsafeUnwrapErr().message).toContain(name)
+    },
+  )
+})

package/src/converters/function-signature-builder.ts

@@ -0,0 +1,144 @@
+import type { DataItem, DomEvent } from '@wix/react-component-schema'
+import { DATA, DOM_EVENT } from '@wix/react-component-schema'
+import { type Result, err, ok } from 'neverthrow'
+import { ParseError } from '../errors'
+import type { ResolvedType } from '../information-extractors/ts/types'
+import { WIX_TYPE_TO_DATA_TYPE } from '../wix-type-to-data-type'
+
+type FunctionDefinition = NonNullable<DataItem['function']>
+type FunctionParameter = NonNullable<FunctionDefinition['parameters']>[number]
+type ParseErrorInstance = InstanceType<typeof ParseError>
+
+const EVENT_TYPES: Record<string, DomEvent> = {
+  ChangeEvent: DOM_EVENT.CHANGE,
+  MouseEvent: DOM_EVENT.POINTER,
+  PointerEvent: DOM_EVENT.POINTER,
+  FocusEvent: DOM_EVENT.FOCUS,
+  KeyboardEvent: DOM_EVENT.KEYBOARD,
+}
+
+function unsupported(path: string): Result<never, ParseErrorInstance> {
+  return err(
+    new ParseError(`Cannot represent function signature at ${path}; use a supported explicit parameter/return type.`),
+  )
+}
+
+function buildParameter(
+  type: ResolvedType,
+  path: string,
+  submitHandler = false,
+): Result<FunctionParameter, ParseErrorInstance> {
+  if (type.kind === 'semantic' && (type.source === '@types/react' || type.source === 'react')) {
+    const domEvent = type.value === 'FormEvent' && submitHandler ? DOM_EVENT.SUBMIT : EVENT_TYPES[String(type.value)]
+    return domEvent ? ok({ domEvent } as unknown as FunctionParameter) : unsupported(path)
+  }
+  if (type.kind === 'semantic' && type.source === '@wix/editor-react-types') {
+    const dataType = WIX_TYPE_TO_DATA_TYPE[String(type.value)]
+    if (dataType && !['container', 'schema', 'arrayItems', 'textEnum'].includes(dataType)) {
+      return ok({ dataType: DATA.DATA_TYPE[dataType] })
+    }
+    return unsupported(path)
+  }
+  if (type.kind === 'primitive' || type.kind === 'literal') {
+    const primitive = type.kind === 'literal' ? typeof type.value : type.value
+    switch (primitive) {
+      case 'string':
+        return ok({ dataType: DATA.DATA_TYPE.text })
+      case 'number':
+        return ok({ dataType: DATA.DATA_TYPE.number })
+      case 'boolean':
+        return ok({ dataType: DATA.DATA_TYPE.booleanValue })
+      default:
+        return unsupported(path)
+    }
+  }
+  if (type.kind === 'union') {
+    // TypeScript represents boolean as true | false in some contexts.
+    const members = type.types ?? []
+    if (members.length && members.every((member) => member.kind === 'literal' && typeof member.value === 'boolean')) {
+      return ok({ dataType: DATA.DATA_TYPE.booleanValue })
+    }
+    if (members.length && members.every((member) => member.kind === 'literal' && typeof member.value === 'string')) {
+      return ok({
+        dataType: DATA.DATA_TYPE.textEnum,
+        textEnum: { options: members.map((member) => ({ value: String(member.value) })) },
+      })
+    }
+    return unsupported(path)
+  }
+  if (type.kind === 'array' && type.elementType) {
+    return buildParameter(type.elementType, `${path}[]`).map((item) => ({
+      dataType: DATA.DATA_TYPE.arrayItems,
+      arrayItems: { item },
+    }))
+  }
+  if (type.kind === 'object' && type.properties) {
+    const items: Record<string, FunctionParameter> = {}
+    for (const [name, property] of Object.entries(type.properties)) {
+      const propertyType =
+        !property.required && property.resolvedType.kind === 'union'
+          ? property.resolvedType.types?.filter(
+              (member) => !(member.kind === 'primitive' && member.value === 'undefined'),
+            )
+          : undefined
+      const result = buildParameter(
+        propertyType
+          ? propertyType.length === 1
+            ? propertyType[0]
+            : { kind: 'union', types: propertyType }
+          : property.resolvedType,
+        `${path}.${name}`,
+      )
+      if (result.isErr()) return err(result.error)
+      items[name] = { ...result.value, ...(!property.required ? { optional: true } : {}) }
+    }
+    return ok({ dataType: DATA.DATA_TYPE.data, data: { items } })
+  }
+  if (type.kind === 'function') {
+    return buildFunctionSignature(type, path).andThen((definition) =>
+      definition ? ok({ dataType: DATA.DATA_TYPE.function, function: definition }) : unsupported(path),
+    )
+  }
+  return unsupported(path)
+}
+
+/** Undefined means legacy metadata has no signature and name/usage inference may run. */
+export function buildFunctionSignature(
+  type: ResolvedType,
+  path: string,
+): Result<FunctionDefinition | undefined, ParseErrorInstance> {
+  const signature = type.functionSignature
+  if (!signature) return ok(undefined)
+  if (signature.overloaded || signature.parameters.length > 10) return unsupported(path)
+  if (
+    signature.parameters.length === 1 &&
+    !signature.parameters[0].rest &&
+    signature.parameters[0].type.kind === 'primitive' &&
+    ['any', 'unknown'].includes(String(signature.parameters[0].type.value)) &&
+    signature.returnType.kind === 'primitive' &&
+    signature.returnType.value === 'void' &&
+    !signature.async
+  ) {
+    return ok(undefined)
+  }
+  const parameters: FunctionParameter[] = []
+  let optionalParameterSeen = false
+  for (const parameter of signature.parameters) {
+    if (parameter.rest) return unsupported(`${path}.${parameter.name} (rest parameter)`)
+    if (optionalParameterSeen && !parameter.optional)
+      return unsupported(`${path}.${parameter.name} (required after optional)`)
+    optionalParameterSeen ||= parameter.optional
+    const result = buildParameter(parameter.type, `${path}.${parameter.name}`, path.toLowerCase() === 'onsubmit')
+    if (result.isErr()) return err(result.error)
+    parameters.push({ ...result.value, ...(parameter.optional ? { optional: true } : {}) })
+  }
+  const definition: FunctionDefinition = parameters.length ? { parameters } : {}
+  if (signature.async) definition.async = true
+  if (!(signature.returnType.kind === 'primitive' && signature.returnType.value === 'void')) {
+    const result = buildParameter(signature.returnType, `${path} return`)
+    if (result.isErr()) return err(result.error)
+    if (result.value.domEvent || result.value.function) return unsupported(`${path} return`)
+    definition.returns = result.value
+  }
+  return ok(definition)
+}

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