[Question] Method call from parent

[VanFraecker]

I think I misunderstood some fundamental: I want to know, how can I call a method from a child component in a parent component, especially when use it in a list?

{this.items.map((item) => {
  let textRef // does not work
  return (
    <div key={item.id} pointerdown={() => textRef.doSomething()}>
      <Child ref={textRef} />
    </div>
  )
})}

Refs only work with dom nodes.
Store solution with observe (for calling a method) or props with observe are an overkill for a simple method call.

[VanFraecker]

Here is my freaky typesafe solution.

/**
 * Enables calling public child component methods from parent component.
 *
 * @example Usage in a parent component:
 * ```tsx
 * export class ParentComponent extends withActions(Component) {
 *   private childActions = this.createActions<ChildComponent>()
 *
 *   public template() {
 *     return (
 *       <div>
 *         <ChildComponent actions={(a) => this.childActions('unique-id').register(a)} />
 *         <div mouseenter={() => this.childActions('unique-id').call('someMethod', 'someArg', true, 123)} />
 *         <div mouseenter={() => this.childActions('unique-id').call('otherMethod')} />
 *       </div>
 *     )
 *   }
 * }
 * ```
 *
 * @example Usage in a child component:
 * ```tsx
 * type ChildComponentProps = {
 *   actions?: ExposeActions<ChildComponent>
 * }
 *
 * export class ChildComponent extends withActions(Component<MarqueeProps>) {
 *   public override created(props: ChildComponentProps) {
 *     props.actions?.(this.exposeActions<MarqueeText>())
 *   }
 *
 *   public someMethod(a: string, b: boolean, c: number) {
 *     // ...
 *   }
 *
 *   public otherMethod() {
 *     // ...
 *   }
 * }
 * ```
 */

// biome-ignore-all lint/suspicious/noExplicitAny: Ignore all any.

import type { Component } from '@geajs/core'

export type ExposeActions<T> = (actions: ActionsOf<T, Component<any>>) => void

export type ActionsOf<T, Base> = {
  [K in Exclude<keyof T, keyof Base | 'template'> as T[K] extends (...args: any[]) => any ? K : never]: T[K] extends (
    ...args: infer Args
  ) => any
    ? (...args: Args) => void
    : never
}

type Action = (...args: any[]) => void

type MethodKeys<T> = {
  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never
}[keyof T]

type PublicMethods<T> = {
  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K] extends (...args: infer A) => any
    ? (...args: A) => void
    : never
}

type MixinConstructor<T = object> = new (...args: any[]) => T

/**
 * Extends a component with action registration and dispatching.
 */
export function withActions<TBase extends MixinConstructor>(Base: TBase) {
  return class extends Base {
    /**
     * Creates a dispatcher for registering and invoking actions of a child component.
     */
    protected createActions<C>() {
      const actions: Record<string, Record<string, Action>> = {}
      return (id: string) => {
        return {
          /**
           * Registers the exposed actions of the child component under the given ID.
           */
          register: (action: Record<string, Action>) => {
            actions[id] = action
          },

          /**
           * Invokes an action of the registered child component.
           */
          call: <K extends MethodKeys<C>>(
            actionName: K,
            ...args: C[K] extends (...args: infer A) => any ? A : never
          ) => {
            const ctrl = actions[id] as C | undefined

            if (ctrl && typeof ctrl[actionName] === 'function') {
              Reflect.apply(ctrl[actionName], ctrl, args)
            }
          },
        }
      }
    }

    /**
     * Exposes public methods of the component.
     */
    protected exposeActions<T extends object>(): PublicMethods<T> {
      const actions = {} as PublicMethods<T>

      for (const key of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
        if (key === 'constructor' || key === 'dispose') {
          continue
        }

        const value = this[key as keyof this]
        if (typeof value === 'function') {
          ;(actions as any)[key] = value.bind(this)
        }
      }

      return actions
    }
  }
}

Could be done with gea stores too, but I think this has less boilerplate code.
I don't want to create for every component a separate store file.

It would be awesome if gea could extract the public methods automatically and provide a simple way to access them per component instance.

[KoHaRxnP]

Instead of creating a custom Mixin or global Store, a simple callback pattern (onReady / Ref-like pattern) works very cleanly without any boilerplate or runtime overhead.

Child Component

type ChildApi = {
  doSomething: () => void
}

export class Child extends Component<{ onReady?: (api: ChildApi) => void }> {
  created(props) {
    // Expose API methods to the parent via callback
    props.onReady?.({
      doSomething: () => this.doSomething(),
    })
  }

  private doSomething() {
    // ...
  }

  template() {
    return <div>Child</div>
  }
}

Parent Component

export class Parent extends Component {
  private childApis = new Map<string, ChildApi>()

  template() {
    return (
      <div>
        {this.items.map((item) => (
          <div key={item.id} pointerdown={() => this.childApis.get(item.id)?.doSomething()}>
            <Child onReady={(api) => this.childApis.set(item.id, api)} />
          </div>
        ))}
      </div>
    )
  }
}

Benefits

• No boilerplate: No need for complex Mixins, helper types, or dedicated Store files.
• Type-safe: Pure TypeScript for defining exposed method contracts.
• Direct & reliable: Avoids reactive tracking/re-render issues while keeping direct method access straightforward.