Script lifecycle isolation - Allow easy async code (lifecycle attribute, and/or closure isolation)

[michaelpb]

As a user who wants to easily integrate snippets of JavaScript, they often include async code. Script tags need to be strictly synchronous, so as to not need ugly wrappers / me=this cluttering things up and making copy & paste integration difficult.

---

Need to implement an off-by-default option for closures around each Script tag so it executes on instance mount. While it is less performant in the general case, in specific cases of high-level components that are the most likely to do API integration. In general, the documentation should still strongly recommend writing async code in js / custom CParts.

Basically, although the "pure" separation of async-capable CPart API vs the sync-only Script-tag API should still the recommended one, without a feature like this modulo would be hard to use as a "glue" language since so many JS example snippets rely on async working as expected.

---

Best way to implement and also expose extra functionality is like:

<Template>
    <button @click:=script.getStuff>Get it! {{ state.results }}</button>
</Template>
<Script lifecycle="intitalized">
    function getStuff() {
        fetch('https://myurl.com/wahtevs').then(...).then(data => Object.assign(state, data));
    }
</Script>

Functionality:

• If the script tag DOES NOT have a lifecycle attribute, it defaults to "null" (or Def or something?)
• Identical to other script tag, except it only executes in the initializedCallback phase.
• It will still gather exported functions -- ideally, not for lifecycle phases, however, since that would look weird

That way, it "teaches" lifecycle or reinforces this concept. It also might make machine translation to/from <Script> syntax to class CPart {} syntax more easily done both ways.

---

More uses:

<Script lifecycle="render">
    component.innerHTML = '<h1>Hello old tutorial world....</h1>'
    for (var i = 0; i < 10; i++) {
       component.innerHTML += '<p>' + i + '</p>';
    }
</Script>

(basically, useful for old school string-style html construction)