#2581: add initialize trigger

[twschiller]

Closes #2581

Adds an "initialize" trigger, which fires on DOM attachment vs. appear

[fregante]

Any other names? Maybe "add", "insert", "create"?

[twschiller]

In the configuration I'm going to keep as-is with initialize. That's how JS libraries seem to refer to it

We'll have to change the names of events in the page editor. E.g., non-developers don't know what a "blur" handler is

[fregante]

Nit: We can use a regular async function here

Suggested change

	(index, element) => {
	void this.runTrigger(element as HTMLElement).then((errors) => {
	async (index, element) => {
	const errors = await this.runTrigger(element as HTMLElement);

[fregante]

Nit: We could use abort controllers for everything so we don't have to have one property for each. For example there can be just one controller register in the constructor and then all the observers attach an abort listener to it. Then this function can just be:

private cancelObservers() {
    this.abortController.abort();
}

[twschiller]

Good idea, the current state is getting super messy. Will see what will be involved in a cleanup and decide if I want to do it in this PR or a separate one

If you have some spare cycles, could you commit to this PR? I'll wait to merge

[fregante]

On it

[fregante]

Pushed. This is what it looks like, what do you think?

[fregante]

I think this is the default

[fregante]

Apparently not… :(

[fregante]

This is a new JS feature by the way. You can initialize properties right here and they'll be called in the constructor. In most cases you can replace:

class {
	  constructor() {
		  this.prop = myInitialization()
	  }
}

with:

class {
	prop = myInitialization()
}

[fregante]

This actually allows for some coool usage like pre-bound methods:

class {
   constructor() {
     super(id, name, description, icon);
     // Bind so we can pass as callback
     this.boundEventHandler = this.eventHandler.bind(this);
   }
   eventHandler() {
     // Bind me please
   } 
}

becomes:

class {
   eventHandler = () => {
     // Look ma, no constructor()
   }
}

I'm waiting for the lint rule to materialize:sindresorhus/eslint-plugin-unicorn#314

[twschiller]

Definitely looks cleaner - thanks! I changed onCancel to addCancelHandler just to clarify a bit. (Because in React land the onXXX are always called with the actual arguments)