Any plan on supporting relative targets ?

[Anton-2]

I'm currently evaluating µJS as a replacement for HTMX, and so far, it looks promising!

However, I could not find a way to express a target relative to the "trigger node".
HTMX has different options for this (https://htmx.org/attributes/hx-target/). Targeting the trigger node or a child node without generating and tracking an ID is useful for reusable components.

I partially solved this with a hack when building the configuration for the trigger element:

if (cfg.target.includes("&")) {
  if (!el.id) {
    el.id = `mujs-${Math.random().toString(36).slice(2)}`;
  }
  cfg.target = cfg.target.replace("&", `#${el.id}`);
}

This allows writing selectors like mu-target="&", mu-target="& > .user-list", and mu-target="& + .dest": the & symbol is replaced with the trigger node ID (self-generated if missing). But may not be robust for each cases.

Is it something that is already supposed to work, but I didn't find how?
Or is it something you're considering adding?

[Amaury]

Thanks for the suggestion, this is a great idea. Relative targeting is a real need for reusable components, and your & syntax is elegant — the CSS nesting parallel makes it intuitive.

We're currently evaluating the best way to implement this natively. We'll keep this discussion updated as we progress.

[Amaury]

So, we liked the idea and implemented it, extending it to patch mode as well.

Starting with the next release, mu-target and mu-patch-target support the & character as a reference to the trigger element. If the trigger element has no ID, one is auto-generated.

Examples:

<!-- Target the trigger element itself -->
<button mu-url="/api/status" mu-target="&">Refresh</button>

<!-- Target a child of the trigger element -->
<div mu-trigger="click" mu-mode="update" mu-url="/api/list" mu-target="& > .list">
    <div class="list">...</div>
</div>

<!-- Target a sibling -->
<button mu-url="/api/count" mu-target="& + .result">Load</button>
<div class="result"></div>

It also works in patch mode with mu-patch-target:

<!-- Server response -->
<div mu-patch-target="& > .list" mu-patch-mode="update">...</div>

This should cover most reusable component patterns without needing server-generated IDs.

[Amaury]

The evolution is part of the 1.4.8 version. The website has been updated: https://mujs.org/documentation#relative-targets

Thanks again for the suggestion!

[Anton-2]

Great, thanks !
There is no 1.4.8 release, even if the repos looks ready for it. Is it intentional ?

[Amaury]

Sorry! I created the tag, but I forget to create the release in GitHub. It's OK now.
Thanks for the reminder :)