ensure #updating doesnt hang updates

[keithamus]

@cheshire137 exposed an interesting timing flaw in #289. If you set a null/empty datetime the #updating Promise (which tries to batch updates) can be left as a resolved promise due to an early return in update().

The last line of update() sets #updating to false:

relative-time-element/src/relative-time-element.ts

Lines 475 to 476 in 15ca61e

	this.#updating = false
	}

However if update() is called while the date is null then it hits this early return:

relative-time-element/src/relative-time-element.ts

Lines 438 to 441 in 15ca61e

	if (typeof Intl === 'undefined' || !Intl.DateTimeFormat || !date) {
	this.#renderRoot.textContent = oldText
	return
	}

That early return never sets #updating = false, and so when the date is set again we skip a call to update() as it looks like we're in an update batch already:

relative-time-element/src/relative-time-element.ts

Lines 425 to 430 in 15ca61e

	if (!this.#updating && !(attrName === 'title' && this.#customTitle)) {
	this.#updating = (async () => {
	await Promise.resolve()
	this.update()
	})()
	}

The solution is quite simple: update should always set #updating = false when returning. So one could assume the following diff would be a good patch:

    if (typeof Intl === 'undefined' || !Intl.DateTimeFormat || !date) {
      this.#renderRoot.textContent = oldText
+     this.#updating = false
      return
    }

While this would solve the problem it doesn't make for very maintainable code as each new early return would also need to add this or reintroduce the bug. So instead we should colocate all #updating assignments, which should have happened in the first place. Hence the patch is:

    if (!this.#updating && !(attrName === 'title' && this.#customTitle)) {
      this.#updating = (async () => {
        await Promise.resolve()
        this.update()
+       this.#updating = false
      })()
    }

Fixes #289.

[cheshire137]

Thank you for the quick fix! 🙇🏻‍♀️