sidewayss / html-elements

Autonomous custom HTML elements with external template files
MIT License
0 stars 0 forks source link

await at module top level workaround #8

Open sidewayss opened 1 month ago

sidewayss commented 1 month ago

This issue is a reminder for 2029 to either:

Quite to my surprise, I came up with a way to work around this limitation while maintaining external template files and not totally butchering the code. The main consequence for users is that if they need to access the layout of the element during page load, they need to wait for BaseElement.promises[element].

The workaround doesn't use async or await, so it's widely compatible. Still, it's more code and it's a bit convoluted, so removing it is a good plan. The template files are tiny, so fetching them synchronously is not much of a bottleneck.

Unfortunately, this is a compiler issue, not a run-time issue, and this try/catch block throws an uncatchable exception (using input-num as an example):

let template, noAwait;
try {
    template = await getTemplate("number");
} catch {
    template = "number";
    noAwait  = true;
}

So the await code has to disappear completely in order to work on iOS/Safari 14, for example. Instead the code now looks like this:

const
template = "number",
noAwait  = true;

The 2029 replacement is:

template = await getTemplate("number");

Where noAwait is never declared.