Invoker Commands API (opens in new tab)

(developer.mozilla.org)

99 pointsmaqnius18d ago15 comments

15 comments

This is remarkably useful. Even ignoring the built-in commands (which are handy in their own right), I find the button's action being self-described in the html ("tell this element to do this") far more pleasant to read than the normal see button -> /document.getElementById("buttonID") -> scroll back up to the html to figure out what elements are referred to in the script.

sheept15d ago

To be fair, there's little stopping you from putting the button action in its onclick attribute.

I guess the stylistic choice of separating content, style, and interactivity eventually became a convention to keep JavaScript isolated from HTML, but nowadays with Tailwind and HTMX, it does seem like at least some developers want everything in HTML, for the strengths you mentioned.

maqniusOP18d ago

I just noticed, that Invoker Commands are available across all major browsers. Good to see that HTML progresses to make Javascript redundant for basic UX.

spartanatreyu15d ago

It's nice, but it's not quite ready for use yet.

It's not supported on the previous main version of Safari, so everyone following the "last two major versions" of browser support rule can't use them.

Also, it's currently limited to only dialogs and popovers (and custom events, but in those cases you need js anyway).

It'll be more useful once it can control:

- details (open, close, toggle)

- video (play, pause, toggle play state, set seek point, mute, set volume)

- select (open/close widget, set/unset value(s))

- input (open/close widget, set/unset value(s))

- all elements (add/remove/toggle/set a class/attribute)

jazzypants15d ago

Yeah, this only gets interesting if they start contemplating native two-way binding, but that still wouldn't cover the vast majority of complex use cases that require computed values.

masfuerte15d ago

I've always browsed with javascript disabled but in the last few months (presumably in response to AI scraping) loads of sites that previously worked now don't. IMDB. Loads of open-source blogs, wikis and source repositories. Commenting on Wikipedia. Browsing job sites.

It's never been easier to create a great site that doesn't require javascript, but hardly anyone is.

jazzypants15d ago

Google Search doesn't work without JS. I think we're actually moving in the opposite direction of what OP inferred. It's pretty difficult to reliably detect bots without using JS, and the vast majority of interesting client-side web applications are downright impossible without it. No amount of HATEOAS is going to make a usable version of Figma.

Waterluvian15d ago

I think there’s a lot of good reasons to, but hardly any incentive to.

People who disable JS are probably a very tiny minority and of those who consume ads, an even smaller one.

gorgoiler15d ago

I’ve been adding global listeners for click and keydown that call handleFoo(event) if event.target has a data-foo attribute.

The Invoker API seems like a neater way of handling the same pattern but I’m biased towards global event listeners because they work automatically on newly injected markup and they scale O(functionality) as opposed to per element listeners that scale O(elements). I’ll be the first to admit that the latter is more of an aesthetic choice rather than being based on any kind of performance statistics.

8n4vidtmkvmk15d ago

O(depth) too, no? The events have to bubble up to the window before triggering your handler.

wild_egg15d ago

Oh awesome. I wanted to use this last year but safari hadn't shipped support yet and I hit some problem with the polyfill.

Looks like safari shipped support in December though so now I can go nuts

gitowiec17d ago

I don't get it. They say it doesn't need JavaScript. But how command is declared? And they show example rotating img with JS

maqniusOP16d ago

JS is not needed for some defined build-in commands [0]. Custom commands will emit an Event only which probably should end up in some JS function most of the time.

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

mock-possum15d ago

This is fine.

We’ve already had it as `label for=“form-element-id”`

mifydev15d ago

nice, htmx is infiltrating into the browser standards

j / k navigate · click thread line to collapse

15 comments

OkayPhysicist15d ago

sheept15d ago

To be fair, there's little stopping you from putting the button action in its onclick attribute.

maqniusOP18d ago

I just noticed, that Invoker Commands are available across all major browsers. Good to see that HTML progresses to make Javascript redundant for basic UX.

spartanatreyu15d ago

It's nice, but it's not quite ready for use yet.

It's not supported on the previous main version of Safari, so everyone following the "last two major versions" of browser support rule can't use them.

Also, it's currently limited to only dialogs and popovers (and custom events, but in those cases you need js anyway).

It'll be more useful once it can control:

- details (open, close, toggle)

- video (play, pause, toggle play state, set seek point, mute, set volume)

- select (open/close widget, set/unset value(s))

- input (open/close widget, set/unset value(s))

- all elements (add/remove/toggle/set a class/attribute)

jazzypants15d ago

Yeah, this only gets interesting if they start contemplating native two-way binding, but that still wouldn't cover the vast majority of complex use cases that require computed values.

masfuerte15d ago

It's never been easier to create a great site that doesn't require javascript, but hardly anyone is.

jazzypants15d ago

Waterluvian15d ago

I think there’s a lot of good reasons to, but hardly any incentive to.

People who disable JS are probably a very tiny minority and of those who consume ads, an even smaller one.

gorgoiler15d ago

I’ve been adding global listeners for click and keydown that call handleFoo(event) if event.target has a data-foo attribute.

8n4vidtmkvmk15d ago

O(depth) too, no? The events have to bubble up to the window before triggering your handler.

wild_egg15d ago

Oh awesome. I wanted to use this last year but safari hadn't shipped support yet and I hit some problem with the polyfill.

Looks like safari shipped support in December though so now I can go nuts

gitowiec17d ago

I don't get it. They say it doesn't need JavaScript. But how command is declared? And they show example rotating img with JS

maqniusOP16d ago

JS is not needed for some defined build-in commands [0]. Custom commands will emit an Event only which probably should end up in some JS function most of the time.

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

mock-possum15d ago

This is fine.

We’ve already had it as `label for=“form-element-id”`

mifydev15d ago

nice, htmx is infiltrating into the browser standards

j / k navigate · click thread line to collapse