Manage DOM Tasks

Follow these steps to create or update a task (DOM event) in this project.

1) Find or add the task registry entry

Edit

src/setup/tasks.ts

to extend

TaskEventRegistry

with the task name, params, and return type.

Example (new task):

declare module '../helpers/domTask' {
  interface TaskEventRegistry {
    'login': { params: { user: string; password: string }; returns: void }
  }
}

Use discriminated unions for conditional params (e.g., when some params only apply for certain types):

declare module '../helpers/domTask' {
  interface TaskEventRegistry {
    'login': {
      params:
        | { type: 'google' }
        | { type: 'email'; email: string; password: string }
      returns: void
    }
  }
}

2) Update dispatchers (components/pages)

Find all dispatchers via

dispatchTask

(or

createTaskEvent

) and update params to match the registry type.

Example:

dispatchTask(this, 'login', { type: 'email', email, password })

3) Update handlers (services/components)

Update task handlers registered via

registerTaskHandler

, or decorators via

@taskHandler

. Ensure handler signatures align with the registry params and return type.

Example:

registerTaskHandler('login', async (params) => {
  if (params.type === 'google') return
  await signInWithEmail(params.email, params.password)
})

4) Verify usage consistency

Use

rg

to find all occurrences of the task name and update:

• dispatchTask(this, 'task-name', ...)

• registerTaskHandler('task-name', ...)

• @taskHandler('task-name')

Prefer updating types first in

src/setup/tasks.ts

so TypeScript surfaces mismatches.