Skip to content

[Action] Add a reserved mounted pseudo-event #648

Description

@titouanmathis

Goal

Allow declarative components to run an Action once their element and its co-located components are mounted.

<form
  data-component="Fetch Action"
  data-on:mounted="Fetch(#content-search) -> target.fetch()">
</form>

This lets HTML orchestrate initial behavior without adding options such as immediate to every component that can be called on mount.

Current limitation

Action binds DOM event names. The toolkit emits js-toolkit:component:mounted, but using that event directly is not equivalent to a local mounted hook:

  • lifecycle events from mounted descendants can bubble through the Action element;
  • the effect can run before another component on the same element is ready;
  • callers must know the toolkit's internal lifecycle event name.

Track already has a reserved mounted pseudo-event and defers its dispatch until the mount cycle has settled.

Proposed behavior

Treat mounted as a reserved Action pseudo-event:

  • run it once per Action mount cycle;
  • defer it until every co-located component can be resolved;
  • do not react to lifecycle events bubbling from descendants;
  • cancel the deferred effect if the Action unmounts first;
  • keep the existing Action target and effect syntax;
  • keep timing and event modifiers consistent where they are meaningful.

The implementation should share the scheduling behavior used by Track instead of binding the public lifecycle DOM event.

Acceptance criteria

  • data-on:mounted runs once after mount.
  • The effect can target another component mounted on the same element.
  • Mounted descendants do not trigger it again.
  • Unmounting before the deferred task runs cancels it.
  • Remounting starts one new mounted action.
  • Other Action events keep their current behavior.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions