Add window.customCommands

[scola84]

What problem are you trying to solve?

Making HTML elements reactive in a declarative and stateful way.

What solutions exist today?

Frameworks like React and Angular. Traditional event listeners. A proposal at https://open-ui.org/components/invokers.explainer/ and #9625 and probably some other issues about popovers and dialogs.

How would you solve it?

I've written a package that implements a window.customCommands registry together with a Commander that can delegate traditional events to one or more commands in the registry. There is also a State as it is essential for modern web applications. The package could function as a polyfill or preliminary implementation of a yet to be written specification. An explanation can be found at https://github.com/genericmedia24/lib/blob/main/src/commander/README.md

Anything else?

As @ryantownsend wrote: "I’ve little doubt much of the underpinnings of the larger libraries/frameworks (React, Vue, Angular etc) could either be replaced behind the scenes or removed altogether thanks to this native API." (#9625 (comment)) - I have no other intention than making this happen.

(I've introduced this idea in #9625 (comment) but it's probably better to file this as a separate "New feauture" issue.)

[domenic]

What problem are you trying to solve?

Making HTML elements reactive in a declarative and stateful way.

This is not sufficiently descriptive for us to understand the problem. Please see https://whatwg.org/faq#adding-new-features step 1 and 2 for more details.

[scola84]

My apologies for being overly short here. I've written an extensive problem description and an evaluation of existing solutions here. For completeness I will include the text of the problem description below.

[scola84]

User-facing applications generally consist of structure, styling and behaviour. In the world of web applications these architectural components are built with three different languages: HTML, CSS and JavaScript.

In order to work together as an application these languages need to coupled. Every language serves its own purpose and as such has its own strengths and weaknesses. HTML consists of tags and attributes. JavaScript consists of functions which transform arguments as inputs into outputs.

The problem is that tags and attributes in the structural realm are naturally non-referential to the functions and arguments in the behaviour realm. Therefore a new artifact has to be designed to interpret attributes as references to functions.

An intermediary role is played by the DOM. Tags and attributes are translated into an object model, which serves as the basis for the functions to have access to the structure of the application.

An additional problem is that HTML is deliberately limited both in syntax and semantics: only a specified set of tags and attributes is actually considered meaningful and translated into the object model. On the other hand JavaScript functions and arguments provide for an infinite design space, only limited by the imagination of the programmer.

The main question is: how can structure and behaviour be coupled expressively, efficiently and securely?

Expressively means that the invocation from the structural realm should ideally map to the entire design space in the behavioural realm. A limited set of attributes should be able to invoke every specified function with any amount of arguments.

Efficiently means that ideally very little syntax should be introduced in order to make the interpretative artifact do its work and consequently that the amount of overhead in the structural code that needs to written to invoke behavioural code should be kept to a minimum.

Securely means that the artifact that is responsible for interpreting attributes as functions should only be allowed to invoke behaviour that is specified by the application. (That means expressive freedom but interpretative strictness.)